From e3686c4e1c9519091dff2bc0d817e593ff419968 Mon Sep 17 00:00:00 2001 From: Mama Naomi Date: Mon, 22 Jan 2024 05:31:32 -0800 Subject: [PATCH] chore(i18n): sync challenges including deleted files (#53217) --- .../build-a-personal-portfolio-webpage.md | 281 ------- .../build-a-product-landing-page.md | 470 ----------- .../build-a-survey-form.md | 518 ------------ .../build-a-technical-documentation-page.md | 529 ------------- .../build-a-tribute-page.md | 325 -------- .../build-your-own-functions.md | 71 -- .../comparing-and-sorting-tuples.md | 61 -- .../conditional-execution.md | 54 -- .../data-visualization-mailing-lists.md | 56 -- .../data-visualization-page-rank.md | 34 - .../dictionaries-and-loops.md | 53 -- .../dictionaries-common-applications.md | 47 -- .../files-as-a-sequence.md | 44 -- .../intermediate-expressions.md | 56 -- .../intermediate-strings.md | 53 -- .../introduction-elements-of-python.md | 40 - .../introduction-hardware-achitecture.md | 34 - .../introduction-python-as-a-language.md | 43 - .../introduction-why-program.md | 54 -- .../iterations-definite-loops.md | 43 - .../iterations-loop-idioms.md | 49 -- .../iterations-more-patterns.md | 52 -- .../loops-and-iterations.md | 55 -- .../make-a-relational-database.md | 52 -- .../more-conditional-structures.md | 60 -- .../networking-protocol.md | 38 - .../networking-text-processing.md | 34 - .../networking-using-urllib-in-python.md | 41 - .../networking-web-scraping-with-python.md | 60 -- .../networking-with-python.md | 38 - .../networking-write-a-web-browser.md | 54 -- .../python-for-everybody/object-lifecycle.md | 71 -- .../objects-a-sample-class.md | 62 -- .../objects-inheritance.md | 38 - .../python-dictionaries.md | 59 -- .../python-for-everybody/python-functions.md | 42 - .../python-for-everybody/python-lists.md | 43 - .../python-for-everybody/python-objects.md | 38 - .../python-for-everybody/reading-files.md | 42 - ...xpressions-matching-and-extracting-data.md | 45 -- ...ular-expressions-practical-applications.md | 38 - .../regular-expressions.md | 42 - .../relational-database-design.md | 38 - .../relational-databases-and-sqlite.md | 44 -- .../relational-databases-join-operation.md | 34 - ...al-databases-many-to-many-relationships.md | 52 -- ...ational-databases-relationship-building.md | 34 - ...-relationships-in-a-relational-database.md | 38 - .../python-for-everybody/strings-and-lists.md | 51 -- .../python-for-everybody/strings-in-python.md | 63 -- .../the-tuples-collection.md | 63 -- .../using-web-services.md | 42 - .../variables-expressions-and-statements.md | 38 - .../visualizing-data-with-python.md | 42 - ...services-api-rate-limiting-and-security.md | 50 -- .../python-for-everybody/web-services-apis.md | 38 - .../python-for-everybody/web-services-json.md | 60 -- .../web-services-service-oriented-approach.md | 34 - .../web-services-xml-schema.md | 34 - .../python-for-everybody/web-services-xml.md | 47 -- .../working-with-lists.md | 38 - .../615389bd81347947ea7ba896.md | 91 --- .../60b69a66b6ddb80858c51578.md | 112 --- .../60b69a66b6ddb80858c51579.md | 63 -- .../60b69a66b6ddb80858c5157a.md | 56 -- .../60b69a66b6ddb80858c5157b.md | 50 -- .../60b69a66b6ddb80858c5157c.md | 51 -- .../60b69a66b6ddb80858c5157d.md | 54 -- .../60b69a66b6ddb80858c5157e.md | 56 -- .../60b69a66b6ddb80858c5157f.md | 69 -- .../60b69a66b6ddb80858c51580.md | 59 -- .../60b69a66b6ddb80858c51581.md | 68 -- .../60b69a66b6ddb80858c51582.md | 70 -- .../60b69a66b6ddb80858c51583.md | 84 -- .../60b69a66b6ddb80858c51584.md | 79 -- .../60b69a66b6ddb80858c51585.md | 74 -- .../60b69a66b6ddb80858c51586.md | 93 --- .../60b69a66b6ddb80858c51587.md | 91 --- .../60b69a66b6ddb80858c51588.md | 102 --- .../60b69a66b6ddb80858c51589.md | 88 --- .../60b69a66b6ddb80858c5158a.md | 107 --- .../60b69a66b6ddb80858c5158b.md | 105 --- .../60b69a66b6ddb80858c5158c.md | 116 --- .../60b69a66b6ddb80858c5158d.md | 114 --- .../60b69a66b6ddb80858c5158e.md | 105 --- .../60b69a66b6ddb80858c5158f.md | 126 --- .../60b69a66b6ddb80858c51590.md | 124 --- .../60b69a66b6ddb80858c51591.md | 115 --- .../60b69a66b6ddb80858c51592.md | 136 ---- .../60b69a66b6ddb80858c51593.md | 125 --- .../60b69a66b6ddb80858c51594.md | 135 ---- .../60b69a66b6ddb80858c51595.md | 146 ---- .../60b69a66b6ddb80858c51596.md | 144 ---- .../60b69a66b6ddb80858c51597.md | 135 ---- .../60b69a66b6ddb80858c51598.md | 142 ---- .../60b69a66b6ddb80858c51599.md | 156 ---- .../60b69a66b6ddb80858c5159a.md | 158 ---- .../60b69a66b6ddb80858c5159b.md | 161 ---- .../60b69a66b6ddb80858c5159c.md | 169 ---- .../60b69a66b6ddb80858c5159d.md | 167 ---- .../60b69a66b6ddb80858c5159e.md | 178 ----- .../60b69a66b6ddb80858c5159f.md | 183 ----- .../60b69a66b6ddb80858c515a0.md | 181 ----- .../60b69a66b6ddb80858c515a1.md | 192 ----- .../60b69a66b6ddb80858c515a2.md | 190 ----- .../60b69a66b6ddb80858c515a3.md | 201 ----- .../60b69a66b6ddb80858c515a4.md | 199 ----- .../60b69a66b6ddb80858c515a5.md | 190 ----- .../60b69a66b6ddb80858c515a6.md | 211 ----- .../60b69a66b6ddb80858c515a7.md | 217 ----- .../60b69a66b6ddb80858c515a8.md | 207 ----- .../60b69a66b6ddb80858c515a9.md | 217 ----- .../60b69a66b6ddb80858c515aa.md | 220 ------ .../60b69a66b6ddb80858c515ab.md | 225 ------ .../60b69a66b6ddb80858c515ac.md | 228 ------ .../60b69a66b6ddb80858c515ad.md | 225 ------ .../60b69a66b6ddb80858c515ae.md | 245 ------ .../60b69a66b6ddb80858c515af.md | 240 ------ .../60b69a66b6ddb80858c515b0.md | 238 ------ .../60b69a66b6ddb80858c515b1.md | 298 ------- .../60b69a66b6ddb80858c515b2.md | 281 ------- .../60b69a66b6ddb80858c515b3.md | 287 ------- .../60b69a66b6ddb80858c515b4.md | 285 ------- .../60b69a66b6ddb80858c515b5.md | 296 ------- .../60b69a66b6ddb80858c515b6.md | 282 ------- .../60b69a66b6ddb80858c515b7.md | 295 ------- .../60b69a66b6ddb80858c515b8.md | 286 ------- .../60b69a66b6ddb80858c515b9.md | 301 ------- .../60b69a66b6ddb80858c515ba.md | 304 ------- .../60b69a66b6ddb80858c515bc.md | 295 ------- .../60b69a66b6ddb80858c515bd.md | 348 -------- .../60b69a66b6ddb80858c515be.md | 337 -------- .../60b69a66b6ddb80858c515bf.md | 348 -------- .../60b69a66b6ddb80858c515c0.md | 359 --------- .../60b69a66b6ddb80858c515c1.md | 365 --------- .../60b69a66b6ddb80858c515c2.md | 363 --------- .../60b69a66b6ddb80858c515c3.md | 354 --------- .../60b69a66b6ddb80858c515c4.md | 381 --------- .../60b69a66b6ddb80858c515c5.md | 382 --------- .../60b69a66b6ddb80858c515c6.md | 388 --------- .../60b69a66b6ddb80858c515c7.md | 739 ----------------- .../60b80da8676fb3227967a731.md | 71 -- .../60ba890832b4940f24d1936b.md | 312 -------- .../60ba89123a445e0f5c9e4022.md | 326 -------- .../60ba8913f1704c0f7a8906b8.md | 312 -------- .../60ba89146b25080f99ab54ad.md | 315 -------- .../60ba8914bab51f0fb8228e9c.md | 310 -------- .../60ba929345ab0714a3743655.md | 327 -------- .../60ba9296d4d6b414c1b10995.md | 330 -------- .../60ba92987c1e4914dfa7a0b9.md | 321 -------- .../60bad32219ebcb4a8810ac6a.md | 164 ---- .../615f5c1cb7575c7551ed8a40.md | 116 --- .../615f6a7d4ba8037bc086c2c7.md | 127 --- .../caesars-cipher.md | 88 --- .../cash-register.md | 252 ------ .../palindrome-checker.md | 125 --- .../roman-numeral-converter.md | 215 ----- .../telephone-number-validator.md | 217 ----- .../62a3b365f1cdeb33efc2502e.md | 138 ---- .../62a8f2bc37675e77d5835235.md | 355 --------- .../659b0093d7db5a1a1122b7bd.md | 682 ++++++++++++++++ .../63ec14d1c216aa063f0be4af.md | 214 ----- .../63ec19978a066607e23439f8.md | 201 ----- .../63ec1a16f930b108b8a76806.md | 227 ------ .../63ec1bbf5584390a7d08d41f.md | 209 ----- .../63ec1cb59f2a4c0be5b6dfa0.md | 198 ----- .../63ec20a06fff670d37befbd9.md | 226 ------ .../63ec3287b182ec0efe8a3135.md | 472 ----------- .../63ec3427fc3e9214c9ed2a14.md | 281 ------- .../63ec36f6133df7160be3ec66.md | 277 ------- .../63ec47b454495519739486a7.md | 283 ------- .../63ee5d38a5d29d0696f8d820.md | 297 ------- .../63ee5d8f9e7168076e932fe2.md | 309 -------- .../63ee5e0f08e82208364c4128.md | 304 ------- .../63ee5ea8be892e0955ab346c.md | 303 ------- .../63ee5fc113bcb20a5db9214b.md | 300 ------- .../63ee611d478dca0b77f6a393.md | 316 -------- .../63ee7c664f9b65137d925c8a.md | 321 -------- .../63eea5cea403a81a68ae493c.md | 331 -------- .../63eea817673c8e1c22927fa6.md | 309 -------- .../63eea8e1e143ae1d098c8c9d.md | 311 -------- .../63eeb8e86becbf1e75c2cb0d.md | 312 -------- .../63eedebb0ec0231ff1cede1a.md | 327 -------- .../63efdbc22a0c56070beabed7.md | 323 -------- .../63efe370bbfc4a08d500118e.md | 324 -------- .../63eff02f00e69a0b2ac10b43.md | 317 -------- .../63eff98ffb1d5a0d24ec79cb.md | 336 -------- .../63effe558c87a70e7072e447.md | 327 -------- .../63f0165121a9181342d5bc66.md | 320 -------- .../63f017b4ad028a148eb713c0.md | 345 -------- .../63f01861f813e01564c95315.md | 325 -------- .../63f018f04e487e164dc27bd9.md | 349 -------- .../63f01c9791a0aa1751c73760.md | 334 -------- .../63f0224ceb16dc196d2c860a.md | 335 -------- .../63f026d041bc6c1a3d5cba0f.md | 339 -------- .../63f0284532742c1b26c7a052.md | 339 -------- .../63f0289df84a581bbdbd29b7.md | 339 -------- .../63f0295e673b661ccb299e8a.md | 350 -------- .../63f029b96b9e9e1df93be951.md | 342 -------- .../63f02a4ef92d711ec1ff618c.md | 377 --------- .../63f02b22cce1c11fe9604381.md | 348 -------- .../63f02bdeb9b428208b97eb6b.md | 368 --------- .../63f02c6e18773921ba50aa53.md | 361 --------- .../63f0311f5ea9382388d6124f.md | 347 -------- .../63f033fdb1fbcc254999fcc3.md | 339 -------- .../63f03446c2ed3e264be6c7fc.md | 335 -------- .../63f0348a54a177272071a595.md | 348 -------- .../63f034d012f74627ce538d3a.md | 357 --------- .../63f03686c5ea863533ec71f4.md | 353 --------- .../63f036ec91fdf238c90665f5.md | 352 --------- .../63f0370b340915399d31e5eb.md | 367 --------- .../63f0374d5351223a747c301d.md | 394 ---------- .../63f0378e173e3c3b7638b528.md | 352 --------- .../63f038a0ae041d3c5b0cdf23.md | 353 --------- .../63f038e671d3f73d5a041973.md | 371 --------- .../63f039dbcef7673e4e758fa3.md | 381 --------- .../63f03a7143a6ef3f7f3344f0.md | 378 --------- .../63f03ac2b428b2404a5a7518.md | 368 --------- .../63f03af535682e4138fdb915.md | 395 ---------- .../63f03b1ed5ab15420c057463.md | 744 ------------------ .../63f6721d5110af243ef8f3d9.md | 352 --------- .../659ebe52d74b132a1d75c891.md | 388 +++++++++ .../elements-and-tags-question-a.md | 54 -- .../elements-and-tags-question-b.md | 49 -- .../html-boilerplate-question-a.md | 54 -- .../html-boilerplate-question-b.md | 46 -- .../html-boilerplate-question-c.md | 65 -- .../html-boilerplate-question-d.md | 48 -- .../introduction-to-html-css-question-a.md | 41 - .../introduction-to-html-css-question-b.md | 36 - .../introduction-to-html-css-question-c.md | 33 - .../introduction-to-html-css-question-d.md | 34 - .../links-and-images-question-a.md | 66 -- .../links-and-images-question-b.md | 54 -- .../links-and-images-question-c.md | 55 -- .../links-and-images-question-d.md | 112 --- .../links-and-images-question-e.md | 98 --- .../links-and-images-question-f.md | 93 --- .../links-and-images-question-g.md | 93 --- .../links-and-images-question-h.md | 97 --- ...d-ordered-and-unordered-list-question-a.md | 65 -- ...d-ordered-and-unordered-list-question-b.md | 44 -- ...d-ordered-and-unordered-list-question-c.md | 44 -- .../working-with-text-question-a.md | 60 -- .../working-with-text-question-b.md | 39 - .../working-with-text-question-c.md | 47 -- .../working-with-text-question-d.md | 38 - .../working-with-text-question-e.md | 65 -- .../working-with-text-question-f.md | 66 -- .../working-with-text-question-g.md | 48 -- .../problem-1-multiples-of-3-and-5.md | 73 -- .../challenge-1.md | 93 --- .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../dialogue-introducing.md | 15 - .../i-am-im.md | 49 -- .../im.md | 21 - .../name-and-job-title.md | 53 -- .../right.md | 33 - .../team-lead.md | 33 - .../thats-right-2.md | 25 - .../thats-right.md | 49 -- .../you-are.md | 27 - .../655c0feadb1dd77f6cda623f.md | 15 + .../657b0f0be03b2137ed88b36c.md | 54 ++ .../657b106ced8c653be6b3218f.md | 50 ++ .../657b108cf870283d22b21e8e.md | 58 ++ .../657b110ad8afcc3f8e586362.md | 38 + .../657b115008a62d41c0d7482f.md | 49 ++ .../657b119f0ce64343420bb850.md | 49 ++ .../657b11e082e48a44eb4bfc09.md | 40 + .../657b11f87368cf463ea4fe46.md | 57 ++ .../657b1240ef768447b80817ad.md | 55 ++ .../657b12ae08dd7049b300c901.md | 49 ++ .../657b12e7c306334b7c320221.md | 41 + .../657b13088693ef4ce21ce0e4.md | 49 ++ .../657b133afcef714e542b557a.md | 49 ++ .../657b135e9029fb4f8141e40c.md | 49 ++ .../657b138d33db9e50f116b5f0.md | 54 ++ .../657b1431076b365555784189.md | 49 ++ .../657b145976723b56a97b8dda.md | 56 ++ .../657b149630b3ea5873269a38.md | 49 ++ .../657b14d8353d665a187fe771.md | 38 + .../657b153ac677705c7059530d.md | 62 ++ .../657b15dbcafe4d5f39a5de82.md | 54 ++ .../657b160d6a8662610fe6a523.md | 53 ++ .../657b163c9da40e62b904be1f.md | 46 ++ .../657b18e71067d6680b9ac5d3.md | 54 ++ .../657b1985ae17886b05b382b1.md | 54 ++ .../657b19bf7b32af6caf763ef7.md | 54 ++ .../657b1a03df3ec46eca276046.md | 38 + .../657b1a27dc6daf6ffd52ff1f.md | 55 ++ .../657b1a637e4dc571f8f4d3d7.md | 49 ++ .../657b1a9581015573806e1e20.md | 47 ++ .../657b1cc072206e7ac3db88b8.md | 39 + .../657b1d080265ba7c4f96bf79.md | 30 + .../657b1d4ec0e2587e8bcc95f7.md | 15 + .../657b1da0b27fef8117827ce5.md | 54 ++ .../657b1dfec76149836ea5c7d0.md | 30 + .../657b1e2fad2ffe84ab420a56.md | 49 ++ .../657b1e66159fec86336a737b.md | 54 ++ .../657b1e9a62603587747f7f45.md | 49 ++ .../657b1ee1de7216896b5b4361.md | 42 + .../657b1f0585d48f8ac0b19654.md | 40 + .../657b1f598f63008c8bdb20b8.md | 49 ++ .../657b1f981cd42e8dc3b282d9.md | 49 ++ .../657b1fe950c0df90346e5d12.md | 47 ++ .../657b201372864e91d4f5bb53.md | 39 + .../657b20338e0802931673c1e1.md | 26 + .../657b20985d315095e5c3851d.md | 54 ++ .../657b21e28a01039cb27b4f13.md | 50 ++ .../657b221b2ab0ac9e18a173ef.md | 35 + .../657b223e41ce6b9f9a01d214.md | 39 + .../657b227f7ad32ea17e2cdf28.md | 15 + .../657b2310b8cd52a4f15c1818.md | 56 ++ .../657b2340be1593a6517fe77b.md | 39 + .../657b236aa1eb9fa7b209aa03.md | 54 ++ .../657b23a413d28da927e087ca.md | 36 + .../657b23bc0e32f9aa9c62eb82.md | 50 ++ .../657b23f03b449aac2c517089.md | 27 + .../657b242d06512dadaea55056.md | 49 ++ .../657b24542024c8af092cd6c4.md | 39 + .../657b24774d8cdab052ffe2a6.md | 48 ++ .../657b24a500800cb1c6945da9.md | 40 + .../657b2be1b19500c63fc1a467.md | 41 + .../657b2c040bb5f6c77fa5df80.md | 38 + .../657b2d618b8851cc5baf9490.md | 38 + .../657b2d9cb974dace59024964.md | 54 ++ .../657b2dd7745fdcd03e5160f4.md | 15 + .../657b2e0666d4a9d1b851f90e.md | 54 ++ .../657b2ec6c054efd71e503a27.md | 49 ++ .../657b2eeb31e435d89ecce6f3.md | 33 + .../657b2f0b3bcfe7d9f4151854.md | 54 ++ .../657b2f3bf7a2cbdb58d959d5.md | 49 ++ .../657b2f6cb66826dcbac08094.md | 49 ++ .../657b2fa89ddc20de629ca21f.md | 38 + .../657b2fc9c0f96bdfddfce4d9.md | 46 ++ .../657b2fea728c2be14a8a98c4.md | 49 ++ .../657b3026ff79fbe2dda6cb39.md | 54 ++ .../657b306fe94f29e4b4aa9105.md | 55 ++ .../657b30ac03b523e6640deaf1.md | 49 ++ .../657b30e1b9f035e7e656fd01.md | 54 ++ .../657b315533e4edeba65111b8.md | 54 ++ .../657b46c9be150f577f5a1086.md | 15 + .../dialogue-placeholder.md | 15 - .../dialogue-placeholder.md | 15 - .../challenge-1.md | 41 - .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../build-a-personal-portfolio-webpage.md | 281 ------- .../build-a-product-landing-page.md | 470 ----------- .../build-a-survey-form.md | 518 ------------ .../build-a-technical-documentation-page.md | 529 ------------- .../build-a-tribute-page.md | 325 -------- .../build-your-own-functions.md | 71 -- .../comparing-and-sorting-tuples.md | 61 -- .../conditional-execution.md | 54 -- .../data-visualization-mailing-lists.md | 56 -- .../data-visualization-page-rank.md | 34 - .../dictionaries-and-loops.md | 53 -- .../dictionaries-common-applications.md | 47 -- .../files-as-a-sequence.md | 44 -- .../intermediate-expressions.md | 56 -- .../intermediate-strings.md | 53 -- .../introduction-elements-of-python.md | 40 - .../introduction-hardware-achitecture.md | 34 - .../introduction-python-as-a-language.md | 43 - .../introduction-why-program.md | 54 -- .../iterations-definite-loops.md | 43 - .../iterations-loop-idioms.md | 49 -- .../iterations-more-patterns.md | 52 -- .../loops-and-iterations.md | 55 -- .../make-a-relational-database.md | 52 -- .../more-conditional-structures.md | 60 -- .../networking-protocol.md | 38 - .../networking-text-processing.md | 34 - .../networking-using-urllib-in-python.md | 41 - .../networking-web-scraping-with-python.md | 60 -- .../networking-with-python.md | 38 - .../networking-write-a-web-browser.md | 54 -- .../python-for-everybody/object-lifecycle.md | 71 -- .../objects-a-sample-class.md | 62 -- .../objects-inheritance.md | 38 - .../python-dictionaries.md | 59 -- .../python-for-everybody/python-functions.md | 42 - .../python-for-everybody/python-lists.md | 43 - .../python-for-everybody/python-objects.md | 38 - .../python-for-everybody/reading-files.md | 42 - ...xpressions-matching-and-extracting-data.md | 45 -- ...ular-expressions-practical-applications.md | 38 - .../regular-expressions.md | 42 - .../relational-database-design.md | 38 - .../relational-databases-and-sqlite.md | 44 -- .../relational-databases-join-operation.md | 34 - ...al-databases-many-to-many-relationships.md | 52 -- ...ational-databases-relationship-building.md | 34 - ...-relationships-in-a-relational-database.md | 38 - .../python-for-everybody/strings-and-lists.md | 51 -- .../python-for-everybody/strings-in-python.md | 63 -- .../the-tuples-collection.md | 63 -- .../using-web-services.md | 42 - .../variables-expressions-and-statements.md | 38 - .../visualizing-data-with-python.md | 42 - ...services-api-rate-limiting-and-security.md | 50 -- .../python-for-everybody/web-services-apis.md | 38 - .../python-for-everybody/web-services-json.md | 60 -- .../web-services-service-oriented-approach.md | 34 - .../web-services-xml-schema.md | 34 - .../python-for-everybody/web-services-xml.md | 47 -- .../working-with-lists.md | 38 - .../5f33310c1851c6c4da013250.md | 59 -- .../615389bd81347947ea7ba896.md | 91 --- .../60b69a66b6ddb80858c51578.md | 112 --- .../60b69a66b6ddb80858c51579.md | 63 -- .../60b69a66b6ddb80858c5157a.md | 56 -- .../60b69a66b6ddb80858c5157b.md | 50 -- .../60b69a66b6ddb80858c5157c.md | 51 -- .../60b69a66b6ddb80858c5157d.md | 54 -- .../60b69a66b6ddb80858c5157e.md | 56 -- .../60b69a66b6ddb80858c5157f.md | 69 -- .../60b69a66b6ddb80858c51580.md | 59 -- .../60b69a66b6ddb80858c51581.md | 68 -- .../60b69a66b6ddb80858c51582.md | 70 -- .../60b69a66b6ddb80858c51583.md | 84 -- .../60b69a66b6ddb80858c51584.md | 79 -- .../60b69a66b6ddb80858c51585.md | 74 -- .../60b69a66b6ddb80858c51586.md | 93 --- .../60b69a66b6ddb80858c51587.md | 91 --- .../60b69a66b6ddb80858c51588.md | 102 --- .../60b69a66b6ddb80858c51589.md | 88 --- .../60b69a66b6ddb80858c5158a.md | 107 --- .../60b69a66b6ddb80858c5158b.md | 105 --- .../60b69a66b6ddb80858c5158c.md | 116 --- .../60b69a66b6ddb80858c5158d.md | 114 --- .../60b69a66b6ddb80858c5158e.md | 105 --- .../60b69a66b6ddb80858c5158f.md | 126 --- .../60b69a66b6ddb80858c51590.md | 124 --- .../60b69a66b6ddb80858c51591.md | 115 --- .../60b69a66b6ddb80858c51592.md | 136 ---- .../60b69a66b6ddb80858c51593.md | 125 --- .../60b69a66b6ddb80858c51594.md | 135 ---- .../60b69a66b6ddb80858c51595.md | 146 ---- .../60b69a66b6ddb80858c51596.md | 144 ---- .../60b69a66b6ddb80858c51597.md | 135 ---- .../60b69a66b6ddb80858c51598.md | 142 ---- .../60b69a66b6ddb80858c51599.md | 156 ---- .../60b69a66b6ddb80858c5159a.md | 158 ---- .../60b69a66b6ddb80858c5159b.md | 161 ---- .../60b69a66b6ddb80858c5159c.md | 169 ---- .../60b69a66b6ddb80858c5159d.md | 167 ---- .../60b69a66b6ddb80858c5159e.md | 178 ----- .../60b69a66b6ddb80858c5159f.md | 183 ----- .../60b69a66b6ddb80858c515a0.md | 181 ----- .../60b69a66b6ddb80858c515a1.md | 192 ----- .../60b69a66b6ddb80858c515a2.md | 190 ----- .../60b69a66b6ddb80858c515a3.md | 201 ----- .../60b69a66b6ddb80858c515a4.md | 199 ----- .../60b69a66b6ddb80858c515a5.md | 190 ----- .../60b69a66b6ddb80858c515a6.md | 211 ----- .../60b69a66b6ddb80858c515a7.md | 217 ----- .../60b69a66b6ddb80858c515a8.md | 207 ----- .../60b69a66b6ddb80858c515a9.md | 217 ----- .../60b69a66b6ddb80858c515aa.md | 220 ------ .../60b69a66b6ddb80858c515ab.md | 225 ------ .../60b69a66b6ddb80858c515ac.md | 228 ------ .../60b69a66b6ddb80858c515ad.md | 225 ------ .../60b69a66b6ddb80858c515ae.md | 245 ------ .../60b69a66b6ddb80858c515af.md | 240 ------ .../60b69a66b6ddb80858c515b0.md | 238 ------ .../60b69a66b6ddb80858c515b1.md | 298 ------- .../60b69a66b6ddb80858c515b2.md | 281 ------- .../60b69a66b6ddb80858c515b3.md | 287 ------- .../60b69a66b6ddb80858c515b4.md | 285 ------- .../60b69a66b6ddb80858c515b5.md | 296 ------- .../60b69a66b6ddb80858c515b6.md | 282 ------- .../60b69a66b6ddb80858c515b7.md | 295 ------- .../60b69a66b6ddb80858c515b8.md | 286 ------- .../60b69a66b6ddb80858c515b9.md | 301 ------- .../60b69a66b6ddb80858c515ba.md | 304 ------- .../60b69a66b6ddb80858c515bc.md | 295 ------- .../60b69a66b6ddb80858c515bd.md | 348 -------- .../60b69a66b6ddb80858c515be.md | 337 -------- .../60b69a66b6ddb80858c515bf.md | 348 -------- .../60b69a66b6ddb80858c515c0.md | 359 --------- .../60b69a66b6ddb80858c515c1.md | 365 --------- .../60b69a66b6ddb80858c515c2.md | 363 --------- .../60b69a66b6ddb80858c515c3.md | 354 --------- .../60b69a66b6ddb80858c515c4.md | 381 --------- .../60b69a66b6ddb80858c515c5.md | 382 --------- .../60b69a66b6ddb80858c515c6.md | 388 --------- .../60b69a66b6ddb80858c515c7.md | 739 ----------------- .../60b80da8676fb3227967a731.md | 71 -- .../60ba890832b4940f24d1936b.md | 312 -------- .../60ba89123a445e0f5c9e4022.md | 326 -------- .../60ba8913f1704c0f7a8906b8.md | 312 -------- .../60ba89146b25080f99ab54ad.md | 315 -------- .../60ba8914bab51f0fb8228e9c.md | 310 -------- .../60ba929345ab0714a3743655.md | 327 -------- .../60ba9296d4d6b414c1b10995.md | 330 -------- .../60ba92987c1e4914dfa7a0b9.md | 321 -------- .../60bad32219ebcb4a8810ac6a.md | 164 ---- .../615f5c1cb7575c7551ed8a40.md | 116 --- .../615f6a7d4ba8037bc086c2c7.md | 127 --- .../caesars-cipher.md | 88 --- .../cash-register.md | 252 ------ .../palindrome-checker.md | 125 --- .../roman-numeral-converter.md | 215 ----- .../telephone-number-validator.md | 217 ----- .../62a3b365f1cdeb33efc2502e.md | 138 ---- .../62a8f2bc37675e77d5835235.md | 355 --------- .../659b0093d7db5a1a1122b7bd.md | 682 ++++++++++++++++ .../63ec14d1c216aa063f0be4af.md | 214 ----- .../63ec19978a066607e23439f8.md | 201 ----- .../63ec1a16f930b108b8a76806.md | 227 ------ .../63ec1bbf5584390a7d08d41f.md | 209 ----- .../63ec1cb59f2a4c0be5b6dfa0.md | 198 ----- .../63ec20a06fff670d37befbd9.md | 226 ------ .../63ec3287b182ec0efe8a3135.md | 472 ----------- .../63ec3427fc3e9214c9ed2a14.md | 281 ------- .../63ec36f6133df7160be3ec66.md | 277 ------- .../63ec47b454495519739486a7.md | 283 ------- .../63ee5d38a5d29d0696f8d820.md | 297 ------- .../63ee5d8f9e7168076e932fe2.md | 309 -------- .../63ee5e0f08e82208364c4128.md | 304 ------- .../63ee5ea8be892e0955ab346c.md | 303 ------- .../63ee5fc113bcb20a5db9214b.md | 300 ------- .../63ee611d478dca0b77f6a393.md | 316 -------- .../63ee7c664f9b65137d925c8a.md | 321 -------- .../63eea5cea403a81a68ae493c.md | 331 -------- .../63eea817673c8e1c22927fa6.md | 309 -------- .../63eea8e1e143ae1d098c8c9d.md | 311 -------- .../63eeb8e86becbf1e75c2cb0d.md | 312 -------- .../63eedebb0ec0231ff1cede1a.md | 327 -------- .../63efdbc22a0c56070beabed7.md | 323 -------- .../63efe370bbfc4a08d500118e.md | 324 -------- .../63eff02f00e69a0b2ac10b43.md | 317 -------- .../63eff98ffb1d5a0d24ec79cb.md | 336 -------- .../63effe558c87a70e7072e447.md | 327 -------- .../63f0165121a9181342d5bc66.md | 320 -------- .../63f017b4ad028a148eb713c0.md | 345 -------- .../63f01861f813e01564c95315.md | 325 -------- .../63f018f04e487e164dc27bd9.md | 349 -------- .../63f01c9791a0aa1751c73760.md | 334 -------- .../63f0224ceb16dc196d2c860a.md | 335 -------- .../63f026d041bc6c1a3d5cba0f.md | 339 -------- .../63f0284532742c1b26c7a052.md | 339 -------- .../63f0289df84a581bbdbd29b7.md | 339 -------- .../63f0295e673b661ccb299e8a.md | 350 -------- .../63f029b96b9e9e1df93be951.md | 342 -------- .../63f02a4ef92d711ec1ff618c.md | 377 --------- .../63f02b22cce1c11fe9604381.md | 348 -------- .../63f02bdeb9b428208b97eb6b.md | 368 --------- .../63f02c6e18773921ba50aa53.md | 361 --------- .../63f0311f5ea9382388d6124f.md | 347 -------- .../63f033fdb1fbcc254999fcc3.md | 339 -------- .../63f03446c2ed3e264be6c7fc.md | 335 -------- .../63f0348a54a177272071a595.md | 348 -------- .../63f034d012f74627ce538d3a.md | 357 --------- .../63f03686c5ea863533ec71f4.md | 353 --------- .../63f036ec91fdf238c90665f5.md | 352 --------- .../63f0370b340915399d31e5eb.md | 367 --------- .../63f0374d5351223a747c301d.md | 394 ---------- .../63f0378e173e3c3b7638b528.md | 352 --------- .../63f038a0ae041d3c5b0cdf23.md | 353 --------- .../63f038e671d3f73d5a041973.md | 371 --------- .../63f039dbcef7673e4e758fa3.md | 381 --------- .../63f03a7143a6ef3f7f3344f0.md | 378 --------- .../63f03ac2b428b2404a5a7518.md | 368 --------- .../63f03af535682e4138fdb915.md | 395 ---------- .../63f03b1ed5ab15420c057463.md | 744 ------------------ .../63f6721d5110af243ef8f3d9.md | 352 --------- .../step-001.md | 100 --- .../step-002.md | 114 --- .../step-003.md | 119 --- .../step-004.md | 112 --- .../step-005.md | 115 --- .../step-006.md | 113 --- .../step-007.md | 122 --- .../step-008.md | 119 --- .../step-009.md | 121 --- .../step-010.md | 116 --- .../step-011.md | 117 --- .../step-012.md | 129 --- .../step-013.md | 127 --- .../step-014.md | 125 --- .../step-015.md | 123 --- .../step-016.md | 122 --- .../step-017.md | 123 --- .../step-018.md | 139 ---- .../step-019.md | 139 ---- .../step-020.md | 147 ---- .../step-021.md | 136 ---- .../step-022.md | 139 ---- .../step-023.md | 133 ---- .../step-024.md | 131 --- .../step-025.md | 141 ---- .../step-026.md | 129 --- .../step-027.md | 141 ---- .../step-028.md | 143 ---- .../step-029.md | 151 ---- .../step-030.md | 154 ---- .../step-031.md | 151 ---- .../step-032.md | 151 ---- .../step-033.md | 149 ---- .../step-034.md | 153 ---- .../step-035.md | 161 ---- .../step-036.md | 153 ---- .../step-037.md | 154 ---- .../step-038.md | 159 ---- .../step-039.md | 158 ---- .../step-040.md | 167 ---- .../step-041.md | 170 ---- .../step-042.md | 175 ---- .../step-043.md | 175 ---- .../step-044.md | 174 ---- .../step-045.md | 183 ----- .../step-046.md | 192 ----- .../step-047.md | 182 ----- .../step-048.md | 193 ----- .../step-049.md | 199 ----- .../step-050.md | 199 ----- .../step-051.md | 206 ----- .../step-052.md | 207 ----- .../step-053.md | 203 ----- .../step-054.md | 204 ----- .../step-055.md | 210 ----- .../step-056.md | 214 ----- .../step-057.md | 211 ----- .../step-058.md | 218 ----- .../step-059.md | 220 ------ .../step-060.md | 220 ------ .../step-061.md | 222 ------ .../step-062.md | 226 ------ .../step-063.md | 230 ------ .../step-064.md | 226 ------ .../step-065.md | 238 ------ .../step-066.md | 243 ------ .../step-067.md | 250 ------ .../step-068.md | 243 ------ .../step-069.md | 244 ------ .../step-070.md | 259 ------ .../step-071.md | 257 ------ .../step-072.md | 263 ------- .../step-073.md | 271 ------- .../step-074.md | 269 ------- .../step-075.md | 277 ------- .../step-076.md | 185 ----- .../step-001.md | 78 -- .../step-002.md | 80 -- .../step-003.md | 84 -- .../step-004.md | 88 --- .../step-005.md | 94 --- .../step-006.md | 94 --- .../step-007.md | 90 --- .../step-008.md | 82 -- .../step-009.md | 84 -- .../step-010.md | 82 -- .../step-011.md | 87 -- .../step-012.md | 92 --- .../step-013.md | 98 --- .../step-014.md | 97 --- .../step-015.md | 102 --- .../step-016.md | 104 --- .../step-017.md | 100 --- .../step-018.md | 103 --- .../step-019.md | 110 --- .../step-020.md | 105 --- .../step-021.md | 107 --- .../step-022.md | 120 --- .../step-023.md | 114 --- .../step-024.md | 112 --- .../step-025.md | 120 --- .../step-026.md | 128 --- .../step-027.md | 131 --- .../step-028.md | 133 ---- .../step-029.md | 134 ---- .../step-030.md | 138 ---- .../step-031.md | 142 ---- .../step-032.md | 139 ---- .../step-033.md | 140 ---- .../step-034.md | 141 ---- .../step-035.md | 139 ---- .../step-036.md | 142 ---- .../step-037.md | 150 ---- .../step-038.md | 146 ---- .../step-039.md | 150 ---- .../step-040.md | 158 ---- .../step-041.md | 157 ---- .../step-042.md | 170 ---- .../step-043.md | 163 ---- .../step-044.md | 158 ---- .../step-045.md | 157 ---- .../step-046.md | 154 ---- .../step-047.md | 159 ---- .../step-048.md | 154 ---- .../step-049.md | 156 ---- .../step-050.md | 156 ---- .../step-051.md | 160 ---- .../step-052.md | 159 ---- .../step-053.md | 173 ---- .../step-054.md | 176 ----- .../step-055.md | 176 ----- .../step-056.md | 176 ----- .../step-057.md | 177 ----- .../step-058.md | 183 ----- .../step-059.md | 183 ----- .../step-060.md | 187 ----- .../step-061.md | 189 ----- .../step-062.md | 184 ----- .../step-063.md | 183 ----- .../step-064.md | 182 ----- .../step-065.md | 186 ----- .../step-066.md | 182 ----- .../step-067.md | 192 ----- .../step-068.md | 186 ----- .../step-069.md | 184 ----- .../step-070.md | 188 ----- .../step-071.md | 190 ----- .../step-072.md | 192 ----- .../step-073.md | 188 ----- .../step-074.md | 190 ----- .../step-075.md | 197 ----- .../step-076.md | 195 ----- .../step-077.md | 200 ----- .../step-078.md | 208 ----- .../step-079.md | 211 ----- .../step-080.md | 217 ----- .../step-081.md | 220 ------ .../step-082.md | 229 ------ .../step-083.md | 225 ------ .../step-084.md | 225 ------ .../step-085.md | 230 ------ .../step-086.md | 232 ------ .../step-087.md | 237 ------ .../step-088.md | 239 ------ .../step-089.md | 251 ------ .../step-090.md | 251 ------ .../step-091.md | 257 ------ .../step-092.md | 261 ------ .../step-093.md | 260 ------ .../step-094.md | 260 ------ .../step-095.md | 262 ------ .../step-096.md | 266 ------- .../step-097.md | 273 ------- .../step-098.md | 267 ------- .../step-099.md | 276 ------- .../step-100.md | 271 ------- .../step-101.md | 268 ------- .../step-102.md | 270 ------- .../step-103.md | 265 ------- .../step-104.md | 267 ------- .../step-105.md | 264 ------- .../step-106.md | 272 ------- .../step-107.md | 268 ------- .../step-108.md | 269 ------- .../step-109.md | 275 ------- .../step-110.md | 272 ------- .../step-111.md | 272 ------- .../step-112.md | 269 ------- .../step-113.md | 271 ------- .../step-114.md | 273 ------- .../step-115.md | 279 ------- .../step-116.md | 285 ------- .../step-117.md | 288 ------- .../step-118.md | 292 ------- .../step-119.md | 297 ------- .../step-120.md | 291 ------- .../step-121.md | 301 ------- .../step-122.md | 293 ------- .../step-123.md | 298 ------- .../step-124.md | 293 ------- .../step-125.md | 298 ------- .../step-126.md | 308 -------- .../step-127.md | 300 ------- .../step-128.md | 312 -------- .../step-129.md | 318 -------- .../step-130.md | 312 -------- .../step-131.md | 312 -------- .../step-132.md | 311 -------- .../step-133.md | 316 -------- .../step-134.md | 320 -------- .../step-135.md | 325 -------- .../step-136.md | 327 -------- .../step-137.md | 328 -------- .../step-138.md | 324 -------- .../step-139.md | 327 -------- .../step-140.md | 330 -------- .../step-141.md | 316 -------- .../659ebe52d74b132a1d75c891.md | 388 +++++++++ .../elements-and-tags-question-a.md | 54 -- .../elements-and-tags-question-b.md | 49 -- .../html-boilerplate-question-a.md | 54 -- .../html-boilerplate-question-b.md | 46 -- .../html-boilerplate-question-c.md | 65 -- .../html-boilerplate-question-d.md | 48 -- .../introduction-to-html-css-question-a.md | 41 - .../introduction-to-html-css-question-b.md | 36 - .../introduction-to-html-css-question-c.md | 33 - .../introduction-to-html-css-question-d.md | 34 - .../links-and-images-question-a.md | 66 -- .../links-and-images-question-b.md | 54 -- .../links-and-images-question-c.md | 55 -- .../links-and-images-question-d.md | 112 --- .../links-and-images-question-e.md | 98 --- .../links-and-images-question-f.md | 93 --- .../links-and-images-question-g.md | 93 --- .../links-and-images-question-h.md | 97 --- ...d-ordered-and-unordered-list-question-a.md | 65 -- ...d-ordered-and-unordered-list-question-b.md | 44 -- ...d-ordered-and-unordered-list-question-c.md | 44 -- .../working-with-text-question-a.md | 60 -- .../working-with-text-question-b.md | 39 - .../working-with-text-question-c.md | 47 -- .../working-with-text-question-d.md | 38 - .../working-with-text-question-e.md | 65 -- .../working-with-text-question-f.md | 66 -- .../working-with-text-question-g.md | 48 -- .../data-graph-explorer.md | 30 - .../financial-calculator.md | 28 - .../graphing-calculator.md | 28 - .../multi-function-calculator.md | 28 - .../three-math-games.md | 29 - .../problem-1-multiples-of-3-and-5.md | 73 -- .../challenge-1.md | 93 --- .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../dialogue-introducing.md | 15 - .../i-am-im.md | 49 -- .../im.md | 21 - .../name-and-job-title.md | 53 -- .../right.md | 33 - .../team-lead.md | 33 - .../thats-right-2.md | 25 - .../thats-right.md | 49 -- .../you-are.md | 27 - .../655c0feadb1dd77f6cda623f.md | 15 + .../657b0f0be03b2137ed88b36c.md | 54 ++ .../657b106ced8c653be6b3218f.md | 50 ++ .../657b108cf870283d22b21e8e.md | 58 ++ .../657b110ad8afcc3f8e586362.md | 38 + .../657b115008a62d41c0d7482f.md | 49 ++ .../657b119f0ce64343420bb850.md | 49 ++ .../657b11e082e48a44eb4bfc09.md | 40 + .../657b11f87368cf463ea4fe46.md | 57 ++ .../657b1240ef768447b80817ad.md | 55 ++ .../657b12ae08dd7049b300c901.md | 49 ++ .../657b12e7c306334b7c320221.md | 41 + .../657b13088693ef4ce21ce0e4.md | 49 ++ .../657b133afcef714e542b557a.md | 49 ++ .../657b135e9029fb4f8141e40c.md | 49 ++ .../657b138d33db9e50f116b5f0.md | 54 ++ .../657b1431076b365555784189.md | 49 ++ .../657b145976723b56a97b8dda.md | 56 ++ .../657b149630b3ea5873269a38.md | 49 ++ .../657b14d8353d665a187fe771.md | 38 + .../657b153ac677705c7059530d.md | 62 ++ .../657b15dbcafe4d5f39a5de82.md | 54 ++ .../657b160d6a8662610fe6a523.md | 53 ++ .../657b163c9da40e62b904be1f.md | 46 ++ .../657b18e71067d6680b9ac5d3.md | 54 ++ .../657b1985ae17886b05b382b1.md | 54 ++ .../657b19bf7b32af6caf763ef7.md | 54 ++ .../657b1a03df3ec46eca276046.md | 38 + .../657b1a27dc6daf6ffd52ff1f.md | 55 ++ .../657b1a637e4dc571f8f4d3d7.md | 49 ++ .../657b1a9581015573806e1e20.md | 47 ++ .../657b1cc072206e7ac3db88b8.md | 39 + .../657b1d080265ba7c4f96bf79.md | 30 + .../657b1d4ec0e2587e8bcc95f7.md | 15 + .../657b1da0b27fef8117827ce5.md | 54 ++ .../657b1dfec76149836ea5c7d0.md | 30 + .../657b1e2fad2ffe84ab420a56.md | 49 ++ .../657b1e66159fec86336a737b.md | 54 ++ .../657b1e9a62603587747f7f45.md | 49 ++ .../657b1ee1de7216896b5b4361.md | 42 + .../657b1f0585d48f8ac0b19654.md | 40 + .../657b1f598f63008c8bdb20b8.md | 49 ++ .../657b1f981cd42e8dc3b282d9.md | 49 ++ .../657b1fe950c0df90346e5d12.md | 47 ++ .../657b201372864e91d4f5bb53.md | 39 + .../657b20338e0802931673c1e1.md | 26 + .../657b20985d315095e5c3851d.md | 54 ++ .../657b21e28a01039cb27b4f13.md | 50 ++ .../657b221b2ab0ac9e18a173ef.md | 35 + .../657b223e41ce6b9f9a01d214.md | 39 + .../657b227f7ad32ea17e2cdf28.md | 15 + .../657b2310b8cd52a4f15c1818.md | 56 ++ .../657b2340be1593a6517fe77b.md | 39 + .../657b236aa1eb9fa7b209aa03.md | 54 ++ .../657b23a413d28da927e087ca.md | 36 + .../657b23bc0e32f9aa9c62eb82.md | 50 ++ .../657b23f03b449aac2c517089.md | 27 + .../657b242d06512dadaea55056.md | 49 ++ .../657b24542024c8af092cd6c4.md | 39 + .../657b24774d8cdab052ffe2a6.md | 48 ++ .../657b24a500800cb1c6945da9.md | 40 + .../657b2be1b19500c63fc1a467.md | 41 + .../657b2c040bb5f6c77fa5df80.md | 38 + .../657b2d618b8851cc5baf9490.md | 38 + .../657b2d9cb974dace59024964.md | 54 ++ .../657b2dd7745fdcd03e5160f4.md | 15 + .../657b2e0666d4a9d1b851f90e.md | 54 ++ .../657b2ec6c054efd71e503a27.md | 49 ++ .../657b2eeb31e435d89ecce6f3.md | 33 + .../657b2f0b3bcfe7d9f4151854.md | 54 ++ .../657b2f3bf7a2cbdb58d959d5.md | 49 ++ .../657b2f6cb66826dcbac08094.md | 49 ++ .../657b2fa89ddc20de629ca21f.md | 38 + .../657b2fc9c0f96bdfddfce4d9.md | 46 ++ .../657b2fea728c2be14a8a98c4.md | 49 ++ .../657b3026ff79fbe2dda6cb39.md | 54 ++ .../657b306fe94f29e4b4aa9105.md | 55 ++ .../657b30ac03b523e6640deaf1.md | 49 ++ .../657b30e1b9f035e7e656fd01.md | 54 ++ .../657b315533e4edeba65111b8.md | 54 ++ .../657b46c9be150f577f5a1086.md | 15 + .../dialogue-placeholder.md | 15 - .../dialogue-placeholder.md | 15 - .../challenge-1.md | 41 - .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../build-a-personal-portfolio-webpage.md | 281 ------- .../build-a-product-landing-page.md | 470 ----------- .../build-a-survey-form.md | 518 ------------ .../build-a-technical-documentation-page.md | 529 ------------- .../build-a-tribute-page.md | 325 -------- .../build-your-own-functions.md | 71 -- .../comparing-and-sorting-tuples.md | 61 -- .../conditional-execution.md | 54 -- .../data-visualization-mailing-lists.md | 56 -- .../data-visualization-page-rank.md | 34 - .../dictionaries-and-loops.md | 53 -- .../dictionaries-common-applications.md | 47 -- .../files-as-a-sequence.md | 44 -- .../intermediate-expressions.md | 56 -- .../intermediate-strings.md | 53 -- .../introduction-elements-of-python.md | 40 - .../introduction-hardware-achitecture.md | 34 - .../introduction-python-as-a-language.md | 43 - .../introduction-why-program.md | 54 -- .../iterations-definite-loops.md | 43 - .../iterations-loop-idioms.md | 49 -- .../iterations-more-patterns.md | 52 -- .../loops-and-iterations.md | 55 -- .../make-a-relational-database.md | 52 -- .../more-conditional-structures.md | 60 -- .../networking-protocol.md | 38 - .../networking-text-processing.md | 34 - .../networking-using-urllib-in-python.md | 41 - .../networking-web-scraping-with-python.md | 60 -- .../networking-with-python.md | 38 - .../networking-write-a-web-browser.md | 54 -- .../python-for-everybody/object-lifecycle.md | 71 -- .../objects-a-sample-class.md | 62 -- .../objects-inheritance.md | 38 - .../python-dictionaries.md | 59 -- .../python-for-everybody/python-functions.md | 42 - .../python-for-everybody/python-lists.md | 43 - .../python-for-everybody/python-objects.md | 38 - .../python-for-everybody/reading-files.md | 42 - ...xpressions-matching-and-extracting-data.md | 45 -- ...ular-expressions-practical-applications.md | 38 - .../regular-expressions.md | 42 - .../relational-database-design.md | 38 - .../relational-databases-and-sqlite.md | 44 -- .../relational-databases-join-operation.md | 34 - ...al-databases-many-to-many-relationships.md | 52 -- ...ational-databases-relationship-building.md | 34 - ...-relationships-in-a-relational-database.md | 38 - .../python-for-everybody/strings-and-lists.md | 51 -- .../python-for-everybody/strings-in-python.md | 63 -- .../the-tuples-collection.md | 63 -- .../using-web-services.md | 42 - .../variables-expressions-and-statements.md | 38 - .../visualizing-data-with-python.md | 42 - ...services-api-rate-limiting-and-security.md | 50 -- .../python-for-everybody/web-services-apis.md | 38 - .../python-for-everybody/web-services-json.md | 60 -- .../web-services-service-oriented-approach.md | 34 - .../web-services-xml-schema.md | 34 - .../python-for-everybody/web-services-xml.md | 47 -- .../working-with-lists.md | 38 - .../5f33310c1851c6c4da013250.md | 59 -- .../615389bd81347947ea7ba896.md | 91 --- .../60b69a66b6ddb80858c51578.md | 112 --- .../60b69a66b6ddb80858c51579.md | 63 -- .../60b69a66b6ddb80858c5157a.md | 56 -- .../60b69a66b6ddb80858c5157b.md | 50 -- .../60b69a66b6ddb80858c5157c.md | 51 -- .../60b69a66b6ddb80858c5157d.md | 54 -- .../60b69a66b6ddb80858c5157e.md | 56 -- .../60b69a66b6ddb80858c5157f.md | 69 -- .../60b69a66b6ddb80858c51580.md | 59 -- .../60b69a66b6ddb80858c51581.md | 68 -- .../60b69a66b6ddb80858c51582.md | 70 -- .../60b69a66b6ddb80858c51583.md | 84 -- .../60b69a66b6ddb80858c51584.md | 79 -- .../60b69a66b6ddb80858c51585.md | 74 -- .../60b69a66b6ddb80858c51586.md | 93 --- .../60b69a66b6ddb80858c51587.md | 91 --- .../60b69a66b6ddb80858c51588.md | 102 --- .../60b69a66b6ddb80858c51589.md | 88 --- .../60b69a66b6ddb80858c5158a.md | 107 --- .../60b69a66b6ddb80858c5158b.md | 105 --- .../60b69a66b6ddb80858c5158c.md | 116 --- .../60b69a66b6ddb80858c5158d.md | 114 --- .../60b69a66b6ddb80858c5158e.md | 105 --- .../60b69a66b6ddb80858c5158f.md | 126 --- .../60b69a66b6ddb80858c51590.md | 124 --- .../60b69a66b6ddb80858c51591.md | 115 --- .../60b69a66b6ddb80858c51592.md | 136 ---- .../60b69a66b6ddb80858c51593.md | 125 --- .../60b69a66b6ddb80858c51594.md | 135 ---- .../60b69a66b6ddb80858c51595.md | 146 ---- .../60b69a66b6ddb80858c51596.md | 144 ---- .../60b69a66b6ddb80858c51597.md | 135 ---- .../60b69a66b6ddb80858c51598.md | 142 ---- .../60b69a66b6ddb80858c51599.md | 156 ---- .../60b69a66b6ddb80858c5159a.md | 158 ---- .../60b69a66b6ddb80858c5159b.md | 161 ---- .../60b69a66b6ddb80858c5159c.md | 169 ---- .../60b69a66b6ddb80858c5159d.md | 167 ---- .../60b69a66b6ddb80858c5159e.md | 178 ----- .../60b69a66b6ddb80858c5159f.md | 183 ----- .../60b69a66b6ddb80858c515a0.md | 181 ----- .../60b69a66b6ddb80858c515a1.md | 192 ----- .../60b69a66b6ddb80858c515a2.md | 190 ----- .../60b69a66b6ddb80858c515a3.md | 201 ----- .../60b69a66b6ddb80858c515a4.md | 199 ----- .../60b69a66b6ddb80858c515a5.md | 190 ----- .../60b69a66b6ddb80858c515a6.md | 211 ----- .../60b69a66b6ddb80858c515a7.md | 217 ----- .../60b69a66b6ddb80858c515a8.md | 207 ----- .../60b69a66b6ddb80858c515a9.md | 217 ----- .../60b69a66b6ddb80858c515aa.md | 220 ------ .../60b69a66b6ddb80858c515ab.md | 225 ------ .../60b69a66b6ddb80858c515ac.md | 228 ------ .../60b69a66b6ddb80858c515ad.md | 225 ------ .../60b69a66b6ddb80858c515ae.md | 245 ------ .../60b69a66b6ddb80858c515af.md | 240 ------ .../60b69a66b6ddb80858c515b0.md | 238 ------ .../60b69a66b6ddb80858c515b1.md | 298 ------- .../60b69a66b6ddb80858c515b2.md | 281 ------- .../60b69a66b6ddb80858c515b3.md | 287 ------- .../60b69a66b6ddb80858c515b4.md | 285 ------- .../60b69a66b6ddb80858c515b5.md | 296 ------- .../60b69a66b6ddb80858c515b6.md | 282 ------- .../60b69a66b6ddb80858c515b7.md | 295 ------- .../60b69a66b6ddb80858c515b8.md | 286 ------- .../60b69a66b6ddb80858c515b9.md | 301 ------- .../60b69a66b6ddb80858c515ba.md | 304 ------- .../60b69a66b6ddb80858c515bc.md | 295 ------- .../60b69a66b6ddb80858c515bd.md | 348 -------- .../60b69a66b6ddb80858c515be.md | 337 -------- .../60b69a66b6ddb80858c515bf.md | 348 -------- .../60b69a66b6ddb80858c515c0.md | 359 --------- .../60b69a66b6ddb80858c515c1.md | 365 --------- .../60b69a66b6ddb80858c515c2.md | 363 --------- .../60b69a66b6ddb80858c515c3.md | 354 --------- .../60b69a66b6ddb80858c515c4.md | 381 --------- .../60b69a66b6ddb80858c515c5.md | 382 --------- .../60b69a66b6ddb80858c515c6.md | 388 --------- .../60b69a66b6ddb80858c515c7.md | 739 ----------------- .../60b80da8676fb3227967a731.md | 71 -- .../60ba890832b4940f24d1936b.md | 312 -------- .../60ba89123a445e0f5c9e4022.md | 326 -------- .../60ba8913f1704c0f7a8906b8.md | 312 -------- .../60ba89146b25080f99ab54ad.md | 315 -------- .../60ba8914bab51f0fb8228e9c.md | 310 -------- .../60ba929345ab0714a3743655.md | 327 -------- .../60ba9296d4d6b414c1b10995.md | 330 -------- .../60ba92987c1e4914dfa7a0b9.md | 321 -------- .../60bad32219ebcb4a8810ac6a.md | 164 ---- .../615f5c1cb7575c7551ed8a40.md | 116 --- .../615f6a7d4ba8037bc086c2c7.md | 127 --- .../caesars-cipher.md | 88 --- .../cash-register.md | 252 ------ .../palindrome-checker.md | 125 --- .../roman-numeral-converter.md | 215 ----- .../telephone-number-validator.md | 217 ----- .../62a3b365f1cdeb33efc2502e.md | 138 ---- .../62a8f2bc37675e77d5835235.md | 355 --------- .../659b0093d7db5a1a1122b7bd.md | 682 ++++++++++++++++ .../63ec14d1c216aa063f0be4af.md | 214 ----- .../63ec19978a066607e23439f8.md | 201 ----- .../63ec1a16f930b108b8a76806.md | 227 ------ .../63ec1bbf5584390a7d08d41f.md | 209 ----- .../63ec1cb59f2a4c0be5b6dfa0.md | 198 ----- .../63ec20a06fff670d37befbd9.md | 226 ------ .../63ec3287b182ec0efe8a3135.md | 472 ----------- .../63ec3427fc3e9214c9ed2a14.md | 281 ------- .../63ec36f6133df7160be3ec66.md | 277 ------- .../63ec47b454495519739486a7.md | 283 ------- .../63ee5d38a5d29d0696f8d820.md | 297 ------- .../63ee5d8f9e7168076e932fe2.md | 309 -------- .../63ee5e0f08e82208364c4128.md | 304 ------- .../63ee5ea8be892e0955ab346c.md | 303 ------- .../63ee5fc113bcb20a5db9214b.md | 300 ------- .../63ee611d478dca0b77f6a393.md | 316 -------- .../63ee7c664f9b65137d925c8a.md | 321 -------- .../63eea5cea403a81a68ae493c.md | 331 -------- .../63eea817673c8e1c22927fa6.md | 309 -------- .../63eea8e1e143ae1d098c8c9d.md | 311 -------- .../63eeb8e86becbf1e75c2cb0d.md | 312 -------- .../63eedebb0ec0231ff1cede1a.md | 327 -------- .../63efdbc22a0c56070beabed7.md | 323 -------- .../63efe370bbfc4a08d500118e.md | 324 -------- .../63eff02f00e69a0b2ac10b43.md | 317 -------- .../63eff98ffb1d5a0d24ec79cb.md | 336 -------- .../63effe558c87a70e7072e447.md | 327 -------- .../63f0165121a9181342d5bc66.md | 320 -------- .../63f017b4ad028a148eb713c0.md | 345 -------- .../63f01861f813e01564c95315.md | 325 -------- .../63f018f04e487e164dc27bd9.md | 349 -------- .../63f01c9791a0aa1751c73760.md | 334 -------- .../63f0224ceb16dc196d2c860a.md | 335 -------- .../63f026d041bc6c1a3d5cba0f.md | 339 -------- .../63f0284532742c1b26c7a052.md | 339 -------- .../63f0289df84a581bbdbd29b7.md | 339 -------- .../63f0295e673b661ccb299e8a.md | 350 -------- .../63f029b96b9e9e1df93be951.md | 342 -------- .../63f02a4ef92d711ec1ff618c.md | 377 --------- .../63f02b22cce1c11fe9604381.md | 348 -------- .../63f02bdeb9b428208b97eb6b.md | 368 --------- .../63f02c6e18773921ba50aa53.md | 361 --------- .../63f0311f5ea9382388d6124f.md | 347 -------- .../63f033fdb1fbcc254999fcc3.md | 339 -------- .../63f03446c2ed3e264be6c7fc.md | 335 -------- .../63f0348a54a177272071a595.md | 348 -------- .../63f034d012f74627ce538d3a.md | 357 --------- .../63f03686c5ea863533ec71f4.md | 353 --------- .../63f036ec91fdf238c90665f5.md | 352 --------- .../63f0370b340915399d31e5eb.md | 367 --------- .../63f0374d5351223a747c301d.md | 394 ---------- .../63f0378e173e3c3b7638b528.md | 352 --------- .../63f038a0ae041d3c5b0cdf23.md | 353 --------- .../63f038e671d3f73d5a041973.md | 371 --------- .../63f039dbcef7673e4e758fa3.md | 381 --------- .../63f03a7143a6ef3f7f3344f0.md | 378 --------- .../63f03ac2b428b2404a5a7518.md | 368 --------- .../63f03af535682e4138fdb915.md | 395 ---------- .../63f03b1ed5ab15420c057463.md | 744 ------------------ .../63f6721d5110af243ef8f3d9.md | 352 --------- .../step-001.md | 100 --- .../step-002.md | 114 --- .../step-003.md | 119 --- .../step-004.md | 112 --- .../step-005.md | 115 --- .../step-006.md | 113 --- .../step-007.md | 122 --- .../step-008.md | 119 --- .../step-009.md | 121 --- .../step-010.md | 116 --- .../step-011.md | 117 --- .../step-012.md | 129 --- .../step-013.md | 127 --- .../step-014.md | 125 --- .../step-015.md | 123 --- .../step-016.md | 122 --- .../step-017.md | 123 --- .../step-018.md | 139 ---- .../step-019.md | 139 ---- .../step-020.md | 147 ---- .../step-021.md | 136 ---- .../step-022.md | 139 ---- .../step-023.md | 133 ---- .../step-024.md | 131 --- .../step-025.md | 141 ---- .../step-026.md | 129 --- .../step-027.md | 141 ---- .../step-028.md | 143 ---- .../step-029.md | 151 ---- .../step-030.md | 154 ---- .../step-031.md | 151 ---- .../step-032.md | 151 ---- .../step-033.md | 149 ---- .../step-034.md | 153 ---- .../step-035.md | 161 ---- .../step-036.md | 153 ---- .../step-037.md | 154 ---- .../step-038.md | 159 ---- .../step-039.md | 158 ---- .../step-040.md | 167 ---- .../step-041.md | 170 ---- .../step-042.md | 175 ---- .../step-043.md | 175 ---- .../step-044.md | 174 ---- .../step-045.md | 183 ----- .../step-046.md | 192 ----- .../step-047.md | 182 ----- .../step-048.md | 193 ----- .../step-049.md | 199 ----- .../step-050.md | 199 ----- .../step-051.md | 206 ----- .../step-052.md | 207 ----- .../step-053.md | 203 ----- .../step-054.md | 204 ----- .../step-055.md | 210 ----- .../step-056.md | 214 ----- .../step-057.md | 211 ----- .../step-058.md | 218 ----- .../step-059.md | 220 ------ .../step-060.md | 220 ------ .../step-061.md | 222 ------ .../step-062.md | 226 ------ .../step-063.md | 230 ------ .../step-064.md | 226 ------ .../step-065.md | 238 ------ .../step-066.md | 243 ------ .../step-067.md | 250 ------ .../step-068.md | 243 ------ .../step-069.md | 244 ------ .../step-070.md | 259 ------ .../step-071.md | 257 ------ .../step-072.md | 263 ------- .../step-073.md | 271 ------- .../step-074.md | 269 ------- .../step-075.md | 277 ------- .../step-076.md | 185 ----- .../step-001.md | 78 -- .../step-002.md | 80 -- .../step-003.md | 84 -- .../step-004.md | 88 --- .../step-005.md | 94 --- .../step-006.md | 94 --- .../step-007.md | 90 --- .../step-008.md | 82 -- .../step-009.md | 84 -- .../step-010.md | 82 -- .../step-011.md | 87 -- .../step-012.md | 92 --- .../step-013.md | 98 --- .../step-014.md | 97 --- .../step-015.md | 102 --- .../step-016.md | 104 --- .../step-017.md | 100 --- .../step-018.md | 103 --- .../step-019.md | 110 --- .../step-020.md | 105 --- .../step-021.md | 107 --- .../step-022.md | 120 --- .../step-023.md | 114 --- .../step-024.md | 112 --- .../step-025.md | 120 --- .../step-026.md | 128 --- .../step-027.md | 131 --- .../step-028.md | 133 ---- .../step-029.md | 134 ---- .../step-030.md | 138 ---- .../step-031.md | 142 ---- .../step-032.md | 139 ---- .../step-033.md | 140 ---- .../step-034.md | 141 ---- .../step-035.md | 139 ---- .../step-036.md | 142 ---- .../step-037.md | 150 ---- .../step-038.md | 146 ---- .../step-039.md | 150 ---- .../step-040.md | 158 ---- .../step-041.md | 157 ---- .../step-042.md | 170 ---- .../step-043.md | 163 ---- .../step-044.md | 158 ---- .../step-045.md | 157 ---- .../step-046.md | 154 ---- .../step-047.md | 159 ---- .../step-048.md | 154 ---- .../step-049.md | 156 ---- .../step-050.md | 156 ---- .../step-051.md | 160 ---- .../step-052.md | 159 ---- .../step-053.md | 173 ---- .../step-054.md | 176 ----- .../step-055.md | 176 ----- .../step-056.md | 176 ----- .../step-057.md | 177 ----- .../step-058.md | 183 ----- .../step-059.md | 183 ----- .../step-060.md | 187 ----- .../step-061.md | 189 ----- .../step-062.md | 184 ----- .../step-063.md | 183 ----- .../step-064.md | 182 ----- .../step-065.md | 186 ----- .../step-066.md | 182 ----- .../step-067.md | 192 ----- .../step-068.md | 186 ----- .../step-069.md | 184 ----- .../step-070.md | 188 ----- .../step-071.md | 190 ----- .../step-072.md | 192 ----- .../step-073.md | 188 ----- .../step-074.md | 190 ----- .../step-075.md | 197 ----- .../step-076.md | 195 ----- .../step-077.md | 200 ----- .../step-078.md | 208 ----- .../step-079.md | 211 ----- .../step-080.md | 217 ----- .../step-081.md | 220 ------ .../step-082.md | 229 ------ .../step-083.md | 225 ------ .../step-084.md | 225 ------ .../step-085.md | 230 ------ .../step-086.md | 232 ------ .../step-087.md | 237 ------ .../step-088.md | 239 ------ .../step-089.md | 251 ------ .../step-090.md | 251 ------ .../step-091.md | 257 ------ .../step-092.md | 261 ------ .../step-093.md | 260 ------ .../step-094.md | 260 ------ .../step-095.md | 262 ------ .../step-096.md | 266 ------- .../step-097.md | 273 ------- .../step-098.md | 267 ------- .../step-099.md | 276 ------- .../step-100.md | 271 ------- .../step-101.md | 268 ------- .../step-102.md | 270 ------- .../step-103.md | 265 ------- .../step-104.md | 267 ------- .../step-105.md | 264 ------- .../step-106.md | 272 ------- .../step-107.md | 268 ------- .../step-108.md | 269 ------- .../step-109.md | 275 ------- .../step-110.md | 272 ------- .../step-111.md | 272 ------- .../step-112.md | 269 ------- .../step-113.md | 271 ------- .../step-114.md | 273 ------- .../step-115.md | 279 ------- .../step-116.md | 285 ------- .../step-117.md | 288 ------- .../step-118.md | 292 ------- .../step-119.md | 297 ------- .../step-120.md | 291 ------- .../step-121.md | 301 ------- .../step-122.md | 293 ------- .../step-123.md | 298 ------- .../step-124.md | 293 ------- .../step-125.md | 298 ------- .../step-126.md | 308 -------- .../step-127.md | 300 ------- .../step-128.md | 312 -------- .../step-129.md | 318 -------- .../step-130.md | 312 -------- .../step-131.md | 312 -------- .../step-132.md | 311 -------- .../step-133.md | 316 -------- .../step-134.md | 320 -------- .../step-135.md | 325 -------- .../step-136.md | 327 -------- .../step-137.md | 328 -------- .../step-138.md | 324 -------- .../step-139.md | 327 -------- .../step-140.md | 330 -------- .../step-141.md | 316 -------- .../659ebe52d74b132a1d75c891.md | 388 +++++++++ .../elements-and-tags-question-a.md | 54 -- .../elements-and-tags-question-b.md | 49 -- .../html-boilerplate-question-a.md | 54 -- .../html-boilerplate-question-b.md | 46 -- .../html-boilerplate-question-c.md | 65 -- .../html-boilerplate-question-d.md | 48 -- .../introduction-to-html-css-question-a.md | 41 - .../introduction-to-html-css-question-b.md | 36 - .../introduction-to-html-css-question-c.md | 33 - .../introduction-to-html-css-question-d.md | 34 - .../links-and-images-question-a.md | 66 -- .../links-and-images-question-b.md | 54 -- .../links-and-images-question-c.md | 55 -- .../links-and-images-question-d.md | 112 --- .../links-and-images-question-e.md | 98 --- .../links-and-images-question-f.md | 93 --- .../links-and-images-question-g.md | 93 --- .../links-and-images-question-h.md | 97 --- ...d-ordered-and-unordered-list-question-a.md | 65 -- ...d-ordered-and-unordered-list-question-b.md | 44 -- ...d-ordered-and-unordered-list-question-c.md | 44 -- .../working-with-text-question-a.md | 60 -- .../working-with-text-question-b.md | 39 - .../working-with-text-question-c.md | 47 -- .../working-with-text-question-d.md | 38 - .../working-with-text-question-e.md | 65 -- .../working-with-text-question-f.md | 66 -- .../working-with-text-question-g.md | 48 -- .../problem-1-multiples-of-3-and-5.md | 73 -- .../challenge-1.md | 93 --- .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../dialogue-introducing.md | 15 - .../i-am-im.md | 49 -- .../im.md | 21 - .../name-and-job-title.md | 53 -- .../right.md | 33 - .../team-lead.md | 33 - .../thats-right-2.md | 25 - .../thats-right.md | 49 -- .../you-are.md | 27 - .../655c0feadb1dd77f6cda623f.md | 15 + .../657b0f0be03b2137ed88b36c.md | 54 ++ .../657b106ced8c653be6b3218f.md | 50 ++ .../657b108cf870283d22b21e8e.md | 58 ++ .../657b110ad8afcc3f8e586362.md | 38 + .../657b115008a62d41c0d7482f.md | 49 ++ .../657b119f0ce64343420bb850.md | 49 ++ .../657b11e082e48a44eb4bfc09.md | 40 + .../657b11f87368cf463ea4fe46.md | 57 ++ .../657b1240ef768447b80817ad.md | 55 ++ .../657b12ae08dd7049b300c901.md | 49 ++ .../657b12e7c306334b7c320221.md | 41 + .../657b13088693ef4ce21ce0e4.md | 49 ++ .../657b133afcef714e542b557a.md | 49 ++ .../657b135e9029fb4f8141e40c.md | 49 ++ .../657b138d33db9e50f116b5f0.md | 54 ++ .../657b1431076b365555784189.md | 49 ++ .../657b145976723b56a97b8dda.md | 56 ++ .../657b149630b3ea5873269a38.md | 49 ++ .../657b14d8353d665a187fe771.md | 38 + .../657b153ac677705c7059530d.md | 62 ++ .../657b15dbcafe4d5f39a5de82.md | 54 ++ .../657b160d6a8662610fe6a523.md | 53 ++ .../657b163c9da40e62b904be1f.md | 46 ++ .../657b18e71067d6680b9ac5d3.md | 54 ++ .../657b1985ae17886b05b382b1.md | 54 ++ .../657b19bf7b32af6caf763ef7.md | 54 ++ .../657b1a03df3ec46eca276046.md | 38 + .../657b1a27dc6daf6ffd52ff1f.md | 55 ++ .../657b1a637e4dc571f8f4d3d7.md | 49 ++ .../657b1a9581015573806e1e20.md | 47 ++ .../657b1cc072206e7ac3db88b8.md | 39 + .../657b1d080265ba7c4f96bf79.md | 30 + .../657b1d4ec0e2587e8bcc95f7.md | 15 + .../657b1da0b27fef8117827ce5.md | 54 ++ .../657b1dfec76149836ea5c7d0.md | 30 + .../657b1e2fad2ffe84ab420a56.md | 49 ++ .../657b1e66159fec86336a737b.md | 54 ++ .../657b1e9a62603587747f7f45.md | 49 ++ .../657b1ee1de7216896b5b4361.md | 42 + .../657b1f0585d48f8ac0b19654.md | 40 + .../657b1f598f63008c8bdb20b8.md | 49 ++ .../657b1f981cd42e8dc3b282d9.md | 49 ++ .../657b1fe950c0df90346e5d12.md | 47 ++ .../657b201372864e91d4f5bb53.md | 39 + .../657b20338e0802931673c1e1.md | 26 + .../657b20985d315095e5c3851d.md | 54 ++ .../657b21e28a01039cb27b4f13.md | 50 ++ .../657b221b2ab0ac9e18a173ef.md | 35 + .../657b223e41ce6b9f9a01d214.md | 39 + .../657b227f7ad32ea17e2cdf28.md | 15 + .../657b2310b8cd52a4f15c1818.md | 56 ++ .../657b2340be1593a6517fe77b.md | 39 + .../657b236aa1eb9fa7b209aa03.md | 54 ++ .../657b23a413d28da927e087ca.md | 36 + .../657b23bc0e32f9aa9c62eb82.md | 50 ++ .../657b23f03b449aac2c517089.md | 27 + .../657b242d06512dadaea55056.md | 49 ++ .../657b24542024c8af092cd6c4.md | 39 + .../657b24774d8cdab052ffe2a6.md | 48 ++ .../657b24a500800cb1c6945da9.md | 40 + .../657b2be1b19500c63fc1a467.md | 41 + .../657b2c040bb5f6c77fa5df80.md | 38 + .../657b2d618b8851cc5baf9490.md | 38 + .../657b2d9cb974dace59024964.md | 54 ++ .../657b2dd7745fdcd03e5160f4.md | 15 + .../657b2e0666d4a9d1b851f90e.md | 54 ++ .../657b2ec6c054efd71e503a27.md | 49 ++ .../657b2eeb31e435d89ecce6f3.md | 33 + .../657b2f0b3bcfe7d9f4151854.md | 54 ++ .../657b2f3bf7a2cbdb58d959d5.md | 49 ++ .../657b2f6cb66826dcbac08094.md | 49 ++ .../657b2fa89ddc20de629ca21f.md | 38 + .../657b2fc9c0f96bdfddfce4d9.md | 46 ++ .../657b2fea728c2be14a8a98c4.md | 49 ++ .../657b3026ff79fbe2dda6cb39.md | 54 ++ .../657b306fe94f29e4b4aa9105.md | 55 ++ .../657b30ac03b523e6640deaf1.md | 49 ++ .../657b30e1b9f035e7e656fd01.md | 54 ++ .../657b315533e4edeba65111b8.md | 54 ++ .../657b46c9be150f577f5a1086.md | 15 + .../dialogue-placeholder.md | 15 - .../dialogue-placeholder.md | 15 - .../challenge-1.md | 41 - .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../build-a-personal-portfolio-webpage.md | 281 ------- .../build-a-product-landing-page.md | 470 ----------- .../build-a-survey-form.md | 518 ------------ .../build-a-technical-documentation-page.md | 529 ------------- .../build-a-tribute-page.md | 325 -------- .../build-your-own-functions.md | 71 -- .../comparing-and-sorting-tuples.md | 61 -- .../conditional-execution.md | 54 -- .../data-visualization-mailing-lists.md | 56 -- .../data-visualization-page-rank.md | 34 - .../dictionaries-and-loops.md | 53 -- .../dictionaries-common-applications.md | 47 -- .../files-as-a-sequence.md | 44 -- .../intermediate-expressions.md | 56 -- .../intermediate-strings.md | 53 -- .../introduction-elements-of-python.md | 40 - .../introduction-hardware-achitecture.md | 34 - .../introduction-python-as-a-language.md | 43 - .../introduction-why-program.md | 54 -- .../iterations-definite-loops.md | 43 - .../iterations-loop-idioms.md | 49 -- .../iterations-more-patterns.md | 52 -- .../loops-and-iterations.md | 55 -- .../make-a-relational-database.md | 52 -- .../more-conditional-structures.md | 60 -- .../networking-protocol.md | 38 - .../networking-text-processing.md | 34 - .../networking-using-urllib-in-python.md | 41 - .../networking-web-scraping-with-python.md | 60 -- .../networking-with-python.md | 38 - .../networking-write-a-web-browser.md | 54 -- .../python-for-everybody/object-lifecycle.md | 71 -- .../objects-a-sample-class.md | 62 -- .../objects-inheritance.md | 38 - .../python-dictionaries.md | 59 -- .../python-for-everybody/python-functions.md | 42 - .../python-for-everybody/python-lists.md | 43 - .../python-for-everybody/python-objects.md | 38 - .../python-for-everybody/reading-files.md | 42 - ...xpressions-matching-and-extracting-data.md | 45 -- ...ular-expressions-practical-applications.md | 38 - .../regular-expressions.md | 42 - .../relational-database-design.md | 38 - .../relational-databases-and-sqlite.md | 44 -- .../relational-databases-join-operation.md | 34 - ...al-databases-many-to-many-relationships.md | 52 -- ...ational-databases-relationship-building.md | 34 - ...-relationships-in-a-relational-database.md | 38 - .../python-for-everybody/strings-and-lists.md | 51 -- .../python-for-everybody/strings-in-python.md | 63 -- .../the-tuples-collection.md | 63 -- .../using-web-services.md | 42 - .../variables-expressions-and-statements.md | 38 - .../visualizing-data-with-python.md | 42 - ...services-api-rate-limiting-and-security.md | 50 -- .../python-for-everybody/web-services-apis.md | 38 - .../python-for-everybody/web-services-json.md | 60 -- .../web-services-service-oriented-approach.md | 34 - .../web-services-xml-schema.md | 34 - .../python-for-everybody/web-services-xml.md | 47 -- .../working-with-lists.md | 38 - .../5f33310c1851c6c4da013250.md | 59 -- .../615389bd81347947ea7ba896.md | 91 --- .../60b69a66b6ddb80858c51578.md | 112 --- .../60b69a66b6ddb80858c51579.md | 63 -- .../60b69a66b6ddb80858c5157a.md | 56 -- .../60b69a66b6ddb80858c5157b.md | 50 -- .../60b69a66b6ddb80858c5157c.md | 51 -- .../60b69a66b6ddb80858c5157d.md | 54 -- .../60b69a66b6ddb80858c5157e.md | 56 -- .../60b69a66b6ddb80858c5157f.md | 69 -- .../60b69a66b6ddb80858c51580.md | 59 -- .../60b69a66b6ddb80858c51581.md | 68 -- .../60b69a66b6ddb80858c51582.md | 70 -- .../60b69a66b6ddb80858c51583.md | 84 -- .../60b69a66b6ddb80858c51584.md | 79 -- .../60b69a66b6ddb80858c51585.md | 74 -- .../60b69a66b6ddb80858c51586.md | 93 --- .../60b69a66b6ddb80858c51587.md | 91 --- .../60b69a66b6ddb80858c51588.md | 102 --- .../60b69a66b6ddb80858c51589.md | 88 --- .../60b69a66b6ddb80858c5158a.md | 107 --- .../60b69a66b6ddb80858c5158b.md | 105 --- .../60b69a66b6ddb80858c5158c.md | 116 --- .../60b69a66b6ddb80858c5158d.md | 114 --- .../60b69a66b6ddb80858c5158e.md | 105 --- .../60b69a66b6ddb80858c5158f.md | 126 --- .../60b69a66b6ddb80858c51590.md | 124 --- .../60b69a66b6ddb80858c51591.md | 115 --- .../60b69a66b6ddb80858c51592.md | 136 ---- .../60b69a66b6ddb80858c51593.md | 125 --- .../60b69a66b6ddb80858c51594.md | 135 ---- .../60b69a66b6ddb80858c51595.md | 146 ---- .../60b69a66b6ddb80858c51596.md | 144 ---- .../60b69a66b6ddb80858c51597.md | 135 ---- .../60b69a66b6ddb80858c51598.md | 142 ---- .../60b69a66b6ddb80858c51599.md | 156 ---- .../60b69a66b6ddb80858c5159a.md | 158 ---- .../60b69a66b6ddb80858c5159b.md | 161 ---- .../60b69a66b6ddb80858c5159c.md | 169 ---- .../60b69a66b6ddb80858c5159d.md | 167 ---- .../60b69a66b6ddb80858c5159e.md | 178 ----- .../60b69a66b6ddb80858c5159f.md | 183 ----- .../60b69a66b6ddb80858c515a0.md | 181 ----- .../60b69a66b6ddb80858c515a1.md | 192 ----- .../60b69a66b6ddb80858c515a2.md | 190 ----- .../60b69a66b6ddb80858c515a3.md | 201 ----- .../60b69a66b6ddb80858c515a4.md | 199 ----- .../60b69a66b6ddb80858c515a5.md | 190 ----- .../60b69a66b6ddb80858c515a6.md | 211 ----- .../60b69a66b6ddb80858c515a7.md | 217 ----- .../60b69a66b6ddb80858c515a8.md | 207 ----- .../60b69a66b6ddb80858c515a9.md | 217 ----- .../60b69a66b6ddb80858c515aa.md | 220 ------ .../60b69a66b6ddb80858c515ab.md | 225 ------ .../60b69a66b6ddb80858c515ac.md | 228 ------ .../60b69a66b6ddb80858c515ad.md | 225 ------ .../60b69a66b6ddb80858c515ae.md | 245 ------ .../60b69a66b6ddb80858c515af.md | 240 ------ .../60b69a66b6ddb80858c515b0.md | 238 ------ .../60b69a66b6ddb80858c515b1.md | 298 ------- .../60b69a66b6ddb80858c515b2.md | 281 ------- .../60b69a66b6ddb80858c515b3.md | 287 ------- .../60b69a66b6ddb80858c515b4.md | 285 ------- .../60b69a66b6ddb80858c515b5.md | 296 ------- .../60b69a66b6ddb80858c515b6.md | 282 ------- .../60b69a66b6ddb80858c515b7.md | 295 ------- .../60b69a66b6ddb80858c515b8.md | 286 ------- .../60b69a66b6ddb80858c515b9.md | 301 ------- .../60b69a66b6ddb80858c515ba.md | 304 ------- .../60b69a66b6ddb80858c515bc.md | 295 ------- .../60b69a66b6ddb80858c515bd.md | 348 -------- .../60b69a66b6ddb80858c515be.md | 337 -------- .../60b69a66b6ddb80858c515bf.md | 348 -------- .../60b69a66b6ddb80858c515c0.md | 359 --------- .../60b69a66b6ddb80858c515c1.md | 365 --------- .../60b69a66b6ddb80858c515c2.md | 363 --------- .../60b69a66b6ddb80858c515c3.md | 354 --------- .../60b69a66b6ddb80858c515c4.md | 381 --------- .../60b69a66b6ddb80858c515c5.md | 382 --------- .../60b69a66b6ddb80858c515c6.md | 388 --------- .../60b69a66b6ddb80858c515c7.md | 739 ----------------- .../60b80da8676fb3227967a731.md | 71 -- .../60ba890832b4940f24d1936b.md | 312 -------- .../60ba89123a445e0f5c9e4022.md | 326 -------- .../60ba8913f1704c0f7a8906b8.md | 312 -------- .../60ba89146b25080f99ab54ad.md | 315 -------- .../60ba8914bab51f0fb8228e9c.md | 310 -------- .../60ba929345ab0714a3743655.md | 327 -------- .../60ba9296d4d6b414c1b10995.md | 330 -------- .../60ba92987c1e4914dfa7a0b9.md | 321 -------- .../60bad32219ebcb4a8810ac6a.md | 164 ---- .../615f5c1cb7575c7551ed8a40.md | 116 --- .../615f6a7d4ba8037bc086c2c7.md | 127 --- .../caesars-cipher.md | 88 --- .../cash-register.md | 252 ------ .../palindrome-checker.md | 125 --- .../roman-numeral-converter.md | 215 ----- .../telephone-number-validator.md | 217 ----- .../62a3b365f1cdeb33efc2502e.md | 138 ---- .../62a8f2bc37675e77d5835235.md | 355 --------- .../659b0093d7db5a1a1122b7bd.md | 682 ++++++++++++++++ .../63ec14d1c216aa063f0be4af.md | 214 ----- .../63ec19978a066607e23439f8.md | 201 ----- .../63ec1a16f930b108b8a76806.md | 227 ------ .../63ec1bbf5584390a7d08d41f.md | 209 ----- .../63ec1cb59f2a4c0be5b6dfa0.md | 198 ----- .../63ec20a06fff670d37befbd9.md | 226 ------ .../63ec3287b182ec0efe8a3135.md | 472 ----------- .../63ec3427fc3e9214c9ed2a14.md | 281 ------- .../63ec36f6133df7160be3ec66.md | 277 ------- .../63ec47b454495519739486a7.md | 283 ------- .../63ee5d38a5d29d0696f8d820.md | 297 ------- .../63ee5d8f9e7168076e932fe2.md | 309 -------- .../63ee5e0f08e82208364c4128.md | 304 ------- .../63ee5ea8be892e0955ab346c.md | 303 ------- .../63ee5fc113bcb20a5db9214b.md | 300 ------- .../63ee611d478dca0b77f6a393.md | 316 -------- .../63ee7c664f9b65137d925c8a.md | 321 -------- .../63eea5cea403a81a68ae493c.md | 331 -------- .../63eea817673c8e1c22927fa6.md | 309 -------- .../63eea8e1e143ae1d098c8c9d.md | 311 -------- .../63eeb8e86becbf1e75c2cb0d.md | 312 -------- .../63eedebb0ec0231ff1cede1a.md | 327 -------- .../63efdbc22a0c56070beabed7.md | 323 -------- .../63efe370bbfc4a08d500118e.md | 324 -------- .../63eff02f00e69a0b2ac10b43.md | 317 -------- .../63eff98ffb1d5a0d24ec79cb.md | 336 -------- .../63effe558c87a70e7072e447.md | 327 -------- .../63f0165121a9181342d5bc66.md | 320 -------- .../63f017b4ad028a148eb713c0.md | 345 -------- .../63f01861f813e01564c95315.md | 325 -------- .../63f018f04e487e164dc27bd9.md | 349 -------- .../63f01c9791a0aa1751c73760.md | 334 -------- .../63f0224ceb16dc196d2c860a.md | 335 -------- .../63f026d041bc6c1a3d5cba0f.md | 339 -------- .../63f0284532742c1b26c7a052.md | 339 -------- .../63f0289df84a581bbdbd29b7.md | 339 -------- .../63f0295e673b661ccb299e8a.md | 350 -------- .../63f029b96b9e9e1df93be951.md | 342 -------- .../63f02a4ef92d711ec1ff618c.md | 377 --------- .../63f02b22cce1c11fe9604381.md | 348 -------- .../63f02bdeb9b428208b97eb6b.md | 368 --------- .../63f02c6e18773921ba50aa53.md | 361 --------- .../63f0311f5ea9382388d6124f.md | 347 -------- .../63f033fdb1fbcc254999fcc3.md | 339 -------- .../63f03446c2ed3e264be6c7fc.md | 335 -------- .../63f0348a54a177272071a595.md | 348 -------- .../63f034d012f74627ce538d3a.md | 357 --------- .../63f03686c5ea863533ec71f4.md | 353 --------- .../63f036ec91fdf238c90665f5.md | 352 --------- .../63f0370b340915399d31e5eb.md | 367 --------- .../63f0374d5351223a747c301d.md | 394 ---------- .../63f0378e173e3c3b7638b528.md | 352 --------- .../63f038a0ae041d3c5b0cdf23.md | 353 --------- .../63f038e671d3f73d5a041973.md | 371 --------- .../63f039dbcef7673e4e758fa3.md | 381 --------- .../63f03a7143a6ef3f7f3344f0.md | 378 --------- .../63f03ac2b428b2404a5a7518.md | 368 --------- .../63f03af535682e4138fdb915.md | 395 ---------- .../63f03b1ed5ab15420c057463.md | 744 ------------------ .../63f6721d5110af243ef8f3d9.md | 352 --------- .../step-001.md | 100 --- .../step-002.md | 114 --- .../step-003.md | 119 --- .../step-004.md | 112 --- .../step-005.md | 115 --- .../step-006.md | 113 --- .../step-007.md | 122 --- .../step-008.md | 119 --- .../step-009.md | 121 --- .../step-010.md | 116 --- .../step-011.md | 117 --- .../step-012.md | 129 --- .../step-013.md | 127 --- .../step-014.md | 125 --- .../step-015.md | 123 --- .../step-016.md | 122 --- .../step-017.md | 123 --- .../step-018.md | 139 ---- .../step-019.md | 139 ---- .../step-020.md | 147 ---- .../step-021.md | 136 ---- .../step-022.md | 139 ---- .../step-023.md | 133 ---- .../step-024.md | 131 --- .../step-025.md | 141 ---- .../step-026.md | 129 --- .../step-027.md | 141 ---- .../step-028.md | 143 ---- .../step-029.md | 151 ---- .../step-030.md | 154 ---- .../step-031.md | 151 ---- .../step-032.md | 151 ---- .../step-033.md | 149 ---- .../step-034.md | 153 ---- .../step-035.md | 161 ---- .../step-036.md | 153 ---- .../step-037.md | 154 ---- .../step-038.md | 159 ---- .../step-039.md | 158 ---- .../step-040.md | 167 ---- .../step-041.md | 170 ---- .../step-042.md | 175 ---- .../step-043.md | 175 ---- .../step-044.md | 174 ---- .../step-045.md | 183 ----- .../step-046.md | 192 ----- .../step-047.md | 182 ----- .../step-048.md | 193 ----- .../step-049.md | 199 ----- .../step-050.md | 199 ----- .../step-051.md | 206 ----- .../step-052.md | 207 ----- .../step-053.md | 203 ----- .../step-054.md | 204 ----- .../step-055.md | 210 ----- .../step-056.md | 214 ----- .../step-057.md | 211 ----- .../step-058.md | 218 ----- .../step-059.md | 220 ------ .../step-060.md | 220 ------ .../step-061.md | 222 ------ .../step-062.md | 226 ------ .../step-063.md | 230 ------ .../step-064.md | 226 ------ .../step-065.md | 238 ------ .../step-066.md | 243 ------ .../step-067.md | 250 ------ .../step-068.md | 243 ------ .../step-069.md | 244 ------ .../step-070.md | 259 ------ .../step-071.md | 257 ------ .../step-072.md | 263 ------- .../step-073.md | 271 ------- .../step-074.md | 269 ------- .../step-075.md | 277 ------- .../step-076.md | 185 ----- .../step-001.md | 78 -- .../step-002.md | 80 -- .../step-003.md | 84 -- .../step-004.md | 88 --- .../step-005.md | 94 --- .../step-006.md | 94 --- .../step-007.md | 90 --- .../step-008.md | 82 -- .../step-009.md | 84 -- .../step-010.md | 82 -- .../step-011.md | 87 -- .../step-012.md | 92 --- .../step-013.md | 98 --- .../step-014.md | 97 --- .../step-015.md | 102 --- .../step-016.md | 104 --- .../step-017.md | 100 --- .../step-018.md | 103 --- .../step-019.md | 110 --- .../step-020.md | 105 --- .../step-021.md | 107 --- .../step-022.md | 120 --- .../step-023.md | 114 --- .../step-024.md | 112 --- .../step-025.md | 120 --- .../step-026.md | 128 --- .../step-027.md | 131 --- .../step-028.md | 133 ---- .../step-029.md | 134 ---- .../step-030.md | 138 ---- .../step-031.md | 142 ---- .../step-032.md | 139 ---- .../step-033.md | 140 ---- .../step-034.md | 141 ---- .../step-035.md | 139 ---- .../step-036.md | 142 ---- .../step-037.md | 150 ---- .../step-038.md | 146 ---- .../step-039.md | 150 ---- .../step-040.md | 158 ---- .../step-041.md | 157 ---- .../step-042.md | 170 ---- .../step-043.md | 163 ---- .../step-044.md | 158 ---- .../step-045.md | 157 ---- .../step-046.md | 154 ---- .../step-047.md | 159 ---- .../step-048.md | 154 ---- .../step-049.md | 156 ---- .../step-050.md | 156 ---- .../step-051.md | 160 ---- .../step-052.md | 159 ---- .../step-053.md | 173 ---- .../step-054.md | 176 ----- .../step-055.md | 176 ----- .../step-056.md | 176 ----- .../step-057.md | 177 ----- .../step-058.md | 183 ----- .../step-059.md | 183 ----- .../step-060.md | 187 ----- .../step-061.md | 189 ----- .../step-062.md | 184 ----- .../step-063.md | 183 ----- .../step-064.md | 182 ----- .../step-065.md | 186 ----- .../step-066.md | 182 ----- .../step-067.md | 192 ----- .../step-068.md | 186 ----- .../step-069.md | 184 ----- .../step-070.md | 188 ----- .../step-071.md | 190 ----- .../step-072.md | 192 ----- .../step-073.md | 188 ----- .../step-074.md | 190 ----- .../step-075.md | 197 ----- .../step-076.md | 195 ----- .../step-077.md | 200 ----- .../step-078.md | 208 ----- .../step-079.md | 211 ----- .../step-080.md | 217 ----- .../step-081.md | 220 ------ .../step-082.md | 229 ------ .../step-083.md | 225 ------ .../step-084.md | 225 ------ .../step-085.md | 230 ------ .../step-086.md | 232 ------ .../step-087.md | 237 ------ .../step-088.md | 239 ------ .../step-089.md | 251 ------ .../step-090.md | 251 ------ .../step-091.md | 257 ------ .../step-092.md | 261 ------ .../step-093.md | 260 ------ .../step-094.md | 260 ------ .../step-095.md | 262 ------ .../step-096.md | 266 ------- .../step-097.md | 273 ------- .../step-098.md | 267 ------- .../step-099.md | 276 ------- .../step-100.md | 271 ------- .../step-101.md | 268 ------- .../step-102.md | 270 ------- .../step-103.md | 265 ------- .../step-104.md | 267 ------- .../step-105.md | 264 ------- .../step-106.md | 272 ------- .../step-107.md | 268 ------- .../step-108.md | 269 ------- .../step-109.md | 275 ------- .../step-110.md | 272 ------- .../step-111.md | 272 ------- .../step-112.md | 269 ------- .../step-113.md | 271 ------- .../step-114.md | 273 ------- .../step-115.md | 279 ------- .../step-116.md | 285 ------- .../step-117.md | 288 ------- .../step-118.md | 292 ------- .../step-119.md | 297 ------- .../step-120.md | 291 ------- .../step-121.md | 301 ------- .../step-122.md | 293 ------- .../step-123.md | 298 ------- .../step-124.md | 293 ------- .../step-125.md | 298 ------- .../step-126.md | 308 -------- .../step-127.md | 300 ------- .../step-128.md | 312 -------- .../step-129.md | 318 -------- .../step-130.md | 312 -------- .../step-131.md | 312 -------- .../step-132.md | 311 -------- .../step-133.md | 316 -------- .../step-134.md | 320 -------- .../step-135.md | 325 -------- .../step-136.md | 327 -------- .../step-137.md | 328 -------- .../step-138.md | 324 -------- .../step-139.md | 327 -------- .../step-140.md | 330 -------- .../step-141.md | 316 -------- .../659ebe52d74b132a1d75c891.md | 388 +++++++++ .../elements-and-tags-question-a.md | 54 -- .../elements-and-tags-question-b.md | 49 -- .../html-boilerplate-question-a.md | 54 -- .../html-boilerplate-question-b.md | 46 -- .../html-boilerplate-question-c.md | 65 -- .../html-boilerplate-question-d.md | 48 -- .../introduction-to-html-css-question-a.md | 41 - .../introduction-to-html-css-question-b.md | 36 - .../introduction-to-html-css-question-c.md | 33 - .../introduction-to-html-css-question-d.md | 34 - .../links-and-images-question-a.md | 66 -- .../links-and-images-question-b.md | 54 -- .../links-and-images-question-c.md | 55 -- .../links-and-images-question-d.md | 112 --- .../links-and-images-question-e.md | 98 --- .../links-and-images-question-f.md | 93 --- .../links-and-images-question-g.md | 93 --- .../links-and-images-question-h.md | 97 --- ...d-ordered-and-unordered-list-question-a.md | 65 -- ...d-ordered-and-unordered-list-question-b.md | 44 -- ...d-ordered-and-unordered-list-question-c.md | 44 -- .../working-with-text-question-a.md | 60 -- .../working-with-text-question-b.md | 39 - .../working-with-text-question-c.md | 47 -- .../working-with-text-question-d.md | 38 - .../working-with-text-question-e.md | 65 -- .../working-with-text-question-f.md | 66 -- .../working-with-text-question-g.md | 48 -- .../problem-1-multiples-of-3-and-5.md | 73 -- .../challenge-1.md | 93 --- .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../dialogue-introducing.md | 15 - .../i-am-im.md | 49 -- .../im.md | 21 - .../name-and-job-title.md | 53 -- .../right.md | 33 - .../team-lead.md | 33 - .../thats-right-2.md | 25 - .../thats-right.md | 49 -- .../you-are.md | 27 - .../655c0feadb1dd77f6cda623f.md | 15 + .../657b0f0be03b2137ed88b36c.md | 54 ++ .../657b106ced8c653be6b3218f.md | 50 ++ .../657b108cf870283d22b21e8e.md | 58 ++ .../657b110ad8afcc3f8e586362.md | 38 + .../657b115008a62d41c0d7482f.md | 49 ++ .../657b119f0ce64343420bb850.md | 49 ++ .../657b11e082e48a44eb4bfc09.md | 40 + .../657b11f87368cf463ea4fe46.md | 57 ++ .../657b1240ef768447b80817ad.md | 55 ++ .../657b12ae08dd7049b300c901.md | 49 ++ .../657b12e7c306334b7c320221.md | 41 + .../657b13088693ef4ce21ce0e4.md | 49 ++ .../657b133afcef714e542b557a.md | 49 ++ .../657b135e9029fb4f8141e40c.md | 49 ++ .../657b138d33db9e50f116b5f0.md | 54 ++ .../657b1431076b365555784189.md | 49 ++ .../657b145976723b56a97b8dda.md | 56 ++ .../657b149630b3ea5873269a38.md | 49 ++ .../657b14d8353d665a187fe771.md | 38 + .../657b153ac677705c7059530d.md | 62 ++ .../657b15dbcafe4d5f39a5de82.md | 54 ++ .../657b160d6a8662610fe6a523.md | 53 ++ .../657b163c9da40e62b904be1f.md | 46 ++ .../657b18e71067d6680b9ac5d3.md | 54 ++ .../657b1985ae17886b05b382b1.md | 54 ++ .../657b19bf7b32af6caf763ef7.md | 54 ++ .../657b1a03df3ec46eca276046.md | 38 + .../657b1a27dc6daf6ffd52ff1f.md | 55 ++ .../657b1a637e4dc571f8f4d3d7.md | 49 ++ .../657b1a9581015573806e1e20.md | 47 ++ .../657b1cc072206e7ac3db88b8.md | 39 + .../657b1d080265ba7c4f96bf79.md | 30 + .../657b1d4ec0e2587e8bcc95f7.md | 15 + .../657b1da0b27fef8117827ce5.md | 54 ++ .../657b1dfec76149836ea5c7d0.md | 30 + .../657b1e2fad2ffe84ab420a56.md | 49 ++ .../657b1e66159fec86336a737b.md | 54 ++ .../657b1e9a62603587747f7f45.md | 49 ++ .../657b1ee1de7216896b5b4361.md | 42 + .../657b1f0585d48f8ac0b19654.md | 40 + .../657b1f598f63008c8bdb20b8.md | 49 ++ .../657b1f981cd42e8dc3b282d9.md | 49 ++ .../657b1fe950c0df90346e5d12.md | 47 ++ .../657b201372864e91d4f5bb53.md | 39 + .../657b20338e0802931673c1e1.md | 26 + .../657b20985d315095e5c3851d.md | 54 ++ .../657b21e28a01039cb27b4f13.md | 50 ++ .../657b221b2ab0ac9e18a173ef.md | 35 + .../657b223e41ce6b9f9a01d214.md | 39 + .../657b227f7ad32ea17e2cdf28.md | 15 + .../657b2310b8cd52a4f15c1818.md | 56 ++ .../657b2340be1593a6517fe77b.md | 39 + .../657b236aa1eb9fa7b209aa03.md | 54 ++ .../657b23a413d28da927e087ca.md | 36 + .../657b23bc0e32f9aa9c62eb82.md | 50 ++ .../657b23f03b449aac2c517089.md | 27 + .../657b242d06512dadaea55056.md | 49 ++ .../657b24542024c8af092cd6c4.md | 39 + .../657b24774d8cdab052ffe2a6.md | 48 ++ .../657b24a500800cb1c6945da9.md | 40 + .../657b2be1b19500c63fc1a467.md | 41 + .../657b2c040bb5f6c77fa5df80.md | 38 + .../657b2d618b8851cc5baf9490.md | 38 + .../657b2d9cb974dace59024964.md | 54 ++ .../657b2dd7745fdcd03e5160f4.md | 15 + .../657b2e0666d4a9d1b851f90e.md | 54 ++ .../657b2ec6c054efd71e503a27.md | 49 ++ .../657b2eeb31e435d89ecce6f3.md | 33 + .../657b2f0b3bcfe7d9f4151854.md | 54 ++ .../657b2f3bf7a2cbdb58d959d5.md | 49 ++ .../657b2f6cb66826dcbac08094.md | 49 ++ .../657b2fa89ddc20de629ca21f.md | 38 + .../657b2fc9c0f96bdfddfce4d9.md | 46 ++ .../657b2fea728c2be14a8a98c4.md | 49 ++ .../657b3026ff79fbe2dda6cb39.md | 54 ++ .../657b306fe94f29e4b4aa9105.md | 55 ++ .../657b30ac03b523e6640deaf1.md | 49 ++ .../657b30e1b9f035e7e656fd01.md | 54 ++ .../657b315533e4edeba65111b8.md | 54 ++ .../657b46c9be150f577f5a1086.md | 15 + .../dialogue-placeholder.md | 15 - .../dialogue-placeholder.md | 15 - .../challenge-1.md | 41 - .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../build-a-personal-portfolio-webpage.md | 281 ------- .../build-a-product-landing-page.md | 470 ----------- .../build-a-survey-form.md | 518 ------------ .../build-a-technical-documentation-page.md | 529 ------------- .../build-a-tribute-page.md | 325 -------- .../build-your-own-functions.md | 71 -- .../comparing-and-sorting-tuples.md | 61 -- .../conditional-execution.md | 54 -- .../data-visualization-mailing-lists.md | 56 -- .../data-visualization-page-rank.md | 34 - .../dictionaries-and-loops.md | 53 -- .../dictionaries-common-applications.md | 47 -- .../files-as-a-sequence.md | 44 -- .../intermediate-expressions.md | 56 -- .../intermediate-strings.md | 53 -- .../introduction-elements-of-python.md | 40 - .../introduction-hardware-achitecture.md | 34 - .../introduction-python-as-a-language.md | 43 - .../introduction-why-program.md | 54 -- .../iterations-definite-loops.md | 43 - .../iterations-loop-idioms.md | 49 -- .../iterations-more-patterns.md | 52 -- .../loops-and-iterations.md | 55 -- .../make-a-relational-database.md | 52 -- .../more-conditional-structures.md | 60 -- .../networking-protocol.md | 38 - .../networking-text-processing.md | 34 - .../networking-using-urllib-in-python.md | 41 - .../networking-web-scraping-with-python.md | 60 -- .../networking-with-python.md | 38 - .../networking-write-a-web-browser.md | 54 -- .../python-for-everybody/object-lifecycle.md | 71 -- .../objects-a-sample-class.md | 62 -- .../objects-inheritance.md | 38 - .../python-dictionaries.md | 59 -- .../python-for-everybody/python-functions.md | 42 - .../python-for-everybody/python-lists.md | 43 - .../python-for-everybody/python-objects.md | 38 - .../python-for-everybody/reading-files.md | 42 - ...xpressions-matching-and-extracting-data.md | 45 -- ...ular-expressions-practical-applications.md | 38 - .../regular-expressions.md | 42 - .../relational-database-design.md | 38 - .../relational-databases-and-sqlite.md | 44 -- .../relational-databases-join-operation.md | 34 - ...al-databases-many-to-many-relationships.md | 52 -- ...ational-databases-relationship-building.md | 34 - ...-relationships-in-a-relational-database.md | 38 - .../python-for-everybody/strings-and-lists.md | 51 -- .../python-for-everybody/strings-in-python.md | 63 -- .../the-tuples-collection.md | 63 -- .../using-web-services.md | 42 - .../variables-expressions-and-statements.md | 38 - .../visualizing-data-with-python.md | 42 - ...services-api-rate-limiting-and-security.md | 50 -- .../python-for-everybody/web-services-apis.md | 38 - .../python-for-everybody/web-services-json.md | 60 -- .../web-services-service-oriented-approach.md | 34 - .../web-services-xml-schema.md | 34 - .../python-for-everybody/web-services-xml.md | 47 -- .../working-with-lists.md | 38 - .../615389bd81347947ea7ba896.md | 91 --- .../60b69a66b6ddb80858c51578.md | 112 --- .../60b69a66b6ddb80858c51579.md | 63 -- .../60b69a66b6ddb80858c5157a.md | 56 -- .../60b69a66b6ddb80858c5157b.md | 50 -- .../60b69a66b6ddb80858c5157c.md | 51 -- .../60b69a66b6ddb80858c5157d.md | 54 -- .../60b69a66b6ddb80858c5157e.md | 56 -- .../60b69a66b6ddb80858c5157f.md | 69 -- .../60b69a66b6ddb80858c51580.md | 59 -- .../60b69a66b6ddb80858c51581.md | 68 -- .../60b69a66b6ddb80858c51582.md | 70 -- .../60b69a66b6ddb80858c51583.md | 84 -- .../60b69a66b6ddb80858c51584.md | 79 -- .../60b69a66b6ddb80858c51585.md | 74 -- .../60b69a66b6ddb80858c51586.md | 93 --- .../60b69a66b6ddb80858c51587.md | 91 --- .../60b69a66b6ddb80858c51588.md | 102 --- .../60b69a66b6ddb80858c51589.md | 88 --- .../60b69a66b6ddb80858c5158a.md | 107 --- .../60b69a66b6ddb80858c5158b.md | 105 --- .../60b69a66b6ddb80858c5158c.md | 116 --- .../60b69a66b6ddb80858c5158d.md | 114 --- .../60b69a66b6ddb80858c5158e.md | 105 --- .../60b69a66b6ddb80858c5158f.md | 126 --- .../60b69a66b6ddb80858c51590.md | 124 --- .../60b69a66b6ddb80858c51591.md | 115 --- .../60b69a66b6ddb80858c51592.md | 136 ---- .../60b69a66b6ddb80858c51593.md | 125 --- .../60b69a66b6ddb80858c51594.md | 135 ---- .../60b69a66b6ddb80858c51595.md | 146 ---- .../60b69a66b6ddb80858c51596.md | 144 ---- .../60b69a66b6ddb80858c51597.md | 135 ---- .../60b69a66b6ddb80858c51598.md | 142 ---- .../60b69a66b6ddb80858c51599.md | 156 ---- .../60b69a66b6ddb80858c5159a.md | 158 ---- .../60b69a66b6ddb80858c5159b.md | 161 ---- .../60b69a66b6ddb80858c5159c.md | 169 ---- .../60b69a66b6ddb80858c5159d.md | 167 ---- .../60b69a66b6ddb80858c5159e.md | 178 ----- .../60b69a66b6ddb80858c5159f.md | 183 ----- .../60b69a66b6ddb80858c515a0.md | 181 ----- .../60b69a66b6ddb80858c515a1.md | 192 ----- .../60b69a66b6ddb80858c515a2.md | 190 ----- .../60b69a66b6ddb80858c515a3.md | 201 ----- .../60b69a66b6ddb80858c515a4.md | 199 ----- .../60b69a66b6ddb80858c515a5.md | 190 ----- .../60b69a66b6ddb80858c515a6.md | 211 ----- .../60b69a66b6ddb80858c515a7.md | 217 ----- .../60b69a66b6ddb80858c515a8.md | 207 ----- .../60b69a66b6ddb80858c515a9.md | 217 ----- .../60b69a66b6ddb80858c515aa.md | 220 ------ .../60b69a66b6ddb80858c515ab.md | 225 ------ .../60b69a66b6ddb80858c515ac.md | 228 ------ .../60b69a66b6ddb80858c515ad.md | 225 ------ .../60b69a66b6ddb80858c515ae.md | 245 ------ .../60b69a66b6ddb80858c515af.md | 240 ------ .../60b69a66b6ddb80858c515b0.md | 238 ------ .../60b69a66b6ddb80858c515b1.md | 298 ------- .../60b69a66b6ddb80858c515b2.md | 281 ------- .../60b69a66b6ddb80858c515b3.md | 287 ------- .../60b69a66b6ddb80858c515b4.md | 285 ------- .../60b69a66b6ddb80858c515b5.md | 296 ------- .../60b69a66b6ddb80858c515b6.md | 282 ------- .../60b69a66b6ddb80858c515b7.md | 295 ------- .../60b69a66b6ddb80858c515b8.md | 286 ------- .../60b69a66b6ddb80858c515b9.md | 301 ------- .../60b69a66b6ddb80858c515ba.md | 304 ------- .../60b69a66b6ddb80858c515bc.md | 295 ------- .../60b69a66b6ddb80858c515bd.md | 348 -------- .../60b69a66b6ddb80858c515be.md | 337 -------- .../60b69a66b6ddb80858c515bf.md | 348 -------- .../60b69a66b6ddb80858c515c0.md | 359 --------- .../60b69a66b6ddb80858c515c1.md | 365 --------- .../60b69a66b6ddb80858c515c2.md | 363 --------- .../60b69a66b6ddb80858c515c3.md | 354 --------- .../60b69a66b6ddb80858c515c4.md | 381 --------- .../60b69a66b6ddb80858c515c5.md | 382 --------- .../60b69a66b6ddb80858c515c6.md | 388 --------- .../60b69a66b6ddb80858c515c7.md | 739 ----------------- .../60b80da8676fb3227967a731.md | 71 -- .../60ba890832b4940f24d1936b.md | 312 -------- .../60ba89123a445e0f5c9e4022.md | 326 -------- .../60ba8913f1704c0f7a8906b8.md | 312 -------- .../60ba89146b25080f99ab54ad.md | 315 -------- .../60ba8914bab51f0fb8228e9c.md | 310 -------- .../60ba929345ab0714a3743655.md | 327 -------- .../60ba9296d4d6b414c1b10995.md | 330 -------- .../60ba92987c1e4914dfa7a0b9.md | 321 -------- .../60bad32219ebcb4a8810ac6a.md | 164 ---- .../615f5c1cb7575c7551ed8a40.md | 116 --- .../615f6a7d4ba8037bc086c2c7.md | 127 --- .../caesars-cipher.md | 88 --- .../cash-register.md | 252 ------ .../palindrome-checker.md | 125 --- .../roman-numeral-converter.md | 215 ----- .../telephone-number-validator.md | 217 ----- .../62a3b365f1cdeb33efc2502e.md | 138 ---- .../62a8f2bc37675e77d5835235.md | 355 --------- .../659b0093d7db5a1a1122b7bd.md | 682 ++++++++++++++++ .../63ec14d1c216aa063f0be4af.md | 214 ----- .../63ec19978a066607e23439f8.md | 201 ----- .../63ec1a16f930b108b8a76806.md | 227 ------ .../63ec1bbf5584390a7d08d41f.md | 209 ----- .../63ec1cb59f2a4c0be5b6dfa0.md | 198 ----- .../63ec20a06fff670d37befbd9.md | 226 ------ .../63ec3287b182ec0efe8a3135.md | 472 ----------- .../63ec3427fc3e9214c9ed2a14.md | 281 ------- .../63ec36f6133df7160be3ec66.md | 277 ------- .../63ec47b454495519739486a7.md | 283 ------- .../63ee5d38a5d29d0696f8d820.md | 297 ------- .../63ee5d8f9e7168076e932fe2.md | 309 -------- .../63ee5e0f08e82208364c4128.md | 304 ------- .../63ee5ea8be892e0955ab346c.md | 303 ------- .../63ee5fc113bcb20a5db9214b.md | 300 ------- .../63ee611d478dca0b77f6a393.md | 316 -------- .../63ee7c664f9b65137d925c8a.md | 321 -------- .../63eea5cea403a81a68ae493c.md | 331 -------- .../63eea817673c8e1c22927fa6.md | 309 -------- .../63eea8e1e143ae1d098c8c9d.md | 311 -------- .../63eeb8e86becbf1e75c2cb0d.md | 312 -------- .../63eedebb0ec0231ff1cede1a.md | 327 -------- .../63efdbc22a0c56070beabed7.md | 323 -------- .../63efe370bbfc4a08d500118e.md | 324 -------- .../63eff02f00e69a0b2ac10b43.md | 317 -------- .../63eff98ffb1d5a0d24ec79cb.md | 336 -------- .../63effe558c87a70e7072e447.md | 327 -------- .../63f0165121a9181342d5bc66.md | 320 -------- .../63f017b4ad028a148eb713c0.md | 345 -------- .../63f01861f813e01564c95315.md | 325 -------- .../63f018f04e487e164dc27bd9.md | 349 -------- .../63f01c9791a0aa1751c73760.md | 334 -------- .../63f0224ceb16dc196d2c860a.md | 335 -------- .../63f026d041bc6c1a3d5cba0f.md | 339 -------- .../63f0284532742c1b26c7a052.md | 339 -------- .../63f0289df84a581bbdbd29b7.md | 339 -------- .../63f0295e673b661ccb299e8a.md | 350 -------- .../63f029b96b9e9e1df93be951.md | 342 -------- .../63f02a4ef92d711ec1ff618c.md | 377 --------- .../63f02b22cce1c11fe9604381.md | 348 -------- .../63f02bdeb9b428208b97eb6b.md | 368 --------- .../63f02c6e18773921ba50aa53.md | 361 --------- .../63f0311f5ea9382388d6124f.md | 347 -------- .../63f033fdb1fbcc254999fcc3.md | 339 -------- .../63f03446c2ed3e264be6c7fc.md | 335 -------- .../63f0348a54a177272071a595.md | 348 -------- .../63f034d012f74627ce538d3a.md | 357 --------- .../63f03686c5ea863533ec71f4.md | 353 --------- .../63f036ec91fdf238c90665f5.md | 352 --------- .../63f0370b340915399d31e5eb.md | 367 --------- .../63f0374d5351223a747c301d.md | 394 ---------- .../63f0378e173e3c3b7638b528.md | 352 --------- .../63f038a0ae041d3c5b0cdf23.md | 353 --------- .../63f038e671d3f73d5a041973.md | 371 --------- .../63f039dbcef7673e4e758fa3.md | 381 --------- .../63f03a7143a6ef3f7f3344f0.md | 378 --------- .../63f03ac2b428b2404a5a7518.md | 368 --------- .../63f03af535682e4138fdb915.md | 395 ---------- .../63f03b1ed5ab15420c057463.md | 744 ------------------ .../63f6721d5110af243ef8f3d9.md | 352 --------- .../step-001.md | 100 --- .../step-002.md | 114 --- .../step-003.md | 119 --- .../step-004.md | 112 --- .../step-005.md | 115 --- .../step-006.md | 113 --- .../step-007.md | 122 --- .../step-008.md | 119 --- .../step-009.md | 121 --- .../step-010.md | 116 --- .../step-011.md | 117 --- .../step-012.md | 129 --- .../step-013.md | 127 --- .../step-014.md | 125 --- .../step-015.md | 123 --- .../step-016.md | 122 --- .../step-017.md | 123 --- .../step-018.md | 139 ---- .../step-019.md | 139 ---- .../step-020.md | 147 ---- .../step-021.md | 136 ---- .../step-022.md | 139 ---- .../step-023.md | 133 ---- .../step-024.md | 131 --- .../step-025.md | 141 ---- .../step-026.md | 129 --- .../step-027.md | 141 ---- .../step-028.md | 143 ---- .../step-029.md | 151 ---- .../step-030.md | 154 ---- .../step-031.md | 151 ---- .../step-032.md | 151 ---- .../step-033.md | 149 ---- .../step-034.md | 153 ---- .../step-035.md | 161 ---- .../step-036.md | 153 ---- .../step-037.md | 154 ---- .../step-038.md | 159 ---- .../step-039.md | 158 ---- .../step-040.md | 167 ---- .../step-041.md | 170 ---- .../step-042.md | 175 ---- .../step-043.md | 175 ---- .../step-044.md | 174 ---- .../step-045.md | 183 ----- .../step-046.md | 192 ----- .../step-047.md | 182 ----- .../step-048.md | 193 ----- .../step-049.md | 199 ----- .../step-050.md | 199 ----- .../step-051.md | 206 ----- .../step-052.md | 207 ----- .../step-053.md | 203 ----- .../step-054.md | 204 ----- .../step-055.md | 210 ----- .../step-056.md | 214 ----- .../step-057.md | 211 ----- .../step-058.md | 218 ----- .../step-059.md | 220 ------ .../step-060.md | 220 ------ .../step-061.md | 222 ------ .../step-062.md | 226 ------ .../step-063.md | 230 ------ .../step-064.md | 226 ------ .../step-065.md | 238 ------ .../step-066.md | 243 ------ .../step-067.md | 250 ------ .../step-068.md | 243 ------ .../step-069.md | 244 ------ .../step-070.md | 259 ------ .../step-071.md | 257 ------ .../step-072.md | 263 ------- .../step-073.md | 271 ------- .../step-074.md | 269 ------- .../step-075.md | 277 ------- .../step-076.md | 185 ----- .../step-001.md | 78 -- .../step-002.md | 80 -- .../step-003.md | 84 -- .../step-004.md | 88 --- .../step-005.md | 94 --- .../step-006.md | 94 --- .../step-007.md | 90 --- .../step-008.md | 82 -- .../step-009.md | 84 -- .../step-010.md | 82 -- .../step-011.md | 87 -- .../step-012.md | 92 --- .../step-013.md | 98 --- .../step-014.md | 97 --- .../step-015.md | 102 --- .../step-016.md | 104 --- .../step-017.md | 100 --- .../step-018.md | 103 --- .../step-019.md | 110 --- .../step-020.md | 105 --- .../step-021.md | 107 --- .../step-022.md | 120 --- .../step-023.md | 114 --- .../step-024.md | 112 --- .../step-025.md | 120 --- .../step-026.md | 128 --- .../step-027.md | 131 --- .../step-028.md | 133 ---- .../step-029.md | 134 ---- .../step-030.md | 138 ---- .../step-031.md | 142 ---- .../step-032.md | 139 ---- .../step-033.md | 140 ---- .../step-034.md | 141 ---- .../step-035.md | 139 ---- .../step-036.md | 142 ---- .../step-037.md | 150 ---- .../step-038.md | 146 ---- .../step-039.md | 150 ---- .../step-040.md | 158 ---- .../step-041.md | 157 ---- .../step-042.md | 170 ---- .../step-043.md | 163 ---- .../step-044.md | 158 ---- .../step-045.md | 157 ---- .../step-046.md | 154 ---- .../step-047.md | 159 ---- .../step-048.md | 154 ---- .../step-049.md | 156 ---- .../step-050.md | 156 ---- .../step-051.md | 160 ---- .../step-052.md | 159 ---- .../step-053.md | 173 ---- .../step-054.md | 176 ----- .../step-055.md | 176 ----- .../step-056.md | 176 ----- .../step-057.md | 177 ----- .../step-058.md | 183 ----- .../step-059.md | 183 ----- .../step-060.md | 187 ----- .../step-061.md | 189 ----- .../step-062.md | 184 ----- .../step-063.md | 183 ----- .../step-064.md | 182 ----- .../step-065.md | 186 ----- .../step-066.md | 182 ----- .../step-067.md | 192 ----- .../step-068.md | 186 ----- .../step-069.md | 184 ----- .../step-070.md | 188 ----- .../step-071.md | 190 ----- .../step-072.md | 192 ----- .../step-073.md | 188 ----- .../step-074.md | 190 ----- .../step-075.md | 197 ----- .../step-076.md | 195 ----- .../step-077.md | 200 ----- .../step-078.md | 208 ----- .../step-079.md | 211 ----- .../step-080.md | 217 ----- .../step-081.md | 220 ------ .../step-082.md | 229 ------ .../step-083.md | 225 ------ .../step-084.md | 225 ------ .../step-085.md | 230 ------ .../step-086.md | 232 ------ .../step-087.md | 237 ------ .../step-088.md | 239 ------ .../step-089.md | 251 ------ .../step-090.md | 251 ------ .../step-091.md | 257 ------ .../step-092.md | 261 ------ .../step-093.md | 260 ------ .../step-094.md | 260 ------ .../step-095.md | 262 ------ .../step-096.md | 266 ------- .../step-097.md | 273 ------- .../step-098.md | 267 ------- .../step-099.md | 276 ------- .../step-100.md | 271 ------- .../step-101.md | 268 ------- .../step-102.md | 270 ------- .../step-103.md | 265 ------- .../step-104.md | 267 ------- .../step-105.md | 264 ------- .../step-106.md | 272 ------- .../step-107.md | 268 ------- .../step-108.md | 269 ------- .../step-109.md | 275 ------- .../step-110.md | 272 ------- .../step-111.md | 272 ------- .../step-112.md | 269 ------- .../step-113.md | 271 ------- .../step-114.md | 273 ------- .../step-115.md | 279 ------- .../step-116.md | 285 ------- .../step-117.md | 288 ------- .../step-118.md | 292 ------- .../step-119.md | 297 ------- .../step-120.md | 291 ------- .../step-121.md | 301 ------- .../step-122.md | 293 ------- .../step-123.md | 298 ------- .../step-124.md | 293 ------- .../step-125.md | 298 ------- .../step-126.md | 308 -------- .../step-127.md | 300 ------- .../step-128.md | 312 -------- .../step-129.md | 318 -------- .../step-130.md | 312 -------- .../step-131.md | 312 -------- .../step-132.md | 311 -------- .../step-133.md | 316 -------- .../step-134.md | 320 -------- .../step-135.md | 325 -------- .../step-136.md | 327 -------- .../step-137.md | 328 -------- .../step-138.md | 324 -------- .../step-139.md | 327 -------- .../step-140.md | 330 -------- .../step-141.md | 316 -------- .../659ebe52d74b132a1d75c891.md | 388 +++++++++ .../elements-and-tags-question-a.md | 54 -- .../elements-and-tags-question-b.md | 49 -- .../html-boilerplate-question-a.md | 54 -- .../html-boilerplate-question-b.md | 46 -- .../html-boilerplate-question-c.md | 65 -- .../html-boilerplate-question-d.md | 48 -- .../introduction-to-html-css-question-a.md | 41 - .../introduction-to-html-css-question-b.md | 36 - .../introduction-to-html-css-question-c.md | 33 - .../introduction-to-html-css-question-d.md | 34 - .../links-and-images-question-a.md | 66 -- .../links-and-images-question-b.md | 54 -- .../links-and-images-question-c.md | 55 -- .../links-and-images-question-d.md | 112 --- .../links-and-images-question-e.md | 98 --- .../links-and-images-question-f.md | 93 --- .../links-and-images-question-g.md | 93 --- .../links-and-images-question-h.md | 97 --- ...d-ordered-and-unordered-list-question-a.md | 65 -- ...d-ordered-and-unordered-list-question-b.md | 44 -- ...d-ordered-and-unordered-list-question-c.md | 44 -- .../working-with-text-question-a.md | 60 -- .../working-with-text-question-b.md | 39 - .../working-with-text-question-c.md | 47 -- .../working-with-text-question-d.md | 38 - .../working-with-text-question-e.md | 65 -- .../working-with-text-question-f.md | 66 -- .../working-with-text-question-g.md | 48 -- .../problem-1-multiples-of-3-and-5.md | 73 -- .../challenge-1.md | 93 --- .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../dialogue-introducing.md | 15 - .../i-am-im.md | 49 -- .../im.md | 21 - .../name-and-job-title.md | 53 -- .../right.md | 33 - .../team-lead.md | 33 - .../thats-right-2.md | 25 - .../thats-right.md | 49 -- .../you-are.md | 27 - .../655c0feadb1dd77f6cda623f.md | 15 + .../657b0f0be03b2137ed88b36c.md | 54 ++ .../657b106ced8c653be6b3218f.md | 50 ++ .../657b108cf870283d22b21e8e.md | 58 ++ .../657b110ad8afcc3f8e586362.md | 38 + .../657b115008a62d41c0d7482f.md | 49 ++ .../657b119f0ce64343420bb850.md | 49 ++ .../657b11e082e48a44eb4bfc09.md | 40 + .../657b11f87368cf463ea4fe46.md | 57 ++ .../657b1240ef768447b80817ad.md | 55 ++ .../657b12ae08dd7049b300c901.md | 49 ++ .../657b12e7c306334b7c320221.md | 41 + .../657b13088693ef4ce21ce0e4.md | 49 ++ .../657b133afcef714e542b557a.md | 49 ++ .../657b135e9029fb4f8141e40c.md | 49 ++ .../657b138d33db9e50f116b5f0.md | 54 ++ .../657b1431076b365555784189.md | 49 ++ .../657b145976723b56a97b8dda.md | 56 ++ .../657b149630b3ea5873269a38.md | 49 ++ .../657b14d8353d665a187fe771.md | 38 + .../657b153ac677705c7059530d.md | 62 ++ .../657b15dbcafe4d5f39a5de82.md | 54 ++ .../657b160d6a8662610fe6a523.md | 53 ++ .../657b163c9da40e62b904be1f.md | 46 ++ .../657b18e71067d6680b9ac5d3.md | 54 ++ .../657b1985ae17886b05b382b1.md | 54 ++ .../657b19bf7b32af6caf763ef7.md | 54 ++ .../657b1a03df3ec46eca276046.md | 38 + .../657b1a27dc6daf6ffd52ff1f.md | 55 ++ .../657b1a637e4dc571f8f4d3d7.md | 49 ++ .../657b1a9581015573806e1e20.md | 47 ++ .../657b1cc072206e7ac3db88b8.md | 39 + .../657b1d080265ba7c4f96bf79.md | 30 + .../657b1d4ec0e2587e8bcc95f7.md | 15 + .../657b1da0b27fef8117827ce5.md | 54 ++ .../657b1dfec76149836ea5c7d0.md | 30 + .../657b1e2fad2ffe84ab420a56.md | 49 ++ .../657b1e66159fec86336a737b.md | 54 ++ .../657b1e9a62603587747f7f45.md | 49 ++ .../657b1ee1de7216896b5b4361.md | 42 + .../657b1f0585d48f8ac0b19654.md | 40 + .../657b1f598f63008c8bdb20b8.md | 49 ++ .../657b1f981cd42e8dc3b282d9.md | 49 ++ .../657b1fe950c0df90346e5d12.md | 47 ++ .../657b201372864e91d4f5bb53.md | 39 + .../657b20338e0802931673c1e1.md | 26 + .../657b20985d315095e5c3851d.md | 54 ++ .../657b21e28a01039cb27b4f13.md | 50 ++ .../657b221b2ab0ac9e18a173ef.md | 35 + .../657b223e41ce6b9f9a01d214.md | 39 + .../657b227f7ad32ea17e2cdf28.md | 15 + .../657b2310b8cd52a4f15c1818.md | 56 ++ .../657b2340be1593a6517fe77b.md | 39 + .../657b236aa1eb9fa7b209aa03.md | 54 ++ .../657b23a413d28da927e087ca.md | 36 + .../657b23bc0e32f9aa9c62eb82.md | 50 ++ .../657b23f03b449aac2c517089.md | 27 + .../657b242d06512dadaea55056.md | 49 ++ .../657b24542024c8af092cd6c4.md | 39 + .../657b24774d8cdab052ffe2a6.md | 48 ++ .../657b24a500800cb1c6945da9.md | 40 + .../657b2be1b19500c63fc1a467.md | 41 + .../657b2c040bb5f6c77fa5df80.md | 38 + .../657b2d618b8851cc5baf9490.md | 38 + .../657b2d9cb974dace59024964.md | 54 ++ .../657b2dd7745fdcd03e5160f4.md | 15 + .../657b2e0666d4a9d1b851f90e.md | 54 ++ .../657b2ec6c054efd71e503a27.md | 49 ++ .../657b2eeb31e435d89ecce6f3.md | 33 + .../657b2f0b3bcfe7d9f4151854.md | 54 ++ .../657b2f3bf7a2cbdb58d959d5.md | 49 ++ .../657b2f6cb66826dcbac08094.md | 49 ++ .../657b2fa89ddc20de629ca21f.md | 38 + .../657b2fc9c0f96bdfddfce4d9.md | 46 ++ .../657b2fea728c2be14a8a98c4.md | 49 ++ .../657b3026ff79fbe2dda6cb39.md | 54 ++ .../657b306fe94f29e4b4aa9105.md | 55 ++ .../657b30ac03b523e6640deaf1.md | 49 ++ .../657b30e1b9f035e7e656fd01.md | 54 ++ .../657b315533e4edeba65111b8.md | 54 ++ .../657b46c9be150f577f5a1086.md | 15 + .../dialogue-placeholder.md | 15 - .../dialogue-placeholder.md | 15 - .../challenge-1.md | 41 - .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../build-a-personal-portfolio-webpage.md | 281 ------- .../build-a-product-landing-page.md | 470 ----------- .../build-a-survey-form.md | 518 ------------ .../build-a-technical-documentation-page.md | 529 ------------- .../build-a-tribute-page.md | 325 -------- .../build-your-own-functions.md | 71 -- .../comparing-and-sorting-tuples.md | 61 -- .../conditional-execution.md | 54 -- .../data-visualization-mailing-lists.md | 56 -- .../data-visualization-page-rank.md | 34 - .../dictionaries-and-loops.md | 53 -- .../dictionaries-common-applications.md | 47 -- .../files-as-a-sequence.md | 44 -- .../intermediate-expressions.md | 56 -- .../intermediate-strings.md | 53 -- .../introduction-elements-of-python.md | 40 - .../introduction-hardware-achitecture.md | 34 - .../introduction-python-as-a-language.md | 43 - .../introduction-why-program.md | 54 -- .../iterations-definite-loops.md | 43 - .../iterations-loop-idioms.md | 49 -- .../iterations-more-patterns.md | 52 -- .../loops-and-iterations.md | 55 -- .../make-a-relational-database.md | 52 -- .../more-conditional-structures.md | 60 -- .../networking-protocol.md | 38 - .../networking-text-processing.md | 34 - .../networking-using-urllib-in-python.md | 41 - .../networking-web-scraping-with-python.md | 60 -- .../networking-with-python.md | 38 - .../networking-write-a-web-browser.md | 54 -- .../python-for-everybody/object-lifecycle.md | 71 -- .../objects-a-sample-class.md | 62 -- .../objects-inheritance.md | 38 - .../python-dictionaries.md | 59 -- .../python-for-everybody/python-functions.md | 42 - .../python-for-everybody/python-lists.md | 43 - .../python-for-everybody/python-objects.md | 38 - .../python-for-everybody/reading-files.md | 42 - ...xpressions-matching-and-extracting-data.md | 45 -- ...ular-expressions-practical-applications.md | 38 - .../regular-expressions.md | 42 - .../relational-database-design.md | 38 - .../relational-databases-and-sqlite.md | 44 -- .../relational-databases-join-operation.md | 34 - ...al-databases-many-to-many-relationships.md | 52 -- ...ational-databases-relationship-building.md | 34 - ...-relationships-in-a-relational-database.md | 38 - .../python-for-everybody/strings-and-lists.md | 51 -- .../python-for-everybody/strings-in-python.md | 63 -- .../the-tuples-collection.md | 63 -- .../using-web-services.md | 42 - .../variables-expressions-and-statements.md | 38 - .../visualizing-data-with-python.md | 42 - ...services-api-rate-limiting-and-security.md | 50 -- .../python-for-everybody/web-services-apis.md | 38 - .../python-for-everybody/web-services-json.md | 60 -- .../web-services-service-oriented-approach.md | 34 - .../web-services-xml-schema.md | 34 - .../python-for-everybody/web-services-xml.md | 47 -- .../working-with-lists.md | 38 - .../5f33310c1851c6c4da013250.md | 59 -- .../615389bd81347947ea7ba896.md | 91 --- .../60b69a66b6ddb80858c51578.md | 112 --- .../60b69a66b6ddb80858c51579.md | 63 -- .../60b69a66b6ddb80858c5157a.md | 56 -- .../60b69a66b6ddb80858c5157b.md | 50 -- .../60b69a66b6ddb80858c5157c.md | 51 -- .../60b69a66b6ddb80858c5157d.md | 54 -- .../60b69a66b6ddb80858c5157e.md | 56 -- .../60b69a66b6ddb80858c5157f.md | 69 -- .../60b69a66b6ddb80858c51580.md | 59 -- .../60b69a66b6ddb80858c51581.md | 68 -- .../60b69a66b6ddb80858c51582.md | 70 -- .../60b69a66b6ddb80858c51583.md | 84 -- .../60b69a66b6ddb80858c51584.md | 79 -- .../60b69a66b6ddb80858c51585.md | 74 -- .../60b69a66b6ddb80858c51586.md | 93 --- .../60b69a66b6ddb80858c51587.md | 91 --- .../60b69a66b6ddb80858c51588.md | 102 --- .../60b69a66b6ddb80858c51589.md | 88 --- .../60b69a66b6ddb80858c5158a.md | 107 --- .../60b69a66b6ddb80858c5158b.md | 105 --- .../60b69a66b6ddb80858c5158c.md | 116 --- .../60b69a66b6ddb80858c5158d.md | 114 --- .../60b69a66b6ddb80858c5158e.md | 105 --- .../60b69a66b6ddb80858c5158f.md | 126 --- .../60b69a66b6ddb80858c51590.md | 124 --- .../60b69a66b6ddb80858c51591.md | 115 --- .../60b69a66b6ddb80858c51592.md | 136 ---- .../60b69a66b6ddb80858c51593.md | 125 --- .../60b69a66b6ddb80858c51594.md | 135 ---- .../60b69a66b6ddb80858c51595.md | 146 ---- .../60b69a66b6ddb80858c51596.md | 144 ---- .../60b69a66b6ddb80858c51597.md | 135 ---- .../60b69a66b6ddb80858c51598.md | 142 ---- .../60b69a66b6ddb80858c51599.md | 156 ---- .../60b69a66b6ddb80858c5159a.md | 158 ---- .../60b69a66b6ddb80858c5159b.md | 161 ---- .../60b69a66b6ddb80858c5159c.md | 169 ---- .../60b69a66b6ddb80858c5159d.md | 167 ---- .../60b69a66b6ddb80858c5159e.md | 178 ----- .../60b69a66b6ddb80858c5159f.md | 183 ----- .../60b69a66b6ddb80858c515a0.md | 181 ----- .../60b69a66b6ddb80858c515a1.md | 192 ----- .../60b69a66b6ddb80858c515a2.md | 190 ----- .../60b69a66b6ddb80858c515a3.md | 201 ----- .../60b69a66b6ddb80858c515a4.md | 199 ----- .../60b69a66b6ddb80858c515a5.md | 190 ----- .../60b69a66b6ddb80858c515a6.md | 211 ----- .../60b69a66b6ddb80858c515a7.md | 217 ----- .../60b69a66b6ddb80858c515a8.md | 207 ----- .../60b69a66b6ddb80858c515a9.md | 217 ----- .../60b69a66b6ddb80858c515aa.md | 220 ------ .../60b69a66b6ddb80858c515ab.md | 225 ------ .../60b69a66b6ddb80858c515ac.md | 228 ------ .../60b69a66b6ddb80858c515ad.md | 225 ------ .../60b69a66b6ddb80858c515ae.md | 245 ------ .../60b69a66b6ddb80858c515af.md | 240 ------ .../60b69a66b6ddb80858c515b0.md | 238 ------ .../60b69a66b6ddb80858c515b1.md | 298 ------- .../60b69a66b6ddb80858c515b2.md | 281 ------- .../60b69a66b6ddb80858c515b3.md | 287 ------- .../60b69a66b6ddb80858c515b4.md | 285 ------- .../60b69a66b6ddb80858c515b5.md | 296 ------- .../60b69a66b6ddb80858c515b6.md | 282 ------- .../60b69a66b6ddb80858c515b7.md | 295 ------- .../60b69a66b6ddb80858c515b8.md | 286 ------- .../60b69a66b6ddb80858c515b9.md | 301 ------- .../60b69a66b6ddb80858c515ba.md | 304 ------- .../60b69a66b6ddb80858c515bc.md | 295 ------- .../60b69a66b6ddb80858c515bd.md | 348 -------- .../60b69a66b6ddb80858c515be.md | 337 -------- .../60b69a66b6ddb80858c515bf.md | 348 -------- .../60b69a66b6ddb80858c515c0.md | 359 --------- .../60b69a66b6ddb80858c515c1.md | 365 --------- .../60b69a66b6ddb80858c515c2.md | 363 --------- .../60b69a66b6ddb80858c515c3.md | 354 --------- .../60b69a66b6ddb80858c515c4.md | 381 --------- .../60b69a66b6ddb80858c515c5.md | 382 --------- .../60b69a66b6ddb80858c515c6.md | 388 --------- .../60b69a66b6ddb80858c515c7.md | 739 ----------------- .../60b80da8676fb3227967a731.md | 71 -- .../60ba890832b4940f24d1936b.md | 312 -------- .../60ba89123a445e0f5c9e4022.md | 326 -------- .../60ba8913f1704c0f7a8906b8.md | 312 -------- .../60ba89146b25080f99ab54ad.md | 315 -------- .../60ba8914bab51f0fb8228e9c.md | 310 -------- .../60ba929345ab0714a3743655.md | 327 -------- .../60ba9296d4d6b414c1b10995.md | 330 -------- .../60ba92987c1e4914dfa7a0b9.md | 321 -------- .../60bad32219ebcb4a8810ac6a.md | 164 ---- .../615f5c1cb7575c7551ed8a40.md | 116 --- .../615f6a7d4ba8037bc086c2c7.md | 127 --- .../caesars-cipher.md | 88 --- .../cash-register.md | 252 ------ .../palindrome-checker.md | 125 --- .../roman-numeral-converter.md | 215 ----- .../telephone-number-validator.md | 217 ----- .../62a3b365f1cdeb33efc2502e.md | 138 ---- .../62a8f2bc37675e77d5835235.md | 355 --------- .../659b0093d7db5a1a1122b7bd.md | 682 ++++++++++++++++ .../63ec14d1c216aa063f0be4af.md | 214 ----- .../63ec19978a066607e23439f8.md | 201 ----- .../63ec1a16f930b108b8a76806.md | 227 ------ .../63ec1bbf5584390a7d08d41f.md | 209 ----- .../63ec1cb59f2a4c0be5b6dfa0.md | 198 ----- .../63ec20a06fff670d37befbd9.md | 226 ------ .../63ec3287b182ec0efe8a3135.md | 472 ----------- .../63ec3427fc3e9214c9ed2a14.md | 281 ------- .../63ec36f6133df7160be3ec66.md | 277 ------- .../63ec47b454495519739486a7.md | 283 ------- .../63ee5d38a5d29d0696f8d820.md | 297 ------- .../63ee5d8f9e7168076e932fe2.md | 309 -------- .../63ee5e0f08e82208364c4128.md | 304 ------- .../63ee5ea8be892e0955ab346c.md | 303 ------- .../63ee5fc113bcb20a5db9214b.md | 300 ------- .../63ee611d478dca0b77f6a393.md | 316 -------- .../63ee7c664f9b65137d925c8a.md | 321 -------- .../63eea5cea403a81a68ae493c.md | 331 -------- .../63eea817673c8e1c22927fa6.md | 309 -------- .../63eea8e1e143ae1d098c8c9d.md | 311 -------- .../63eeb8e86becbf1e75c2cb0d.md | 312 -------- .../63eedebb0ec0231ff1cede1a.md | 327 -------- .../63efdbc22a0c56070beabed7.md | 323 -------- .../63efe370bbfc4a08d500118e.md | 324 -------- .../63eff02f00e69a0b2ac10b43.md | 317 -------- .../63eff98ffb1d5a0d24ec79cb.md | 336 -------- .../63effe558c87a70e7072e447.md | 327 -------- .../63f0165121a9181342d5bc66.md | 320 -------- .../63f017b4ad028a148eb713c0.md | 345 -------- .../63f01861f813e01564c95315.md | 325 -------- .../63f018f04e487e164dc27bd9.md | 349 -------- .../63f01c9791a0aa1751c73760.md | 334 -------- .../63f0224ceb16dc196d2c860a.md | 335 -------- .../63f026d041bc6c1a3d5cba0f.md | 339 -------- .../63f0284532742c1b26c7a052.md | 339 -------- .../63f0289df84a581bbdbd29b7.md | 339 -------- .../63f0295e673b661ccb299e8a.md | 350 -------- .../63f029b96b9e9e1df93be951.md | 342 -------- .../63f02a4ef92d711ec1ff618c.md | 377 --------- .../63f02b22cce1c11fe9604381.md | 348 -------- .../63f02bdeb9b428208b97eb6b.md | 368 --------- .../63f02c6e18773921ba50aa53.md | 361 --------- .../63f0311f5ea9382388d6124f.md | 347 -------- .../63f033fdb1fbcc254999fcc3.md | 339 -------- .../63f03446c2ed3e264be6c7fc.md | 335 -------- .../63f0348a54a177272071a595.md | 348 -------- .../63f034d012f74627ce538d3a.md | 357 --------- .../63f03686c5ea863533ec71f4.md | 353 --------- .../63f036ec91fdf238c90665f5.md | 352 --------- .../63f0370b340915399d31e5eb.md | 367 --------- .../63f0374d5351223a747c301d.md | 394 ---------- .../63f0378e173e3c3b7638b528.md | 352 --------- .../63f038a0ae041d3c5b0cdf23.md | 353 --------- .../63f038e671d3f73d5a041973.md | 371 --------- .../63f039dbcef7673e4e758fa3.md | 381 --------- .../63f03a7143a6ef3f7f3344f0.md | 378 --------- .../63f03ac2b428b2404a5a7518.md | 368 --------- .../63f03af535682e4138fdb915.md | 395 ---------- .../63f03b1ed5ab15420c057463.md | 744 ------------------ .../63f6721d5110af243ef8f3d9.md | 352 --------- .../step-001.md | 100 --- .../step-002.md | 114 --- .../step-003.md | 119 --- .../step-004.md | 112 --- .../step-005.md | 115 --- .../step-006.md | 113 --- .../step-007.md | 122 --- .../step-008.md | 119 --- .../step-009.md | 121 --- .../step-010.md | 116 --- .../step-011.md | 117 --- .../step-012.md | 129 --- .../step-013.md | 127 --- .../step-014.md | 125 --- .../step-015.md | 123 --- .../step-016.md | 122 --- .../step-017.md | 123 --- .../step-018.md | 139 ---- .../step-019.md | 139 ---- .../step-020.md | 147 ---- .../step-021.md | 136 ---- .../step-022.md | 139 ---- .../step-023.md | 133 ---- .../step-024.md | 131 --- .../step-025.md | 141 ---- .../step-026.md | 129 --- .../step-027.md | 141 ---- .../step-028.md | 143 ---- .../step-029.md | 151 ---- .../step-030.md | 154 ---- .../step-031.md | 151 ---- .../step-032.md | 151 ---- .../step-033.md | 149 ---- .../step-034.md | 153 ---- .../step-035.md | 161 ---- .../step-036.md | 153 ---- .../step-037.md | 154 ---- .../step-038.md | 159 ---- .../step-039.md | 158 ---- .../step-040.md | 167 ---- .../step-041.md | 170 ---- .../step-042.md | 175 ---- .../step-043.md | 175 ---- .../step-044.md | 174 ---- .../step-045.md | 183 ----- .../step-046.md | 192 ----- .../step-047.md | 182 ----- .../step-048.md | 193 ----- .../step-049.md | 199 ----- .../step-050.md | 199 ----- .../step-051.md | 206 ----- .../step-052.md | 207 ----- .../step-053.md | 203 ----- .../step-054.md | 204 ----- .../step-055.md | 210 ----- .../step-056.md | 214 ----- .../step-057.md | 211 ----- .../step-058.md | 218 ----- .../step-059.md | 220 ------ .../step-060.md | 220 ------ .../step-061.md | 222 ------ .../step-062.md | 226 ------ .../step-063.md | 230 ------ .../step-064.md | 226 ------ .../step-065.md | 238 ------ .../step-066.md | 243 ------ .../step-067.md | 250 ------ .../step-068.md | 243 ------ .../step-069.md | 244 ------ .../step-070.md | 259 ------ .../step-071.md | 257 ------ .../step-072.md | 263 ------- .../step-073.md | 271 ------- .../step-074.md | 269 ------- .../step-075.md | 277 ------- .../step-076.md | 185 ----- .../step-001.md | 78 -- .../step-002.md | 80 -- .../step-003.md | 84 -- .../step-004.md | 88 --- .../step-005.md | 94 --- .../step-006.md | 94 --- .../step-007.md | 90 --- .../step-008.md | 82 -- .../step-009.md | 84 -- .../step-010.md | 82 -- .../step-011.md | 87 -- .../step-012.md | 92 --- .../step-013.md | 98 --- .../step-014.md | 97 --- .../step-015.md | 102 --- .../step-016.md | 104 --- .../step-017.md | 100 --- .../step-018.md | 103 --- .../step-019.md | 110 --- .../step-020.md | 105 --- .../step-021.md | 107 --- .../step-022.md | 120 --- .../step-023.md | 114 --- .../step-024.md | 112 --- .../step-025.md | 120 --- .../step-026.md | 128 --- .../step-027.md | 131 --- .../step-028.md | 133 ---- .../step-029.md | 134 ---- .../step-030.md | 138 ---- .../step-031.md | 142 ---- .../step-032.md | 139 ---- .../step-033.md | 140 ---- .../step-034.md | 141 ---- .../step-035.md | 139 ---- .../step-036.md | 142 ---- .../step-037.md | 150 ---- .../step-038.md | 146 ---- .../step-039.md | 150 ---- .../step-040.md | 158 ---- .../step-041.md | 157 ---- .../step-042.md | 170 ---- .../step-043.md | 163 ---- .../step-044.md | 158 ---- .../step-045.md | 157 ---- .../step-046.md | 154 ---- .../step-047.md | 159 ---- .../step-048.md | 154 ---- .../step-049.md | 156 ---- .../step-050.md | 156 ---- .../step-051.md | 160 ---- .../step-052.md | 159 ---- .../step-053.md | 173 ---- .../step-054.md | 176 ----- .../step-055.md | 176 ----- .../step-056.md | 176 ----- .../step-057.md | 177 ----- .../step-058.md | 183 ----- .../step-059.md | 183 ----- .../step-060.md | 187 ----- .../step-061.md | 189 ----- .../step-062.md | 184 ----- .../step-063.md | 183 ----- .../step-064.md | 182 ----- .../step-065.md | 186 ----- .../step-066.md | 182 ----- .../step-067.md | 192 ----- .../step-068.md | 186 ----- .../step-069.md | 184 ----- .../step-070.md | 188 ----- .../step-071.md | 190 ----- .../step-072.md | 192 ----- .../step-073.md | 188 ----- .../step-074.md | 190 ----- .../step-075.md | 197 ----- .../step-076.md | 195 ----- .../step-077.md | 200 ----- .../step-078.md | 208 ----- .../step-079.md | 211 ----- .../step-080.md | 217 ----- .../step-081.md | 220 ------ .../step-082.md | 229 ------ .../step-083.md | 225 ------ .../step-084.md | 225 ------ .../step-085.md | 230 ------ .../step-086.md | 232 ------ .../step-087.md | 237 ------ .../step-088.md | 239 ------ .../step-089.md | 251 ------ .../step-090.md | 251 ------ .../step-091.md | 257 ------ .../step-092.md | 261 ------ .../step-093.md | 260 ------ .../step-094.md | 260 ------ .../step-095.md | 262 ------ .../step-096.md | 266 ------- .../step-097.md | 273 ------- .../step-098.md | 267 ------- .../step-099.md | 276 ------- .../step-100.md | 271 ------- .../step-101.md | 268 ------- .../step-102.md | 270 ------- .../step-103.md | 265 ------- .../step-104.md | 267 ------- .../step-105.md | 264 ------- .../step-106.md | 272 ------- .../step-107.md | 268 ------- .../step-108.md | 269 ------- .../step-109.md | 275 ------- .../step-110.md | 272 ------- .../step-111.md | 272 ------- .../step-112.md | 269 ------- .../step-113.md | 271 ------- .../step-114.md | 273 ------- .../step-115.md | 279 ------- .../step-116.md | 285 ------- .../step-117.md | 288 ------- .../step-118.md | 292 ------- .../step-119.md | 297 ------- .../step-120.md | 291 ------- .../step-121.md | 301 ------- .../step-122.md | 293 ------- .../step-123.md | 298 ------- .../step-124.md | 293 ------- .../step-125.md | 298 ------- .../step-126.md | 308 -------- .../step-127.md | 300 ------- .../step-128.md | 312 -------- .../step-129.md | 318 -------- .../step-130.md | 312 -------- .../step-131.md | 312 -------- .../step-132.md | 311 -------- .../step-133.md | 316 -------- .../step-134.md | 320 -------- .../step-135.md | 325 -------- .../step-136.md | 327 -------- .../step-137.md | 328 -------- .../step-138.md | 324 -------- .../step-139.md | 327 -------- .../step-140.md | 330 -------- .../step-141.md | 316 -------- .../659ebe52d74b132a1d75c891.md | 388 +++++++++ .../elements-and-tags-question-a.md | 54 -- .../elements-and-tags-question-b.md | 49 -- .../html-boilerplate-question-a.md | 54 -- .../html-boilerplate-question-b.md | 46 -- .../html-boilerplate-question-c.md | 65 -- .../html-boilerplate-question-d.md | 48 -- .../introduction-to-html-css-question-a.md | 41 - .../introduction-to-html-css-question-b.md | 36 - .../introduction-to-html-css-question-c.md | 33 - .../introduction-to-html-css-question-d.md | 34 - .../links-and-images-question-a.md | 66 -- .../links-and-images-question-b.md | 54 -- .../links-and-images-question-c.md | 55 -- .../links-and-images-question-d.md | 112 --- .../links-and-images-question-e.md | 98 --- .../links-and-images-question-f.md | 93 --- .../links-and-images-question-g.md | 93 --- .../links-and-images-question-h.md | 97 --- ...d-ordered-and-unordered-list-question-a.md | 65 -- ...d-ordered-and-unordered-list-question-b.md | 44 -- ...d-ordered-and-unordered-list-question-c.md | 44 -- .../working-with-text-question-a.md | 60 -- .../working-with-text-question-b.md | 39 - .../working-with-text-question-c.md | 47 -- .../working-with-text-question-d.md | 38 - .../working-with-text-question-e.md | 65 -- .../working-with-text-question-f.md | 66 -- .../working-with-text-question-g.md | 48 -- .../problem-1-multiples-of-3-and-5.md | 73 -- .../challenge-1.md | 93 --- .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../dialogue-introducing.md | 15 - .../i-am-im.md | 49 -- .../im.md | 21 - .../name-and-job-title.md | 53 -- .../right.md | 33 - .../team-lead.md | 33 - .../thats-right-2.md | 25 - .../thats-right.md | 49 -- .../you-are.md | 27 - .../655c0feadb1dd77f6cda623f.md | 15 + .../657b0f0be03b2137ed88b36c.md | 54 ++ .../657b106ced8c653be6b3218f.md | 50 ++ .../657b108cf870283d22b21e8e.md | 58 ++ .../657b110ad8afcc3f8e586362.md | 38 + .../657b115008a62d41c0d7482f.md | 49 ++ .../657b119f0ce64343420bb850.md | 49 ++ .../657b11e082e48a44eb4bfc09.md | 40 + .../657b11f87368cf463ea4fe46.md | 57 ++ .../657b1240ef768447b80817ad.md | 55 ++ .../657b12ae08dd7049b300c901.md | 49 ++ .../657b12e7c306334b7c320221.md | 41 + .../657b13088693ef4ce21ce0e4.md | 49 ++ .../657b133afcef714e542b557a.md | 49 ++ .../657b135e9029fb4f8141e40c.md | 49 ++ .../657b138d33db9e50f116b5f0.md | 54 ++ .../657b1431076b365555784189.md | 49 ++ .../657b145976723b56a97b8dda.md | 56 ++ .../657b149630b3ea5873269a38.md | 49 ++ .../657b14d8353d665a187fe771.md | 38 + .../657b153ac677705c7059530d.md | 62 ++ .../657b15dbcafe4d5f39a5de82.md | 54 ++ .../657b160d6a8662610fe6a523.md | 53 ++ .../657b163c9da40e62b904be1f.md | 46 ++ .../657b18e71067d6680b9ac5d3.md | 54 ++ .../657b1985ae17886b05b382b1.md | 54 ++ .../657b19bf7b32af6caf763ef7.md | 54 ++ .../657b1a03df3ec46eca276046.md | 38 + .../657b1a27dc6daf6ffd52ff1f.md | 55 ++ .../657b1a637e4dc571f8f4d3d7.md | 49 ++ .../657b1a9581015573806e1e20.md | 47 ++ .../657b1cc072206e7ac3db88b8.md | 39 + .../657b1d080265ba7c4f96bf79.md | 30 + .../657b1d4ec0e2587e8bcc95f7.md | 15 + .../657b1da0b27fef8117827ce5.md | 54 ++ .../657b1dfec76149836ea5c7d0.md | 30 + .../657b1e2fad2ffe84ab420a56.md | 49 ++ .../657b1e66159fec86336a737b.md | 54 ++ .../657b1e9a62603587747f7f45.md | 49 ++ .../657b1ee1de7216896b5b4361.md | 42 + .../657b1f0585d48f8ac0b19654.md | 40 + .../657b1f598f63008c8bdb20b8.md | 49 ++ .../657b1f981cd42e8dc3b282d9.md | 49 ++ .../657b1fe950c0df90346e5d12.md | 47 ++ .../657b201372864e91d4f5bb53.md | 39 + .../657b20338e0802931673c1e1.md | 26 + .../657b20985d315095e5c3851d.md | 54 ++ .../657b21e28a01039cb27b4f13.md | 50 ++ .../657b221b2ab0ac9e18a173ef.md | 35 + .../657b223e41ce6b9f9a01d214.md | 39 + .../657b227f7ad32ea17e2cdf28.md | 15 + .../657b2310b8cd52a4f15c1818.md | 56 ++ .../657b2340be1593a6517fe77b.md | 39 + .../657b236aa1eb9fa7b209aa03.md | 54 ++ .../657b23a413d28da927e087ca.md | 36 + .../657b23bc0e32f9aa9c62eb82.md | 50 ++ .../657b23f03b449aac2c517089.md | 27 + .../657b242d06512dadaea55056.md | 49 ++ .../657b24542024c8af092cd6c4.md | 39 + .../657b24774d8cdab052ffe2a6.md | 48 ++ .../657b24a500800cb1c6945da9.md | 40 + .../657b2be1b19500c63fc1a467.md | 41 + .../657b2c040bb5f6c77fa5df80.md | 38 + .../657b2d618b8851cc5baf9490.md | 38 + .../657b2d9cb974dace59024964.md | 54 ++ .../657b2dd7745fdcd03e5160f4.md | 15 + .../657b2e0666d4a9d1b851f90e.md | 54 ++ .../657b2ec6c054efd71e503a27.md | 49 ++ .../657b2eeb31e435d89ecce6f3.md | 33 + .../657b2f0b3bcfe7d9f4151854.md | 54 ++ .../657b2f3bf7a2cbdb58d959d5.md | 49 ++ .../657b2f6cb66826dcbac08094.md | 49 ++ .../657b2fa89ddc20de629ca21f.md | 38 + .../657b2fc9c0f96bdfddfce4d9.md | 46 ++ .../657b2fea728c2be14a8a98c4.md | 49 ++ .../657b3026ff79fbe2dda6cb39.md | 54 ++ .../657b306fe94f29e4b4aa9105.md | 55 ++ .../657b30ac03b523e6640deaf1.md | 49 ++ .../657b30e1b9f035e7e656fd01.md | 54 ++ .../657b315533e4edeba65111b8.md | 54 ++ .../657b46c9be150f577f5a1086.md | 15 + .../dialogue-placeholder.md | 15 - .../dialogue-placeholder.md | 15 - .../challenge-1.md | 41 - .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../build-a-personal-portfolio-webpage.md | 281 ------- .../build-a-product-landing-page.md | 470 ----------- .../build-a-survey-form.md | 518 ------------ .../build-a-technical-documentation-page.md | 529 ------------- .../build-a-tribute-page.md | 325 -------- .../build-your-own-functions.md | 71 -- .../comparing-and-sorting-tuples.md | 61 -- .../conditional-execution.md | 54 -- .../data-visualization-mailing-lists.md | 56 -- .../data-visualization-page-rank.md | 34 - .../dictionaries-and-loops.md | 53 -- .../dictionaries-common-applications.md | 47 -- .../files-as-a-sequence.md | 44 -- .../intermediate-expressions.md | 56 -- .../intermediate-strings.md | 53 -- .../introduction-elements-of-python.md | 40 - .../introduction-hardware-achitecture.md | 34 - .../introduction-python-as-a-language.md | 43 - .../introduction-why-program.md | 54 -- .../iterations-definite-loops.md | 43 - .../iterations-loop-idioms.md | 49 -- .../iterations-more-patterns.md | 52 -- .../loops-and-iterations.md | 55 -- .../make-a-relational-database.md | 52 -- .../more-conditional-structures.md | 60 -- .../networking-protocol.md | 38 - .../networking-text-processing.md | 34 - .../networking-using-urllib-in-python.md | 41 - .../networking-web-scraping-with-python.md | 60 -- .../networking-with-python.md | 38 - .../networking-write-a-web-browser.md | 54 -- .../python-for-everybody/object-lifecycle.md | 71 -- .../objects-a-sample-class.md | 62 -- .../objects-inheritance.md | 38 - .../python-dictionaries.md | 59 -- .../python-for-everybody/python-functions.md | 42 - .../python-for-everybody/python-lists.md | 43 - .../python-for-everybody/python-objects.md | 38 - .../python-for-everybody/reading-files.md | 42 - ...xpressions-matching-and-extracting-data.md | 45 -- ...ular-expressions-practical-applications.md | 38 - .../regular-expressions.md | 42 - .../relational-database-design.md | 38 - .../relational-databases-and-sqlite.md | 44 -- .../relational-databases-join-operation.md | 34 - ...al-databases-many-to-many-relationships.md | 52 -- ...ational-databases-relationship-building.md | 34 - ...-relationships-in-a-relational-database.md | 38 - .../python-for-everybody/strings-and-lists.md | 51 -- .../python-for-everybody/strings-in-python.md | 63 -- .../the-tuples-collection.md | 63 -- .../using-web-services.md | 42 - .../variables-expressions-and-statements.md | 38 - .../visualizing-data-with-python.md | 42 - ...services-api-rate-limiting-and-security.md | 50 -- .../python-for-everybody/web-services-apis.md | 38 - .../python-for-everybody/web-services-json.md | 60 -- .../web-services-service-oriented-approach.md | 34 - .../web-services-xml-schema.md | 34 - .../python-for-everybody/web-services-xml.md | 47 -- .../working-with-lists.md | 38 - .../5f33310c1851c6c4da013250.md | 59 -- .../615389bd81347947ea7ba896.md | 91 --- .../60b69a66b6ddb80858c51578.md | 112 --- .../60b69a66b6ddb80858c51579.md | 63 -- .../60b69a66b6ddb80858c5157a.md | 56 -- .../60b69a66b6ddb80858c5157b.md | 50 -- .../60b69a66b6ddb80858c5157c.md | 51 -- .../60b69a66b6ddb80858c5157d.md | 54 -- .../60b69a66b6ddb80858c5157e.md | 56 -- .../60b69a66b6ddb80858c5157f.md | 69 -- .../60b69a66b6ddb80858c51580.md | 59 -- .../60b69a66b6ddb80858c51581.md | 68 -- .../60b69a66b6ddb80858c51582.md | 70 -- .../60b69a66b6ddb80858c51583.md | 84 -- .../60b69a66b6ddb80858c51584.md | 79 -- .../60b69a66b6ddb80858c51585.md | 74 -- .../60b69a66b6ddb80858c51586.md | 93 --- .../60b69a66b6ddb80858c51587.md | 91 --- .../60b69a66b6ddb80858c51588.md | 102 --- .../60b69a66b6ddb80858c51589.md | 88 --- .../60b69a66b6ddb80858c5158a.md | 107 --- .../60b69a66b6ddb80858c5158b.md | 105 --- .../60b69a66b6ddb80858c5158c.md | 116 --- .../60b69a66b6ddb80858c5158d.md | 114 --- .../60b69a66b6ddb80858c5158e.md | 105 --- .../60b69a66b6ddb80858c5158f.md | 126 --- .../60b69a66b6ddb80858c51590.md | 124 --- .../60b69a66b6ddb80858c51591.md | 115 --- .../60b69a66b6ddb80858c51592.md | 136 ---- .../60b69a66b6ddb80858c51593.md | 125 --- .../60b69a66b6ddb80858c51594.md | 135 ---- .../60b69a66b6ddb80858c51595.md | 146 ---- .../60b69a66b6ddb80858c51596.md | 144 ---- .../60b69a66b6ddb80858c51597.md | 135 ---- .../60b69a66b6ddb80858c51598.md | 142 ---- .../60b69a66b6ddb80858c51599.md | 156 ---- .../60b69a66b6ddb80858c5159a.md | 158 ---- .../60b69a66b6ddb80858c5159b.md | 161 ---- .../60b69a66b6ddb80858c5159c.md | 169 ---- .../60b69a66b6ddb80858c5159d.md | 167 ---- .../60b69a66b6ddb80858c5159e.md | 178 ----- .../60b69a66b6ddb80858c5159f.md | 183 ----- .../60b69a66b6ddb80858c515a0.md | 181 ----- .../60b69a66b6ddb80858c515a1.md | 192 ----- .../60b69a66b6ddb80858c515a2.md | 190 ----- .../60b69a66b6ddb80858c515a3.md | 201 ----- .../60b69a66b6ddb80858c515a4.md | 199 ----- .../60b69a66b6ddb80858c515a5.md | 190 ----- .../60b69a66b6ddb80858c515a6.md | 211 ----- .../60b69a66b6ddb80858c515a7.md | 217 ----- .../60b69a66b6ddb80858c515a8.md | 207 ----- .../60b69a66b6ddb80858c515a9.md | 217 ----- .../60b69a66b6ddb80858c515aa.md | 220 ------ .../60b69a66b6ddb80858c515ab.md | 225 ------ .../60b69a66b6ddb80858c515ac.md | 228 ------ .../60b69a66b6ddb80858c515ad.md | 225 ------ .../60b69a66b6ddb80858c515ae.md | 245 ------ .../60b69a66b6ddb80858c515af.md | 240 ------ .../60b69a66b6ddb80858c515b0.md | 238 ------ .../60b69a66b6ddb80858c515b1.md | 298 ------- .../60b69a66b6ddb80858c515b2.md | 281 ------- .../60b69a66b6ddb80858c515b3.md | 287 ------- .../60b69a66b6ddb80858c515b4.md | 285 ------- .../60b69a66b6ddb80858c515b5.md | 296 ------- .../60b69a66b6ddb80858c515b6.md | 282 ------- .../60b69a66b6ddb80858c515b7.md | 295 ------- .../60b69a66b6ddb80858c515b8.md | 286 ------- .../60b69a66b6ddb80858c515b9.md | 301 ------- .../60b69a66b6ddb80858c515ba.md | 304 ------- .../60b69a66b6ddb80858c515bc.md | 295 ------- .../60b69a66b6ddb80858c515bd.md | 348 -------- .../60b69a66b6ddb80858c515be.md | 337 -------- .../60b69a66b6ddb80858c515bf.md | 348 -------- .../60b69a66b6ddb80858c515c0.md | 359 --------- .../60b69a66b6ddb80858c515c1.md | 365 --------- .../60b69a66b6ddb80858c515c2.md | 363 --------- .../60b69a66b6ddb80858c515c3.md | 354 --------- .../60b69a66b6ddb80858c515c4.md | 381 --------- .../60b69a66b6ddb80858c515c5.md | 382 --------- .../60b69a66b6ddb80858c515c6.md | 388 --------- .../60b69a66b6ddb80858c515c7.md | 739 ----------------- .../60b80da8676fb3227967a731.md | 71 -- .../60ba890832b4940f24d1936b.md | 312 -------- .../60ba89123a445e0f5c9e4022.md | 326 -------- .../60ba8913f1704c0f7a8906b8.md | 312 -------- .../60ba89146b25080f99ab54ad.md | 315 -------- .../60ba8914bab51f0fb8228e9c.md | 310 -------- .../60ba929345ab0714a3743655.md | 327 -------- .../60ba9296d4d6b414c1b10995.md | 330 -------- .../60ba92987c1e4914dfa7a0b9.md | 321 -------- .../60bad32219ebcb4a8810ac6a.md | 164 ---- .../615f5c1cb7575c7551ed8a40.md | 116 --- .../615f6a7d4ba8037bc086c2c7.md | 127 --- .../caesars-cipher.md | 88 --- .../cash-register.md | 252 ------ .../palindrome-checker.md | 125 --- .../roman-numeral-converter.md | 215 ----- .../telephone-number-validator.md | 217 ----- .../62a3b365f1cdeb33efc2502e.md | 138 ---- .../62a8f2bc37675e77d5835235.md | 355 --------- .../659b0093d7db5a1a1122b7bd.md | 682 ++++++++++++++++ .../63ec14d1c216aa063f0be4af.md | 214 ----- .../63ec19978a066607e23439f8.md | 201 ----- .../63ec1a16f930b108b8a76806.md | 227 ------ .../63ec1bbf5584390a7d08d41f.md | 209 ----- .../63ec1cb59f2a4c0be5b6dfa0.md | 198 ----- .../63ec20a06fff670d37befbd9.md | 226 ------ .../63ec3287b182ec0efe8a3135.md | 472 ----------- .../63ec3427fc3e9214c9ed2a14.md | 281 ------- .../63ec36f6133df7160be3ec66.md | 277 ------- .../63ec47b454495519739486a7.md | 283 ------- .../63ee5d38a5d29d0696f8d820.md | 297 ------- .../63ee5d8f9e7168076e932fe2.md | 309 -------- .../63ee5e0f08e82208364c4128.md | 304 ------- .../63ee5ea8be892e0955ab346c.md | 303 ------- .../63ee5fc113bcb20a5db9214b.md | 300 ------- .../63ee611d478dca0b77f6a393.md | 316 -------- .../63ee7c664f9b65137d925c8a.md | 321 -------- .../63eea5cea403a81a68ae493c.md | 331 -------- .../63eea817673c8e1c22927fa6.md | 309 -------- .../63eea8e1e143ae1d098c8c9d.md | 311 -------- .../63eeb8e86becbf1e75c2cb0d.md | 312 -------- .../63eedebb0ec0231ff1cede1a.md | 327 -------- .../63efdbc22a0c56070beabed7.md | 323 -------- .../63efe370bbfc4a08d500118e.md | 324 -------- .../63eff02f00e69a0b2ac10b43.md | 317 -------- .../63eff98ffb1d5a0d24ec79cb.md | 336 -------- .../63effe558c87a70e7072e447.md | 327 -------- .../63f0165121a9181342d5bc66.md | 320 -------- .../63f017b4ad028a148eb713c0.md | 345 -------- .../63f01861f813e01564c95315.md | 325 -------- .../63f018f04e487e164dc27bd9.md | 349 -------- .../63f01c9791a0aa1751c73760.md | 334 -------- .../63f0224ceb16dc196d2c860a.md | 335 -------- .../63f026d041bc6c1a3d5cba0f.md | 339 -------- .../63f0284532742c1b26c7a052.md | 339 -------- .../63f0289df84a581bbdbd29b7.md | 339 -------- .../63f0295e673b661ccb299e8a.md | 350 -------- .../63f029b96b9e9e1df93be951.md | 342 -------- .../63f02a4ef92d711ec1ff618c.md | 377 --------- .../63f02b22cce1c11fe9604381.md | 348 -------- .../63f02bdeb9b428208b97eb6b.md | 368 --------- .../63f02c6e18773921ba50aa53.md | 361 --------- .../63f0311f5ea9382388d6124f.md | 347 -------- .../63f033fdb1fbcc254999fcc3.md | 339 -------- .../63f03446c2ed3e264be6c7fc.md | 335 -------- .../63f0348a54a177272071a595.md | 348 -------- .../63f034d012f74627ce538d3a.md | 357 --------- .../63f03686c5ea863533ec71f4.md | 353 --------- .../63f036ec91fdf238c90665f5.md | 352 --------- .../63f0370b340915399d31e5eb.md | 367 --------- .../63f0374d5351223a747c301d.md | 394 ---------- .../63f0378e173e3c3b7638b528.md | 352 --------- .../63f038a0ae041d3c5b0cdf23.md | 353 --------- .../63f038e671d3f73d5a041973.md | 371 --------- .../63f039dbcef7673e4e758fa3.md | 381 --------- .../63f03a7143a6ef3f7f3344f0.md | 378 --------- .../63f03ac2b428b2404a5a7518.md | 368 --------- .../63f03af535682e4138fdb915.md | 395 ---------- .../63f03b1ed5ab15420c057463.md | 744 ------------------ .../63f6721d5110af243ef8f3d9.md | 352 --------- .../step-001.md | 100 --- .../step-002.md | 114 --- .../step-003.md | 119 --- .../step-004.md | 112 --- .../step-005.md | 115 --- .../step-006.md | 113 --- .../step-007.md | 122 --- .../step-008.md | 119 --- .../step-009.md | 121 --- .../step-010.md | 116 --- .../step-011.md | 117 --- .../step-012.md | 129 --- .../step-013.md | 127 --- .../step-014.md | 125 --- .../step-015.md | 123 --- .../step-016.md | 122 --- .../step-017.md | 123 --- .../step-018.md | 139 ---- .../step-019.md | 139 ---- .../step-020.md | 147 ---- .../step-021.md | 136 ---- .../step-022.md | 139 ---- .../step-023.md | 133 ---- .../step-024.md | 131 --- .../step-025.md | 141 ---- .../step-026.md | 129 --- .../step-027.md | 141 ---- .../step-028.md | 143 ---- .../step-029.md | 151 ---- .../step-030.md | 154 ---- .../step-031.md | 151 ---- .../step-032.md | 151 ---- .../step-033.md | 149 ---- .../step-034.md | 153 ---- .../step-035.md | 161 ---- .../step-036.md | 153 ---- .../step-037.md | 154 ---- .../step-038.md | 159 ---- .../step-039.md | 158 ---- .../step-040.md | 167 ---- .../step-041.md | 170 ---- .../step-042.md | 175 ---- .../step-043.md | 175 ---- .../step-044.md | 174 ---- .../step-045.md | 183 ----- .../step-046.md | 192 ----- .../step-047.md | 182 ----- .../step-048.md | 193 ----- .../step-049.md | 199 ----- .../step-050.md | 199 ----- .../step-051.md | 206 ----- .../step-052.md | 207 ----- .../step-053.md | 203 ----- .../step-054.md | 204 ----- .../step-055.md | 210 ----- .../step-056.md | 214 ----- .../step-057.md | 211 ----- .../step-058.md | 218 ----- .../step-059.md | 220 ------ .../step-060.md | 220 ------ .../step-061.md | 222 ------ .../step-062.md | 226 ------ .../step-063.md | 230 ------ .../step-064.md | 226 ------ .../step-065.md | 238 ------ .../step-066.md | 243 ------ .../step-067.md | 250 ------ .../step-068.md | 243 ------ .../step-069.md | 244 ------ .../step-070.md | 259 ------ .../step-071.md | 257 ------ .../step-072.md | 263 ------- .../step-073.md | 271 ------- .../step-074.md | 269 ------- .../step-075.md | 277 ------- .../step-076.md | 185 ----- .../step-001.md | 78 -- .../step-002.md | 80 -- .../step-003.md | 84 -- .../step-004.md | 88 --- .../step-005.md | 94 --- .../step-006.md | 94 --- .../step-007.md | 90 --- .../step-008.md | 82 -- .../step-009.md | 84 -- .../step-010.md | 82 -- .../step-011.md | 87 -- .../step-012.md | 92 --- .../step-013.md | 98 --- .../step-014.md | 97 --- .../step-015.md | 102 --- .../step-016.md | 104 --- .../step-017.md | 100 --- .../step-018.md | 103 --- .../step-019.md | 110 --- .../step-020.md | 105 --- .../step-021.md | 107 --- .../step-022.md | 120 --- .../step-023.md | 114 --- .../step-024.md | 112 --- .../step-025.md | 120 --- .../step-026.md | 128 --- .../step-027.md | 131 --- .../step-028.md | 133 ---- .../step-029.md | 134 ---- .../step-030.md | 138 ---- .../step-031.md | 142 ---- .../step-032.md | 139 ---- .../step-033.md | 140 ---- .../step-034.md | 141 ---- .../step-035.md | 139 ---- .../step-036.md | 142 ---- .../step-037.md | 150 ---- .../step-038.md | 146 ---- .../step-039.md | 150 ---- .../step-040.md | 158 ---- .../step-041.md | 157 ---- .../step-042.md | 170 ---- .../step-043.md | 163 ---- .../step-044.md | 158 ---- .../step-045.md | 157 ---- .../step-046.md | 154 ---- .../step-047.md | 159 ---- .../step-048.md | 154 ---- .../step-049.md | 156 ---- .../step-050.md | 156 ---- .../step-051.md | 160 ---- .../step-052.md | 159 ---- .../step-053.md | 173 ---- .../step-054.md | 176 ----- .../step-055.md | 176 ----- .../step-056.md | 176 ----- .../step-057.md | 177 ----- .../step-058.md | 183 ----- .../step-059.md | 183 ----- .../step-060.md | 187 ----- .../step-061.md | 189 ----- .../step-062.md | 184 ----- .../step-063.md | 183 ----- .../step-064.md | 182 ----- .../step-065.md | 186 ----- .../step-066.md | 182 ----- .../step-067.md | 192 ----- .../step-068.md | 186 ----- .../step-069.md | 184 ----- .../step-070.md | 188 ----- .../step-071.md | 190 ----- .../step-072.md | 192 ----- .../step-073.md | 188 ----- .../step-074.md | 190 ----- .../step-075.md | 197 ----- .../step-076.md | 195 ----- .../step-077.md | 200 ----- .../step-078.md | 208 ----- .../step-079.md | 211 ----- .../step-080.md | 217 ----- .../step-081.md | 220 ------ .../step-082.md | 229 ------ .../step-083.md | 225 ------ .../step-084.md | 225 ------ .../step-085.md | 230 ------ .../step-086.md | 232 ------ .../step-087.md | 237 ------ .../step-088.md | 239 ------ .../step-089.md | 251 ------ .../step-090.md | 251 ------ .../step-091.md | 257 ------ .../step-092.md | 261 ------ .../step-093.md | 260 ------ .../step-094.md | 260 ------ .../step-095.md | 262 ------ .../step-096.md | 266 ------- .../step-097.md | 273 ------- .../step-098.md | 267 ------- .../step-099.md | 276 ------- .../step-100.md | 271 ------- .../step-101.md | 268 ------- .../step-102.md | 270 ------- .../step-103.md | 265 ------- .../step-104.md | 267 ------- .../step-105.md | 264 ------- .../step-106.md | 272 ------- .../step-107.md | 268 ------- .../step-108.md | 269 ------- .../step-109.md | 275 ------- .../step-110.md | 272 ------- .../step-111.md | 272 ------- .../step-112.md | 269 ------- .../step-113.md | 271 ------- .../step-114.md | 273 ------- .../step-115.md | 279 ------- .../step-116.md | 285 ------- .../step-117.md | 288 ------- .../step-118.md | 292 ------- .../step-119.md | 297 ------- .../step-120.md | 291 ------- .../step-121.md | 301 ------- .../step-122.md | 293 ------- .../step-123.md | 298 ------- .../step-124.md | 293 ------- .../step-125.md | 298 ------- .../step-126.md | 308 -------- .../step-127.md | 300 ------- .../step-128.md | 312 -------- .../step-129.md | 318 -------- .../step-130.md | 312 -------- .../step-131.md | 312 -------- .../step-132.md | 311 -------- .../step-133.md | 316 -------- .../step-134.md | 320 -------- .../step-135.md | 325 -------- .../step-136.md | 327 -------- .../step-137.md | 328 -------- .../step-138.md | 324 -------- .../step-139.md | 327 -------- .../step-140.md | 330 -------- .../step-141.md | 316 -------- .../659ebe52d74b132a1d75c891.md | 388 +++++++++ .../elements-and-tags-question-a.md | 54 -- .../elements-and-tags-question-b.md | 49 -- .../html-boilerplate-question-a.md | 54 -- .../html-boilerplate-question-b.md | 46 -- .../html-boilerplate-question-c.md | 65 -- .../html-boilerplate-question-d.md | 48 -- .../introduction-to-html-css-question-a.md | 41 - .../introduction-to-html-css-question-b.md | 36 - .../introduction-to-html-css-question-c.md | 33 - .../introduction-to-html-css-question-d.md | 34 - .../links-and-images-question-a.md | 66 -- .../links-and-images-question-b.md | 54 -- .../links-and-images-question-c.md | 55 -- .../links-and-images-question-d.md | 112 --- .../links-and-images-question-e.md | 98 --- .../links-and-images-question-f.md | 93 --- .../links-and-images-question-g.md | 93 --- .../links-and-images-question-h.md | 97 --- ...d-ordered-and-unordered-list-question-a.md | 65 -- ...d-ordered-and-unordered-list-question-b.md | 44 -- ...d-ordered-and-unordered-list-question-c.md | 44 -- .../working-with-text-question-a.md | 60 -- .../working-with-text-question-b.md | 39 - .../working-with-text-question-c.md | 47 -- .../working-with-text-question-d.md | 38 - .../working-with-text-question-e.md | 65 -- .../working-with-text-question-f.md | 66 -- .../working-with-text-question-g.md | 48 -- .../data-graph-explorer.md | 30 - .../financial-calculator.md | 28 - .../graphing-calculator.md | 28 - .../multi-function-calculator.md | 28 - .../three-math-games.md | 29 - .../problem-1-multiples-of-3-and-5.md | 73 -- .../challenge-1.md | 93 --- .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../dialogue-introducing.md | 15 - .../i-am-im.md | 49 -- .../im.md | 21 - .../name-and-job-title.md | 53 -- .../right.md | 33 - .../team-lead.md | 33 - .../thats-right-2.md | 25 - .../thats-right.md | 49 -- .../you-are.md | 27 - .../655c0feadb1dd77f6cda623f.md | 15 + .../657b0f0be03b2137ed88b36c.md | 54 ++ .../657b106ced8c653be6b3218f.md | 50 ++ .../657b108cf870283d22b21e8e.md | 58 ++ .../657b110ad8afcc3f8e586362.md | 38 + .../657b115008a62d41c0d7482f.md | 49 ++ .../657b119f0ce64343420bb850.md | 49 ++ .../657b11e082e48a44eb4bfc09.md | 40 + .../657b11f87368cf463ea4fe46.md | 57 ++ .../657b1240ef768447b80817ad.md | 55 ++ .../657b12ae08dd7049b300c901.md | 49 ++ .../657b12e7c306334b7c320221.md | 41 + .../657b13088693ef4ce21ce0e4.md | 49 ++ .../657b133afcef714e542b557a.md | 49 ++ .../657b135e9029fb4f8141e40c.md | 49 ++ .../657b138d33db9e50f116b5f0.md | 54 ++ .../657b1431076b365555784189.md | 49 ++ .../657b145976723b56a97b8dda.md | 56 ++ .../657b149630b3ea5873269a38.md | 49 ++ .../657b14d8353d665a187fe771.md | 38 + .../657b153ac677705c7059530d.md | 62 ++ .../657b15dbcafe4d5f39a5de82.md | 54 ++ .../657b160d6a8662610fe6a523.md | 53 ++ .../657b163c9da40e62b904be1f.md | 46 ++ .../657b18e71067d6680b9ac5d3.md | 54 ++ .../657b1985ae17886b05b382b1.md | 54 ++ .../657b19bf7b32af6caf763ef7.md | 54 ++ .../657b1a03df3ec46eca276046.md | 38 + .../657b1a27dc6daf6ffd52ff1f.md | 55 ++ .../657b1a637e4dc571f8f4d3d7.md | 49 ++ .../657b1a9581015573806e1e20.md | 47 ++ .../657b1cc072206e7ac3db88b8.md | 39 + .../657b1d080265ba7c4f96bf79.md | 30 + .../657b1d4ec0e2587e8bcc95f7.md | 15 + .../657b1da0b27fef8117827ce5.md | 54 ++ .../657b1dfec76149836ea5c7d0.md | 30 + .../657b1e2fad2ffe84ab420a56.md | 49 ++ .../657b1e66159fec86336a737b.md | 54 ++ .../657b1e9a62603587747f7f45.md | 49 ++ .../657b1ee1de7216896b5b4361.md | 42 + .../657b1f0585d48f8ac0b19654.md | 40 + .../657b1f598f63008c8bdb20b8.md | 49 ++ .../657b1f981cd42e8dc3b282d9.md | 49 ++ .../657b1fe950c0df90346e5d12.md | 47 ++ .../657b201372864e91d4f5bb53.md | 39 + .../657b20338e0802931673c1e1.md | 26 + .../657b20985d315095e5c3851d.md | 54 ++ .../657b21e28a01039cb27b4f13.md | 50 ++ .../657b221b2ab0ac9e18a173ef.md | 35 + .../657b223e41ce6b9f9a01d214.md | 39 + .../657b227f7ad32ea17e2cdf28.md | 15 + .../657b2310b8cd52a4f15c1818.md | 56 ++ .../657b2340be1593a6517fe77b.md | 39 + .../657b236aa1eb9fa7b209aa03.md | 54 ++ .../657b23a413d28da927e087ca.md | 36 + .../657b23bc0e32f9aa9c62eb82.md | 50 ++ .../657b23f03b449aac2c517089.md | 27 + .../657b242d06512dadaea55056.md | 49 ++ .../657b24542024c8af092cd6c4.md | 39 + .../657b24774d8cdab052ffe2a6.md | 48 ++ .../657b24a500800cb1c6945da9.md | 40 + .../657b2be1b19500c63fc1a467.md | 41 + .../657b2c040bb5f6c77fa5df80.md | 38 + .../657b2d618b8851cc5baf9490.md | 38 + .../657b2d9cb974dace59024964.md | 54 ++ .../657b2dd7745fdcd03e5160f4.md | 15 + .../657b2e0666d4a9d1b851f90e.md | 54 ++ .../657b2ec6c054efd71e503a27.md | 49 ++ .../657b2eeb31e435d89ecce6f3.md | 33 + .../657b2f0b3bcfe7d9f4151854.md | 54 ++ .../657b2f3bf7a2cbdb58d959d5.md | 49 ++ .../657b2f6cb66826dcbac08094.md | 49 ++ .../657b2fa89ddc20de629ca21f.md | 38 + .../657b2fc9c0f96bdfddfce4d9.md | 46 ++ .../657b2fea728c2be14a8a98c4.md | 49 ++ .../657b3026ff79fbe2dda6cb39.md | 54 ++ .../657b306fe94f29e4b4aa9105.md | 55 ++ .../657b30ac03b523e6640deaf1.md | 49 ++ .../657b30e1b9f035e7e656fd01.md | 54 ++ .../657b315533e4edeba65111b8.md | 54 ++ .../657b46c9be150f577f5a1086.md | 15 + .../dialogue-placeholder.md | 15 - .../dialogue-placeholder.md | 15 - .../challenge-1.md | 41 - .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../build-a-personal-portfolio-webpage.md | 281 ------- .../build-a-product-landing-page.md | 470 ----------- .../build-a-survey-form.md | 518 ------------ .../build-a-technical-documentation-page.md | 529 ------------- .../build-a-tribute-page.md | 325 -------- .../build-your-own-functions.md | 71 -- .../comparing-and-sorting-tuples.md | 61 -- .../conditional-execution.md | 54 -- .../data-visualization-mailing-lists.md | 56 -- .../data-visualization-page-rank.md | 34 - .../dictionaries-and-loops.md | 53 -- .../dictionaries-common-applications.md | 47 -- .../files-as-a-sequence.md | 44 -- .../intermediate-expressions.md | 56 -- .../intermediate-strings.md | 53 -- .../introduction-elements-of-python.md | 40 - .../introduction-hardware-achitecture.md | 34 - .../introduction-python-as-a-language.md | 43 - .../introduction-why-program.md | 54 -- .../iterations-definite-loops.md | 43 - .../iterations-loop-idioms.md | 49 -- .../iterations-more-patterns.md | 52 -- .../loops-and-iterations.md | 55 -- .../make-a-relational-database.md | 52 -- .../more-conditional-structures.md | 60 -- .../networking-protocol.md | 38 - .../networking-text-processing.md | 34 - .../networking-using-urllib-in-python.md | 41 - .../networking-web-scraping-with-python.md | 60 -- .../networking-with-python.md | 38 - .../networking-write-a-web-browser.md | 54 -- .../python-for-everybody/object-lifecycle.md | 71 -- .../objects-a-sample-class.md | 62 -- .../objects-inheritance.md | 38 - .../python-dictionaries.md | 59 -- .../python-for-everybody/python-functions.md | 42 - .../python-for-everybody/python-lists.md | 43 - .../python-for-everybody/python-objects.md | 38 - .../python-for-everybody/reading-files.md | 42 - ...xpressions-matching-and-extracting-data.md | 45 -- ...ular-expressions-practical-applications.md | 38 - .../regular-expressions.md | 42 - .../relational-database-design.md | 38 - .../relational-databases-and-sqlite.md | 44 -- .../relational-databases-join-operation.md | 34 - ...al-databases-many-to-many-relationships.md | 52 -- ...ational-databases-relationship-building.md | 34 - ...-relationships-in-a-relational-database.md | 38 - .../python-for-everybody/strings-and-lists.md | 51 -- .../python-for-everybody/strings-in-python.md | 63 -- .../the-tuples-collection.md | 63 -- .../using-web-services.md | 42 - .../variables-expressions-and-statements.md | 38 - .../visualizing-data-with-python.md | 42 - ...services-api-rate-limiting-and-security.md | 50 -- .../python-for-everybody/web-services-apis.md | 38 - .../python-for-everybody/web-services-json.md | 60 -- .../web-services-service-oriented-approach.md | 34 - .../web-services-xml-schema.md | 34 - .../python-for-everybody/web-services-xml.md | 47 -- .../working-with-lists.md | 38 - .../5f33310c1851c6c4da013250.md | 59 -- .../615389bd81347947ea7ba896.md | 91 --- .../60b69a66b6ddb80858c51578.md | 112 --- .../60b69a66b6ddb80858c51579.md | 63 -- .../60b69a66b6ddb80858c5157a.md | 56 -- .../60b69a66b6ddb80858c5157b.md | 50 -- .../60b69a66b6ddb80858c5157c.md | 51 -- .../60b69a66b6ddb80858c5157d.md | 54 -- .../60b69a66b6ddb80858c5157e.md | 56 -- .../60b69a66b6ddb80858c5157f.md | 69 -- .../60b69a66b6ddb80858c51580.md | 59 -- .../60b69a66b6ddb80858c51581.md | 68 -- .../60b69a66b6ddb80858c51582.md | 70 -- .../60b69a66b6ddb80858c51583.md | 84 -- .../60b69a66b6ddb80858c51584.md | 79 -- .../60b69a66b6ddb80858c51585.md | 74 -- .../60b69a66b6ddb80858c51586.md | 93 --- .../60b69a66b6ddb80858c51587.md | 91 --- .../60b69a66b6ddb80858c51588.md | 102 --- .../60b69a66b6ddb80858c51589.md | 88 --- .../60b69a66b6ddb80858c5158a.md | 107 --- .../60b69a66b6ddb80858c5158b.md | 105 --- .../60b69a66b6ddb80858c5158c.md | 116 --- .../60b69a66b6ddb80858c5158d.md | 114 --- .../60b69a66b6ddb80858c5158e.md | 105 --- .../60b69a66b6ddb80858c5158f.md | 126 --- .../60b69a66b6ddb80858c51590.md | 124 --- .../60b69a66b6ddb80858c51591.md | 115 --- .../60b69a66b6ddb80858c51592.md | 136 ---- .../60b69a66b6ddb80858c51593.md | 125 --- .../60b69a66b6ddb80858c51594.md | 135 ---- .../60b69a66b6ddb80858c51595.md | 146 ---- .../60b69a66b6ddb80858c51596.md | 144 ---- .../60b69a66b6ddb80858c51597.md | 135 ---- .../60b69a66b6ddb80858c51598.md | 142 ---- .../60b69a66b6ddb80858c51599.md | 156 ---- .../60b69a66b6ddb80858c5159a.md | 158 ---- .../60b69a66b6ddb80858c5159b.md | 161 ---- .../60b69a66b6ddb80858c5159c.md | 169 ---- .../60b69a66b6ddb80858c5159d.md | 167 ---- .../60b69a66b6ddb80858c5159e.md | 178 ----- .../60b69a66b6ddb80858c5159f.md | 183 ----- .../60b69a66b6ddb80858c515a0.md | 181 ----- .../60b69a66b6ddb80858c515a1.md | 192 ----- .../60b69a66b6ddb80858c515a2.md | 190 ----- .../60b69a66b6ddb80858c515a3.md | 201 ----- .../60b69a66b6ddb80858c515a4.md | 199 ----- .../60b69a66b6ddb80858c515a5.md | 190 ----- .../60b69a66b6ddb80858c515a6.md | 211 ----- .../60b69a66b6ddb80858c515a7.md | 217 ----- .../60b69a66b6ddb80858c515a8.md | 207 ----- .../60b69a66b6ddb80858c515a9.md | 217 ----- .../60b69a66b6ddb80858c515aa.md | 220 ------ .../60b69a66b6ddb80858c515ab.md | 225 ------ .../60b69a66b6ddb80858c515ac.md | 228 ------ .../60b69a66b6ddb80858c515ad.md | 225 ------ .../60b69a66b6ddb80858c515ae.md | 245 ------ .../60b69a66b6ddb80858c515af.md | 240 ------ .../60b69a66b6ddb80858c515b0.md | 238 ------ .../60b69a66b6ddb80858c515b1.md | 298 ------- .../60b69a66b6ddb80858c515b2.md | 281 ------- .../60b69a66b6ddb80858c515b3.md | 287 ------- .../60b69a66b6ddb80858c515b4.md | 285 ------- .../60b69a66b6ddb80858c515b5.md | 296 ------- .../60b69a66b6ddb80858c515b6.md | 282 ------- .../60b69a66b6ddb80858c515b7.md | 295 ------- .../60b69a66b6ddb80858c515b8.md | 286 ------- .../60b69a66b6ddb80858c515b9.md | 301 ------- .../60b69a66b6ddb80858c515ba.md | 304 ------- .../60b69a66b6ddb80858c515bc.md | 295 ------- .../60b69a66b6ddb80858c515bd.md | 348 -------- .../60b69a66b6ddb80858c515be.md | 337 -------- .../60b69a66b6ddb80858c515bf.md | 348 -------- .../60b69a66b6ddb80858c515c0.md | 359 --------- .../60b69a66b6ddb80858c515c1.md | 365 --------- .../60b69a66b6ddb80858c515c2.md | 363 --------- .../60b69a66b6ddb80858c515c3.md | 354 --------- .../60b69a66b6ddb80858c515c4.md | 381 --------- .../60b69a66b6ddb80858c515c5.md | 382 --------- .../60b69a66b6ddb80858c515c6.md | 388 --------- .../60b69a66b6ddb80858c515c7.md | 739 ----------------- .../60b80da8676fb3227967a731.md | 71 -- .../60ba890832b4940f24d1936b.md | 312 -------- .../60ba89123a445e0f5c9e4022.md | 326 -------- .../60ba8913f1704c0f7a8906b8.md | 312 -------- .../60ba89146b25080f99ab54ad.md | 315 -------- .../60ba8914bab51f0fb8228e9c.md | 310 -------- .../60ba929345ab0714a3743655.md | 327 -------- .../60ba9296d4d6b414c1b10995.md | 330 -------- .../60ba92987c1e4914dfa7a0b9.md | 321 -------- .../60bad32219ebcb4a8810ac6a.md | 164 ---- .../615f5c1cb7575c7551ed8a40.md | 116 --- .../615f6a7d4ba8037bc086c2c7.md | 127 --- .../caesars-cipher.md | 88 --- .../cash-register.md | 252 ------ .../palindrome-checker.md | 125 --- .../roman-numeral-converter.md | 215 ----- .../telephone-number-validator.md | 217 ----- .../62a3b365f1cdeb33efc2502e.md | 138 ---- .../62a8f2bc37675e77d5835235.md | 355 --------- .../659b0093d7db5a1a1122b7bd.md | 682 ++++++++++++++++ .../63ec14d1c216aa063f0be4af.md | 214 ----- .../63ec19978a066607e23439f8.md | 201 ----- .../63ec1a16f930b108b8a76806.md | 227 ------ .../63ec1bbf5584390a7d08d41f.md | 209 ----- .../63ec1cb59f2a4c0be5b6dfa0.md | 198 ----- .../63ec20a06fff670d37befbd9.md | 226 ------ .../63ec3287b182ec0efe8a3135.md | 472 ----------- .../63ec3427fc3e9214c9ed2a14.md | 281 ------- .../63ec36f6133df7160be3ec66.md | 277 ------- .../63ec47b454495519739486a7.md | 283 ------- .../63ee5d38a5d29d0696f8d820.md | 297 ------- .../63ee5d8f9e7168076e932fe2.md | 309 -------- .../63ee5e0f08e82208364c4128.md | 304 ------- .../63ee5ea8be892e0955ab346c.md | 303 ------- .../63ee5fc113bcb20a5db9214b.md | 300 ------- .../63ee611d478dca0b77f6a393.md | 316 -------- .../63ee7c664f9b65137d925c8a.md | 321 -------- .../63eea5cea403a81a68ae493c.md | 331 -------- .../63eea817673c8e1c22927fa6.md | 309 -------- .../63eea8e1e143ae1d098c8c9d.md | 311 -------- .../63eeb8e86becbf1e75c2cb0d.md | 312 -------- .../63eedebb0ec0231ff1cede1a.md | 327 -------- .../63efdbc22a0c56070beabed7.md | 323 -------- .../63efe370bbfc4a08d500118e.md | 324 -------- .../63eff02f00e69a0b2ac10b43.md | 317 -------- .../63eff98ffb1d5a0d24ec79cb.md | 336 -------- .../63effe558c87a70e7072e447.md | 327 -------- .../63f0165121a9181342d5bc66.md | 320 -------- .../63f017b4ad028a148eb713c0.md | 345 -------- .../63f01861f813e01564c95315.md | 325 -------- .../63f018f04e487e164dc27bd9.md | 349 -------- .../63f01c9791a0aa1751c73760.md | 334 -------- .../63f0224ceb16dc196d2c860a.md | 335 -------- .../63f026d041bc6c1a3d5cba0f.md | 339 -------- .../63f0284532742c1b26c7a052.md | 339 -------- .../63f0289df84a581bbdbd29b7.md | 339 -------- .../63f0295e673b661ccb299e8a.md | 350 -------- .../63f029b96b9e9e1df93be951.md | 342 -------- .../63f02a4ef92d711ec1ff618c.md | 377 --------- .../63f02b22cce1c11fe9604381.md | 348 -------- .../63f02bdeb9b428208b97eb6b.md | 368 --------- .../63f02c6e18773921ba50aa53.md | 361 --------- .../63f0311f5ea9382388d6124f.md | 347 -------- .../63f033fdb1fbcc254999fcc3.md | 339 -------- .../63f03446c2ed3e264be6c7fc.md | 335 -------- .../63f0348a54a177272071a595.md | 348 -------- .../63f034d012f74627ce538d3a.md | 357 --------- .../63f03686c5ea863533ec71f4.md | 353 --------- .../63f036ec91fdf238c90665f5.md | 352 --------- .../63f0370b340915399d31e5eb.md | 367 --------- .../63f0374d5351223a747c301d.md | 394 ---------- .../63f0378e173e3c3b7638b528.md | 352 --------- .../63f038a0ae041d3c5b0cdf23.md | 353 --------- .../63f038e671d3f73d5a041973.md | 371 --------- .../63f039dbcef7673e4e758fa3.md | 381 --------- .../63f03a7143a6ef3f7f3344f0.md | 378 --------- .../63f03ac2b428b2404a5a7518.md | 368 --------- .../63f03af535682e4138fdb915.md | 395 ---------- .../63f03b1ed5ab15420c057463.md | 744 ------------------ .../63f6721d5110af243ef8f3d9.md | 352 --------- .../step-001.md | 100 --- .../step-002.md | 114 --- .../step-003.md | 119 --- .../step-004.md | 112 --- .../step-005.md | 115 --- .../step-006.md | 113 --- .../step-007.md | 122 --- .../step-008.md | 119 --- .../step-009.md | 121 --- .../step-010.md | 116 --- .../step-011.md | 117 --- .../step-012.md | 129 --- .../step-013.md | 127 --- .../step-014.md | 125 --- .../step-015.md | 123 --- .../step-016.md | 122 --- .../step-017.md | 123 --- .../step-018.md | 139 ---- .../step-019.md | 139 ---- .../step-020.md | 147 ---- .../step-021.md | 136 ---- .../step-022.md | 139 ---- .../step-023.md | 133 ---- .../step-024.md | 131 --- .../step-025.md | 141 ---- .../step-026.md | 129 --- .../step-027.md | 141 ---- .../step-028.md | 143 ---- .../step-029.md | 151 ---- .../step-030.md | 154 ---- .../step-031.md | 151 ---- .../step-032.md | 151 ---- .../step-033.md | 149 ---- .../step-034.md | 153 ---- .../step-035.md | 161 ---- .../step-036.md | 153 ---- .../step-037.md | 154 ---- .../step-038.md | 159 ---- .../step-039.md | 158 ---- .../step-040.md | 167 ---- .../step-041.md | 170 ---- .../step-042.md | 175 ---- .../step-043.md | 175 ---- .../step-044.md | 174 ---- .../step-045.md | 183 ----- .../step-046.md | 192 ----- .../step-047.md | 182 ----- .../step-048.md | 193 ----- .../step-049.md | 199 ----- .../step-050.md | 199 ----- .../step-051.md | 206 ----- .../step-052.md | 207 ----- .../step-053.md | 203 ----- .../step-054.md | 204 ----- .../step-055.md | 210 ----- .../step-056.md | 214 ----- .../step-057.md | 211 ----- .../step-058.md | 218 ----- .../step-059.md | 220 ------ .../step-060.md | 220 ------ .../step-061.md | 222 ------ .../step-062.md | 226 ------ .../step-063.md | 230 ------ .../step-064.md | 226 ------ .../step-065.md | 238 ------ .../step-066.md | 243 ------ .../step-067.md | 250 ------ .../step-068.md | 243 ------ .../step-069.md | 244 ------ .../step-070.md | 259 ------ .../step-071.md | 257 ------ .../step-072.md | 263 ------- .../step-073.md | 271 ------- .../step-074.md | 269 ------- .../step-075.md | 277 ------- .../step-076.md | 185 ----- .../step-001.md | 78 -- .../step-002.md | 80 -- .../step-003.md | 84 -- .../step-004.md | 88 --- .../step-005.md | 94 --- .../step-006.md | 94 --- .../step-007.md | 90 --- .../step-008.md | 82 -- .../step-009.md | 84 -- .../step-010.md | 82 -- .../step-011.md | 87 -- .../step-012.md | 92 --- .../step-013.md | 98 --- .../step-014.md | 97 --- .../step-015.md | 102 --- .../step-016.md | 104 --- .../step-017.md | 100 --- .../step-018.md | 103 --- .../step-019.md | 110 --- .../step-020.md | 105 --- .../step-021.md | 107 --- .../step-022.md | 120 --- .../step-023.md | 114 --- .../step-024.md | 112 --- .../step-025.md | 120 --- .../step-026.md | 128 --- .../step-027.md | 131 --- .../step-028.md | 133 ---- .../step-029.md | 134 ---- .../step-030.md | 138 ---- .../step-031.md | 142 ---- .../step-032.md | 139 ---- .../step-033.md | 140 ---- .../step-034.md | 141 ---- .../step-035.md | 139 ---- .../step-036.md | 142 ---- .../step-037.md | 150 ---- .../step-038.md | 146 ---- .../step-039.md | 150 ---- .../step-040.md | 158 ---- .../step-041.md | 157 ---- .../step-042.md | 170 ---- .../step-043.md | 163 ---- .../step-044.md | 158 ---- .../step-045.md | 157 ---- .../step-046.md | 154 ---- .../step-047.md | 159 ---- .../step-048.md | 154 ---- .../step-049.md | 156 ---- .../step-050.md | 156 ---- .../step-051.md | 160 ---- .../step-052.md | 159 ---- .../step-053.md | 173 ---- .../step-054.md | 176 ----- .../step-055.md | 176 ----- .../step-056.md | 176 ----- .../step-057.md | 177 ----- .../step-058.md | 183 ----- .../step-059.md | 183 ----- .../step-060.md | 187 ----- .../step-061.md | 189 ----- .../step-062.md | 184 ----- .../step-063.md | 183 ----- .../step-064.md | 182 ----- .../step-065.md | 186 ----- .../step-066.md | 182 ----- .../step-067.md | 192 ----- .../step-068.md | 186 ----- .../step-069.md | 184 ----- .../step-070.md | 188 ----- .../step-071.md | 190 ----- .../step-072.md | 192 ----- .../step-073.md | 188 ----- .../step-074.md | 190 ----- .../step-075.md | 197 ----- .../step-076.md | 195 ----- .../step-077.md | 200 ----- .../step-078.md | 208 ----- .../step-079.md | 211 ----- .../step-080.md | 217 ----- .../step-081.md | 220 ------ .../step-082.md | 229 ------ .../step-083.md | 225 ------ .../step-084.md | 225 ------ .../step-085.md | 230 ------ .../step-086.md | 232 ------ .../step-087.md | 237 ------ .../step-088.md | 239 ------ .../step-089.md | 251 ------ .../step-090.md | 251 ------ .../step-091.md | 257 ------ .../step-092.md | 261 ------ .../step-093.md | 260 ------ .../step-094.md | 260 ------ .../step-095.md | 262 ------ .../step-096.md | 266 ------- .../step-097.md | 273 ------- .../step-098.md | 267 ------- .../step-099.md | 276 ------- .../step-100.md | 271 ------- .../step-101.md | 268 ------- .../step-102.md | 270 ------- .../step-103.md | 265 ------- .../step-104.md | 267 ------- .../step-105.md | 264 ------- .../step-106.md | 272 ------- .../step-107.md | 268 ------- .../step-108.md | 269 ------- .../step-109.md | 275 ------- .../step-110.md | 272 ------- .../step-111.md | 272 ------- .../step-112.md | 269 ------- .../step-113.md | 271 ------- .../step-114.md | 273 ------- .../step-115.md | 279 ------- .../step-116.md | 285 ------- .../step-117.md | 288 ------- .../step-118.md | 292 ------- .../step-119.md | 297 ------- .../step-120.md | 291 ------- .../step-121.md | 301 ------- .../step-122.md | 293 ------- .../step-123.md | 298 ------- .../step-124.md | 293 ------- .../step-125.md | 298 ------- .../step-126.md | 308 -------- .../step-127.md | 300 ------- .../step-128.md | 312 -------- .../step-129.md | 318 -------- .../step-130.md | 312 -------- .../step-131.md | 312 -------- .../step-132.md | 311 -------- .../step-133.md | 316 -------- .../step-134.md | 320 -------- .../step-135.md | 325 -------- .../step-136.md | 327 -------- .../step-137.md | 328 -------- .../step-138.md | 324 -------- .../step-139.md | 327 -------- .../step-140.md | 330 -------- .../step-141.md | 316 -------- .../659ebe52d74b132a1d75c891.md | 388 +++++++++ .../elements-and-tags-question-a.md | 54 -- .../elements-and-tags-question-b.md | 49 -- .../html-boilerplate-question-a.md | 54 -- .../html-boilerplate-question-b.md | 46 -- .../html-boilerplate-question-c.md | 65 -- .../html-boilerplate-question-d.md | 48 -- .../introduction-to-html-css-question-a.md | 41 - .../introduction-to-html-css-question-b.md | 36 - .../introduction-to-html-css-question-c.md | 33 - .../introduction-to-html-css-question-d.md | 34 - .../links-and-images-question-a.md | 66 -- .../links-and-images-question-b.md | 54 -- .../links-and-images-question-c.md | 55 -- .../links-and-images-question-d.md | 112 --- .../links-and-images-question-e.md | 98 --- .../links-and-images-question-f.md | 93 --- .../links-and-images-question-g.md | 93 --- .../links-and-images-question-h.md | 97 --- ...d-ordered-and-unordered-list-question-a.md | 65 -- ...d-ordered-and-unordered-list-question-b.md | 44 -- ...d-ordered-and-unordered-list-question-c.md | 44 -- .../working-with-text-question-a.md | 60 -- .../working-with-text-question-b.md | 39 - .../working-with-text-question-c.md | 47 -- .../working-with-text-question-d.md | 38 - .../working-with-text-question-e.md | 65 -- .../working-with-text-question-f.md | 66 -- .../working-with-text-question-g.md | 48 -- .../problem-1-multiples-of-3-and-5.md | 73 -- .../challenge-1.md | 93 --- .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../dialogue-introducing.md | 15 - .../i-am-im.md | 49 -- .../im.md | 21 - .../name-and-job-title.md | 53 -- .../right.md | 33 - .../team-lead.md | 33 - .../thats-right-2.md | 25 - .../thats-right.md | 49 -- .../you-are.md | 27 - .../655c0feadb1dd77f6cda623f.md | 15 + .../657b0f0be03b2137ed88b36c.md | 54 ++ .../657b106ced8c653be6b3218f.md | 50 ++ .../657b108cf870283d22b21e8e.md | 58 ++ .../657b110ad8afcc3f8e586362.md | 38 + .../657b115008a62d41c0d7482f.md | 49 ++ .../657b119f0ce64343420bb850.md | 49 ++ .../657b11e082e48a44eb4bfc09.md | 40 + .../657b11f87368cf463ea4fe46.md | 57 ++ .../657b1240ef768447b80817ad.md | 55 ++ .../657b12ae08dd7049b300c901.md | 49 ++ .../657b12e7c306334b7c320221.md | 41 + .../657b13088693ef4ce21ce0e4.md | 49 ++ .../657b133afcef714e542b557a.md | 49 ++ .../657b135e9029fb4f8141e40c.md | 49 ++ .../657b138d33db9e50f116b5f0.md | 54 ++ .../657b1431076b365555784189.md | 49 ++ .../657b145976723b56a97b8dda.md | 56 ++ .../657b149630b3ea5873269a38.md | 49 ++ .../657b14d8353d665a187fe771.md | 38 + .../657b153ac677705c7059530d.md | 62 ++ .../657b15dbcafe4d5f39a5de82.md | 54 ++ .../657b160d6a8662610fe6a523.md | 53 ++ .../657b163c9da40e62b904be1f.md | 46 ++ .../657b18e71067d6680b9ac5d3.md | 54 ++ .../657b1985ae17886b05b382b1.md | 54 ++ .../657b19bf7b32af6caf763ef7.md | 54 ++ .../657b1a03df3ec46eca276046.md | 38 + .../657b1a27dc6daf6ffd52ff1f.md | 55 ++ .../657b1a637e4dc571f8f4d3d7.md | 49 ++ .../657b1a9581015573806e1e20.md | 47 ++ .../657b1cc072206e7ac3db88b8.md | 39 + .../657b1d080265ba7c4f96bf79.md | 30 + .../657b1d4ec0e2587e8bcc95f7.md | 15 + .../657b1da0b27fef8117827ce5.md | 54 ++ .../657b1dfec76149836ea5c7d0.md | 30 + .../657b1e2fad2ffe84ab420a56.md | 49 ++ .../657b1e66159fec86336a737b.md | 54 ++ .../657b1e9a62603587747f7f45.md | 49 ++ .../657b1ee1de7216896b5b4361.md | 42 + .../657b1f0585d48f8ac0b19654.md | 40 + .../657b1f598f63008c8bdb20b8.md | 49 ++ .../657b1f981cd42e8dc3b282d9.md | 49 ++ .../657b1fe950c0df90346e5d12.md | 47 ++ .../657b201372864e91d4f5bb53.md | 39 + .../657b20338e0802931673c1e1.md | 26 + .../657b20985d315095e5c3851d.md | 54 ++ .../657b21e28a01039cb27b4f13.md | 50 ++ .../657b221b2ab0ac9e18a173ef.md | 35 + .../657b223e41ce6b9f9a01d214.md | 39 + .../657b227f7ad32ea17e2cdf28.md | 15 + .../657b2310b8cd52a4f15c1818.md | 56 ++ .../657b2340be1593a6517fe77b.md | 39 + .../657b236aa1eb9fa7b209aa03.md | 54 ++ .../657b23a413d28da927e087ca.md | 36 + .../657b23bc0e32f9aa9c62eb82.md | 50 ++ .../657b23f03b449aac2c517089.md | 27 + .../657b242d06512dadaea55056.md | 49 ++ .../657b24542024c8af092cd6c4.md | 39 + .../657b24774d8cdab052ffe2a6.md | 48 ++ .../657b24a500800cb1c6945da9.md | 40 + .../657b2be1b19500c63fc1a467.md | 41 + .../657b2c040bb5f6c77fa5df80.md | 38 + .../657b2d618b8851cc5baf9490.md | 38 + .../657b2d9cb974dace59024964.md | 54 ++ .../657b2dd7745fdcd03e5160f4.md | 15 + .../657b2e0666d4a9d1b851f90e.md | 54 ++ .../657b2ec6c054efd71e503a27.md | 49 ++ .../657b2eeb31e435d89ecce6f3.md | 33 + .../657b2f0b3bcfe7d9f4151854.md | 54 ++ .../657b2f3bf7a2cbdb58d959d5.md | 49 ++ .../657b2f6cb66826dcbac08094.md | 49 ++ .../657b2fa89ddc20de629ca21f.md | 38 + .../657b2fc9c0f96bdfddfce4d9.md | 46 ++ .../657b2fea728c2be14a8a98c4.md | 49 ++ .../657b3026ff79fbe2dda6cb39.md | 54 ++ .../657b306fe94f29e4b4aa9105.md | 55 ++ .../657b30ac03b523e6640deaf1.md | 49 ++ .../657b30e1b9f035e7e656fd01.md | 54 ++ .../657b315533e4edeba65111b8.md | 54 ++ .../657b46c9be150f577f5a1086.md | 15 + .../dialogue-placeholder.md | 15 - .../dialogue-placeholder.md | 15 - .../challenge-1.md | 41 - .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../build-a-personal-portfolio-webpage.md | 281 ------- .../build-a-product-landing-page.md | 470 ----------- .../build-a-survey-form.md | 518 ------------ .../build-a-technical-documentation-page.md | 529 ------------- .../build-a-tribute-page.md | 325 -------- .../build-your-own-functions.md | 71 -- .../comparing-and-sorting-tuples.md | 61 -- .../conditional-execution.md | 54 -- .../data-visualization-mailing-lists.md | 56 -- .../data-visualization-page-rank.md | 34 - .../dictionaries-and-loops.md | 53 -- .../dictionaries-common-applications.md | 47 -- .../files-as-a-sequence.md | 44 -- .../intermediate-expressions.md | 56 -- .../intermediate-strings.md | 53 -- .../introduction-elements-of-python.md | 40 - .../introduction-hardware-achitecture.md | 34 - .../introduction-python-as-a-language.md | 43 - .../introduction-why-program.md | 54 -- .../iterations-definite-loops.md | 43 - .../iterations-loop-idioms.md | 49 -- .../iterations-more-patterns.md | 52 -- .../loops-and-iterations.md | 55 -- .../make-a-relational-database.md | 52 -- .../more-conditional-structures.md | 60 -- .../networking-protocol.md | 38 - .../networking-text-processing.md | 34 - .../networking-using-urllib-in-python.md | 41 - .../networking-web-scraping-with-python.md | 60 -- .../networking-with-python.md | 38 - .../networking-write-a-web-browser.md | 54 -- .../python-for-everybody/object-lifecycle.md | 71 -- .../objects-a-sample-class.md | 62 -- .../objects-inheritance.md | 38 - .../python-dictionaries.md | 59 -- .../python-for-everybody/python-functions.md | 42 - .../python-for-everybody/python-lists.md | 43 - .../python-for-everybody/python-objects.md | 38 - .../python-for-everybody/reading-files.md | 42 - ...xpressions-matching-and-extracting-data.md | 45 -- ...ular-expressions-practical-applications.md | 38 - .../regular-expressions.md | 42 - .../relational-database-design.md | 38 - .../relational-databases-and-sqlite.md | 44 -- .../relational-databases-join-operation.md | 34 - ...al-databases-many-to-many-relationships.md | 52 -- ...ational-databases-relationship-building.md | 34 - ...-relationships-in-a-relational-database.md | 38 - .../python-for-everybody/strings-and-lists.md | 51 -- .../python-for-everybody/strings-in-python.md | 63 -- .../the-tuples-collection.md | 63 -- .../using-web-services.md | 42 - .../variables-expressions-and-statements.md | 38 - .../visualizing-data-with-python.md | 42 - ...services-api-rate-limiting-and-security.md | 50 -- .../python-for-everybody/web-services-apis.md | 38 - .../python-for-everybody/web-services-json.md | 60 -- .../web-services-service-oriented-approach.md | 34 - .../web-services-xml-schema.md | 34 - .../python-for-everybody/web-services-xml.md | 47 -- .../working-with-lists.md | 38 - .../615389bd81347947ea7ba896.md | 91 --- .../60b69a66b6ddb80858c51578.md | 112 --- .../60b69a66b6ddb80858c51579.md | 63 -- .../60b69a66b6ddb80858c5157a.md | 56 -- .../60b69a66b6ddb80858c5157b.md | 50 -- .../60b69a66b6ddb80858c5157c.md | 51 -- .../60b69a66b6ddb80858c5157d.md | 54 -- .../60b69a66b6ddb80858c5157e.md | 56 -- .../60b69a66b6ddb80858c5157f.md | 69 -- .../60b69a66b6ddb80858c51580.md | 59 -- .../60b69a66b6ddb80858c51581.md | 68 -- .../60b69a66b6ddb80858c51582.md | 70 -- .../60b69a66b6ddb80858c51583.md | 84 -- .../60b69a66b6ddb80858c51584.md | 79 -- .../60b69a66b6ddb80858c51585.md | 74 -- .../60b69a66b6ddb80858c51586.md | 93 --- .../60b69a66b6ddb80858c51587.md | 91 --- .../60b69a66b6ddb80858c51588.md | 102 --- .../60b69a66b6ddb80858c51589.md | 88 --- .../60b69a66b6ddb80858c5158a.md | 107 --- .../60b69a66b6ddb80858c5158b.md | 105 --- .../60b69a66b6ddb80858c5158c.md | 116 --- .../60b69a66b6ddb80858c5158d.md | 114 --- .../60b69a66b6ddb80858c5158e.md | 105 --- .../60b69a66b6ddb80858c5158f.md | 126 --- .../60b69a66b6ddb80858c51590.md | 124 --- .../60b69a66b6ddb80858c51591.md | 115 --- .../60b69a66b6ddb80858c51592.md | 136 ---- .../60b69a66b6ddb80858c51593.md | 125 --- .../60b69a66b6ddb80858c51594.md | 135 ---- .../60b69a66b6ddb80858c51595.md | 146 ---- .../60b69a66b6ddb80858c51596.md | 144 ---- .../60b69a66b6ddb80858c51597.md | 135 ---- .../60b69a66b6ddb80858c51598.md | 142 ---- .../60b69a66b6ddb80858c51599.md | 156 ---- .../60b69a66b6ddb80858c5159a.md | 158 ---- .../60b69a66b6ddb80858c5159b.md | 161 ---- .../60b69a66b6ddb80858c5159c.md | 169 ---- .../60b69a66b6ddb80858c5159d.md | 167 ---- .../60b69a66b6ddb80858c5159e.md | 178 ----- .../60b69a66b6ddb80858c5159f.md | 183 ----- .../60b69a66b6ddb80858c515a0.md | 181 ----- .../60b69a66b6ddb80858c515a1.md | 192 ----- .../60b69a66b6ddb80858c515a2.md | 190 ----- .../60b69a66b6ddb80858c515a3.md | 201 ----- .../60b69a66b6ddb80858c515a4.md | 199 ----- .../60b69a66b6ddb80858c515a5.md | 190 ----- .../60b69a66b6ddb80858c515a6.md | 211 ----- .../60b69a66b6ddb80858c515a7.md | 217 ----- .../60b69a66b6ddb80858c515a8.md | 207 ----- .../60b69a66b6ddb80858c515a9.md | 217 ----- .../60b69a66b6ddb80858c515aa.md | 220 ------ .../60b69a66b6ddb80858c515ab.md | 225 ------ .../60b69a66b6ddb80858c515ac.md | 228 ------ .../60b69a66b6ddb80858c515ad.md | 225 ------ .../60b69a66b6ddb80858c515ae.md | 245 ------ .../60b69a66b6ddb80858c515af.md | 240 ------ .../60b69a66b6ddb80858c515b0.md | 238 ------ .../60b69a66b6ddb80858c515b1.md | 298 ------- .../60b69a66b6ddb80858c515b2.md | 281 ------- .../60b69a66b6ddb80858c515b3.md | 287 ------- .../60b69a66b6ddb80858c515b4.md | 285 ------- .../60b69a66b6ddb80858c515b5.md | 296 ------- .../60b69a66b6ddb80858c515b6.md | 282 ------- .../60b69a66b6ddb80858c515b7.md | 295 ------- .../60b69a66b6ddb80858c515b8.md | 286 ------- .../60b69a66b6ddb80858c515b9.md | 301 ------- .../60b69a66b6ddb80858c515ba.md | 304 ------- .../60b69a66b6ddb80858c515bc.md | 295 ------- .../60b69a66b6ddb80858c515bd.md | 348 -------- .../60b69a66b6ddb80858c515be.md | 337 -------- .../60b69a66b6ddb80858c515bf.md | 348 -------- .../60b69a66b6ddb80858c515c0.md | 359 --------- .../60b69a66b6ddb80858c515c1.md | 365 --------- .../60b69a66b6ddb80858c515c2.md | 363 --------- .../60b69a66b6ddb80858c515c3.md | 354 --------- .../60b69a66b6ddb80858c515c4.md | 381 --------- .../60b69a66b6ddb80858c515c5.md | 382 --------- .../60b69a66b6ddb80858c515c6.md | 388 --------- .../60b69a66b6ddb80858c515c7.md | 739 ----------------- .../60b80da8676fb3227967a731.md | 71 -- .../60ba890832b4940f24d1936b.md | 312 -------- .../60ba89123a445e0f5c9e4022.md | 326 -------- .../60ba8913f1704c0f7a8906b8.md | 312 -------- .../60ba89146b25080f99ab54ad.md | 315 -------- .../60ba8914bab51f0fb8228e9c.md | 310 -------- .../60ba929345ab0714a3743655.md | 327 -------- .../60ba9296d4d6b414c1b10995.md | 330 -------- .../60ba92987c1e4914dfa7a0b9.md | 321 -------- .../60bad32219ebcb4a8810ac6a.md | 164 ---- .../caesars-cipher.md | 88 --- .../cash-register.md | 252 ------ .../palindrome-checker.md | 125 --- .../roman-numeral-converter.md | 215 ----- .../telephone-number-validator.md | 217 ----- .../62a3b365f1cdeb33efc2502e.md | 138 ---- .../62a8f2bc37675e77d5835235.md | 355 --------- .../659b0093d7db5a1a1122b7bd.md | 682 ++++++++++++++++ .../63ec14d1c216aa063f0be4af.md | 214 ----- .../63ec19978a066607e23439f8.md | 201 ----- .../63ec1a16f930b108b8a76806.md | 227 ------ .../63ec1bbf5584390a7d08d41f.md | 209 ----- .../63ec1cb59f2a4c0be5b6dfa0.md | 198 ----- .../63ec20a06fff670d37befbd9.md | 226 ------ .../63ec3287b182ec0efe8a3135.md | 472 ----------- .../63ec3427fc3e9214c9ed2a14.md | 281 ------- .../63ec36f6133df7160be3ec66.md | 277 ------- .../63ec47b454495519739486a7.md | 283 ------- .../63ee5d38a5d29d0696f8d820.md | 297 ------- .../63ee5d8f9e7168076e932fe2.md | 309 -------- .../63ee5e0f08e82208364c4128.md | 304 ------- .../63ee5ea8be892e0955ab346c.md | 303 ------- .../63ee5fc113bcb20a5db9214b.md | 300 ------- .../63ee611d478dca0b77f6a393.md | 316 -------- .../63ee7c664f9b65137d925c8a.md | 321 -------- .../63eea5cea403a81a68ae493c.md | 331 -------- .../63eea817673c8e1c22927fa6.md | 309 -------- .../63eea8e1e143ae1d098c8c9d.md | 311 -------- .../63eeb8e86becbf1e75c2cb0d.md | 312 -------- .../63eedebb0ec0231ff1cede1a.md | 327 -------- .../63efdbc22a0c56070beabed7.md | 323 -------- .../63efe370bbfc4a08d500118e.md | 324 -------- .../63eff02f00e69a0b2ac10b43.md | 317 -------- .../63eff98ffb1d5a0d24ec79cb.md | 336 -------- .../63effe558c87a70e7072e447.md | 327 -------- .../63f0165121a9181342d5bc66.md | 320 -------- .../63f017b4ad028a148eb713c0.md | 345 -------- .../63f01861f813e01564c95315.md | 325 -------- .../63f018f04e487e164dc27bd9.md | 349 -------- .../63f01c9791a0aa1751c73760.md | 334 -------- .../63f0224ceb16dc196d2c860a.md | 335 -------- .../63f026d041bc6c1a3d5cba0f.md | 339 -------- .../63f0284532742c1b26c7a052.md | 339 -------- .../63f0289df84a581bbdbd29b7.md | 339 -------- .../63f0295e673b661ccb299e8a.md | 350 -------- .../63f029b96b9e9e1df93be951.md | 342 -------- .../63f02a4ef92d711ec1ff618c.md | 377 --------- .../63f02b22cce1c11fe9604381.md | 348 -------- .../63f02bdeb9b428208b97eb6b.md | 368 --------- .../63f02c6e18773921ba50aa53.md | 361 --------- .../63f0311f5ea9382388d6124f.md | 347 -------- .../63f033fdb1fbcc254999fcc3.md | 339 -------- .../63f03446c2ed3e264be6c7fc.md | 335 -------- .../63f0348a54a177272071a595.md | 348 -------- .../63f034d012f74627ce538d3a.md | 357 --------- .../63f03686c5ea863533ec71f4.md | 353 --------- .../63f036ec91fdf238c90665f5.md | 352 --------- .../63f0370b340915399d31e5eb.md | 367 --------- .../63f0374d5351223a747c301d.md | 394 ---------- .../63f0378e173e3c3b7638b528.md | 352 --------- .../63f038a0ae041d3c5b0cdf23.md | 353 --------- .../63f038e671d3f73d5a041973.md | 371 --------- .../63f039dbcef7673e4e758fa3.md | 381 --------- .../63f03a7143a6ef3f7f3344f0.md | 378 --------- .../63f03ac2b428b2404a5a7518.md | 368 --------- .../63f03af535682e4138fdb915.md | 395 ---------- .../63f03b1ed5ab15420c057463.md | 744 ------------------ .../63f6721d5110af243ef8f3d9.md | 352 --------- .../659ebe52d74b132a1d75c891.md | 388 +++++++++ .../elements-and-tags-question-a.md | 54 -- .../elements-and-tags-question-b.md | 49 -- .../html-boilerplate-question-a.md | 54 -- .../html-boilerplate-question-b.md | 46 -- .../html-boilerplate-question-c.md | 65 -- .../html-boilerplate-question-d.md | 48 -- .../introduction-to-html-css-question-a.md | 41 - .../introduction-to-html-css-question-b.md | 36 - .../introduction-to-html-css-question-c.md | 33 - .../introduction-to-html-css-question-d.md | 34 - .../links-and-images-question-a.md | 66 -- .../links-and-images-question-b.md | 54 -- .../links-and-images-question-c.md | 55 -- .../links-and-images-question-d.md | 112 --- .../links-and-images-question-e.md | 98 --- .../links-and-images-question-f.md | 93 --- .../links-and-images-question-g.md | 93 --- .../links-and-images-question-h.md | 97 --- ...d-ordered-and-unordered-list-question-a.md | 65 -- ...d-ordered-and-unordered-list-question-b.md | 44 -- ...d-ordered-and-unordered-list-question-c.md | 44 -- .../working-with-text-question-a.md | 60 -- .../working-with-text-question-b.md | 39 - .../working-with-text-question-c.md | 47 -- .../working-with-text-question-d.md | 38 - .../working-with-text-question-e.md | 65 -- .../working-with-text-question-f.md | 66 -- .../working-with-text-question-g.md | 48 -- .../problem-1-multiples-of-3-and-5.md | 73 -- .../challenge-1.md | 93 --- .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../dialogue-introducing.md | 15 - .../i-am-im.md | 49 -- .../im.md | 21 - .../name-and-job-title.md | 53 -- .../right.md | 33 - .../team-lead.md | 33 - .../thats-right-2.md | 25 - .../thats-right.md | 49 -- .../you-are.md | 27 - .../655c0feadb1dd77f6cda623f.md | 15 + .../657b0f0be03b2137ed88b36c.md | 54 ++ .../657b106ced8c653be6b3218f.md | 50 ++ .../657b108cf870283d22b21e8e.md | 58 ++ .../657b110ad8afcc3f8e586362.md | 38 + .../657b115008a62d41c0d7482f.md | 49 ++ .../657b119f0ce64343420bb850.md | 49 ++ .../657b11e082e48a44eb4bfc09.md | 40 + .../657b11f87368cf463ea4fe46.md | 57 ++ .../657b1240ef768447b80817ad.md | 55 ++ .../657b12ae08dd7049b300c901.md | 49 ++ .../657b12e7c306334b7c320221.md | 41 + .../657b13088693ef4ce21ce0e4.md | 49 ++ .../657b133afcef714e542b557a.md | 49 ++ .../657b135e9029fb4f8141e40c.md | 49 ++ .../657b138d33db9e50f116b5f0.md | 54 ++ .../657b1431076b365555784189.md | 49 ++ .../657b145976723b56a97b8dda.md | 56 ++ .../657b149630b3ea5873269a38.md | 49 ++ .../657b14d8353d665a187fe771.md | 38 + .../657b153ac677705c7059530d.md | 62 ++ .../657b15dbcafe4d5f39a5de82.md | 54 ++ .../657b160d6a8662610fe6a523.md | 53 ++ .../657b163c9da40e62b904be1f.md | 46 ++ .../657b18e71067d6680b9ac5d3.md | 54 ++ .../657b1985ae17886b05b382b1.md | 54 ++ .../657b19bf7b32af6caf763ef7.md | 54 ++ .../657b1a03df3ec46eca276046.md | 38 + .../657b1a27dc6daf6ffd52ff1f.md | 55 ++ .../657b1a637e4dc571f8f4d3d7.md | 49 ++ .../657b1a9581015573806e1e20.md | 47 ++ .../657b1cc072206e7ac3db88b8.md | 39 + .../657b1d080265ba7c4f96bf79.md | 30 + .../657b1d4ec0e2587e8bcc95f7.md | 15 + .../657b1da0b27fef8117827ce5.md | 54 ++ .../657b1dfec76149836ea5c7d0.md | 30 + .../657b1e2fad2ffe84ab420a56.md | 49 ++ .../657b1e66159fec86336a737b.md | 54 ++ .../657b1e9a62603587747f7f45.md | 49 ++ .../657b1ee1de7216896b5b4361.md | 42 + .../657b1f0585d48f8ac0b19654.md | 40 + .../657b1f598f63008c8bdb20b8.md | 49 ++ .../657b1f981cd42e8dc3b282d9.md | 49 ++ .../657b1fe950c0df90346e5d12.md | 47 ++ .../657b201372864e91d4f5bb53.md | 39 + .../657b20338e0802931673c1e1.md | 26 + .../657b20985d315095e5c3851d.md | 54 ++ .../657b21e28a01039cb27b4f13.md | 50 ++ .../657b221b2ab0ac9e18a173ef.md | 35 + .../657b223e41ce6b9f9a01d214.md | 39 + .../657b227f7ad32ea17e2cdf28.md | 15 + .../657b2310b8cd52a4f15c1818.md | 56 ++ .../657b2340be1593a6517fe77b.md | 39 + .../657b236aa1eb9fa7b209aa03.md | 54 ++ .../657b23a413d28da927e087ca.md | 36 + .../657b23bc0e32f9aa9c62eb82.md | 50 ++ .../657b23f03b449aac2c517089.md | 27 + .../657b242d06512dadaea55056.md | 49 ++ .../657b24542024c8af092cd6c4.md | 39 + .../657b24774d8cdab052ffe2a6.md | 48 ++ .../657b24a500800cb1c6945da9.md | 40 + .../657b2be1b19500c63fc1a467.md | 41 + .../657b2c040bb5f6c77fa5df80.md | 38 + .../657b2d618b8851cc5baf9490.md | 38 + .../657b2d9cb974dace59024964.md | 54 ++ .../657b2dd7745fdcd03e5160f4.md | 15 + .../657b2e0666d4a9d1b851f90e.md | 54 ++ .../657b2ec6c054efd71e503a27.md | 49 ++ .../657b2eeb31e435d89ecce6f3.md | 33 + .../657b2f0b3bcfe7d9f4151854.md | 54 ++ .../657b2f3bf7a2cbdb58d959d5.md | 49 ++ .../657b2f6cb66826dcbac08094.md | 49 ++ .../657b2fa89ddc20de629ca21f.md | 38 + .../657b2fc9c0f96bdfddfce4d9.md | 46 ++ .../657b2fea728c2be14a8a98c4.md | 49 ++ .../657b3026ff79fbe2dda6cb39.md | 54 ++ .../657b306fe94f29e4b4aa9105.md | 55 ++ .../657b30ac03b523e6640deaf1.md | 49 ++ .../657b30e1b9f035e7e656fd01.md | 54 ++ .../657b315533e4edeba65111b8.md | 54 ++ .../657b46c9be150f577f5a1086.md | 15 + .../dialogue-placeholder.md | 15 - .../dialogue-placeholder.md | 15 - .../challenge-1.md | 41 - .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../build-a-personal-portfolio-webpage.md | 281 ------- .../build-a-product-landing-page.md | 470 ----------- .../build-a-survey-form.md | 518 ------------ .../build-a-technical-documentation-page.md | 529 ------------- .../build-a-tribute-page.md | 325 -------- .../build-your-own-functions.md | 71 -- .../comparing-and-sorting-tuples.md | 61 -- .../conditional-execution.md | 54 -- .../data-visualization-mailing-lists.md | 56 -- .../data-visualization-page-rank.md | 34 - .../dictionaries-and-loops.md | 53 -- .../dictionaries-common-applications.md | 47 -- .../files-as-a-sequence.md | 44 -- .../intermediate-expressions.md | 56 -- .../intermediate-strings.md | 53 -- .../introduction-elements-of-python.md | 40 - .../introduction-hardware-achitecture.md | 34 - .../introduction-python-as-a-language.md | 43 - .../introduction-why-program.md | 54 -- .../iterations-definite-loops.md | 43 - .../iterations-loop-idioms.md | 49 -- .../iterations-more-patterns.md | 52 -- .../loops-and-iterations.md | 55 -- .../make-a-relational-database.md | 52 -- .../more-conditional-structures.md | 60 -- .../networking-protocol.md | 38 - .../networking-text-processing.md | 34 - .../networking-using-urllib-in-python.md | 41 - .../networking-web-scraping-with-python.md | 60 -- .../networking-with-python.md | 38 - .../networking-write-a-web-browser.md | 54 -- .../python-for-everybody/object-lifecycle.md | 71 -- .../objects-a-sample-class.md | 62 -- .../objects-inheritance.md | 38 - .../python-dictionaries.md | 59 -- .../python-for-everybody/python-functions.md | 42 - .../python-for-everybody/python-lists.md | 43 - .../python-for-everybody/python-objects.md | 38 - .../python-for-everybody/reading-files.md | 42 - ...xpressions-matching-and-extracting-data.md | 45 -- ...ular-expressions-practical-applications.md | 38 - .../regular-expressions.md | 42 - .../relational-database-design.md | 38 - .../relational-databases-and-sqlite.md | 44 -- .../relational-databases-join-operation.md | 34 - ...al-databases-many-to-many-relationships.md | 52 -- ...ational-databases-relationship-building.md | 34 - ...-relationships-in-a-relational-database.md | 38 - .../python-for-everybody/strings-and-lists.md | 51 -- .../python-for-everybody/strings-in-python.md | 63 -- .../the-tuples-collection.md | 63 -- .../using-web-services.md | 42 - .../variables-expressions-and-statements.md | 38 - .../visualizing-data-with-python.md | 42 - ...services-api-rate-limiting-and-security.md | 50 -- .../python-for-everybody/web-services-apis.md | 38 - .../python-for-everybody/web-services-json.md | 60 -- .../web-services-service-oriented-approach.md | 34 - .../web-services-xml-schema.md | 34 - .../python-for-everybody/web-services-xml.md | 47 -- .../working-with-lists.md | 38 - .../5f33310c1851c6c4da013250.md | 59 -- .../615389bd81347947ea7ba896.md | 91 --- .../60b69a66b6ddb80858c51578.md | 112 --- .../60b69a66b6ddb80858c51579.md | 63 -- .../60b69a66b6ddb80858c5157a.md | 56 -- .../60b69a66b6ddb80858c5157b.md | 50 -- .../60b69a66b6ddb80858c5157c.md | 51 -- .../60b69a66b6ddb80858c5157d.md | 54 -- .../60b69a66b6ddb80858c5157e.md | 56 -- .../60b69a66b6ddb80858c5157f.md | 69 -- .../60b69a66b6ddb80858c51580.md | 59 -- .../60b69a66b6ddb80858c51581.md | 68 -- .../60b69a66b6ddb80858c51582.md | 70 -- .../60b69a66b6ddb80858c51583.md | 84 -- .../60b69a66b6ddb80858c51584.md | 79 -- .../60b69a66b6ddb80858c51585.md | 74 -- .../60b69a66b6ddb80858c51586.md | 93 --- .../60b69a66b6ddb80858c51587.md | 91 --- .../60b69a66b6ddb80858c51588.md | 102 --- .../60b69a66b6ddb80858c51589.md | 88 --- .../60b69a66b6ddb80858c5158a.md | 107 --- .../60b69a66b6ddb80858c5158b.md | 105 --- .../60b69a66b6ddb80858c5158c.md | 116 --- .../60b69a66b6ddb80858c5158d.md | 114 --- .../60b69a66b6ddb80858c5158e.md | 105 --- .../60b69a66b6ddb80858c5158f.md | 126 --- .../60b69a66b6ddb80858c51590.md | 124 --- .../60b69a66b6ddb80858c51591.md | 115 --- .../60b69a66b6ddb80858c51592.md | 136 ---- .../60b69a66b6ddb80858c51593.md | 125 --- .../60b69a66b6ddb80858c51594.md | 135 ---- .../60b69a66b6ddb80858c51595.md | 146 ---- .../60b69a66b6ddb80858c51596.md | 144 ---- .../60b69a66b6ddb80858c51597.md | 135 ---- .../60b69a66b6ddb80858c51598.md | 142 ---- .../60b69a66b6ddb80858c51599.md | 156 ---- .../60b69a66b6ddb80858c5159a.md | 158 ---- .../60b69a66b6ddb80858c5159b.md | 161 ---- .../60b69a66b6ddb80858c5159c.md | 169 ---- .../60b69a66b6ddb80858c5159d.md | 167 ---- .../60b69a66b6ddb80858c5159e.md | 178 ----- .../60b69a66b6ddb80858c5159f.md | 183 ----- .../60b69a66b6ddb80858c515a0.md | 181 ----- .../60b69a66b6ddb80858c515a1.md | 192 ----- .../60b69a66b6ddb80858c515a2.md | 190 ----- .../60b69a66b6ddb80858c515a3.md | 201 ----- .../60b69a66b6ddb80858c515a4.md | 199 ----- .../60b69a66b6ddb80858c515a5.md | 190 ----- .../60b69a66b6ddb80858c515a6.md | 211 ----- .../60b69a66b6ddb80858c515a7.md | 217 ----- .../60b69a66b6ddb80858c515a8.md | 207 ----- .../60b69a66b6ddb80858c515a9.md | 217 ----- .../60b69a66b6ddb80858c515aa.md | 220 ------ .../60b69a66b6ddb80858c515ab.md | 225 ------ .../60b69a66b6ddb80858c515ac.md | 228 ------ .../60b69a66b6ddb80858c515ad.md | 225 ------ .../60b69a66b6ddb80858c515ae.md | 245 ------ .../60b69a66b6ddb80858c515af.md | 240 ------ .../60b69a66b6ddb80858c515b0.md | 238 ------ .../60b69a66b6ddb80858c515b1.md | 298 ------- .../60b69a66b6ddb80858c515b2.md | 281 ------- .../60b69a66b6ddb80858c515b3.md | 287 ------- .../60b69a66b6ddb80858c515b4.md | 285 ------- .../60b69a66b6ddb80858c515b5.md | 296 ------- .../60b69a66b6ddb80858c515b6.md | 282 ------- .../60b69a66b6ddb80858c515b7.md | 295 ------- .../60b69a66b6ddb80858c515b8.md | 286 ------- .../60b69a66b6ddb80858c515b9.md | 301 ------- .../60b69a66b6ddb80858c515ba.md | 304 ------- .../60b69a66b6ddb80858c515bc.md | 295 ------- .../60b69a66b6ddb80858c515bd.md | 348 -------- .../60b69a66b6ddb80858c515be.md | 337 -------- .../60b69a66b6ddb80858c515bf.md | 348 -------- .../60b69a66b6ddb80858c515c0.md | 359 --------- .../60b69a66b6ddb80858c515c1.md | 365 --------- .../60b69a66b6ddb80858c515c2.md | 363 --------- .../60b69a66b6ddb80858c515c3.md | 354 --------- .../60b69a66b6ddb80858c515c4.md | 381 --------- .../60b69a66b6ddb80858c515c5.md | 382 --------- .../60b69a66b6ddb80858c515c6.md | 388 --------- .../60b69a66b6ddb80858c515c7.md | 739 ----------------- .../60b80da8676fb3227967a731.md | 71 -- .../60ba890832b4940f24d1936b.md | 312 -------- .../60ba89123a445e0f5c9e4022.md | 326 -------- .../60ba8913f1704c0f7a8906b8.md | 312 -------- .../60ba89146b25080f99ab54ad.md | 315 -------- .../60ba8914bab51f0fb8228e9c.md | 310 -------- .../60ba929345ab0714a3743655.md | 327 -------- .../60ba9296d4d6b414c1b10995.md | 330 -------- .../60ba92987c1e4914dfa7a0b9.md | 321 -------- .../60bad32219ebcb4a8810ac6a.md | 164 ---- .../615f5c1cb7575c7551ed8a40.md | 116 --- .../615f6a7d4ba8037bc086c2c7.md | 127 --- .../caesars-cipher.md | 88 --- .../cash-register.md | 252 ------ .../palindrome-checker.md | 125 --- .../roman-numeral-converter.md | 215 ----- .../telephone-number-validator.md | 217 ----- .../62a3b365f1cdeb33efc2502e.md | 138 ---- .../62a8f2bc37675e77d5835235.md | 355 --------- .../659b0093d7db5a1a1122b7bd.md | 682 ++++++++++++++++ .../63ec14d1c216aa063f0be4af.md | 214 ----- .../63ec19978a066607e23439f8.md | 201 ----- .../63ec1a16f930b108b8a76806.md | 227 ------ .../63ec1bbf5584390a7d08d41f.md | 209 ----- .../63ec1cb59f2a4c0be5b6dfa0.md | 198 ----- .../63ec20a06fff670d37befbd9.md | 226 ------ .../63ec3287b182ec0efe8a3135.md | 472 ----------- .../63ec3427fc3e9214c9ed2a14.md | 281 ------- .../63ec36f6133df7160be3ec66.md | 277 ------- .../63ec47b454495519739486a7.md | 283 ------- .../63ee5d38a5d29d0696f8d820.md | 297 ------- .../63ee5d8f9e7168076e932fe2.md | 309 -------- .../63ee5e0f08e82208364c4128.md | 304 ------- .../63ee5ea8be892e0955ab346c.md | 303 ------- .../63ee5fc113bcb20a5db9214b.md | 300 ------- .../63ee611d478dca0b77f6a393.md | 316 -------- .../63ee7c664f9b65137d925c8a.md | 321 -------- .../63eea5cea403a81a68ae493c.md | 331 -------- .../63eea817673c8e1c22927fa6.md | 309 -------- .../63eea8e1e143ae1d098c8c9d.md | 311 -------- .../63eeb8e86becbf1e75c2cb0d.md | 312 -------- .../63eedebb0ec0231ff1cede1a.md | 327 -------- .../63efdbc22a0c56070beabed7.md | 323 -------- .../63efe370bbfc4a08d500118e.md | 324 -------- .../63eff02f00e69a0b2ac10b43.md | 317 -------- .../63eff98ffb1d5a0d24ec79cb.md | 336 -------- .../63effe558c87a70e7072e447.md | 327 -------- .../63f0165121a9181342d5bc66.md | 320 -------- .../63f017b4ad028a148eb713c0.md | 345 -------- .../63f01861f813e01564c95315.md | 325 -------- .../63f018f04e487e164dc27bd9.md | 349 -------- .../63f01c9791a0aa1751c73760.md | 334 -------- .../63f0224ceb16dc196d2c860a.md | 335 -------- .../63f026d041bc6c1a3d5cba0f.md | 339 -------- .../63f0284532742c1b26c7a052.md | 339 -------- .../63f0289df84a581bbdbd29b7.md | 339 -------- .../63f0295e673b661ccb299e8a.md | 350 -------- .../63f029b96b9e9e1df93be951.md | 342 -------- .../63f02a4ef92d711ec1ff618c.md | 377 --------- .../63f02b22cce1c11fe9604381.md | 348 -------- .../63f02bdeb9b428208b97eb6b.md | 368 --------- .../63f02c6e18773921ba50aa53.md | 361 --------- .../63f0311f5ea9382388d6124f.md | 347 -------- .../63f033fdb1fbcc254999fcc3.md | 339 -------- .../63f03446c2ed3e264be6c7fc.md | 335 -------- .../63f0348a54a177272071a595.md | 348 -------- .../63f034d012f74627ce538d3a.md | 357 --------- .../63f03686c5ea863533ec71f4.md | 353 --------- .../63f036ec91fdf238c90665f5.md | 352 --------- .../63f0370b340915399d31e5eb.md | 367 --------- .../63f0374d5351223a747c301d.md | 394 ---------- .../63f0378e173e3c3b7638b528.md | 352 --------- .../63f038a0ae041d3c5b0cdf23.md | 353 --------- .../63f038e671d3f73d5a041973.md | 371 --------- .../63f039dbcef7673e4e758fa3.md | 381 --------- .../63f03a7143a6ef3f7f3344f0.md | 378 --------- .../63f03ac2b428b2404a5a7518.md | 368 --------- .../63f03af535682e4138fdb915.md | 395 ---------- .../63f03b1ed5ab15420c057463.md | 744 ------------------ .../63f6721d5110af243ef8f3d9.md | 352 --------- .../step-001.md | 100 --- .../step-002.md | 114 --- .../step-003.md | 119 --- .../step-004.md | 112 --- .../step-005.md | 115 --- .../step-006.md | 113 --- .../step-007.md | 122 --- .../step-008.md | 119 --- .../step-009.md | 121 --- .../step-010.md | 116 --- .../step-011.md | 117 --- .../step-012.md | 129 --- .../step-013.md | 127 --- .../step-014.md | 125 --- .../step-015.md | 123 --- .../step-016.md | 122 --- .../step-017.md | 123 --- .../step-018.md | 139 ---- .../step-019.md | 139 ---- .../step-020.md | 147 ---- .../step-021.md | 136 ---- .../step-022.md | 139 ---- .../step-023.md | 133 ---- .../step-024.md | 131 --- .../step-025.md | 141 ---- .../step-026.md | 129 --- .../step-027.md | 141 ---- .../step-028.md | 143 ---- .../step-029.md | 151 ---- .../step-030.md | 154 ---- .../step-031.md | 151 ---- .../step-032.md | 151 ---- .../step-033.md | 149 ---- .../step-034.md | 153 ---- .../step-035.md | 161 ---- .../step-036.md | 153 ---- .../step-037.md | 154 ---- .../step-038.md | 159 ---- .../step-039.md | 158 ---- .../step-040.md | 167 ---- .../step-041.md | 170 ---- .../step-042.md | 175 ---- .../step-043.md | 175 ---- .../step-044.md | 174 ---- .../step-045.md | 183 ----- .../step-046.md | 192 ----- .../step-047.md | 182 ----- .../step-048.md | 193 ----- .../step-049.md | 199 ----- .../step-050.md | 199 ----- .../step-051.md | 206 ----- .../step-052.md | 207 ----- .../step-053.md | 203 ----- .../step-054.md | 204 ----- .../step-055.md | 210 ----- .../step-056.md | 214 ----- .../step-057.md | 211 ----- .../step-058.md | 218 ----- .../step-059.md | 220 ------ .../step-060.md | 220 ------ .../step-061.md | 222 ------ .../step-062.md | 226 ------ .../step-063.md | 230 ------ .../step-064.md | 226 ------ .../step-065.md | 238 ------ .../step-066.md | 243 ------ .../step-067.md | 250 ------ .../step-068.md | 243 ------ .../step-069.md | 244 ------ .../step-070.md | 259 ------ .../step-071.md | 257 ------ .../step-072.md | 263 ------- .../step-073.md | 271 ------- .../step-074.md | 269 ------- .../step-075.md | 277 ------- .../step-076.md | 185 ----- .../step-001.md | 78 -- .../step-002.md | 80 -- .../step-003.md | 84 -- .../step-004.md | 88 --- .../step-005.md | 94 --- .../step-006.md | 94 --- .../step-007.md | 90 --- .../step-008.md | 82 -- .../step-009.md | 84 -- .../step-010.md | 82 -- .../step-011.md | 87 -- .../step-012.md | 92 --- .../step-013.md | 98 --- .../step-014.md | 97 --- .../step-015.md | 102 --- .../step-016.md | 104 --- .../step-017.md | 100 --- .../step-018.md | 103 --- .../step-019.md | 110 --- .../step-020.md | 105 --- .../step-021.md | 107 --- .../step-022.md | 120 --- .../step-023.md | 114 --- .../step-024.md | 112 --- .../step-025.md | 120 --- .../step-026.md | 128 --- .../step-027.md | 131 --- .../step-028.md | 133 ---- .../step-029.md | 134 ---- .../step-030.md | 138 ---- .../step-031.md | 142 ---- .../step-032.md | 139 ---- .../step-033.md | 140 ---- .../step-034.md | 141 ---- .../step-035.md | 139 ---- .../step-036.md | 142 ---- .../step-037.md | 150 ---- .../step-038.md | 146 ---- .../step-039.md | 150 ---- .../step-040.md | 158 ---- .../step-041.md | 157 ---- .../step-042.md | 170 ---- .../step-043.md | 163 ---- .../step-044.md | 158 ---- .../step-045.md | 157 ---- .../step-046.md | 154 ---- .../step-047.md | 159 ---- .../step-048.md | 154 ---- .../step-049.md | 156 ---- .../step-050.md | 156 ---- .../step-051.md | 160 ---- .../step-052.md | 159 ---- .../step-053.md | 173 ---- .../step-054.md | 176 ----- .../step-055.md | 176 ----- .../step-056.md | 176 ----- .../step-057.md | 177 ----- .../step-058.md | 183 ----- .../step-059.md | 183 ----- .../step-060.md | 187 ----- .../step-061.md | 189 ----- .../step-062.md | 184 ----- .../step-063.md | 183 ----- .../step-064.md | 182 ----- .../step-065.md | 186 ----- .../step-066.md | 182 ----- .../step-067.md | 192 ----- .../step-068.md | 186 ----- .../step-069.md | 184 ----- .../step-070.md | 188 ----- .../step-071.md | 190 ----- .../step-072.md | 192 ----- .../step-073.md | 188 ----- .../step-074.md | 190 ----- .../step-075.md | 197 ----- .../step-076.md | 195 ----- .../step-077.md | 200 ----- .../step-078.md | 208 ----- .../step-079.md | 211 ----- .../step-080.md | 217 ----- .../step-081.md | 220 ------ .../step-082.md | 229 ------ .../step-083.md | 225 ------ .../step-084.md | 225 ------ .../step-085.md | 230 ------ .../step-086.md | 232 ------ .../step-087.md | 237 ------ .../step-088.md | 239 ------ .../step-089.md | 251 ------ .../step-090.md | 251 ------ .../step-091.md | 257 ------ .../step-092.md | 261 ------ .../step-093.md | 260 ------ .../step-094.md | 260 ------ .../step-095.md | 262 ------ .../step-096.md | 266 ------- .../step-097.md | 273 ------- .../step-098.md | 267 ------- .../step-099.md | 276 ------- .../step-100.md | 271 ------- .../step-101.md | 268 ------- .../step-102.md | 270 ------- .../step-103.md | 265 ------- .../step-104.md | 267 ------- .../step-105.md | 264 ------- .../step-106.md | 272 ------- .../step-107.md | 268 ------- .../step-108.md | 269 ------- .../step-109.md | 275 ------- .../step-110.md | 272 ------- .../step-111.md | 272 ------- .../step-112.md | 269 ------- .../step-113.md | 271 ------- .../step-114.md | 273 ------- .../step-115.md | 279 ------- .../step-116.md | 285 ------- .../step-117.md | 288 ------- .../step-118.md | 292 ------- .../step-119.md | 297 ------- .../step-120.md | 291 ------- .../step-121.md | 301 ------- .../step-122.md | 293 ------- .../step-123.md | 298 ------- .../step-124.md | 293 ------- .../step-125.md | 298 ------- .../step-126.md | 308 -------- .../step-127.md | 300 ------- .../step-128.md | 312 -------- .../step-129.md | 318 -------- .../step-130.md | 312 -------- .../step-131.md | 312 -------- .../step-132.md | 311 -------- .../step-133.md | 316 -------- .../step-134.md | 320 -------- .../step-135.md | 325 -------- .../step-136.md | 327 -------- .../step-137.md | 328 -------- .../step-138.md | 324 -------- .../step-139.md | 327 -------- .../step-140.md | 330 -------- .../step-141.md | 316 -------- .../659ebe52d74b132a1d75c891.md | 388 +++++++++ .../elements-and-tags-question-a.md | 54 -- .../elements-and-tags-question-b.md | 49 -- .../html-boilerplate-question-a.md | 54 -- .../html-boilerplate-question-b.md | 46 -- .../html-boilerplate-question-c.md | 65 -- .../html-boilerplate-question-d.md | 48 -- .../introduction-to-html-css-question-a.md | 41 - .../introduction-to-html-css-question-b.md | 36 - .../introduction-to-html-css-question-c.md | 33 - .../introduction-to-html-css-question-d.md | 34 - .../links-and-images-question-a.md | 66 -- .../links-and-images-question-b.md | 54 -- .../links-and-images-question-c.md | 55 -- .../links-and-images-question-d.md | 112 --- .../links-and-images-question-e.md | 98 --- .../links-and-images-question-f.md | 93 --- .../links-and-images-question-g.md | 93 --- .../links-and-images-question-h.md | 97 --- ...d-ordered-and-unordered-list-question-a.md | 65 -- ...d-ordered-and-unordered-list-question-b.md | 44 -- ...d-ordered-and-unordered-list-question-c.md | 44 -- .../working-with-text-question-a.md | 60 -- .../working-with-text-question-b.md | 39 - .../working-with-text-question-c.md | 47 -- .../working-with-text-question-d.md | 38 - .../working-with-text-question-e.md | 65 -- .../working-with-text-question-f.md | 66 -- .../working-with-text-question-g.md | 48 -- .../problem-1-multiples-of-3-and-5.md | 73 -- .../challenge-1.md | 93 --- .../challenge-2.md | 41 - .../challenge-3.md | 44 -- .../dialogue-introducing.md | 15 - .../i-am-im.md | 49 -- .../im.md | 21 - .../name-and-job-title.md | 53 -- .../right.md | 33 - .../team-lead.md | 33 - .../thats-right-2.md | 25 - .../thats-right.md | 49 -- .../you-are.md | 27 - .../655c0feadb1dd77f6cda623f.md | 15 + .../657b0f0be03b2137ed88b36c.md | 54 ++ .../657b106ced8c653be6b3218f.md | 50 ++ .../657b108cf870283d22b21e8e.md | 58 ++ .../657b110ad8afcc3f8e586362.md | 38 + .../657b115008a62d41c0d7482f.md | 49 ++ .../657b119f0ce64343420bb850.md | 49 ++ .../657b11e082e48a44eb4bfc09.md | 40 + .../657b11f87368cf463ea4fe46.md | 57 ++ .../657b1240ef768447b80817ad.md | 55 ++ .../657b12ae08dd7049b300c901.md | 49 ++ .../657b12e7c306334b7c320221.md | 41 + .../657b13088693ef4ce21ce0e4.md | 49 ++ .../657b133afcef714e542b557a.md | 49 ++ .../657b135e9029fb4f8141e40c.md | 49 ++ .../657b138d33db9e50f116b5f0.md | 54 ++ .../657b1431076b365555784189.md | 49 ++ .../657b145976723b56a97b8dda.md | 56 ++ .../657b149630b3ea5873269a38.md | 49 ++ .../657b14d8353d665a187fe771.md | 38 + .../657b153ac677705c7059530d.md | 62 ++ .../657b15dbcafe4d5f39a5de82.md | 54 ++ .../657b160d6a8662610fe6a523.md | 53 ++ .../657b163c9da40e62b904be1f.md | 46 ++ .../657b18e71067d6680b9ac5d3.md | 54 ++ .../657b1985ae17886b05b382b1.md | 54 ++ .../657b19bf7b32af6caf763ef7.md | 54 ++ .../657b1a03df3ec46eca276046.md | 38 + .../657b1a27dc6daf6ffd52ff1f.md | 55 ++ .../657b1a637e4dc571f8f4d3d7.md | 49 ++ .../657b1a9581015573806e1e20.md | 47 ++ .../657b1cc072206e7ac3db88b8.md | 39 + .../657b1d080265ba7c4f96bf79.md | 30 + .../657b1d4ec0e2587e8bcc95f7.md | 15 + .../657b1da0b27fef8117827ce5.md | 54 ++ .../657b1dfec76149836ea5c7d0.md | 30 + .../657b1e2fad2ffe84ab420a56.md | 49 ++ .../657b1e66159fec86336a737b.md | 54 ++ .../657b1e9a62603587747f7f45.md | 49 ++ .../657b1ee1de7216896b5b4361.md | 42 + .../657b1f0585d48f8ac0b19654.md | 40 + .../657b1f598f63008c8bdb20b8.md | 49 ++ .../657b1f981cd42e8dc3b282d9.md | 49 ++ .../657b1fe950c0df90346e5d12.md | 47 ++ .../657b201372864e91d4f5bb53.md | 39 + .../657b20338e0802931673c1e1.md | 26 + .../657b20985d315095e5c3851d.md | 54 ++ .../657b21e28a01039cb27b4f13.md | 50 ++ .../657b221b2ab0ac9e18a173ef.md | 35 + .../657b223e41ce6b9f9a01d214.md | 39 + .../657b227f7ad32ea17e2cdf28.md | 15 + .../657b2310b8cd52a4f15c1818.md | 56 ++ .../657b2340be1593a6517fe77b.md | 39 + .../657b236aa1eb9fa7b209aa03.md | 54 ++ .../657b23a413d28da927e087ca.md | 36 + .../657b23bc0e32f9aa9c62eb82.md | 50 ++ .../657b23f03b449aac2c517089.md | 27 + .../657b242d06512dadaea55056.md | 49 ++ .../657b24542024c8af092cd6c4.md | 39 + .../657b24774d8cdab052ffe2a6.md | 48 ++ .../657b24a500800cb1c6945da9.md | 40 + .../657b2be1b19500c63fc1a467.md | 41 + .../657b2c040bb5f6c77fa5df80.md | 38 + .../657b2d618b8851cc5baf9490.md | 38 + .../657b2d9cb974dace59024964.md | 54 ++ .../657b2dd7745fdcd03e5160f4.md | 15 + .../657b2e0666d4a9d1b851f90e.md | 54 ++ .../657b2ec6c054efd71e503a27.md | 49 ++ .../657b2eeb31e435d89ecce6f3.md | 33 + .../657b2f0b3bcfe7d9f4151854.md | 54 ++ .../657b2f3bf7a2cbdb58d959d5.md | 49 ++ .../657b2f6cb66826dcbac08094.md | 49 ++ .../657b2fa89ddc20de629ca21f.md | 38 + .../657b2fc9c0f96bdfddfce4d9.md | 46 ++ .../657b2fea728c2be14a8a98c4.md | 49 ++ .../657b3026ff79fbe2dda6cb39.md | 54 ++ .../657b306fe94f29e4b4aa9105.md | 55 ++ .../657b30ac03b523e6640deaf1.md | 49 ++ .../657b30e1b9f035e7e656fd01.md | 54 ++ .../657b315533e4edeba65111b8.md | 54 ++ .../657b46c9be150f577f5a1086.md | 15 + .../dialogue-placeholder.md | 15 - .../dialogue-placeholder.md | 15 - .../challenge-1.md | 41 - .../challenge-2.md | 41 - .../challenge-3.md | 44 -- 5241 files changed, 47150 insertions(+), 808810 deletions(-) delete mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md delete mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md delete mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md delete mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md delete mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-functions.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-lists.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-objects.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/reading-files.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/using-web-services.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-json.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md delete mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md delete mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md delete mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md delete mode 100644 curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md delete mode 100644 curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md create mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md delete mode 100644 curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md delete mode 100644 curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md delete mode 100644 curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md delete mode 100644 curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md delete mode 100644 curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md delete mode 100644 curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-functions.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-lists.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-objects.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/reading-files.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/using-web-services.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-json.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md delete mode 100644 curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md delete mode 100644 curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md create mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md delete mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md create mode 100644 curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md delete mode 100644 curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md delete mode 100644 curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-data-graph-explorer/data-graph-explorer.md delete mode 100644 curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-financial-calculator/financial-calculator.md delete mode 100644 curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-graphing-calculator/graphing-calculator.md delete mode 100644 curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-multi-function-calculator/multi-function-calculator.md delete mode 100644 curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-three-math-games/three-math-games.md delete mode 100644 curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md create mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md delete mode 100644 curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md delete mode 100644 curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md delete mode 100644 curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md delete mode 100644 curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md delete mode 100644 curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md delete mode 100644 curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-functions.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-lists.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-objects.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/reading-files.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md delete mode 100644 curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md delete mode 100644 curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md create mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md delete mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md create mode 100644 curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md delete mode 100644 curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md delete mode 100644 curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md create mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md delete mode 100644 curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md delete mode 100644 curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md delete mode 100644 curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md delete mode 100644 curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md delete mode 100644 curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md delete mode 100644 curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-functions.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-lists.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-objects.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/reading-files.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/using-web-services.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-json.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md delete mode 100644 curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md delete mode 100644 curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md create mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md delete mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md create mode 100644 curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md delete mode 100644 curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md delete mode 100644 curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md create mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md delete mode 100644 curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md delete mode 100644 curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md delete mode 100644 curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md delete mode 100644 curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md delete mode 100644 curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md delete mode 100644 curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-functions.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-lists.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-objects.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/reading-files.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/using-web-services.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-json.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md delete mode 100644 curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md delete mode 100644 curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md create mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md delete mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md create mode 100644 curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md delete mode 100644 curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md delete mode 100644 curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md create mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md delete mode 100644 curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md delete mode 100644 curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md delete mode 100644 curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md delete mode 100644 curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md delete mode 100644 curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md delete mode 100644 curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-functions.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-lists.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-objects.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/reading-files.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/using-web-services.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-json.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md delete mode 100644 curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md delete mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md create mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md delete mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md create mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md delete mode 100644 curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md delete mode 100644 curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md create mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md delete mode 100644 curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md delete mode 100644 curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md delete mode 100644 curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md delete mode 100644 curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md delete mode 100644 curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md delete mode 100644 curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-functions.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-lists.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-objects.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/reading-files.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md delete mode 100644 curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md delete mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md create mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md delete mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md create mode 100644 curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md delete mode 100644 curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md delete mode 100644 curriculum/challenges/japanese/17-college-algebra-with-python/build-a-data-graph-explorer/data-graph-explorer.md delete mode 100644 curriculum/challenges/japanese/17-college-algebra-with-python/build-a-financial-calculator/financial-calculator.md delete mode 100644 curriculum/challenges/japanese/17-college-algebra-with-python/build-a-graphing-calculator/graphing-calculator.md delete mode 100644 curriculum/challenges/japanese/17-college-algebra-with-python/build-a-multi-function-calculator/multi-function-calculator.md delete mode 100644 curriculum/challenges/japanese/17-college-algebra-with-python/build-three-math-games/three-math-games.md delete mode 100644 curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md create mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md delete mode 100644 curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md delete mode 100644 curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md delete mode 100644 curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md delete mode 100644 curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md delete mode 100644 curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md delete mode 100644 curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-functions.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-lists.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-objects.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/reading-files.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md delete mode 100644 curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md delete mode 100644 curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md create mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md delete mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md create mode 100644 curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md delete mode 100644 curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md delete mode 100644 curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md create mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md delete mode 100644 curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md delete mode 100644 curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md delete mode 100644 curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md delete mode 100644 curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md delete mode 100644 curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md delete mode 100644 curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-functions.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-lists.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-objects.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/reading-files.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/using-web-services.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-json.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md delete mode 100644 curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md delete mode 100644 curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md create mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md delete mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md create mode 100644 curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md delete mode 100644 curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md delete mode 100644 curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md create mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md delete mode 100644 curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md delete mode 100644 curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md delete mode 100644 curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md delete mode 100644 curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md delete mode 100644 curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md delete mode 100644 curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-functions.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-lists.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-objects.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/reading-files.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/using-web-services.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-json.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md delete mode 100644 curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md delete mode 100644 curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md create mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md delete mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md create mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md delete mode 100644 curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md delete mode 100644 curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md create mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md delete mode 100644 curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md deleted file mode 100644 index 4050a8f54d5..00000000000 --- a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: bd7158d8c242eddfaeb5bd13 -title: أنشئ معرضا لأعمالك الخاصة -challengeType: 14 -forumTopicId: 301143 -dashedName: build-a-personal-portfolio-webpage ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://personal-portfolio.freecodecamp.rocks - -**User Stories:** - -1. Your portfolio should have a welcome section with an `id` of `welcome-section` -1. The welcome section should have an `h1` element that contains text -1. Your portfolio should have a projects section with an `id` of `projects` -1. The projects section should contain at least one element with a `class` of `project-tile` to hold a project -1. The projects section should contain at least one link to a project -1. Your portfolio should have a navbar with an id of `navbar` -1. The navbar should contain at least one link that you can click on to navigate to different sections of the page -1. Your portfolio should have a link with an id of `profile-link`, which opens your GitHub or freeCodeCamp profile in a new tab -1. Your portfolio should have at least one media query -1. The height of the welcome section should be equal to the height of the viewport -1. The navbar should always be at the top of the viewport - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -Your portfolio should have a "Welcome" section with an `id` of `welcome-section`. - -```js -const el = document.getElementById('welcome-section') -assert(!!el); -``` - -Your `#welcome-section` element should contain an `h1` element. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1').length, - 0, - 'Welcome section should contain an h1 element ' -); -``` - -You should not have any empty `h1` elements within `#welcome-section` element. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, - 0, - 'h1 element in welcome section should contain your name or camper ' + - 'name ' -); -``` - -You should have a "Projects" section with an `id` of `projects`. - -```js -const el = document.getElementById('projects') -assert(!!el); -``` - -Your portfolio should contain at least one element with a class of `project-tile`. - -```js -assert.isAbove( - document.querySelectorAll('#projects .project-tile').length, - 0 -); -``` - -Your `#projects` element should contain at least one `a` element. - -```js -assert.isAbove(document.querySelectorAll('#projects a').length, 0); -``` - -Your portfolio should have a navbar with an `id` of `navbar`. - -```js -const el = document.getElementById('navbar'); -assert(!!el); -``` - -Your `#navbar` element should contain at least one `a` element whose `href` attribute starts with `#`. - -```js -const links = [...document.querySelectorAll('#navbar a')].filter( - (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#' -); - -assert.isAbove( - links.length, - 0, - 'Navbar should contain an anchor link ' -); -``` - -Your portfolio should have an `a` element with an `id` of `profile-link`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.tagName === 'A') -``` - -Your `#profile-link` element should have a `target` attribute of `_blank`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.target === '_blank') -``` - -Your portfolio should use at least one media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -Your `#navbar` element should always be at the top of the viewport. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const navbar = document.getElementById('navbar'); - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - "Navbar's parent should be body and it should be at the top of " + - 'the viewport ' - ); - - window.scroll(0, 500); - - await timeout(1); - - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - 'Navbar should be at the top of the viewport even after ' + - 'scrolling ' - ); - window.scroll(0, 0); -})(); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Personal Portfolio - - - - - -
-
-
-

It's me!

- -

Naomi Carrigan

-

Welcome to my portfolio page!

-
-
-

Projects

-

Here's what I've worked on!

-

- - - - -

-
-

Contact me!

-

Use the links below to get in touch.

-

FreeCodeCamp.org | GitHub | Facebook | LinkedIn -

- - - -``` - -```css -nav{ - position: fixed; - width: 100%; - text-align: right; - font-size: 24pt; - top: 0%; - right: 5px; - background-color: #000000; - color: #ffffff; -} -@media (max-width: 500px){ - nav{ - display: none; - } -} -a{ - color: #ffffff; -} -main{ - text-align: center; - background-color: black; - font-family:Pacifico -} -h1{ - font-size: 48pt; -} -h2{ - font-size: 24pt; -} -p{ - font-size: 12pt; -} -#welcome-section{ - background-color:#251a4a; - color: #FFFFFF; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#projects{ - background-color: #060a9c; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#contact{ - background-color: #03300b; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -``` diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md deleted file mode 100644 index a36f6c5daf1..00000000000 --- a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: أنشئ صفحة لعرض المنتج -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://product-landing-page.freecodecamp.rocks - -**User Stories:** - -1. Your product landing page should have a `header` element with a corresponding `id="header"` -1. You can see an image within the `header` element with a corresponding `id="header-img"` (A logo would make a good image here) -1. Within the `#header` element, you can see a `nav` element with a corresponding `id="nav-bar"` -1. You can see at least three clickable elements inside the `nav` element, each with the class `nav-link` -1. When you click a `.nav-link` button in the `nav` element, you are taken to the corresponding section of the landing page -1. You can watch an embedded product video with `id="video"` -1. Your landing page has a `form` element with a corresponding `id="form"` -1. Within the form, there is an `input` field with `id="email"` where you can enter an email address -1. The `#email` input field should have placeholder text to let users know what the field is for -1. The `#email` input field uses HTML5 validation to confirm that the entered text is an email address -1. Within the form, there is a submit `input` with a corresponding `id="submit"` -1. When you click the `#submit` element, the email is submitted to a static page (use this mock URL: `https://www.freecodecamp.com/email-submit`) -1. The navbar should always be at the top of the viewport -1. Your product landing page should have at least one media query -1. Your product landing page should utilize CSS flexbox at least once - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have a `header` element with an `id` of `header`. - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -You should have an `img` element with an `id` of `header-img`. - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -Your `#header-img` should be a descendant of the `#header`. - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -Your `#header-img` should have a `src` attribute. - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -Your `#header-img`’s `src` value should be a valid URL (starts with `http`). - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -You should have a `nav` element with an `id` of `nav-bar`. - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -Your `#nav-bar` should be a descendant of the `#header`. - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -You should have at least 3 `.nav-link` elements within the `#nav-bar`. - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -Each `.nav-link` element should have an `href` attribute. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -Each `.nav-link` element should link to a corresponding element on the landing page (has an `href` with a value of another element's id. e.g. `#footer`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -You should have a `video` or `iframe` element with an `id` of `video`. - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -Your `#video` should have a `src` attribute. - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -You should have a `form` element with an `id` of `form`. - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -You should have an `input` element with an `id` of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#email` should be a descendant of the `#form`. - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -Your `#email` should have the `placeholder` attribute with placeholder text. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Your `#email` should use HTML5 validation by setting its `type` to `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -You should have an `input` element with an `id` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#submit` should be a descendant of the `#form`. - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -Your `#submit` should have a `type` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Your `#form` should have an `action` attribute of `https://www.freecodecamp.com/email-submit`. - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -Your `#email` should have a `name` attribute of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -Your `#nav-bar` should always be at the top of the viewport. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const header = document.getElementById('header'); - const headerChildren = header.children; - const navbarCandidates = [header, ...headerChildren]; - - // Return smallest top position of all navbar candidates - const getNavbarPosition = (candidates = []) => { - return candidates.reduce( - (min, candidate) => - Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)), - Infinity - ); - }; - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the viewport ' - ); - - window.scroll(0, 500); - await timeout(1); - - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the ' + - 'viewport even after scrolling ' - ); - - window.scroll(0, 0); -})(); -``` - -Your Product Landing Page should use at least one media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -Your Product Landing Page should use CSS Flexbox at least once. - -```js -const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display) -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media') -const usesFlex = cssRules.find(rule => hasFlex(rule)) -const usesFlexMedia = mediaRules.find(mediaRule => { - return [...mediaRule.cssRules].find(rule => hasFlex(rule)) -}) -assert(usesFlex || usesFlexMedia) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Product Landing Page - - - -
-

- Pokemon Daycare Service -

-
-

What we offer

-
-
- -
-
Guaranteed friendly and loving staff!
-
-
-
- -
-
- Comfortable environment for Pokemon to explore and play! -
-
-
-
- -
-
- Multiple membership plans to fit your lifestyle! -
-
-
-
-

Check us out!

- A sneak peek into our facility: -
- -
-
-

Membership Plans

-
-
- Basic Membership
-
    -
  • One Pokemon
    • -
  • Food and berries provided
    • -
- $9.99/month -
-
- Silver Membership
-
    -
  • Up to Three Pokemon
    • -
  • Food and berries provided
    • -
  • Grooming and accessories included
    • -
- $19.99/month -
-
- Gold Membership
-
    -
  • Up to six Pokemon!
    • -
  • Food and berries provided
    • -
  • Grooming and accessories included
    • -
  • Personal training for each Pokemon
    • -
  • Breeding and egg hatching
    • -
- $29.99/month -
-
-
-
-

Sign up for our newsletter!

- - -
- -
- - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md deleted file mode 100644 index 0a495af62a6..00000000000 --- a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: Build a Survey Form -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://survey-form.freecodecamp.rocks - -**User Stories:** - -1. You should have a page title in an `h1` element with an `id` of `title` -1. You should have a short explanation in a `p` element with an `id` of `description` -1. You should have a `form` element with an `id` of `survey-form` -1. Inside the form element, you are **required** to enter your name in an `input` field that has an `id` of `name` and a `type` of `text` -1. Inside the form element, you are **required** to enter your email in an `input` field that has an `id` of `email` -1. If you enter an email that is not formatted correctly, you will see an HTML5 validation error -1. Inside the form, you can enter a number in an `input` field that has an `id` of `number` -1. The number input should not accept non-numbers, either by preventing you from typing them or by showing an HTML5 validation error (depending on your browser). -1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you will see an HTML5 validation error -1. For the name, email, and number input fields, you can see corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"` -1. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field -1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from -1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute -1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute -1. Inside the form element, you are presented with a `textarea` for additional comments -1. Inside the form element, you are presented with a button with `id` of `submit` to submit all the inputs - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have an `h1` element with an `id` of `title`. - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -Your `#title` should not be empty. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -You should have a `p` element with an `id` of `description`. - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -Your `#description` should not be empty. - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -You should have a `form` element with an `id` of `survey-form`. - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -You should have an `input` element with an `id` of `name`. - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#name` should have a `type` of `text`. - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -Your `#name` should require input. - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -Your `#name` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -You should have an `input` element with an `id` of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#email` should have a `type` of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -Your `#email` should require input. - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -Your `#email` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -You should have an `input` element with an `id` of `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#number` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -Your `#number` should have a `type` of `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -Your `#number` should have a `min` attribute with a numeric value. - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -Your `#number` should have a `max` attribute with a numeric value. - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -You should have a `label` element with an `id` of `name-label`. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -You should have a `label` element with an `id` of `email-label`. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -You should have a `label` element with an `id` of `number-label`. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Your `#name-label` should contain text that describes the input. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -Your `#email-label` should contain text that describes the input. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -Your `#number-label` should contain text that describes the input. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -Your `#name-label` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -Your `#email-label` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -Your `#number-label` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -Your `#name` should have a `placeholder` attribute and value. - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Your `#email` should have a `placeholder` attribute and value. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Your `#number` should have a `placeholder` attribute and value. - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -You should have a `select` field with an `id` of `dropdown`. - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -Your `#dropdown` should have at least two selectable (not disabled) `option` elements. - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -Your `#dropdown` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -You should have at least two `input` elements with a `type` of `radio` (radio buttons). - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -You should have at least two radio buttons that are descendants of `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -All your radio buttons should have a `value` attribute and value. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -All your radio buttons should have a `name` attribute and value. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -Every radio button group should have at least 2 radio buttons. - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -All your checkboxes inside `#survey-form` should have a `value` attribute and value. - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -You should have at least one `textarea` element that is a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -You should have an `input` or `button` element with an `id` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -Your `#submit` should have a `type` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Your `#submit` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Survey Form - - -

Survey Form

-

The card below was built as a sample survey form for freeCodeCamp.

-
-

Join the Togepi Fan Club!

-

- Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -

-
- - - - -

Who is your favourite Pokemon?

- - - -

Which communications do you want to receive?

- - - -

Any other information you would like to share?

- -

- Please note: This form is a proof of concept. Submitting the form - will not actually transmit your data. -

- -
-
- - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md deleted file mode 100644 index 9b184a652c2..00000000000 --- a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: Build a Technical Documentation Page -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://technical-documentation-page.freecodecamp.rocks - -**User Stories:** - -1. You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation) -1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five -1. The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section. -1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`) -1. The `.main-section` elements should contain at least ten `p` elements total (not each) -1. The `.main-section` elements should contain at least five `code` elements total (not each) -1. The `.main-section` elements should contain at least five `li` items total (not each) -1. You can see a `nav` element with a corresponding `id="navbar"` -1. The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation -1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section` -1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar -1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world") -1. When you click on a navbar element, the page should navigate to the corresponding section of the `#main-doc` element (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header) -1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user -1. Your technical documentation should use at least one media query - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have a `main` element with an `id` of `main-doc`. - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -You should have at least five `section` elements with a class of `main-section`. - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -All of your `.main-section` elements should be `section` elements. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -You should have at least five `.main-section` elements that are descendants of `#main-doc`. - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -The first child of each `.main-section` should be a `header` element. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -None of your `header` elements should be empty. - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -All of your `.main-section` elements should have an `id`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id's. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -You should have at least 10 `p` elements (total) within your `.main-section` elements. - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -You should have at least five `code` elements that are descendants of `.main-section` elements. - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -You should have at least five `li` elements that are descendants of `.main-section` elements. - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -You should have a `nav` element with an `id` of `navbar`. - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -Your `#navbar` should have exactly one `header` element within it. - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -You should have at least one `a` element with a class of `nav-link`. - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -All of your `.nav-link` elements should be anchor (`a`) elements. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -All of your `.nav-link` elements should be in the `#navbar`. - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -You should have the same number of `.nav-link` and `.main-section` elements. - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -The `header` element in the `#navbar` should come before any link (`a`) elements also in the `#navbar`. - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world"). - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -Each `.nav-link` should have an `href` attribute that links to its corresponding `.main-section` (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id). - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -Your `#navbar` should always be on the left edge of the window. - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -Your Technical Documentation project should use at least one media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Technical Documentation Page - - - -
-
-
Introduction
-

- Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -

-
-
-
Definitions
-

- To start with, let's define some of the more common terms used in - algebra: -

-
    -
  • - Variable: A variable is an unknown value, usually represented - by a letter. -
    • -
  • - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. -
    • -
  • - Equation: An equation is a mathematical argument in which two - expressions result in the same value. -
    • -
-
-
-
Examples
-

- Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.

- x + 5 = 12

- In this above example, we have: -

-
    -
  • Variable: The variable in the example is "x".
    • -
  • - Expression: There are two expressions in this example. They - are "x+5" and "12". -
    • -
  • - Equation: The entire example, "x+5=12", is an equation. -
    • -
-
-
-
Solving Equations
-

- The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".

- x + 5 = 12

- In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.

- x + 5 - 5 = 12 - 5

- The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:

- x = 7

- We now have our solution to this equation! -

-
-
-
Solving Equations II
-

- Let us look at a slightly more challenging equation.

- 3x + 4 = 13

- Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:

- 3x = 9

- "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.

- x = 3

- And now we have our solution! -

-
-
-
Solving Equations III
-

- Now we are getting in to more complex operations. Here is another - equation for us to look at:

- x^2 - 8 = 8

- Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.

- x^2 = 16

- But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
- An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -

- x = √9

- Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:

- x = 3 -

-
-
-
System of Equations
-

- As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:

- y = 3x

- An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
- Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:

- y = 3x | y - 6 = x - A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:

- 3x - 6 = x

- Now we can solve for "x"! We start by adding 6 to each side.

- 3x = x + 6

- We still need to get "x" by itself, so we subtract "x" from both sides - and get:

- 2x = 6

- If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!

- x = 3

- However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:

- y = 3x

- We have a value for "x" now, so let's see what happens if we put that - value in.

- y = 3*3

- We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:

- x = 3 and y = 9

-

-
-
-
Try it Yourself!
-

Coming Soon!

-

Keep an eye out for new additions!

-
-
-
More Information
-

Check out the following links for more information!

- -
-
- - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md deleted file mode 100644 index 7b0ca1f4c23..00000000000 --- a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: Build a Tribute Page -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://tribute-page.freecodecamp.rocks - -**User Stories:** - -1. Your tribute page should have a `main` element with a corresponding `id` of `main`, which contains all other elements -1. You should see an element with an `id` of `title`, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug") -1. You should see either a `figure` or a `div` element with an `id` of `img-div` -1. Within the `#img-div` element, you should see an `img` element with a corresponding `id="image"` -1. Within the `#img-div` element, you should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `#img-div` -1. You should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page -1. You should see an `a` element with a corresponding `id="tribute-link"`, which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of `target` and set it to `_blank` in order for your link to open in a new tab -1. Your `#image` should use `max-width` and `height` properties to resize responsively, relative to the width of its parent element, without exceeding its original size -1. Your `img` element should be centered within its parent element - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have a `main` element with an `id` of `main`. - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -Your `#img-div`, `#image`, `#img-caption`, `#tribute-info`, and `#tribute-link` should all be descendants of `#main`. - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -You should have an element with an `id` of `title`. - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -Your `#title` should not be empty. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -You should have a `figure` or `div` element with an `id` of `img-div`. - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -You should have an `img` element with an `id` of `image`. - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -Your `#image` should be a descendant of `#img-div`. - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -You should have a `figcaption` or `div` element with an `id` of `img-caption`. - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -Your `#img-caption` should be a descendant of `#img-div`. - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -Your `#img-caption` should not be empty. - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -You should have an element with an `id` of `tribute-info`. - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -Your `#tribute-info` should not be empty. - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -You should have an `a` element with an `id` of `tribute-link`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -Your `#tribute-link` should have an `href` attribute and value. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -Your `#tribute-link` should have a `target` attribute set to `_blank`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -Your `img` element should have a `display` of `block`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -Your `#image` should have a `max-width` of `100%`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -Your `#image` should have a `height` of `auto`. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -Your `#image` should be centered within its parent. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - - Tribute Page - - -

Tribute Page

-

The below card was designed as a tribute page for freeCodeCamp.

-
-
- An image of Togepi -
Togepi, happy as always.
-
-

Togepi

-
-
-

- Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -

-

- Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -

-
-

Battle Information

-
    -
  • Type: Fairy
    • -
  • Evolutions: Togepi -> Togetic -> Togekiss
    • -
  • Moves: Growl, Pound, Sweet Kiss, Charm
    • -
  • Weaknesses: Poison, Steel
    • -
  • Resistances: Dragon
    • -
-

- Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -

-
-
- - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md deleted file mode 100644 index 88df8138e5b..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05b -title: Build your own Functions -challengeType: 11 -videoId: nLDychdBwUg -bilibiliIds: - aid: 249487483 - bvid: BV1Fv411J7bS - cid: 376340281 -dashedName: build-your-own-functions ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What will the following Python program print out?: - -```python -def fred(): - print("Zap") -def jane(): - print("ABC") - -jane() -fred() -jane() -``` - -## --answers-- - -
Zap
-ABC
-jane
-fred
-jane
- ---- - -
Zap
-ABC
-Zap
- ---- - -
ABC
-Zap
-jane
- ---- - -
ABC
-Zap
-ABC
- ---- - -
Zap
-Zap
-Zap
- -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index dc30911a305..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: Comparing and Sorting Tuples -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -Which does the same thing as the following code?: - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index c7e87b2f7ed..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: Conditional Execution -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -Which code is indented correctly to print "Yes" if x = 0 and y = 10? - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index 133a570f303..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: 'تصور البيانات: القوائم البريدية (Data Visualization: Mailing Lists)' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -مزيد من الموارد: - -\- Exercise: Geodata - -\- Exercise: Gmane Model - -\- Exercise: Gmane Spider - -\- Exercise: Gmane Viz - -\- Exercise: Page Rank - -\- Exercise: Page Spider - -\- Exercise: Page Viz - -# --question-- - -## --text-- - -Which is a common JavaScript visualization library? - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index db4878ed822..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: 'Data Visualization: Page Rank' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -How does the PageRank algorithm work? - -## --answers-- - -It determines which pages are most highly connected. - ---- - -It ranks pages based on view counts. - ---- - -It figures out which pages contain the most important content. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index f01b3320828..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: Dictionaries and Loops -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What will the following code print?: - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -
annie 42
-jan 100
- ---- - -
chuck 1
-annie 42
-jan 100
- ---- - -
chuck 1
- ---- - -
[Error]
- -## --video-solution-- - -1 diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index aef8d142872..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: 'Dictionaries: Common Applications' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -What will the following code print? - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[will return error] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index 75d21cc8994..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: Files as a Sequence -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What does the word 'continue' do in the middle of a loop? - -## --answers-- - -Skips to the code directly after the loop. - ---- - -Skips to the next line in the code. - ---- - -Skips to the next iteration of the loop. - ---- - -Skips the next block of code. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index d70a408080f..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: Intermediate Expressions -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -More resources: - -\- Exercise 1 - -\- Exercise 2 - -# --question-- - -## --text-- - -What will print out after running this code: - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index c2bcadfe2b0..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: Intermediate Strings -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What is the value of i in the following code? - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index 8b4f0cda163..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: 'Introduction: Elements of Python' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -What will the following program print out: - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index ca70295ff28..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: 'Introduction: Hardware Architecture' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -Where are your programs stored when they are running? - -## --answers-- - -Hard Drive. - ---- - -Memory. - ---- - -Central Processing Unit. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index a5d07b24723..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: 'Introduction: Python as a Language' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -What will print out after running these two lines of code: - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index 0d33e12e8f9..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: 'Introduction: Why Program?' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -More resources: - -\- Install Python on Windows - -\- Install Python on MacOS - -# --question-- - -## --text-- - -Who should learn to program? - -## --answers-- - -College students. - -### --feedback-- - -College students should learn to program, but there's a better answer. - ---- - -People who want to become software developers. - -### --feedback-- - -People who want to become software developers should learn to program, but there's a better answer. - ---- - -Everyone. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index 7e1ed038bca..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: 'Iterations: Definite Loops' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -How many lines will the following code print?: - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index 70a07c31848..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: 'Iterations: Loop Idioms' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -Below is code to find the smallest value from a list of values. One line has an error that will cause the code to not work as expected. Which line is it?: - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index d0c75d1cd52..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: 'Iterations: More Patterns' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -Which of these evaluates to False? - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 51ed9ff4dbc..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: Loops and Iterations -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -What will the following code print out?: - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -
0
-1
-2
- ---- - -
0
-1
-2
-3
- ---- - -
1
-2
- ---- - -
1
-2
-3
- -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index 9fbd557d8d6..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: Make a Relational Database -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -What SQL command would you use to retrieve all users that have the email address `quincy@freecodecamp.org`? - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index 3ef5463b743..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: More Conditional Structures -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -More resources: - -\- Exercise 1 - -\- Exercise 2 - -# --question-- - -## --text-- - -Given the following code: - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -Which line/lines should be surrounded by `try` block? - -## --answers-- - -1 - ---- - -3 - ---- - -3,4 - ---- - -4 - ---- - -None - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index 47d6d52de45..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: Networking Protocol -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -What type of HTTP request is usually used to access a website? - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index db73bd6e5f7..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: 'Networking: Text Processing' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -Which type of encoding do most websites use? - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index 1413e0471b4..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: 'Networking: Using urllib in Python' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -What will the output of the following code be like?: - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -Just contents of "romeo.txt". - ---- - -A header and the contents of "romeo.txt". - ---- - -A header, a footer, and the contents of "romeo.txt". - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index 2d1fb18d938..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: 'Networking: Web Scraping with Python' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -More resources: - -\- Exercise: socket1 - -\- Exercise: urllib - -\- Exercise: urllinks - -# --question-- - -## --text-- - -What Python library is used for parsing HTML documents and extracting data from HTML documents? - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index f21045dff29..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: Networking with Python -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -What Python library gives access to TCP Sockets? - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index e8127560b52..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: 'Networking: Write a Web Browser' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -What does the following code create?: - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -A simple web server. - ---- - -A simple email client. - ---- - -A simple todo list. - ---- - -A simple web browser. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index be8ff0ffce1..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: Object Lifecycle -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -What will the following program print?: - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - -
-Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 2
-Quincy party count 3
-
- ---- - -
-Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 1
-Quincy party count 2
-
- ---- - -
-Quincy constructed
-Quincy party count 1
-Quincy party count 2
-Miya constructed
-Miya party count 1
-
- -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index 956ee3e10ff..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: 'Objects: A Sample Class' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -What will the following program print?: - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - -
-So far 1
-So far 2
-
- ---- - -
-0
-0
-
- ---- - -
-2
-2
-
- ---- - -
-2
-4
-
- -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index 285061db3ac..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: 'Objects: Inheritance' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -What is inheritance in object-oriented programming? - -## --answers-- - -A new class created when a parent class is extended. - ---- - -A constructed instance of a class. - ---- - -The ability to create a new class by extending an existing class. - ---- - -A method that is called at the moment when a class is being used to construct an object. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index 962ec931113..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Python Dictionaries -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -What does dict equal after running this code?: - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index 3b5ea72b3c7..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Python Functions -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -What is the purpose of the "def" keyword in Python? - -## --answers-- - -It is slang that means "The following code is really cool." - ---- - -It indicates the start of a function. - ---- - -It indicates that the following indented section of code is to be stored for later. - ---- - -It indicates the start of a function, and the following indented section of code is to be stored for later. - ---- - -None of the above. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index 4266a29a5e0..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Python Lists -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -What is the value of x after running this code: - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index 6e8ed9b8c55..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Python Objects -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -Which is NOT true about objects in Python? - -## --answers-- - -Objects get created and used. - ---- - -Objects are bits of code and data. - ---- - -Objects hide detail. - ---- - -Objects are one of the five standard data types. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index c4cc75d8e4d..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: Reading Files -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -What is used to indicate a new line in a string? - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index 2426a907099..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: 'Regular Expressions: Matching and Extracting Data' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -What will the following program print?: - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index 865668ab710..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: 'Regular Expressions: Practical Applications' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -What will search for a "$" in a regular expression? - -## --answers-- - -$ - ---- - -\\dollar\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index d48b4942469..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: Regular Expressions -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -Which regex matches only a white space character? - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index d891951cb05..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: Relational Database Design -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -What is the best practice for how many times a piece of string data should be stored in a database? - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index a7c898a3d22..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: Relational Databases and SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -Download SQLite -Download DB Browser for SQLite -SQLite usage - -# --question-- - -## --text-- - -Which is NOT a primary data structure in a database? - -## --answers-- - -index - ---- - -table - ---- - -row - ---- - -column - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index 85f34ae6128..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: 'Relational Databases: Join Operation' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -When using a JOIN clause in an SQL statement, what does ON do? - -## --answers-- - -It indicates what tables to perform the JOIN on. - ---- - -It specifies the fields to use for the JOIN. - ---- - -It indicates how the two tables are to be joined. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index 53b73ce222b..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: 'Relational Databases: Many-to-many Relationships' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -More resources: - -\- Exercise: Email - -\- Exercise: Roster - -\- Exercise: Tracks - -\- Exercise: Twfriends - -\- Exercise: Twspider - -# --question-- - -## --text-- - -Which is an example of a many-to-many relationship? - -## --answers-- - -teacher to student - ---- - -customer to order - ---- - -book to pages - ---- - -city to country - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index b9d6049238e..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: 'Relational Databases: Relationship Building' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -What does the INSERT command do in SQL? - -## --answers-- - -It defines a new row by listing the fields we want to include followed by the values we want placed in the new row. - ---- - -It defines a new column by listing the rows we want to include followed by the values we want placed in the new column. - ---- - -It defines a new table by listing the rows and fields we want to include followed by the values that we want placed in the table. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index 0d5729bb07a..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: Representing Relationships in a Relational Database -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -What is a foreign key? - -## --answers-- - -A key that is not supposed to be there. - ---- - -A key that uses non-latin characters. - ---- - -A number that points to the primary key of an associated row in a different table. - ---- - -A key that the "real world" might use to look up a row. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index 9ba1ca3e9c8..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: Strings and Lists -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What does n equal in this code? - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -mail - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index 25d7a36267e..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Strings in Python -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -What will the following code print?: - -```python -for n in "banana": - print(n) -``` - -## --answers-- - -
-n
-n
-
- ---- - -
-0
-1
-
- ---- - -
-0
-1
-2
-3
-4
-5
-
- ---- - -
-b
-a
-n
-a
-n
-a
-
- -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index a5bdb4ead0d..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: The Tuples Collection -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -What will the following code print?: - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - -
-k i
-k i
-k i
-
- ---- - -
-quincy 0
-beau 1
-kris 2
-
- ---- - -
-quincy 1
-beau 5
-kris 9
-
- ---- - -
-1 quincy
-5 beau
-9 kris
-
- -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index efde4ee7116..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: Using Web Services -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -What are the two most common ways to send data over the internet? - -## --answers-- - -JSON and TXT - ---- - -JSON and XML - ---- - -XML and TXT - ---- - -XML and PHP - ---- - -PHP and TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index 09fc7f3864e..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: 'Variables, Expressions, and Statements' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -What is the symbol used in an assignment statement? - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index 31853c7188d..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: Visualizing Data with Python -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -Most data needs to be \_\_\_\_\_\_ before using it. - -## --answers-- - -converted to JSON format - ---- - -graphed - ---- - -cleaned - ---- - -memorized - ---- - -turned into song - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index 53f2e714cae..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'Web Services: API Rate Limiting and Security' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -More resources: - -\- Exercise: GeoJSON - -\- Exercise: JSON - -\- Exercise: Twitter - -\- Exercise: XML - -# --question-- - -## --text-- - -When making a request from the Twitter API, what information must always be sent with the request? - -## --answers-- - -Twitter username - ---- - -date range - ---- - -search term - ---- - -key - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index 64d89a2f9c9..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'Web Services: APIs' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -What does API stand for? - -## --answers-- - -Application Portable Intelligence - ---- - -Associate Programming International - ---- - -Application Program Interface - ---- - -Action Portable Interface - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index 9716520ee1b..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'Web Services: JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -What will the following code print?: - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[Error] - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index e246a3b48ff..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'Web Services: Service Oriented Approach' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -With a services oriented approach to developing web apps, where is the data located? - -## --answers-- - -Spread across many computer systems connected via the internet or internal network. - ---- - -Within different services on the main web server. - ---- - -On a separate database server. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index 585ea239633..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'Web Services: XML Schema' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -What is XSD? - -## --answers-- - -The W3C Schema specification for XML. - ---- - -The standard JSON schema from MOZ. - ---- - -Extensible Situational Driver - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index 226d773ca77..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'Web Services: XML' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -What is wrong with the following XML?: - -```xml - - Chuck - - +1 734 303 4456 - - -``` - -## --answers-- - -Email tag is missing closing tag. - ---- - -Spacing will cause XML to be invalid. - ---- - -Phone tag is missing closing tag. - ---- - -Plain text should be encoded using UTF-8. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md deleted file mode 100644 index b6712797e7d..00000000000 --- a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f065 -title: Working with Lists -challengeType: 11 -videoId: lCnHfTHkhbE -bilibiliIds: - aid: 376965958 - bvid: BV1No4y1S7oi - cid: 376387989 -dashedName: working-with-lists ---- - -# --question-- - -## --text-- - -Which method is used to add an item at the end of a list? - -## --answers-- - -insert - ---- - -push - ---- - -append - ---- - -new - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index 1f1e5da7f56..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: الخطوة 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Flexbox هو تخطيط CSS أحادي البعد يمكنه التحكم في الطريقة التي يتم فيها المسافة بين العناصر وتحويلها داخل الحاوية. - -لاستخدامه، أعطي عنصر `display` خاصية `flex`. هذا سيجعل العنصر حاوي flex. أي فرع مباشر لحاوي flex تسمى عناصر flex. - -أنشئ منتقي `.gallery`, يحتوى على خاصية flex. - -# --hints-- - -يجب أن يكون لديك منتقي `.gallery`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); -``` - -يجب أن يحتوي منتقي `.gallery` على خاصية `display` بقيمة `flex`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
-

css flexbox photo gallery

-
-
- - - - - - - - - -
- - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; -} - -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { - width: 100%; - max-width: 350px; - height: 300px; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index 8dc14b62c09..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: الخطوة 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -ابدأ بإعداد بنية HTML الخاصة بك. قم بإضافة تعريف `` وعنصر `html` مع سمة `lang` تم تعيينها إلى `en`. ضمن عنصر `html` أضف عنصر `head` وعنصر `body`. - -# --hints-- - -يجب أن يحتوي الكود الخاص بك على `DOCTYPE`. - -```js -assert(code.match(/` بعد تحديد النوع. - -```js -assert(code.match(/html\s*>/gi)); -``` - -يجب أن يكون تعريف `DOCTYPE` في بداية HTML الخاص بك. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -يجب أن يحتوي عنصر `html` الخاص بك على علامة افتتاحية مع سمة `lang` بقيمة `en` - -```js -assert(code.match(//gi)); -``` - -يجب أن يحتوي عنصر `html` الخاص بك على closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -يجب أن يكون لديك الـ opening tag للـ `head`. - -```js -assert(code.match(//i)); -``` - -يجب أن يكون لديك الـ closing tag للـ `head`. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -يجب أن يكون لديك الـ opening tag للـ `body`. - -```js -assert(code.match(//i)); -``` - -يجب أن يكون لديك الـ closing tag للـ `body`. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -عناصر `head` و `body` يجب أن يكونا أشقاء (siblings). - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -عنصر `head` يجب أن يكون داخل عنصر `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -عنصر `body` يجب أن يكون داخل عنصر `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md deleted file mode 100644 index 9aebe7fdbfc..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: الخطوة 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -ضمن عنصر `head` الخاص بك، أضف وسم `meta` مع سمة `charset` معينة إلى `utf-8`. ايضا قم بإضافة عنصر `title` مع النص `Picasso Painting`. - -# --hints-- - -يجب عليك إضافة عنصر `meta` واحد بالضبط. - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -يجب أن يحتوي وسم `meta` الخاص بك علي سمة `charset`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -يجب تعيين سمة `charset` الخاصة بك إلى `utf-8`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -``` - -يجب عليك إضافة عنصر `title` واحد بالضبط. - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -عنصر `title` الخاص بك يجب أن يحتوي على النص `Picasso Painting`. لاحظ أن التهجئة والـ casing مهمان. - -```js -assert(document.querySelector('title')?.innerText === 'Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md deleted file mode 100644 index 86c0f467749..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: الخطوة 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -FontAwesome هي مكتبة من الأيقونات التي تعمل بالـ SVG، والعديد منها متاح للاستخدام مجاناً. سوف تستخدم بعض هذه الايقونات في هذا المشروع، لذا سوف تحتاج إلى ربط الـ style sheet الخارجية مع الـ HTML. - -قم بإضافة عنصر `link` مع `rel` من `stylesheet` و `href` من `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -# --hints-- - -يجب أن يكون لديك عنصران `link`. - -```js -assert(document.querySelectorAll('link').length === 2); -``` - -`link` الخاص بك يجب أن يحتوي على `rel` من `stylesheet`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); -``` - -عنصر `link` الخاص بك يجب أن يحتوي على `href` من `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index f060df50d27..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: الخطوة 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -لبدء لوحتك، أعط عنصر `body` الـ `background-color` من `rgb(184, 132, 46)`. - -# --hints-- - -يجب عليك استخدام منتقي `body`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -يجب أن يكون لعنصر `body` الخاص بك خاصية `background-color` بقيمة `rgb (184, 132, 46)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index 4ead26c3bbb..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: الخطوة 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -ضمن body tag الخاص بك، أضف عنصر `div`. أعطيه `id` من `back-wall`. - -# --hints-- - -يجب عليك إضافة عنصر واحد `div` بالضبط. - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -يجب أن يكون لعنصر `div` الخاص بك `id` بقيمة `back-wall`. - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index 1ba93d91c49..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: الخطوة 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -استخدم محدد معرف (id selector) لإعطاء عنصر `back-wall` خاصية `background-color` بقيمة `#8B4513`. - -# --hints-- - -يجب عليك استخدام منتقي `#back-wall`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -يجب أن يكون لمنتقي `#back-wall` الخاص بك `background-color` من `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index 3d9b44f3d91..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: الخطوة 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -اعطي عنصر `#back-wall` خاصية `width` بقيمة `100%` و `height` بقيمة `60%`. - -# --hints-- - -يجب عليك تعيين `width` الـ `#back-wall` إلى `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -يجب عليك تعيين `height` الـ `#back-wall` إلى `60%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index f8760e54f00..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: الخطوة 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -عادةً، يتم تقديم HTML بترتيب من أعلى إلى أسفل. العناصر في الجزء العلوي من التعليمات البرمجية موضوعة في الجزء العلوي من الصفحة. ومع ذلك، قد ترغب مرات عدّة في نقل العناصر إلى مواقف مختلفة. يمكنك الفعل ذلك باستخدام سمة `position`. - -عيّن خاصية `position` لعنصر `#back-wall` بقيمة `absolute`. يخرج موضع `absolute` العنصر من ذلك التدفق المستند من أعلى إلى أسفل ويسمح لك بتعديله بالنسبة (relative) إلى الحاوية. - -عندما يتم وضع عنصر يدوياً، يمكنك نقل تخطيطه باستخدام `top`, و`left`، و`right`، و`bottom`. يجب أن يحتوي `#back-wall` على `top` بقيمة `0`، و `left` بقيمة `0`. - - -# --hints-- - -يجب يحتوي منتقيك `#back-wall` على `position` محدد على `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقيك `#back-wall` على خاصية `top` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -يجب أن يحتوي منتقيك `#back-wall` على خاصية `left` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index 9c2e994eb17..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: الخطوة 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -يتم استخدام خاصية `z-index` لإنشاء "طبقات" (layers) لعناصر HTML الخاصة بك. إذا كنت على دراية بأدوات تحرير الصور، ربما كنت قد عملت مع الطبقات من قبل. هذا مفهوم مشابه. - -ستبدو العناصر التي تحتوي على قيمة `z-index` أعلى فوق العناصر التي تحتوي على قيمة `z-index` اقل. يمكن الجمع بين ذلك وبين تحديد المكان (positioning) في الدرس السابق، لإنشاء تأثيرات فريدة. - -بما أن عنصر `back-wall` سيحتاج إلى أن يظهر "خلف" العناصر الأخرى التي ستقوم بإنشائها، قم إعطاء عنصر `back-wall` الـ `z-index` بقيمة `-1`. - -# --hints-- - -يجب أن يحتوي منتقي `#back-wall` الخاص بك على خاصية `z-index` بقيمة `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index 62acd2cc3bf..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: الخطوة 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -أسفل عنصرك `#back-wall`، أنشئ `div` مع `class` بقيمة `characters`. هذا هو المكان الذي ستنشئ فيه شخصيات لوحتك. - -# --hints-- - -يجب عليك إضافة عنصر `div` جديد واحد فقط. - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -عنصر `div` الجديد الخاص بك يجب أن يأتي بعد عنصر `#back-wall` الخاص بك. - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -عنصر `div` الجديد الخاص بك يجب أن يحتوي على `class` يسمي `characters`. - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
- --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index aa62e927676..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: الخطوة 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -داخل عنصر `.characters`، أنشئ `div` آخر مع `id` بقيمة `offwhite-character`. - -# --hints-- - -يجب عليك إنشاء عنصر `div` إضافي واحد فقط. - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -يجب أن يكون عنصر `div` الجديد متداخلا في عنصر `.characters` الخاص بك. - -```js -assert(document.querySelector('.characters div')); -``` - -يجب أن يحتوي عنصر `div` الجديد على`id` بقيمة `offwhite-character`. - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index 4a4ab125d94..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: الخطوة 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -قم بإنشاء أربعة عناصر `div` داخل عنصر`offwhite-character` الخاص بك. اعطي تلك العناصر `div` قيم `id` التالية، بالترتيب: `white-hat` و `black-mask` و `gray-instrument` و `tan-table`. - -# --hints-- - -يجب عليك إضافة أربعة عناصر `div` ضمن عنصر `.offwhite-character` الخاص بك. - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -يجب أن يحتوي العنصر `div` الجديد على `id` بقيمة `white-hat`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -يجب أن يحتوي عنصر `div` الجديد الثاني على `id` بقيمة `black-mask`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -عنصر `div` الجديد الثالث الخاص بك يجب أن يحتوي على `id` بقيمة `gray-instrument`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -عنصر `div` الجديد الرابع يجب أن يحتوي على `id` بقيمة `tan-table`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index 44ad086484f..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: الخطوة 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -هذه الشخصية تحتاج إلى عينين. أنشئ عنصرين `div` في عنصر `#black-mask`. اعطيهم الـ classes الآتية `eyes left` و `eyes right`، بذلك الترتيب. - -# --hints-- - -يجب عليك إنشاء عنصرين `div` ضمن عنصر `#black-mask` الخاص بك. - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -يجب أن تحتوي أول `div` جديدة على `eyes` و `left`. - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -يجب أن تحتوي ثاني `div` جديدة على classes تدعي `eyes` و `right`. - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index e4804032c22..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: الخطوة 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -قم بإنشاء بعض "النقاط" للجهاز (instrument). أضف خمس عناصر `div` داخل عنصرك `#gray-instrument`. قم بتعيين `class` كل منهما إلى `black-dot`. - -# --hints-- - -يجب أن يكون لديك خمسة عناصر `div` جديدة داخل عنصر `#gray-instrument` الخاص بك. - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -يجب أن تحتوي عناصر `div` الخمسة الخاصة بك على الـ classes الآتية `black-dot`. - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index 84c26b6197d..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: الخطوة 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `offwhite-character`. أعطيه `width` بقيمة `300px`،و `height` بقيمة `550px`، و `background-color` بقيمة `GhostWhite`. - -# --hints-- - -يجب عليك استخدام منتقي `#offwhite-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -يجب أن يكون لـ `#offwhite-character` الخاص بك خاصية `width` بقيمة `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -يجب أن يكون لـ `#offwhite-character` الخاص بك خاصية `height` بقيمة `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -يجب أن يحتوي `#offwhite-character` على خاصية `background-color` تم تعيينها إلى `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index cca3572b53e..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: الخطوة 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -أنقل `#offwhite-character` إلى مكانه بواسطة إعطائه `position` بقيمة `absolute` و `top` بقيمة `20%` و `left` بقيمة `17.5%`. - -# --hints-- - -يجب أن يكون لمنتقي `#offwhite-character` الخاص بك خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقي `#offwhite-character` على خاصية `top` بقيمة `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -يجب أن يحتوي منتقي `#offwhite-character` على خاصية `left` بقيمة `17.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index d82b2ee629e..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: الخطوة 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -باستخدام منتقي معرف (id selector)، صمم العنصر مع معرف (id) يسمى `white-hat`. أعطيه `width` و `height` بقيمة `0`، و `border-style` بقيمة `solid`. - -# --hints-- - -يجب عليك استخدام منتقي `#white-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `width` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `height` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `border-style` بقيمة `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index 89b5a3d41ac..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: الخطوة 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -هذا لا يبدو صحيحا. قم بتعيين `border-width` الى `0 120px 140px 180px` لتحديد حجم القبعة (hat) بشكل صحيح. - -# --hints-- - -يجب أن يكون لمنتقي `#white-hat` الخاص بك خاصية `border-width` بقيمة `0 120px 140px 180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index 7392e2477c1..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: الخطوة 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -الآن لديك صندوق كبير. إعطائه `border-top-color`, و`border-right-color`, و`border-left-color` من `transparent`. عيّن `border-bottom-color` إلى `GhostWhite`. وهذا سيجعلها تبدو أشبه بالقبعة. - -# --hints-- - -يجب يحمل منتقيك `#white-hat` خاصية `border-top-color` بقيمة `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -يجب يحمل منتقيك `#white-hat` خاصية `border-right-color` بقيمة `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -يجب يحمل منتقيك `#white-hat` خاصية `border-left-color` بقيمة `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -يجب يحمل منتقيك `#white-hat` خاصية `border-bottom-color` بقيمة `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index d82aae312c7..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: الخطوة 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -أعطي القبعة `position` بقيمة `absolute`، و`top` بقيمة `-140px`، و `left` بقيمة `0`. - -# --hints-- - -يجب أن يحتوي منتقيك `#white-hat` على خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقيك `#white-hat` الخاصية `top` بقيمة `-140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -يجب يحمل منتقيك `#white-hat` خاصية `left` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index 0f9a51263e2..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: الخطوة 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `black-mask`. أعطيه `width` بقيمة `100%`، و `height` بقيمة `50px`، و `background-color` بقيمة `rgb(45, 31, 19)`. - -# --hints-- - -يجب أن يكون لديك منتقي `#black-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -يجب أن يحتوي منتقيك `#black-mask` على خاصية `width` بقيمة `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -يجب أن يحتوي منتقيك `#black-mask` على خاصية `height` بقيمة `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -يجب أن يحتوي منتقي `#black-mask` على خاصية `background-color` بقيمة `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index 6816cd8a9b1..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: الخطوة 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -اعطي قناع `position` بقيمة `absolute`، و`top` و`left` بقيمة `0`. - -# --hints-- - -يجب أن يكون لمنتقي `#black-mask` الخاص بك خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقي `#black-mask` الخاص بك على خاصية `top` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -يجب أن يحتوي منتقي `#black-mask` الخاص بك على خاصية `left` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index a467e4f6e88..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: الخطوة 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -للتأكد من أنك تستطيع رؤية الأقنعة (mask)، قم بإعطائه `z-index` بقيمة `1`. - -# --hints-- - -يجب أن يحتوي منتقي `#black-mask` على خاصية `z-index` بقيمة `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index 54a0c86a751..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: الخطوة 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -باستعمال منتقي معرف (id selector), اعطي عنصر الذي يحتوي على معرف (id) يسمى `gray-instrument` خاصية `width` بقيمة `15%`، و`height` بقيمة `40%`، و `background-color` بقيمة `rgb(167, 162, 117)`. - -# --hints-- - -يجب أن يكون لديك منتقي `#gray-instrument`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `width` بقيمة `15%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `height` بقيمة `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -يجب أن يحتوي منتقي `#gray-instrument` على خاصية `background-color` بقيمة `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index b905d1c14eb..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: الخطوة 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -الآن انقله إلى مكانه باستخدام `position` بقيمة `absolute` و `top` بقيمة `50px` و `left` بقيمة `125px`. - -# --hints-- - -يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `top` بقيمة `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `left` بقيمة `125px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index 341ef635948..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: الخطوة 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -عيّن `z-index` إلى `1`. - -# --hints-- - -يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `z-index` بقيمة `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index 64b7dc37b47..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: الخطوة 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -استخدم منتقي الفئة (class selector) لإنشاء قاعدة لعناصر يحتوي على فئة (class) تسمى `black-dot`. عيّن `width` بقيمة `10px`, و`height` بقيمة `10px`, و`background-color` بقيمة `rgb(45, 31, 19)`. - -# --hints-- - -يجب أن يكون لديك منتقي `.black-dot`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -يجب أن يحتوي منتقي `.black-dot` على خاصية `width` بقيمة `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -يجب أن يكون لدى منتقي `.black-dot` خاصية `height` تم تعيينها إلى `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -منتقي `.black-dot` يجب أن يكون لديه خاصية `background-color` بقيمة `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index ad8ee165e56..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: الخطوة 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -هذه النِّقَاط هي مجرد مربعا قليلاً. امنح فئة `black-dot` خاصية `border-radius` بقيمة `50%` لتصليحا. - -# --hints-- - -يجب أن يحتوي منتقيك `.black-dot` على خاصية `border-radius` بقيمة `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index 6ddfd6b25ad..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: الخطوة 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -نقل النِّقَاط إلى مكانها عن طريق تحديد `display` بقيمة `block`، و`margin` بقيمة `auto`، و`margin-top` بقيمة `65%`. - -# --hints-- - -يجب أن يحتوي منتقيك `.black-dot` على خاصية `display` بقيمة `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -يجب أن يكون لمنتقيك `.black-dot` خاصية `margin` بقيمة `auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -يجب أن يكون لمنتقيك `.black-dot` خاصية `margin-top` بقيمة `65%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index f58bd5b6309..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: الخطوة 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -استخدام منتقي معرف (id selector) لتصميم عنصر مع معرف (id) يسمى `tan-table`. أعطيه `width` بقيمة `450px`، و`height` بقيمة `140px`، و`background-color` بقيمة `#D2691E`. - -# --hints-- - -يجب أن يكون لديك منتقي `#tan-table`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `width` بقيمة `450px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `height` بقيمة `140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `background-color` بقيمة `#D2691E`. - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index 0014d9e2376..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: الخطوة 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -أنقل الجدول (table) إلى مكانه بواسطة إعطائه `position` بقيمة `absolute` وخاصية `top` بقيمة `275px`, وخاصية `left` بقيمة `15px`. - -# --hints-- - -يجب أن يحتوي منتقيك `#tan-table` على خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقي `#tan-table` على خاصية `top` تم تعيينها إلى `275px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -يجب أن يحتوي منتقيك `#tan-table` على خاصية `left` تم تعيينها إلى `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index 0b55e2e1d9b..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: الخطوة 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -إعطاء الجدول `z-index` بقيمة `1`. - -# --hints-- - -يجب أن يحتوي منتقيك `#tan-table` على خاصية `z-index` بقيمة `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index a1b8a063b08..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: الخطوة 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -بعد عنصرك `div#offwhite-character`، أضف `div` مع `id` بقيمة `black-character`. - -# --hints-- - -يجب عليك إضافة عنصر `div` جديد داخل عنصر `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -يجب أن يحتوي عنصر `div` الجديد على `id` تم تعينه إلى `black-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index f4bb9a0bf44..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: الخطوة 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -ضمن عنصر `#black-character`، أضف ثلاث عناصر `div` مع قيم `id` التالية، بالترتيب: `black-hat`، و`gray-mask`، و`white-paper`. - -# --hints-- - -يجب أن يكون لديك ثلاث عناصر `div` داخل عنصرك `#black-character`. - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -يجب أن يحتوي أول عنصرك `div` على `id` يسمي `black-hat`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -يجب أن يحتوي ثاني عنصرك `div` على `id` يسمي `gray-mask`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -يجب أن يحتوي ثالث عنصرك `div` على `id` يسمي `white-paper`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index 528474af6f0..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: الخطوة 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -إن القناع يحتاج إلى عيون. ضمن عنصر `#gray-mask`، أضف عنصرين `div`. يجب أن يكون الأول `class` يسمى `eyes left`, وينبغي أن يكون الثاني `class` يسمى `eyes right`. - -# --hints-- - -يجب أن يكون لديك عنصران `div` ضمن عنصرك `#gray-mask`. - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -يجب أن يحتوي أول عنصرك `div` على `class` يسمي `eyes left`. - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -يجب أن يحتوي ثاني عنصرك `div` على `class` يسمي `eyes right`. - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index 1fb187dd99e..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: الخطوة 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -حان الوقت لاستخدام بعض FontAwesome icons. - -يتم استخدام عنصر `i` للنص الاصطلاحي (idiomatic)، أو النص المنفصل عن محتوى النص "العادي". يمكن أن يكون هذا للنص _italic_، مثل المصطلحات العلمية، أو للرموز مثل تلك المقدمة من FontAwesome. - -ضمن عنصر `#white-paper`، أضف أربع عناصر `i`. أعطيهم جميع `class` بقيمة `fas fa-music`. - -تحدد هذه الفئة المميزة كيفية تحميل رمز FontAwesome. يشير `fas` إلى فئة الأيقونات (FontAwesome Solid، هنا)، بينما يختار `fa-music` الرمز المحدد. - -# --hints-- - -يجب أن يكون لديك أربع عناصر `i` جديدة داخل عنصرك `#white-paper`. - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -يجب أن تحتوي جميع عناصرك `i` على `class` بقيمة `fas fa-music`. - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index 721ea97ef0d..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: الخطوة 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `black-character`. عيّن `width` بقيمة `300px`, و`height` بقيمة `500px`, و`background-color` بقيمة `rgb(45, 31, 19)`. - -# --hints-- - -يجب عليك استخدام منتقيك `#black-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -يجب أن يحتوي منتقيك `#black-character` على خاصية `width` بقيمة `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -يجب أن يحتوي منتقيك `#black-character` على خاصية `height` بقيمة `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -يجب أن يحتوي منتقيك `#black-character` على خاصية `background-color` بقيمة `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index afd00ea48ac..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: الخطوة 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -أنقل عنصر `#black-character` إلى المكان عن طريق تعيين `position` بقيمة `absolute`, و`top` بقيمة `30%`, و`left` بقيمة `59%`. - -# --hints-- - -يجب أن يحتوي منتقيك `#black-character` على خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقيك `#black-character` على خاصية `top` بقيمة `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -يجب أن يحتوي منتقيك `#black-character` على خاصية `left` بقيمة `59%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index a7908d2d66a..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: الخطوة 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `black-hat`. أعطيه `width` قيمة `0`, و`height` قيمة `0`، و`border-style` قيمة `solid`. - -# --hints-- - -يجب أن يكون لديك منتقي `#black-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -يجب أن يحتوي منتقيك `#black-hat` على خاصية `width` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -يجب أن يحتوي منتقيك `#black-hat` على خاصية `height` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -يجب أن يحتوي منتقيك `#black-hat` على خاصية `border-style` بقيمة `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index da7fd00f4c9..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: الخطوة 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -تماماً مثل `#white-hat`، صمم الحدود (style border) لعنصر `#black-hat`. قم باعطائه `border-top-color`، و `border-right-color` و `border-bottom-color` بقيمة `transparent`. عيّن `border-left-color` بقيمة `rgb(45, 31, 19)`. - -# --hints-- - -منتقي `#black-hat` الخاص بك يجب ان يحتوي على خاصية `border-top-color` بقيمة `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -يجب ان يحمل منتقي `#black-hat` الخاص بك خاصية `border-right-color` بقيمة `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -يجب ان يحمل منتقي `#black-hat` الخاص بك خاصية `border-bottom-color` بقيمة `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -منتقي `#black-hat` يجب أن يكون لديه خاصية `border-left-color` بقيمة `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index 51f6bdd2049..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: الخطوة 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -الآن ضع عنصر `#black-hat`. أعطيه `position` بقيمة `absolute`، و`top` بقيمة `-150px`، و `left` بقيمة `0`. - -# --hints-- - -يجب أن يكون لمنتقيك `#black-hat` خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -يجب يحمل منتقيك `#black-hat` الخاصية `top` بقيمة `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -يجب أن يحتوي منتقيك `#black-hat` على خاصية `left` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index f8087411ea0..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: الخطوة 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -باستخدام منتقي معرف (id selector)، صمم العنصر مع معرف (id) يسمى `gray-mask`. أعطيه `width` بقيمة `150px`، و `height` بقيمة `150px`، و `background-color` بقيمة `rgb(167, 162, 117)`. - -# --hints-- - -يجب أن يكون لديك منتقي `#gray-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -يجب أن يحتوي منتقي `#gray-mask` على خاصية `width` بقيمة `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -يجب أن يحتوي منتقي `#gray-mask` على خاصية `height` بقيمة `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -يجب أن يكون لدي منتقي `#gray-mask` خاصية `background-color` بقيمة `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index 31585d09911..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: الخطوة 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -غير موضع عنصر `#gray-mask` عن طريق إضافة `position` بقيمة `absolute`، و`top` بقيمة `-10px`, و`left` بقيمة `70px`. - -# --hints-- - -يجب أن يكون لمنتقي `#gray-mask` الخاص بك خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقي `#gray-mask` على خاصية `top` بقيمة `-10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -يجب أن يحتوي منتقي `#gray-mask` على خاصية `left` بقيمة `70px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index c71c4723405..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: الخطوة 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -باستخدام منتقي معرف (id selector)، أنشئ قاعدة لأستهداف معرف (id) يسمى `white-paper`. عيّن `width` بقيمة `400px`, و`height` بقيمة `100px`, و`background-color` بقيمة `GhostWhite`. - -# --hints-- - -يجب أن يكون لديك منتقي `#white-paper`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -يجب أن يكون لمنتقيك `#white-paper` الخاصية `width` بقيمة `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -يجب أن يكون لمنتقيك `#white-paper` الخاصية `height` بقيمة `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -يجب يحمل منتقيك `#white-paper` خاصية `background-color` بقيمة `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index 17f306d6223..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: الخطوة 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -اعطي `#white-paper` خاصية `position` بقيمة `absolute`، و`top` بقيمة `250px`، و`left` بقيمة `-150px` لنقلها إلى مكانها. - -# --hints-- - -يجب أن يحتوي منتقيك `#white-paper` على خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقيك `#white-paper` على خاصية `top` بقيمة `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -يجب أن يحتوي منتقيك `#white-paper` على خاصية `left` بقيمة `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index 04b78dafdfd..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: الخطوة 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -عيّن `z-index` في عنصر `#white-paper` بقيمة `1`. - -# --hints-- - -يجب أن يكون لدى منتقي `#white-paper` خاصية `z-index` تم تعيينها إلى `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index 01e93a6f05d..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: الخطوة 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -يأتوا FrontAwesome icons مع أسلوبهم الخاص لتعريف الأيقونة. ومع ذلك، لا يزال بإمكانك ضبط الأسلوب بنفسك أيضاً، لتغيير أشياء مثل اللون والحجم. حالياً, استخدم منتقي الفئة (class selector) لاستهداف أيقونة (icons) تحتوي على فئة (class) تسمى `fa-music`. عيّن `display` بقيمة `inline-block`, و`margin-top` بقيمة `8%`، و`margin-left` بقيمة `13%`. - -# --hints-- - -يجب أن يكون لديك منتقي `.fa-music`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -يجب أن يحتوي منتقي `.fa-music` على خاصية `display` بقيمة `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -يجب أن يكون لمنتقيك `.fa-music` خاصية `margin-top` بقيمة `8%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -يجب أن يكون لمنتقيك `.fa-music` خاصية `margin-left` بقيمة `13%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index bf951eaf387..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: الخطوة 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -تحت عنصر `#black-character`، أضف عنصرين `div` جديدين. ستكون هذه هي الوشاح. أعطِ كليهما `class` من `blue`. ثم أعطى الأول `id` قيمته `blue-left`, والثاني هو `id` قيمته `blue-right`. - -# --hints-- - -يجب أن يكون لديك عنصران `div` جديدان ضمن عنصر `.characters` الخاص بك. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -عنصرين `div` الجديدين الخاصين بك يجب أن يحتويا على `class` يسمي `blue`. - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -يجب أن يحمل أول `div` جديد `id` من `blue-left`. - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -يجب أن يحمل ثاني `div` جديد `id` من `blue-right`. - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index 2a402bdc5bc..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: الخطوة 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -استخدم منتقي الفئة (class selector) لاستهداف العناصر الجديدة تحتوي على فئة (class) تسمى `blue`. عيّن `background-color` إلى `#1E90FF`. - -# --hints-- - -يجب أن يكون لديك منتقي `.blue`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -يجب أن يحتوي منتقي `.blue` على خاصية `background-color` بقيمة `#1E90FF`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index 3feb17a185e..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: الخطوة 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -حدد العنصر مع معرف (id) يسمى `blue-left` باستخدام محدد المعرف (id selector). أعطيه `width` قيمته `500px` و`height` قيمته `300px`. - -# --hints-- - -يجب أن يكون لديك منتقي `#blue-left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -يجب أن يحتوي منتقيك `#blue-left` على خاصية `width` بقيمة `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -يجب أن يكون لمنتقيك `#blue-left` الخاصية `height` بقيمة `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index 5651a784c14..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: الخطوة 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -الآن قم بتعيين `position` إلى `absolute` و `top` إلى `20%`و `left` إلى `20%`. - -# --hints-- - -يجب أن يكون لمنتقي `#blue-left` الخاص بك خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -يجب أن يكون لمنتقي `#blue-left` الخاص بك الخاصية `top` بقيمة `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -يجب أن يكون لمنتقي `#blue-left` الخاص بك الخاصية `left` بقيمة `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index ed8c471eb77..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: الخطوة 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -بعد ذلك, أستهدف عنصر مع معرف (id) يسمى `blue-right` باستخدام محدد المعرف (id selector). تقم بتعيين `width` إلى `400px` و `height` إلى `300px`. - -# --hints-- - -يجب أن يكون لديك منتقي `#blue-right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -يجب أن يكون لمنتقي `#blue-right` الخاص بك الخاصية `width` بقيمة `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -يجب أن يكون لمنتقي `#blue-right` الخاص بك الخاصية `height` بقيمة `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index 79586441153..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: الخطوة 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -اعطي عنصر `#blue-right` المكان الصحيح بإضافة `position` بقيمة `absolute` و `top` بقيمة `50%` و `left` بقيمة `40%`. - -# --hints-- - -يجب أن يحتوي منتقيك `#blue-right` على خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقيك `#blue-right` على خاصية `top` بقيمة `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -يجب أن يحتوي منتقيك `#blue-right` على خاصية `left` بقيمة `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index a3133d32cc5..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: الخطوة 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -أسفل عناصرك `.blue`، أضف `div` آخر. قم باعطائه `id` بقيمة `orange-character`. - -# --hints-- - -يجب أن يكون لديك عنصر `div` جديد داخل عنصرك `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -يجب أن يحتوي عنصر `div` الجديد على `id` تم تعينه إلى `orange-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index 36dde9970bd..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: الخطوة 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -ضمن عنصر `#orange-character`، أضف أربع عناصر `div`. اعطي `id` قيم `black-round-hat`، و`eyes-div`, و `triangles`، و `guitar`، بالترتيب. - -# --hints-- - -يجب أن يكون لديك أربع عناصر `div` جديدة داخل عنصرك `#orange-character`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -يجب أن يحتوي أول عنصرك `div` على `id` يسمي `black-round-hat`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -يجب أن يحتوي ثاني عنصرك `div` على `id` يسمي `eyes-div`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -يجب أن يحتوي ثالث عنصرك `div` على `id` يسمي `triangles`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -يجب أن يحتوي عنصر `div` الجديد الرابع على `id` يسمى `guitar`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index 32fa574b438..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: الخطوة 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -يجب أن يحمل عنصر `#eyes-div` ببعض العيون. أضف عنصرين `div` داخلهما. اعطي أول `class` أسم `eyes left`, إعطاء `class` الثانية من `eyes right`. - -# --hints-- - -يجب أن يدخل عنصراك `div` في عنصر `#eyes-div`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -يجب أن يحمل أول `div` جديد `class` باسم `eyes left`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -يجب أن يحمل ثاني `div` جديد `class` باسم `eyes right`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index 695d10cc533..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: الخطوة 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -ضمن عنصر `#triangles`، ستحتاج إلى إضافة العناصر التي ستصبح مثلثاتك. أنشئ ثلاثين عناصر `div` وإعطاء كل منهم فئة `triangle`. - -# --hints-- - -يجب أن يكون لديك 30 عناصر `div` داخل عنصرك `#triangles`. - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -يجب أن يكون جميع 30 عناصر `div` الجديد `class` باسم `triangle`. - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index 78d44112878..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: الخطوة 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -داخل عنصر `#guitar`، أنشئ ثلاث عناصر `div`. اعطي أول اثنين `class` باسم `guitar`. ثم أعطى الأول `id` أسم `guitar-left`, والثاني `id` اسم `guitar-right`. إضافة `id` إلى ثالث `div` باسم `guitar-neck`. - -أما الثالث `div` فلا ينبغي أن يحتوي على فئة `guitar`. - -# --hints-- - -يجب أن يكون لديك ثلاث عناصر `div` جديدة بداخل عنصرك `#guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -يجب أن تحتوي أول `div` جديد على `class` باسم `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -يجب أن يحتوي أول `div` جديد على `id` باسم `guitar-left`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -يجب أن تحتوي ثاني `div` جديد على `class` باسم `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -يجب أن يحتوي ثاني `div` جديد على `id` باسم `guitar-right`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -يجب أن يحتوي ثالث `div` جديد على `id` باسم `guitar-neck`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -لا ينبغي أن تعطي الفئة الجديدة الثالثة `div` يحمل `class` باسم `guitar`. - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index 09122970c0d..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: الخطوة 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -استخدم أيقونة FontAwesome الأخرى في `.guitar` الخاص بك. داخل كل من عنصرين `#guitar-left` و`#guitar-right`، أضف عنصر `i` وأعطيه `class` باسم `fas fa-bars`. - -# --hints-- - -ضمن عنصرك `#guitar-left`، يجب عليك إضافة عنصر `i`. - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -داخل عنصرك `#guitar-right`، يجب عليك إضافة عنصر `i`. - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -يجب أن يحتوي العنصران الجديدان `i` على `class` باسم `fas fa-bars`. - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- -
- -
-
- -
- --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index e154d8e2d08..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: الخطوة 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -حدد عنصرك `orange-character` مع المنتقي المعرف (id selector). أعطيه `width` بقيمة `250px`، و `height` بقيمة `550px`، و `background-color` بقيمة `rgb(240, 78, 42)`. - -# --hints-- - -يجب أن يكون لديك منتقي `#orange-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -يجب أن يحتوي منتقيك `#orange-character` على خاصية `width` بقيمة `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -يجب أن يحتوي منتقي `#orange-character` على خاصية `height` بقيمة `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -يجب أن يكون لدى منتقي `#orange-character` خاصية `background-color` بقيمة `rgb(240, 78, 42)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index 28d3302fc82..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: الخطوة 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -اعطي عنصر `#orange-character` خاصية `position` بقيمة `absolute`، و`top` بقيمة `25%`، و`left` بقيمة `40%`. - -# --hints-- - -يجب أن يكون لمنتقي `#orange-character` الخاص بك خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقي `#orange-character` على خاصية `top` بقيمة `25%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -يجب أن يحتوي منتقي `#orange-character` على خاصية `left` بقيمة `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index 1e00ce809b2..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: الخطوة 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -حدد العنصر يحتوي على معرف (id) يسمى `black-round-hat` باستخدام محدد المعرف (id selector). عيّن `width` بقيمة `180px`, و`height` بقيمة `150px`, و`background-color` بقيمة `rgb(45, 31, 19)`. - -# --hints-- - -يجب أن يكون لديك منتقي `#black-round-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -يجب أن يحتوي منتقي `#black-round-hat` على خاصية `width` بقيمة `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -يجب أن يحتوي منتقي `#black-round-hat` على خاصية `height` بقيمة `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -يجب أن يكون لدى منتقي `#black-round-hat` خاصية `background-color` بقيمة `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index 71c33d05e5c..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: الخطوة 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -يجب أن يكون عنصر `#black-round-hat` مستدير (round). أعطيه `border-radius` بقيمة `50%` لإصلاح هذا. - -# --hints-- - -يجب أن يكون لمنتقيك `#black-round-hat` خاصية `border-radius` بقيمة `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index 0401b845bb9..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: الخطوة 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -أنقل عنصر `#black-round-hat` إلى مكانها مع `position` بقيمة `absolute`، و `top` بقيمة `-100px`، و `left` بقيمة `5px`. - -# --hints-- - -يجب أن يكون لمنتقي `#black-round-hat` الخاص بك خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقي `#black-round-hat` على خاصية `top` بقيمة `-100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -يجب أن يحتوي منتقي `#black-round-hat` على خاصية `left` بقيمة `5px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index 17371f47b2d..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: الخطوة 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -ضع عنصر `#black-round-hat` على الطبقة الصحيحة مع `z-index` بقيمة `-1`. - -# --hints-- - -يجب أن يحتوي منتقي `#black-round-hat` على خاصية `z-index` بقيمة `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index f058f3f46ba..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: الخطوة 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف عنصر يحتوي على معرف (id) يسمى `eyes-div`. عيّن `width` إلى `180px` و `height` إلى `50px`. - -# --hints-- - -يجب عليك إنشاء منتقي `#eyes-div`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -يجب أن يحتوي منتقي `#eyes-div` على خاصية `width` بقيمة `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -يجب أن يكون لمنتقي `#eyes-div` الخاص بك الخاصية `height` بقيمة `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index e9cdd9e8a70..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: الخطوة 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -الآن أنقل عنصر `#eyes-div` إلى الموضع `position` بقيمة `absolute`، و`top` بقيمة `-40px`، و `left` بقيمة `20px`. - -# --hints-- - -يجب أن يكون لمنتقيك `#eyes-div` خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -يجب أن يحتوي منتقيك `#eyes-div` على خاصية `top` بقيمة `-40px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -يجب أن يكون لمنتقيك `#eyes-div` الخاصية `left` بقيمة `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index 20abde21a50..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: الخطوة 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -اعطي عنصر `#eyes-div` خاصية `z-index` بقيمة `3`. - -# --hints-- - -يجب أن تكون خاصية `z-index` لمنتقي `#eyes-div` الخاص بك بقيمة `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index 95783d4e0bb..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: الخطوة 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -الآن استخدم منتقي فئة (class selector) لاستهداف `guitar`. سيؤدي هذا إلى تصميم "نصفي" جيتارك. قم بتعيين `width` إلى `150px`، و `height` إلى `120px` و `background-color` إلى `Goldenrod` و `border-radius` إلى `50%`. - -# --hints-- - -يجب عليك إنشاء منتقي `.guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -يجب أن يكون لمنتقي `.guitar` الخاص بك الخاصية `width` بقيمة `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -يجب أن يكون لمنتقي `.guitar` الخاص بك الخاصية `height` بقيمة `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -يجب أن يكون لمنتقي `.guitar` الخاص بك خاصية `background-color` محددة إلى `Goldenrod`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -يجب أن يكون لمنتقي `.guitar` الخاص بك الخاصية `border-radius` بقيمة `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index 2cc7e8265b4..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: الخطوة 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -قم بتحديد الـ `id` بقيمة `guitar-left`، وتعيين `position` إلى `absolute` و `left` إلى `0px`. - -# --hints-- - -يجب عليك إنشاء منتقي `#guitar-left` جديد. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -يجب أن يكون لمنتقي `#guitar-left` الخاص بك خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index a4a4f7af352..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: الخطوة 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -فم باختيار الـ `id` بقيمة `guitar-right`، و ايضا حدد `position` إلى `absolute`. هذه المرة، عيّن `left` إلى `100px`. - -# --hints-- - -يجب عليك إنشاء منتقي `#guitar-right` جديد. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -يجب أن يكون لمنتقي `#guitar-right` الخاص بك خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -يجب أن يكون لدى منتقي `#guitar-right` خاصية `left` تم تعيينها إلى `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index cb2aa035294..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: الخطوة 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -الآن تحتاج إلى نقل أيقونات الشريط (bar icons) إلى مكانها. أنشئ منتقي فئة (class selector) تستهدف فئة (class) تسمى `fa-bars`. قم بتعيين `display` إلى `block`و `margin-top` إلى `30%`، و `margin-left` إلى `40%`. - -# --hints-- - -يجب عليك إنشاء منتقي `.fa-bars`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -يجب أن يحتوي منتقي `.fa-bars` على خاصية `display` بقيمة `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -يجب أن يكون لمنتقي `.fa-bars` الخاص بك خاصية `margin-top` بقيمة `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -يجب أن يكون لمنتقي `.fa-bars` الخاص بك خاصية `margin-left` بقيمة `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index dc3da68119e..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: الخطوة 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -استخدم محدد معرف (id selector) لإنشاء قاعدة تستهدف معرف (id) يسمى `guitar-neck`. قم بتعيين `width` إلى `200px`، و `height` إلى `30px`، و `background-color` إلى `#D2691E`. - -# --hints-- - -يجب عليك إنشاء منتقي `#guitar-neck`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -يجب أن يكون لدى منتقي `#guitar-neck` خاصية `width` تم تعيينها إلى `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -يجب أن يكون لدى منتقي `#guitar-neck` خاصية `height` تم تعيينها إلى `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -يجب أن يكون لمنتقي `#guitar-neck` الخاص بك خاصية `background-color` بقيمة `#D2691E`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index a3e8f761230..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: الخطوة 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -الآن انقل عنصر `#guitar-neck` باستخدام `position` بقيمة `absolute` و `top` بقيمة `45px`، و `left` بقيمة `200px`. - -# --hints-- - -يجب أن يكون لمنتقي `#guitar-neck` الخاص بك خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -يجب أن يكون لدى منتقي `#guitar-neck` خاصية `top` تم تعيينها إلى `45px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -يجب أن يكون لدى منتقي `#guitar-neck` خاصية `left` تم تعيينها إلى `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index a04126d809f..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: الخطوة 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -اعطي عنصر `#guitar-neck` خاصية `z-index` بقيمة `3`. - -# --hints-- - -يجب أن يكون لدى منتقي `#guitar-neck` خاصية `z-index` تم تعيينها إلى `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index c42ef03dd15..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: الخطوة 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -حان الوقت لتصميم العناصر مع فئة (class) تسمى `eyes`. استخدم منتقي فئة (class selector) لتعيين `width` بقيمة `35px`، و `height` بقيمة `20px` و `background-color` بقيمة `#8B4513`، و `border-radius` بقيمة `20px 50%`. - -# --hints-- - -يجب عليك إنشاء منتقي `.eyes`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -يجب أن يكون لمنتقي `.eyes` الخاص بك الخاصية `width` بقيمة `35px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -يجب أن يكون لمنتقي `.eyes` الخاص بك الخاصية `height` بقيمة `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -يجب أن يحتوي منتقي `.eyes` على خاصية `background-color` بقيمة `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -يجب أن يكون لمنتقي `.eyes` الخاص بك الخاصية `border-radius` بقيمة `20px 50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index a7a0f10b9d0..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: الخطوة 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -استهدف الـ `class` بقيمة `right` وعين `position` إلى `absolute` و `top` إلى `15px`و `right` إلى `30px`. - -# --hints-- - -يجب عليك إنشاء منتقي `.right` جديد. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -يجب أن يكون لمنتقي `.right` الخاص بك الخاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -يجب أن يكون لمنتقي `.right` الخاص بك الخاصية `top` بقيمة `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -يجب أن يكون لمنتقي `.right` الخاص بك الخاصية `right` بقيمة `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index 61a6983af2c..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: الخطوة 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -للـ `class` بقيمة `left` قم بإنشاء المنتقي وتعيين `position` إلى `absolute` و `top` إلى `15px` و `left` إلى `30px`. - -# --hints-- - -يجب عليك إنشاء منتقي `.left` جديد. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -يجب أن يكون لمنتقي `.left` الخاص بك الخاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -يجب أن يكون لمنتقي `.left` الخاص بك الخاصية `top` بقيمة `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -يجب أن يكون لمنتقي `.left` الخاص بك الخاصية `left` بقيمة `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index 99f2a90efa8..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: الخطوة 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -خطوة واحدة أخيرة. أيقونات FontAwesome صغيرة جدا. استخدام منتقي الفئة (class selector) لاستهداف جميع `fas`، وعيّن `font-size` بقيمة `30px`. - -بهذا اكتمل رسم بيكاسو الخاص بك! - -# --hints-- - -يجب عليك إنشاء منتقي `.fas`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -يجب أن يكون لمنتقي `.fas` الخاص بك خاصية `font-size` بقيمة `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index 9aa508e8afc..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: الخطوة 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -امضي قدما واربط مِلَفّ CSS الخاص بك الآن، حتى وإن لم تكتب أي CSS حتى الآن. - -قم بإضافة عنصر `link` مع `rel` من `stylesheet` و `href` من `styles.css`. - -# --hints-- - - -الكود الخاص بك يجب أن يحتوي على عنصر `link`. - -```js -assert.match(code, / link')); -``` - -عنصر `link` الخاص بك يجب أن يحتوي على سمة `rel` بقيمة `stylesheet`. - -```js -const link_element = document.querySelector('link'); -const rel = link_element.getAttribute("rel"); -assert.equal(rel, "stylesheet"); -``` - -عنصر `link` الخاص بك يجب أن يحتوي على سمة `href` بقيمة `styles.css`. - -```js -const link = document.querySelector('link'); -assert.equal(link.dataset.href, "styles.css"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index fb2bc1a4372..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: الخطوة 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -ضبط تخطيط عناصر `.triangle` بواسطة `display` بقيمة `inline-block`. - -# --hints-- - -يجب أن يحتوي منتقي `.triangle` على خاصية `display` بقيمة `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index 1453c0ecf8c..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: الخطوة 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -أعط العناصر `.triangle` اللون الصحيح. عيّن `border-top-color`، و`border-bottom-color`, و`border-left-color` إلى `transparent`. عيّن `border-right-color` إلى `Gold`. - -# --hints-- - -يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-top-color` بقيمة `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-bottom-color` بقيمة `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-left-color` بقيمة `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-right-color` بقيمة `Gold`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index 451e0642ee5..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: الخطوة 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -صمم حدود (style border) عناصرك `.triangle`. عيّن `border-style` بقيمة `solid` و`border-width` بقيمة `42px 45px 45px 0`. - -# --hints-- - -يجب أن يحتوي منتقيك `.triangle` على خاصية `border-style` بقيمة `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -يجب أن يحتوي منتقيك `.triangle` على خاصية `border-width` بقيمة `42px 45px 45px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index c4f4eb5617a..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: الخطوة 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -إنشاء منتقي الفئة (class selector) تستهدف عناصر مع فئة (class) تسمى `triangle`. عيّن `width` إلى `0` و `height` إلى `0`. - -# --hints-- - -يجب عليك إنشاء منتقي `.triangle` جديد. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -يجب أن يكون لمنتقي `.triangle` الخاص بك الخاصية `width` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -يجب أن يكون لمنتقي `.triangle` الخاص بك الخاصية `height` بقيمة `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index 5cd46c094ae..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: الخطوة 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -أستهدف عنصر مع معرف (id) يسمى `triangles` باستخدام محدد المعرف (id selector). عيّن `width` إلى `250px` و `height` إلى `550px`. - -# --hints-- - -يجب عليك إضافة منتقي `#triangles`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -يجب أن يكون لمنتقيك `#triangles` على خاصية `width` بقيمة `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -يجب أن يكون لمنتقيك `#triangles` على خاصية `height` بقيمة `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index d79c52bef77..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: الخطوة 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -الآن استخدم منتقي المعرف (id selector) بقيمة `guitar`. عيّن `width` بقيمة `100%`, و `height` بقيمة `100px`. - -# --hints-- - -يجب عليك إنشاء منتقي `#guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -يجب أن يحتوي منتقيك `#guitar` على خاصية `width` بقيمة `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -يجب أن يحتوي منتقيك `#guitar` على خاصية `height` بقيمة `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index 0c1ebe3006e..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: الخطوة 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -في نفس منتقي `#guitar`، عيّن `position` بقيمة `absolute`, و`top` بقيمة `120px`, و`left` بقيمة `0px`. - -# --hints-- - -يجب أن يكون لمنتقي `#guitar` الخاص بك خاصية `position` بقيمة `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -يجب أن يكون لدى منتقي `#guitar` خاصية `top` تم تعيينها إلى `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -يجب أن يكون لدى منتقي `#guitar` خاصية `left` تم تعيينها إلى `0px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index 20d2fb9b5a9..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: الخطوة 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -اعطي معرف `#guitar` خاصية `z-index` بقيمة `3`. - -# --hints-- - -يجب أن يكون لدى منتقي `#guitar` خاصية `z-index` تم تعيينها إلى `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index 71b5b171f55..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: الخطوة 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -عيّن `border-width` في `#black-hat` بقيمة `150px 0 0 300px`. - -# --hints-- - -يجب أن يحتوي منتقيك `#black-hat` على خاصية `border-width` بقيمة `150px 0 0 300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md deleted file mode 100644 index 332ca10b1ad..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f5c1cb7575c7551ed8a40 -title: الخطوة 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -حجم الخط الكبير للرقم `230` يتسبب في overflow. اعطي `.calories-info h1` خاصية `overflow` بقيمة `hidden` لتجنب هذا. - -# --hints-- - -يجب أن يكون لمنتقي `.calories-info h1` الخاص بك الخاصية `overflow` بقيمة `hidden`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- -.calories-info h1 { - margin: -5px -2px; -} ---fcc-editable-region-- - -.calories-info span { - font-size: 1.2em; -} -``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md deleted file mode 100644 index 002a852eae0..00000000000 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f6a7d4ba8037bc086c2c7 -title: الخطوة 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -قم بإعطاء منتقي `.divider` خاصية `clear` بقيمة `right`. سيؤدي هذا إلى مسح خاصية `float` ، مما سيدفع الـ divider وأي محتوى تالي أسفل نص `float`. - -# --hints-- - -يجب أن يكون لمنتقي `.divider` الخاص بك خاصية `clear` بقيمة `right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
-
-

Nutrition Facts

-
-

8 servings per container

-

Serving size 2/3 cup (55g)

-
-
-
-

Amount per serving

-

Calories 230

-
-
-
-

% Daily Value *

-
-
-
- - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - ---fcc-editable-region-- -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} ---fcc-editable-region-- - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md deleted file mode 100644 index 9994a599779..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 56533eb9ac21ba0edf2244e2 -title: بناء شفرة قيصر -challengeType: 5 -forumTopicId: 16003 -dashedName: build-a-caesars-cipher ---- - -# --description-- - -One of the simplest and most widely known ciphers is a Caesar cipher, also known as a shift cipher. In a shift cipher the meanings of the letters are shifted by some set amount. - -A common modern use is the ROT13 cipher, where the values of the letters are shifted by 13 places. Thus `A ↔ N`, `B ↔ O` and so on. - -Write a function which takes a ROT13 encoded string as input and returns a decoded string. - -All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on. - -# --hints-- - -`rot13("SERR PBQR PNZC")` should decode to the string `FREE CODE CAMP` - -```js -assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); -``` - -`rot13("SERR CVMMN!")` should decode to the string `FREE PIZZA!` - -```js -assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); -``` - -`rot13("SERR YBIR?")` should decode to the string `FREE LOVE?` - -```js -assert(rot13('SERR YBIR?') === 'FREE LOVE?'); -``` - -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` should decode to the string `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` - -```js -assert( - rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === - 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function rot13(str) { - return str; -} - -rot13("SERR PBQR PNZC"); -``` - -# --solutions-- - -```js -var lookup = { - 'A': 'N','B': 'O','C': 'P','D': 'Q', - 'E': 'R','F': 'S','G': 'T','H': 'U', - 'I': 'V','J': 'W','K': 'X','L': 'Y', - 'M': 'Z','N': 'A','O': 'B','P': 'C', - 'Q': 'D','R': 'E','S': 'F','T': 'G', - 'U': 'H','V': 'I','W': 'J','X': 'K', - 'Y': 'L','Z': 'M' -}; - -function rot13(encodedStr) { - var codeArr = encodedStr.split(""); // String to Array - var decodedArr = []; // Your Result goes here - // Only change code below this line - - decodedArr = codeArr.map(function(letter) { - if(lookup.hasOwnProperty(letter)) { - letter = lookup[letter]; - } - return letter; - }); - - // Only change code above this line - return decodedArr.join(""); // Array to String -} -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md deleted file mode 100644 index 5b35906c8c7..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: aa2e6f85cab2ab736c9a9b24 -title: أنشئ مكنة لتسجيل النقود -challengeType: 5 -forumTopicId: 16012 -dashedName: build-a-cash-register ---- - -# --description-- - -صمم وظيفة درج لتسجيل النقود `checkCashRegister()` التي تقبل سعر الشراء كمعطى أولى (`price`)، و الدفع كمعطى ثاني (`cash`)، و cash-in-drawer أي النقود في الدرج (`cid`) كمعطى ثالث. - -`cid` is a 2D array listing available currency. - -يجب أن تقوم وظيفة `checkCashRegister()` دائما بإنتاج كائن يحتوي على الهوية (key) المسمى `status` و الهوية `change`. - -Return `{status: "INSUFFICIENT_FUNDS", change: []}` if cash-in-drawer is less than the change due, or if you cannot return the exact change. - -Return `{status: "CLOSED", change: [...]}` with cash-in-drawer as the value for the key `change` if it is equal to the change due. - -Otherwise, return `{status: "OPEN", change: [...]}`, with the change due in coins and bills, sorted in highest to lowest order, as the value of the `change` key. - -
Currency UnitAmount
Penny$0.01 (PENNY)
Nickel$0.05 (NICKEL)
Dime$0.1 (DIME)
Quarter$0.25 (QUARTER)
Dollar$1 (ONE)
Five Dollars$5 (FIVE)
Ten Dollars$10 (TEN)
Twenty Dollars$20 (TWENTY)
One-hundred Dollars$100 (ONE HUNDRED)
- -See below for an example of a cash-in-drawer array: - -```js -[ - ["PENNY", 1.01], - ["NICKEL", 2.05], - ["DIME", 3.1], - ["QUARTER", 4.25], - ["ONE", 90], - ["FIVE", 55], - ["TEN", 20], - ["TWENTY", 60], - ["ONE HUNDRED", 100] -] -``` - -# --hints-- - -يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` كائن. - -```js -assert.deepEqual( - Object.prototype.toString.call( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]) - ), - '[object Object]' -); -``` - -يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` كائن `{status: "OPEN", change: [["QUARTER", 0.5]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { status: 'OPEN', change: [['QUARTER', 0.5]] } -); -``` - -يجب أن ينتج `checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` كائن `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. - -```js -assert.deepEqual( - checkCashRegister(3.26, 100, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { - status: 'OPEN', - change: [ - ['TWENTY', 60], - ['TEN', 20], - ['FIVE', 15], - ['ONE', 1], - ['QUARTER', 0.5], - ['DIME', 0.2], - ['PENNY', 0.04] - ] - } -); -``` - -يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` كائن `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` كائن `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 1], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -يجب أن ينتج `checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` كائن `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { - status: 'CLOSED', - change: [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ] - } -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function checkCashRegister(price, cash, cid) { - let change; - return change; -} - -checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); -``` - -# --solutions-- - -```js -const denom = [ - { name: "ONE HUNDRED", val: 100 }, - { name: "TWENTY", val: 20 }, - { name: "TEN", val: 10 }, - { name: "FIVE", val: 5 }, - { name: "ONE", val: 1 }, - { name: "QUARTER", val: 0.25 }, - { name: "DIME", val: 0.1 }, - { name: "NICKEL", val: 0.05 }, - { name: "PENNY", val: 0.01 }, -]; - -function checkCashRegister(price, cash, cid) { - const output = { status: null, change: [] }; - let change = cash - price; - const register = cid.reduce( - function (acc, curr) { - acc.total += curr[1]; - acc[curr[0]] = curr[1]; - return acc; - }, - { total: 0 } - ); - if (register.total === change) { - output.status = "CLOSED"; - output.change = cid; - return output; - } - if (register.total < change) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - const change_arr = denom.reduce(function (acc, curr) { - let value = 0; - while (register[curr.name] > 0 && change >= curr.val) { - change -= curr.val; - register[curr.name] -= curr.val; - value += curr.val; - change = Math.round(change * 100) / 100; - } - if (value > 0) { - acc.push([curr.name, value]); - } - return acc; - }, []); - if (change_arr.length < 1 || change > 0) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - output.status = "OPEN"; - output.change = change_arr; - return output; -} -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md deleted file mode 100644 index 536578941f6..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: aaa48de84e1ecc7c742e1124 -title: أنشئ مدقق لمعاكس المقطع النصي -challengeType: 5 -forumTopicId: 16004 -dashedName: build-a-palindrome-checker ---- - -# --description-- - -Return `true` if the given string is a palindrome. Otherwise, return `false`. - -A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing. - -**Note:** You'll need to remove **all non-alphanumeric characters** (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes. - -We'll pass strings with varying formats, such as `racecar`, `RaceCar`, and `race CAR` among others. - -We'll also pass strings with special symbols, such as `2A3*3a2`, `2A3 3a2`, and `2_A3*3#A2`. - -# --hints-- - -`palindrome("eye")` should return a boolean. - -```js -assert(typeof palindrome('eye') === 'boolean'); -``` - -`palindrome("eye")` should return `true`. - -```js -assert(palindrome('eye') === true); -``` - -`palindrome("_eye")` should return `true`. - -```js -assert(palindrome('_eye') === true); -``` - -`palindrome("race car")` should return `true`. - -```js -assert(palindrome('race car') === true); -``` - -`palindrome("not a palindrome")` should return `false`. - -```js -assert(palindrome('not a palindrome') === false); -``` - -`palindrome("A man, a plan, a canal. Panama")` should return `true`. - -```js -assert(palindrome('A man, a plan, a canal. Panama') === true); -``` - -`palindrome("never odd or even")` should return `true`. - -```js -assert(palindrome('never odd or even') === true); -``` - -`palindrome("nope")` should return `false`. - -```js -assert(palindrome('nope') === false); -``` - -`palindrome("almostomla")` should return `false`. - -```js -assert(palindrome('almostomla') === false); -``` - -`palindrome("My age is 0, 0 si ega ym.")` should return `true`. - -```js -assert(palindrome('My age is 0, 0 si ega ym.') === true); -``` - -`palindrome("1 eye for of 1 eye.")` should return `false`. - -```js -assert(palindrome('1 eye for of 1 eye.') === false); -``` - -`palindrome("0_0 (: /-\ :) 0-0")` should return `true`. - -```js -assert(palindrome('0_0 (: /- :) 0-0') === true); -``` - -`palindrome("five|\_/|four")` should return `false`. - -```js -assert(palindrome('five|_/|four') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function palindrome(str) { - return true; -} - -palindrome("eye"); -``` - -# --solutions-- - -```js -function palindrome(str) { - var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); - var aux = string.split(''); - if (aux.join('') === aux.reverse().join('')){ - return true; - } - - return false; -} -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md deleted file mode 100644 index a5d065b3da7..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: a7f4d8f2483413a6ce226cac -title: أنشئ محول للأرقام الرومانية -challengeType: 5 -forumTopicId: 16044 -dashedName: build-a-roman-numeral-converter ---- - -# --description-- - -Convert the given number into a roman numeral. - -| Roman numerals | Arabic numerals | -| -------------- | --------------- | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| C | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -All roman numerals answers should be provided in upper-case. - -# --hints-- - -`convertToRoman(2)` should return the string `II`. - -```js -assert.deepEqual(convertToRoman(2), 'II'); -``` - -`convertToRoman(3)` should return the string `III`. - -```js -assert.deepEqual(convertToRoman(3), 'III'); -``` - -`convertToRoman(4)` should return the string `IV`. - -```js -assert.deepEqual(convertToRoman(4), 'IV'); -``` - -`convertToRoman(5)` should return the string `V`. - -```js -assert.deepEqual(convertToRoman(5), 'V'); -``` - -`convertToRoman(9)` should return the string `IX`. - -```js -assert.deepEqual(convertToRoman(9), 'IX'); -``` - -`convertToRoman(12)` should return the string `XII`. - -```js -assert.deepEqual(convertToRoman(12), 'XII'); -``` - -`convertToRoman(16)` should return the string `XVI`. - -```js -assert.deepEqual(convertToRoman(16), 'XVI'); -``` - -`convertToRoman(29)` should return the string `XXIX`. - -```js -assert.deepEqual(convertToRoman(29), 'XXIX'); -``` - -`convertToRoman(44)` should return the string `XLIV`. - -```js -assert.deepEqual(convertToRoman(44), 'XLIV'); -``` - -`convertToRoman(45)` should return the string `XLV`. - -```js -assert.deepEqual(convertToRoman(45), 'XLV'); -``` - -`convertToRoman(68)` should return the string `LXVIII` - -```js -assert.deepEqual(convertToRoman(68), 'LXVIII'); -``` - -`convertToRoman(83)` should return the string `LXXXIII` - -```js -assert.deepEqual(convertToRoman(83), 'LXXXIII'); -``` - -`convertToRoman(97)` should return the string `XCVII` - -```js -assert.deepEqual(convertToRoman(97), 'XCVII'); -``` - -`convertToRoman(99)` should return the string `XCIX` - -```js -assert.deepEqual(convertToRoman(99), 'XCIX'); -``` - -`convertToRoman(400)` should return the string `CD` - -```js -assert.deepEqual(convertToRoman(400), 'CD'); -``` - -`convertToRoman(500)` should return the string `D` - -```js -assert.deepEqual(convertToRoman(500), 'D'); -``` - -`convertToRoman(501)` should return the string `DI` - -```js -assert.deepEqual(convertToRoman(501), 'DI'); -``` - -`convertToRoman(649)` should return the string `DCXLIX` - -```js -assert.deepEqual(convertToRoman(649), 'DCXLIX'); -``` - -`convertToRoman(798)` should return the string `DCCXCVIII` - -```js -assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); -``` - -`convertToRoman(891)` should return the string `DCCCXCI` - -```js -assert.deepEqual(convertToRoman(891), 'DCCCXCI'); -``` - -`convertToRoman(1000)` should return the string `M` - -```js -assert.deepEqual(convertToRoman(1000), 'M'); -``` - -`convertToRoman(1004)` should return the string `MIV` - -```js -assert.deepEqual(convertToRoman(1004), 'MIV'); -``` - -`convertToRoman(1006)` should return the string `MVI` - -```js -assert.deepEqual(convertToRoman(1006), 'MVI'); -``` - -`convertToRoman(1023)` should return the string `MXXIII` - -```js -assert.deepEqual(convertToRoman(1023), 'MXXIII'); -``` - -`convertToRoman(2014)` should return the string `MMXIV` - -```js -assert.deepEqual(convertToRoman(2014), 'MMXIV'); -``` - -`convertToRoman(3999)` should return the string `MMMCMXCIX` - -```js -assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); -``` - -# --seed-- - -## --seed-contents-- - -```js -function convertToRoman(num) { - return num; -} - -convertToRoman(36); -``` - -# --solutions-- - -```js -function convertToRoman(num) { - var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; - var res = []; - ref.forEach(function(p) { - while (num >= p[1]) { - res.push(p[0]); - num -= p[1]; - } - }); - return res.join(''); -} -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md deleted file mode 100644 index 5e651f8faaa..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: aff0395860f5d3034dc0bfc9 -title: بناء مدقق الأرقام الهواتف -challengeType: 5 -forumTopicId: 16090 -dashedName: build-a-telephone-number-validator ---- - -# --description-- - -Return `true` if the passed string looks like a valid US phone number. - -The user may fill out the form field any way they choose as long as it has the format of a valid US number. The following are examples of valid formats for US numbers (refer to the tests below for other variants): - -
555-555-5555
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
- -For this challenge you will be presented with a string such as `800-692-7753` or `8oo-six427676;laskdjf`. Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is `1`. Return `true` if the string is a valid US phone number; otherwise return `false`. - -# --hints-- - -`telephoneCheck("555-555-5555")` should return a boolean. - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` should return `true`. - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` should return `true`. - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` should return `true`. - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` should return `true`. - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` should return `true`. - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` should return `true`. - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` should return `false`. - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` should return `false`. - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` should return `false`. - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` should return `true`. - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` should return `true`. - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` should return `false`. - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` should return `false`. - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` should return `false`. - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` should return `false`. - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` should return `false`. - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` should return `false`. - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` should return `false`. - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` should return `false`. - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` should return `false`. - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` should return `false`. - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` should return `false`. - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` should return `false`. - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` should return `false`. - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index 63ecefac153..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -You have been declaring your variables with the `var` keyword. However, in modern JavaScript it is best practice to use the `let` keyword instead. This fixes several unusual behaviors with `var` that can make your code difficult to debug. - -Change all of your `var` keywords to `let`. - -# --hints-- - -You should not have any `var` keywords in your code. - -```js -assert.notMatch(code, /var/); -``` - -You should use the `let` keyword to declare your `xp` variable. - -```js -assert.match(code, /let xp/); -``` - -You should use the `let` keyword to declare your `health` variable. - -```js -assert.match(code, /let health/); -``` - -You should use the `let` keyword to declare your `gold` variable. - -```js -assert.match(code, /let gold/); -``` - -You should use the `let` keyword to declare your `currentWeapon` variable. - -```js -assert.match(code, /let currentWeapon/); -``` - -You should not change the values of your variables. - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
- Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
-
- - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js ---fcc-editable-region-- -var xp = 0; -var health = 100; -var gold = 50; -var currentWeapon = 0; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md deleted file mode 100644 index cd564871491..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 62a8f2bc37675e77d5835235 -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -JavaScript has a conditional operator called the ternary operator. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`. - -Here is an example of an `if-else` expression changed to a ternary: - -```js -if (num > 5) { - bigger() -} else { - smaller() -} - -num > 5 ? bigger() : smaller(); -``` - -Change your new `if-else` expression to a ternary. - -# --hints-- - -You should remove the `if` and `else` from your `else if` block. - -```js -const block = attack.toString().split("else if"); -assert.notMatch(block[1], /if/); -assert.notMatch(block[1], /else/); -``` - -You should check if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2/); -``` - -Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); -``` - -Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
- Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
-
- - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js -let xp = 0; -let health = 100; -let gold = 50; -let currentWeapon = 0; -let fighting; -let monsterHealth; -let inventory = ["stick"]; - -const button1 = document.querySelector('#button1'); -const button2 = document.querySelector("#button2"); -const button3 = document.querySelector("#button3"); -const text = document.querySelector("#text"); -const xpText = document.querySelector("#xpText"); -const healthText = document.querySelector("#healthText"); -const goldText = document.querySelector("#goldText"); -const monsterStats = document.querySelector("#monsterStats"); -const monsterName = document.querySelector("#monsterName"); -const monsterHealthText =document.querySelector("#monsterHealth"); -const weapons = [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]; -const monsters = [ - { - name: "slime", - level: 2, - health: 15 - }, - { - name: "fanged beast", - level: 8, - health: 60 - }, - { - name: "dragon", - level: 20, - health: 300 - } -] -const locations = [ - { - name: "town square", - "button text": ["Go to store", "Go to cave", "Fight dragon"], - "button functions": [goStore, goCave, fightDragon], - text: "You are in the town square. You see a sign that says \"Store\"." - }, - { - name: "store", - "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], - "button functions": [buyHealth, buyWeapon, goTown], - text: "You enter the store." - }, - { - name: "cave", - "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], - "button functions": [fightSlime, fightBeast, goTown], - text: "You enter the cave. You see some monsters." - }, - { - name: "fight", - "button text": ["Attack", "Dodge", "Run"], - "button functions": [attack, dodge, goTown], - text: "You are fighting a monster." - }, - { - name: "kill monster", - "button text": ["Go to town square", "Go to town square", "Go to town square"], - "button functions": [goTown, goTown, goTown], - text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' - }, - { - name: "lose", - "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], - "button functions": [restart, restart, restart], - text: "You die. ☠️" - } -]; - -// initialize buttons -button1.onclick = goStore; -button2.onclick = goCave; -button3.onclick = fightDragon; - -function update(location) { - monsterStats.style.display = "none"; - button1.innerText = location["button text"][0]; - button2.innerText = location["button text"][1]; - button3.innerText = location["button text"][2]; - button1.onclick = location["button functions"][0]; - button2.onclick = location["button functions"][1]; - button3.onclick = location["button functions"][2]; - text.innerText = location.text; -} - -function goTown() { - update(locations[0]); -} - -function goStore() { - update(locations[1]); -} - -function goCave() { - update(locations[2]); -} - -function buyHealth() { - if (gold >= 10) { - gold -= 10; - health += 10; - goldText.innerText = gold; - healthText.innerText = health; - } else { - text.innerText = "You do not have enough gold to buy health."; - } -} - -function buyWeapon() { - if (currentWeapon < weapons.length - 1) { - if (gold >= 30) { - gold -= 30; - currentWeapon++; - goldText.innerText = gold; - let newWeapon = weapons[currentWeapon].name; - text.innerText = "You now have a " + newWeapon + "."; - inventory.push(newWeapon); - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "You do not have enough gold to buy a weapon."; - } - } else { - text.innerText = "You already have the most powerful weapon!"; - button2.innerText = "Sell weapon for 15 gold"; - button2.onclick = sellWeapon; - } -} - -function sellWeapon() { - if (inventory.length > 1) { - gold += 15; - goldText.innerText = gold; - let currentWeapon = inventory.shift(); - text.innerText = "You sold a " + currentWeapon + "."; - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "Don't sell your only weapon!"; - } -} - -function fightSlime() { - fighting = 0; - goFight(); -} - -function fightBeast() { - fighting = 1; - goFight(); -} - -function fightDragon() { - fighting = 2; - goFight(); -} - -function goFight() { - update(locations[3]); - monsterHealth = monsters[fighting].health; - monsterStats.style.display = "block"; - monsterName.innerText = monsters[fighting].name; - monsterHealthText.innerText = monsterHealth; -} - ---fcc-editable-region-- -function attack() { - text.innerText = "The " + monsters[fighting].name + " attacks."; - text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; - health -= monsters[fighting].level; - monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; - healthText.innerText = health; - monsterHealthText.innerText = monsterHealth; - if (health <= 0) { - lose(); - } else if (monsterHealth <= 0) { - if (fighting === 2) { - winGame(); - } else { - defeatMonster(); - } - } -} ---fcc-editable-region-- - -function dodge() { - text.innerText = "You dodge the attack from the " + monsters[fighting].name; -} - -function defeatMonster() { - gold += Math.floor(monsters[fighting].level * 6.7); - xp += monsters[fighting].level; - goldText.innerText = gold; - xpText.innerText = xp; - update(locations[4]); -} - -function lose() { - update(locations[5]); -} - -function restart() { - xp = 0; - health = 100; - gold = 50; - currentWeapon = 0; - inventory = ["stick"]; - goldText.innerText = gold; - healthText.innerText = health; - xpText.innerText = xp; - goTown(); -} -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md new file mode 100644 index 00000000000..d178d5a5a2b --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -0,0 +1,682 @@ +--- +id: 659b0093d7db5a1a1122b7bd +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +```js +const animals = ["dog", "cat", "horse"]; +animals.indexOf("cat") // 1 +``` + +Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`. + +# --hints-- + +You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/) +``` + +You should pass in `userData.currentSong` into the `indexOf()` method. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
+
+
+
+
+
+
+

freeCodeCamp

+
+
+
+
+
+
+
+ song cover art +
+
+
+

+

+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+

Playlist

+
+
+
+
+
+
    +
    +
    + + + +``` + +```css +:root { + /* colors */ + --primary-color: #dfdfe2; + --secondary-color: #ffffff; + --app-background-color: #4d4d62; + --background-color: #1b1b32; + --foreground-color: #3b3b4f; + --highlight-color: #f1be32; + + /* font sizes */ + --root-font-size: 16px; + font-size: var(--root-font-size); + + /* font-families */ + --font-headline: "Roboto Mono", monospace; + --font-family: "Lato", sans-serif; +} + +*, +*::after, +*::before { + box-sizing: border-box; +} + +body { + background-color: var(--app-background-color); + color: var(--primary-color); + font-family: var(--font-family); +} + +h1 { + font-size: 1.125rem; + line-height: 1.6; +} + +h2 { + font-size: var(--root-font-size); +} + +ul { + margin: 0; +} + +.container { + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; +} + +.player, +.playlist { + width: 450px; + background-color: var(--background-color); + border: 3px solid var(--foreground-color); +} + +.player { + height: 260px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +.player-bar, +.playlist-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + width: 100%; + height: 30px; + background-color: var(--foreground-color); +} + +.parallel-lines { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + padding: 0 5px; +} + +.parallel-lines > div { + height: 2px; + width: 100%; + min-width: 75px; + background-color: var(--highlight-color); +} + +.fcc-title, +.playlist-title { + color: var(--secondary-color); + margin: 0 10px; + font-family: var(--font-headline); +} + +.player-content { + display: flex; + background-color: var(--foreground-color); + width: 430px; + height: 200px; + column-gap: 13px; + align-items: center; + justify-content: center; +} + +#player-album-art { + background-color: var(--secondary-color); + border: 6px solid var(--background-color); +} + +#player-album-art img { + width: 150px; + display: block; +} + +.player-display { + display: flex; + flex-direction: column; + row-gap: 20px; + padding: 14px; + background-color: var(--background-color); + height: 153px; + width: 226px; +} + +.player-display-song-artist { + height: 80px; +} + +.player-buttons svg { + fill: var(--primary-color); +} + +.playing > svg { + fill: var(--highlight-color); +} + +.player-buttons { + display: flex; + justify-content: space-around; +} + +button { + background: transparent; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: var(--root-font-size); + outline-color: var(--highlight-color); + text-align: center; +} + +.playlist-song { + outline-color: var(--highlight-color); +} + +.playlist li:not(:last-child) { + border-bottom: 1px solid var(--background-color); +} + +button:focus, +.playlist-song:focus { + outline-style: dashed; + outline-width: 2px; +} + +/* Playlist */ +.playlist { + height: auto; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +#playlist-songs { + width: 430px; + height: 100%; + background-color: var(--foreground-color); + display: flex; + flex-direction: column; + row-gap: 8px; + padding: 8px 9px; + visibility: visible; + justify-content: start; + list-style: none; +} + +.playlist-song { + display: flex; + height: 55px; + justify-content: space-between; + align-items: center; + padding: 5px; +} + +[aria-current="true"] { + background-color: var(--background-color); +} + +[aria-current="true"] p { + color: var(--highlight-color); +} + +.playlist-song-info { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + column-gap: 7px; + padding: 5px 0; + font-family: var(--font-family); +} + +#player-song-title, +#player-song-artist { + margin: 0; +} + +#player-song-artist { + color: var(--highlight-color); + font-size: 0.75rem; +} + +#player-song-title { + font-size: 1.125rem; +} + +.playlist-song-title { + font-size: 0.85rem; + width: 241px; + text-align: left; +} + +.playlist-song-artist { + font-size: 0.725rem; + width: 80px; +} + +.playlist-song-duration { + font-size: 0.725rem; + margin: auto; + font-family: var(--font-headline); + width: 30px; +} + +.playlist-song-delete { + padding: 0; + width: 20px; + height: 20px; +} + +.playlist-song-delete, +.playlist-song-delete { + fill: var(--foreground-color); +} + +.playlist-song-delete:hover circle, +.playlist-song-delete:focus circle { + fill: #ff0000; +} + +@media (max-width: 700px) { + .player, + .playlist { + width: 300px; + } + + .player { + height: 340px; + } + + #playlist-songs { + height: 280px; + padding: 5px 6px; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-color: var(--background-color) var(--secondary-color); + scrollbar-width: thin; + } + + #playlist-songs::-webkit-scrollbar { + width: 5px; + } + + #playlist-songs::-webkit-scrollbar-track { + background: var(--background-color); + } + + #playlist-songs::-webkit-scrollbar-thumb { + background: var(--secondary-color); + } + + h1 { + font-size: 0.813rem; + } + + h2 { + font-size: 0.75rem; + } + + .player-bar, + .playlist-bar, + .player-content, + #playlist-songs { + width: 280px; + } + + .playlist-song { + justify-content: space-between; + } + + .playlist-song-title { + width: 140px; + } + + .playlist-song-artist { + width: 40px; + } + + .playlist-song-duration > button { + padding: 0; + } + + .player-content { + display: inline; + position: relative; + justify-items: center; + height: 100%; + } + + #player-album-art { + z-index: -100; + height: 280px; + box-shadow: none; + background: #000; + } + + #player-album-art img { + width: 100%; + opacity: 0.6; + } + + .player-display-song-artist { + padding: 0 10px; + } + + .player-display-song-artist > p { + white-space: pre-wrap; + } + + .player-display { + position: absolute; + width: 100%; + z-index: 1000; + background-color: transparent; + top: 0; + height: 280px; + justify-content: space-between; + text-align: center; + } +} +``` + +```js +const playlistSongs = document.getElementById("playlist-songs"); +const playButton = document.getElementById("play"); +const pauseButton = document.getElementById("pause"); +const nextButton = document.getElementById("next"); +const previousButton = document.getElementById("previous"); +const shuffleButton = document.getElementById("shuffle"); + +const allSongs = [ + { + id: 0, + title: "Scratching The Surface", + artist: "Quincy Larson", + duration: "4:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3", + }, + { + id: 1, + title: "Can't Stay Down", + artist: "Quincy Larson", + duration: "4:15", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3", + }, + { + id: 2, + title: "Still Learning", + artist: "Quincy Larson", + duration: "3:51", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3", + }, + { + id: 3, + title: "Cruising for a Musing", + artist: "Quincy Larson", + duration: "3:34", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3", + }, + { + id: 4, + title: "Never Not Favored", + artist: "Quincy Larson", + duration: "3:35", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3", + }, + { + id: 5, + title: "From the Ground Up", + artist: "Quincy Larson", + duration: "3:12", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3", + }, + { + id: 6, + title: "Walking on Air", + artist: "Quincy Larson", + duration: "3:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3", + }, + { + id: 7, + title: "Can't Stop Me. Can't Even Slow Me Down.", + artist: "Quincy Larson", + duration: "3:52", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3", + }, + { + id: 8, + title: "The Surest Way Out is Through", + artist: "Quincy Larson", + duration: "3:10", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3", + }, + { + id: 9, + title: "Chasing That Feeling", + artist: "Quincy Larson", + duration: "2:43", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3", + }, +]; + +const audio = new Audio(); +let userData = { + songs: [...allSongs], + currentSong: null, + songCurrentTime: 0, +}; + +const playSong = (id) => { + const song = userData?.songs.find((song) => song.id === id); + audio.src = song.src; + audio.title = song.title; + + if (userData?.currentSong === null || userData?.currentSong.id !== song.id) { + audio.currentTime = 0; + } else { + audio.currentTime = userData.songCurrentTime; + } + userData.currentSong = song; + playButton.classList.add("playing"); + + audio.play(); +}; + +const pauseSong = () => { + userData.songCurrentTime = audio.currentTime; + + playButton.classList.remove("playing"); + audio.pause(); +}; + +const renderSongs = (array) => { + const songsHTML = array + .map((song)=> { + return ` +
  • + + +
    • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +const getCurrentSongIndex = () => { + +} +--fcc-editable-region-- + +playButton.addEventListener("click", () => { + if (userData?.currentSong === null) { + playSong(userData?.songs[0].id); + } else { + playSong(userData?.currentSong.id); + } +}); + +pauseButton.addEventListener("click", pauseSong); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md deleted file mode 100644 index d65212aca6b..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 63ec14d1c216aa063f0be4af -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive. - -To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively. - -Since these will not change, remember to use `const` to declare them. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#products-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#dessert-card-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md deleted file mode 100644 index 98110e0bc8a..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 63ec19978a066607e23439f8 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#clear-cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md deleted file mode 100644 index b3616baccb4..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 63ec1a16f930b108b8a76806 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#total-items` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#subtotal` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#taxes` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#total` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md deleted file mode 100644 index a973654d0d6..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 63ec1bbf5584390a7d08d41f -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`. - -Then, use `let` to declare a variable named `isCartShowing` and set it to `false`. - -# --hints-- - -You should use `document.getElementById()` to get the `#show-hide-cart` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should use `let` to declare a variable named `isCartShowing`. - -```js -assert.match(code, /let\s+isCartShowing/); -``` - -You should set the `isCartShowing` variable to `false`. - -```js -assert.match(code, /let\s+isCartShowing\s*=\s*false/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md deleted file mode 100644 index 172acaf6e3f..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 63ec1cb59f2a4c0be5b6dfa0 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products. - -# --hints-- - -You should declare a `products` variable with `const`. - -```js -assert.match(code, /const\s+products/); -``` - -You should set the `products` variable to an empty array. - -```js -assert.match(code, /const\s+products\s*=\s*\[\s*\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md deleted file mode 100644 index 0815e4ecb06..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 63ec20a06fff670d37befbd9 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -You now need to start adding products. Before you do that, you need to consider the structure of your product data. A product will need a unique identifier to distinguish it from other products, a price so people know how much it costs, and a name so people know what they are buying. You should also add a category to each product. - -Add an object to your `products` array. Give this object an `id` property set to the number `1`, a `name` property set to `Vanilla Cupcakes (6 Pack)`, a `price` property set to the number `12.99`, and a `category` property set to `Cupcake`. - -# --hints-- - -Your products array should have one value. - -```js -assert.equal(products.length, 1); -``` - -Your products array should have an object as its first value. - -```js -assert.isObject(products[0]); -``` - -Your products array should have an object with an `id` property set to the number `1`. - -```js -assert.equal(products[0].id, 1); -``` - -Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`. - -```js -assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your products array should have an object with a `price` property set to the number `12.99`. - -```js -assert.equal(products[0].price, 12.99); -``` - -Your products array should have an object with a `category` property set to `Cupcake`. - -```js -assert.equal(products[0].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md deleted file mode 100644 index 30754019c8c..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md +++ /dev/null @@ -1,472 +0,0 @@ ---- -id: 63ec3287b182ec0efe8a3135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up. - -| `name` | `price` | `category` | -| ------------------------------ | ------- | ----------- | -| `French Macaroon` | `3.99` | `Macaroon` | -| `Pumpkin Cupcake` | `3.99` | `Cupcake` | -| `Chocolate Cupcake` | `5.99` | `Cupcake` | -| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` | -| `Strawberry Ice Cream` | `2.99` | `Ice Cream` | -| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` | -| `Strawberry Pretzel` | `4.99` | `Pretzel` | -| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` | -| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` | -| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` | -| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` | - -# --hints-- - -Your second object in the `products` array should have an `id` property set to the number `2`. - -```js -assert.equal(products[1].id, 2); -``` - -Your second object in the `products` array should have a `name` property set to `French Macaroon`. - -```js -assert.equal(products[1].name, 'French Macaroon'); -``` - -Your second object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[1].price, 3.99); -``` - -Your second object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[1].category, 'Macaroon'); -``` - -Your third object in the `products` array should have an `id` property set to the number `3`. - -```js -assert.equal(products[2].id, 3); -``` - -Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`. - -```js -assert.equal(products[2].name, 'Pumpkin Cupcake'); -``` - -Your third object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[2].price, 3.99); -``` - -Your third object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[2].category, 'Cupcake'); -``` - -Your fourth object in the `products` array should have an `id` property set to the number `4`. - -```js -assert.equal(products[3].id, 4); -``` - -Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`. - -```js -assert.equal(products[3].name, 'Chocolate Cupcake'); -``` - -Your fourth object in the `products` array should have a `price` property set to the number `5.99`. - -```js -assert.equal(products[3].price, 5.99); -``` - -Your fourth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[3].category, 'Cupcake'); -``` - -Your fifth object in the `products` array should have an `id` property set to the number `5`. - -```js -assert.equal(products[4].id, 5); -``` - -Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`. - -```js -assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)'); -``` - -Your fifth object in the `products` array should have a `price` property set to the number `10.99`. - -```js -assert.equal(products[4].price, 10.99); -``` - -Your fifth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[4].category, 'Pretzel'); -``` - -Your sixth object in the `products` array should have an `id` property set to the number `6`. - -```js -assert.equal(products[5].id, 6); -``` - -Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`. - -```js -assert.equal(products[5].name, 'Strawberry Ice Cream'); -``` - -Your sixth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[5].price, 2.99); -``` - -Your sixth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[5].category, 'Ice Cream'); -``` - -Your seventh object in the `products` array should have an `id` property set to the number `7`. - -```js -assert.equal(products[6].id, 7); -``` - -Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`. - -```js -assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)'); -``` - -Your seventh object in the `products` array should have a `price` property set to the number `9.99`. - -```js -assert.equal(products[6].price, 9.99); -``` - -Your seventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[6].category, 'Macaroon'); -``` - -Your eighth object in the `products` array should have an `id` property set to the number `8`. - -```js -assert.equal(products[7].id, 8); -``` - -Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`. - -```js -assert.equal(products[7].name, 'Strawberry Pretzel'); -``` - -Your eighth object in the `products` array should have a `price` property set to the number `4.99`. - -```js -assert.equal(products[7].price, 4.99); -``` - -Your eighth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[7].category, 'Pretzel'); -``` - -Your ninth object in the `products` array should have an `id` property set to the number `9`. - -```js -assert.equal(products[8].id, 9); -``` - -Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`. - -```js -assert.equal(products[8].name, 'Butter Pecan Ice Cream'); -``` - -Your ninth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[8].price, 2.99); -``` - -Your ninth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[8].category, 'Ice Cream'); -``` - -Your tenth object in the `products` array should have an `id` property set to the number `10`. - -```js -assert.equal(products[9].id, 10); -``` - -Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`. - -```js -assert.equal(products[9].name, 'Rocky Road Ice Cream'); -``` - -Your tenth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[9].price, 2.99); -``` - -Your tenth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[9].category, 'Ice Cream'); -``` - -Your eleventh object in the `products` array should have an `id` property set to the number `11`. - -```js -assert.equal(products[10].id, 11); -``` - -Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`. - -```js -assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)'); -``` - -Your eleventh object in the `products` array should have a `price` property set to the number `11.99`. - -```js -assert.equal(products[10].price, 11.99); -``` - -Your eleventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[10].category, 'Macaroon'); -``` - -Your twelfth object in the `products` array should have an `id` property set to the number `12`. - -```js -assert.equal(products[11].id, 12); -``` - -Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`. - -```js -assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)'); -``` - -Your twelfth object in the `products` array should have a `price` property set to the number `12.99`. - -```js -assert.equal(products[11].price, 12.99); -``` - -Your twelfth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[11].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md deleted file mode 100644 index 2a000e8614e..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 63ec3427fc3e9214c9ed2a14 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that. - -Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function. - -# --hints-- - -You should call the `.forEach` method of your `products` array. - -```js -assert.match(code, /products\.forEach\(/); -``` - -You should use arrow syntax to create an empty callback function. - -```js -assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/) -``` - -You should pass your empty callback function to the `.forEach` method. - -```js -assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md deleted file mode 100644 index e9a2c069456..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 63ec36f6133df7160be3ec66 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Remember that you can use destructuring to extract multiple values from an array or object in a single statement. - -For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in. - -# --hints-- - -You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters. - -```js -assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/); -``` - -Your destructuring should be the first parameter of the callback function. - -```js -assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - () => {} -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md deleted file mode 100644 index 4add604d105..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 63ec47b454495519739486a7 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable. - -# --hints-- - -You should use access the `innerHTML` property of the `dessertCards` variable. - -```js -assert.match(code, /dessertCards\.innerHTML/); -``` - -You should use the addition assignment operator on the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/); -``` - -You should add an empty template literal string to the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md deleted file mode 100644 index 02a59b523b4..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 63ee5d38a5d29d0696f8d820 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable. - -# --hints-- - -You should create a `div` element. - -```js -assert.isAtLeast(document.querySelectorAll('div')?.length, 12); -``` - -Your `div` element should have a class of `dessert-card`. - -```js -assert.equal(document.querySelectorAll('.dessert-card')?.length, 12); -``` - -You should create an `h2` element. - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.length, 12); -``` - -Your `h2` element should have the text of the `name` variable. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your `h2` element should be inside the `div` element. - -```js -assert.equal(document.querySelectorAll('div h2')?.length, 12); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` - - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md deleted file mode 100644 index 96485328760..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63ee5d8f9e7168076e932fe2 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -After your `h2` element, create two `p` elements. Give the first a `class` of `dessert-price`, and the text of the `price` variable with a dollar sign in front of it. Give the second a `class` of `product-category`, and the text `Category:` followed by the value of the `category` variable. - -# --hints-- - -You should create two `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card')?.children.length, 3); -assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2) -``` - -Your `p` elements should come after your `h2` element. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2'); -assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P'); -assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P'); -``` - -Your first `p` element should have a `class` of `dessert-price`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price'); -``` - -Your first `p` element should have the text of the `price` variable with a dollar sign in front of it. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99'); -``` - -Your second `p` element should have a `class` of `product-category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category'); -``` - -Your second `p` element should have the text `Category:` followed by the value of the `category` variable. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    - -
    - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md deleted file mode 100644 index 6092f597046..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 63ee5e0f08e82208364c4128 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Finally, after your `p` elements, create a `button` element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `Add to cart` for the text. - -# --hints-- - -You should create a `button` element. - -```js -assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12); -``` - -Your `button` element should come after your `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P'); -assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling); -``` - -Your `button` element should have an `id` set to the value of the `id` variable. - -```js -assert.equal(document.querySelector('.dessert-card button')?.id, '1'); -``` - -Your `button` element should have a `class` of `btn add-to-cart-btn`. - -```js -assert.include(document.querySelector('.dessert-card button')?.className, 'btn'); -assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn'); -``` - -Your `button` element should have the text `Add to cart`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md deleted file mode 100644 index 44ba9af32dc..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 63ee5ea8be892e0955ab346c -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -You are already familiar with an HTML `class`, but JavaScript also has a class. In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods. - -The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class: - -```js -class Computer {}; -``` - -Declare a `ShoppingCart` class. - -# --hints-- - -You should declare a `ShoppingCart` variable. - -```js -assert.match(code, /ShoppingCart/); -``` - -You should use the `class` keyword to declare a `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*/); -``` - -Your `ShoppingCart` class should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md deleted file mode 100644 index 87839e53275..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 63ee5fc113bcb20a5db9214b -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Classes have a special `constructor` method, which is called when a new instance of the class is created. The `constructor` method is a great place to initialize properties of the class. Here is an example of a class with a `constructor` method: - -```js -class Computer { - constructor() { - } -} -``` - -Add an empty `constructor` method to the `ShoppingCart` class. - -# --hints-- - -You should add a `constructor` method to the `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/) -``` - -Your `constructor` method should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md deleted file mode 100644 index 4f7a2390687..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 63ee611d478dca0b77f6a393 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -The `this` keyword in JavaScript is used to refer to the current object. Depending on where `this` is used, what it references changes. In the case of a class, it refers to the instance of the object being constructed. You can use the `this` keyword to set the properties of the object being instantiated. Here is an example: - -```js -class Computer { - constructor() { - this.ram = 16; - } -} -``` - -In your constructor, use the `this` keyword to set the `items` property to an empty array. Also, set the `total` property to `0`, and the `taxRate` property to `8.25`. - -# --hints-- - -You should use the `this` keyword to set the `items` property of your class to an empty array. - -```js -assert.match(code, /this\.items/); -const cart = new ShoppingCart(); -assert.isArray(cart.items); -assert.isEmpty(cart.items); -``` - -You should use the `this` keyword to set the `total` property of your class to `0`. - -```js -assert.match(code, /this\.total/); -const cart = new ShoppingCart(); -assert.equal(cart.total, 0); -``` - -You should use the `this` keyword to set the `taxRate` property of your class to `8.25`. - -```js -assert.match(code, /this\.taxRate/); -const cart = new ShoppingCart(); -assert.equal(cart.taxRate, 8.25); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - - } -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md deleted file mode 100644 index 86c81b0332a..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 63ee7c664f9b65137d925c8a -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Your `ShoppingCart` class needs the ability to add items. Create an empty `addItem` method, which takes two parameters: `id` and `products`. Creating a method might look like this: - -```js -class Computer { - constructor() { - this.ram = 16; - } - - addRam(amount) { - this.ram += amount; - } -} -``` - -The first parameter, `id`, is the `id` of the product the user has added to their cart. The second parameter, `products`, is an array of product objects. By using a parameter instead of directly referencing your existing `products` array, this method will be more flexible if you wanted to add additional product lists in the future. - -# --hints-- - -Your `ShoppingCart` class should have an `addItem` method. - -```js -const cart = new ShoppingCart(); -assert.isFunction(cart.addItem); -``` - -Your `addItem` method should take two parameters: `id` and `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/); -``` - -Your `addItem` method should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md deleted file mode 100644 index 88900979e4b..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 63eea5cea403a81a68ae493c -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -You need to find the product that the user is adding to the cart. Remember that arrays have a `.find()` method. In your `addItem` function, declare a `product` variable, and assign it the value of calling the `.find()` method on the `products` array. - -For the callback to `.find()`, pass a function that takes a single parameter `item`, and returns whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -# --hints-- - -You should declare a `product` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=/); -``` - -You should call the `.find()` method on your `products` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(/); -``` - -You should pass a callback function to the `.find()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/); -``` - -The callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/); -``` - -The callback function should return whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/); -``` - -You should assign the value of the `.find()` method to the `product` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md deleted file mode 100644 index fa4bbc91e2f..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63eea817673c8e1c22927fa6 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Use `const` and destructuring to extract `name` and `price` variables from `product`. - -# --hints-- - -You should use destructuring to get the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/); -``` - -You should use `const` to declare the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/); -``` - -You should use destructuring to get the `name` and `price` variables from `product`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md deleted file mode 100644 index 21089f88380..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 63eea8e1e143ae1d098c8c9d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Now you need to push the `product` into the cart's `items` array. Remember to use the `this` keyword. - -# --hints-- - -You should call the `push` method on the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.push\(/); -``` - -Remember you need to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.push\(/); -``` - -You should `push` the `product` variable to the `items` array. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.deepEqual(cart.items, [products[0]]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md deleted file mode 100644 index f1583334ed8..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 63eeb8e86becbf1e75c2cb0d -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -You now need a total count of each product that the user has in the cart. Declare a `totalCountPerProduct` variable, and assign it an empty object. - -# --hints-- - -You should declare a `totalCountPerProduct` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/); -``` - -You should use `const` to declare `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/); -``` - -You should assign an empty object to `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md deleted file mode 100644 index af217952d82..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63eedebb0ec0231ff1cede1a -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Use the `.forEach()` method to loop through the `items` array. Pass an empty callback function that takes a single parameter `dessert`. - -# --hints-- - -You should use the `.forEach()` method on your `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.forEach\(/); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(/); -``` - -You should pass a callback function to the `.forEach()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/); -``` - -Your callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/); -``` - -Your callback function should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md deleted file mode 100644 index 24c1ac26daf..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 63efdbc22a0c56070beabed7 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -In your `forEach` callback, you need to update the `totalCountPerProduct` object. Using the `id` of the current `dessert` as your property, update the value of the property to be the current value plus one. Do not use the addition assignment operator for this. - -# --hints-- - -You should use dot notation to access the `id` property of `dessert`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /dessert\.id/); -``` - -You should use bracket notation to access the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the assignment operator to update the value of the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/); -``` - -You should update the value of `totalCountPerProduct` to be the current value plus one. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md deleted file mode 100644 index cba3963dbee..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 63efe370bbfc4a08d500118e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -You now have a small bug. When you try to access a property of an object and the property doesn't exist, you get `undefined`. This means if the dessert isn't already present in the `totalCountPerProduct` object, you end up trying to add `1` to `undefined`, which results in `NaN`. - -To fix this, you can use the `||` operator to set the value to `0` if it doesn't exist. Wrap your right-hand `totalCountPerProduct[data.id]` in parentheses, and add `|| 0` to the end of the expression. - -# --hints-- - -You should wrap your right-hand `totalCountPerProduct[data.id]` in parentheses. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the `||` operator. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/); -``` - -You should use `0` as your fallback value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/); -``` - -You should still add `1` to the value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1; - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md deleted file mode 100644 index 5e3da866f36..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 63eff02f00e69a0b2ac10b43 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Now you need to get prepared to update the display with the new product the user added. Declare a `currentProductCount` variable, and assign it the value of the `totalCountPerProduct` object's property matching the `id` of `product`. - -# --hints-- - -You should declare a `currentProductCount` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=/); -``` - -You should use `const` to declare `currentProductCount`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCount\s*=/); -``` - -You should assign the value of `totalCountPerProduct[product.id]` to `currentProductCount`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md deleted file mode 100644 index a1b63e599ad..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 63eff98ffb1d5a0d24ec79cb -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -You haven't written the code to generate the HTML yet, but if a product has already been added to the user's cart then there will be a matching element which you'll need. - -Use `.getElementById()` to get the matching element - you'll be setting the `id` value to `product-count-for-id${product.id}`, so use a template literal to query that value. - -Assign your query to a `currentProductCountSpan` variable. - -# --hints-- - -You should declare a `currentProductCountSpan` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/); -``` - -You should use `const` to declare `currentProductCountSpan`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/); -``` - -You should use `document.getElementById()` to get the matching element. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /document\.getElementById\(/); -``` - -You should use a template literal to query the `id` value. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/); -``` - -You should assign the value of `document.getElementById()` to `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md deleted file mode 100644 index 4573e021ac0..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63effe558c87a70e7072e447 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. - -# --hints-- - -You should check if `currentProductCount` is greater than `1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/); -``` - -You should use a ternary operator with your `currentProductCount > 1` condition. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/); -``` - -You should use `undefined` as the truthy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should use `undefined` as the falsy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md deleted file mode 100644 index aebdaf9a24f..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 63f0165121a9181342d5bc66 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -For your truthy expression, removing the `undefined`, you need to update the `textContent` of the `currentProductCountSpan` to be the `currentProductCount` followed by an `x`. Use a template literal to do so. - -# --hints-- - -You should remove the `undefined` from your truthy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should access the `textContent` property of `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/); -``` - -You should use template literal syntax to update the `textContent` to be `${currentProductCount}x`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 ? undefined : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md deleted file mode 100644 index b6f14c6ae69..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 63f017b4ad028a148eb713c0 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -For your falsy expression, you'll need to add new HTML to your `productsContainer`. Start by removing the `undefined`, then use the addition assignment operator and template literal syntax to add a `div` with the `class` set to `product` and the `id` set to `dessert${id}` to the `innerHTML` property of the `productsContainer`. - -# --hints-- - -You should remove the `undefined` from your falsy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /undefined/); -``` - -You should use the addition assignment operator to add HTML to the `productsContainer`. Remember that HTML goes in the `innerHTML` property. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/); -``` - -You should use template literal syntax to add HTML to the `productsContainer`. - -```js -assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/); -``` - -You should add a `div` to the `productsContainer`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.tagName, "DIV"); -``` - -Your `div` should have the `class` set to `product`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.className, "product"); -``` - -Your `div` should have the `id` set to `dessert${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.id, "dessert1"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md deleted file mode 100644 index dd3815162fa..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 63f01861f813e01564c95315 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Inside your `div`, add two `p` elements. Set the text of the second `p` element to be the value of the `price` variable. - -# --hints-- - -You should add two `p` elements inside your `div` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children.length, 2); -assert.equal(div?.children[0].tagName, 'P'); -assert.equal(div?.children[1].tagName, 'P'); -``` - -Your second `p` element should have the text of the `price` variable. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children[1].textContent, '12.99'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    - -
    - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md deleted file mode 100644 index da747a73c32..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 63f018f04e487e164dc27bd9 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable. - -# --hints-- - -Your first `p` element should have a `span` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children.length, 1); -assert.equal(p.children[0].tagName, 'SPAN'); -``` - -Your `span` element should have a `class` of `product-count`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].className, 'product-count'); -``` - -Your `span` element should have an `id` of `product-count-for-id${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].id, 'product-count-for-id1'); -``` - -Your first `p` element should have the text of the `name` variable. This should be outside the span. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - -

    -

    ${price}

    -
    - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md deleted file mode 100644 index 852ac25d2b7..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 63f01c9791a0aa1751c73760 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -There is still more functionality that your `ShoppingCart` class needs, but first you need to be able to test the code you have currently written. You'll need to instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples: - -```js -const myComputer = new Computer(); -``` - -Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object. - -# --hints-- - -You should use `const` to declare a `cart` variable. - -```js -assert.match(code, /const\s+cart\s*=/); -``` - -You should use the `new` keyword to instantiate a new `ShoppingCart` object. - -```js -assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/); -``` - -You should assign your new `ShoppingCart` object to the `cart` variable. - -```js -assert.isTrue(cart instanceof ShoppingCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } -}; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md deleted file mode 100644 index c2590b8a8ea..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f0224ceb16dc196d2c860a -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -You need to get all of the `Add to cart` buttons that you added to the DOM earlier. Declare an `addToCartBtns` variable, and assign it the value of calling the `getElementsByClassName()` method on the `document` object, passing in the string `add-to-cart-btn`. - -# --hints-- - -You should use `const` to declare your `addToCartBtns` variable. - -```js -assert.match(code, /const\s+addToCartBtns\s*=/); -``` - -You should call the `getElementsByClassName()` method on the `document` object. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/); -``` - -You should pass the string `add-to-cart-btn` to the `getElementsByClassName()` method. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/); -``` - -You should assign the value returned by the `getElementsByClassName()` method to the `addToCartBtns` variable. - -```js -assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } -}; - -const cart = new ShoppingCart(); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md deleted file mode 100644 index fd0129e37ca..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f026d041bc6c1a3d5cba0f -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -You need to iterate through the buttons in your `addToCartBtns` variable. However, `.getElementsByClassName()` returns a Collection, which does not have a `forEach` method. - -Use the spread operator on the `addToCartBtns` variable to convert it into an array. Then, use the `forEach` method to iterate through the array. Do not pass a callback function yet. - -# --hints-- - -You should use the spread operator on the `addToCartBtns` variable. - -```js -assert.match(code, /\.\.\.addToCartBtns/); -``` - -You should spread the `addToCartBtns` variable into an array. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/); -``` - -You should use the `forEach` method on the array you created. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/); -``` - -You should not pass a callback function to the `forEach` method. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md deleted file mode 100644 index cae3ba72dbe..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0284532742c1b26c7a052 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Add your callback function to the `forEach` method. It should take a `btn` parameter. Then, in the callback, add an event listener to the `btn`. The event listener should listen for a `click` event, and should take another callback with an `event` parameter. The second callback should be empty. - -# --hints-- - -You should use arrow syntax to add a callback function to the `forEach` method which takes a `btn` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/); -``` - -You should add an event listener to the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/); -``` - -You should add an empty callback function to the event listener. Remember to give it an `event` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md deleted file mode 100644 index c27e13717f0..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0289df84a581bbdbd29b7 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -In your event listener callback, call the `.addItem()` method of your `cart` object, and pass in the `event.target.id`. Remember that the `id` here will be a string, so you need to convert it to a number. - -Pass your `products` array as the second argument. - -# --hints-- - -Your event listener callback should call the `.addItem()` method of your `cart` object. - -```js -assert.match(code, /cart\.addItem\(/); -``` - -Your `.addItem()` method should be called with the `event.target.id` as the first argument. Remember to convert the `id` to a number using `Number()`. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/); -``` - -Your `.addItem()` method should be called with the `products` array as the second argument. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - - }) - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md deleted file mode 100644 index 4b53ebc3ff1..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 63f0295e673b661ccb299e8a -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -You need a way to access the total number of items in the cart. The best way to do this is to add another method to your `ShoppingCart` class, rather than accessing the `items` array directly. - -Add a `getCounts` method to the `ShoppingCart` class. It should return the number of items in the `items` array. - -# --hints-- - -Your `ShoppingCart` class should have a `getCounts` method. - -```js -assert.isFunction(cart.getCounts); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const afterCounts = code.split('getCounts')[1]; -assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/); -``` - -Your `getCounts` method should return the number of items in the `items` array. - -```js -assert.equal(cart.getCounts(), 0); -cart.addItem(1, products); -assert.equal(cart.getCounts(), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md deleted file mode 100644 index b75a16738ae..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 63f029b96b9e9e1df93be951 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Now you can update the total number of items on the webpage. Assign the value of your `cart` object's `.getCounts()` method to the `textContent` of the `totalNumberOfItems` variable. - -# --hints-- - -You should access the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent/) -``` - -You should assign the value of your `cart` object's `.getCounts()` method to the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md deleted file mode 100644 index ff8d5d86a2e..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 63f02a4ef92d711ec1ff618c -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -You also need to update the total price of the cart when the user adds an item. Create a `calculateTotal` method in the `ShoppingCart` class. - -In that method, declare a `subTotal` variable and use the `reduce` method on the `items` array to calculate the sum of the `price` property of each item in the array. Use `total` and `item` as the parameters for your callback. - -Remember to set your initial value in the `reduce` method. - -# --hints-- - -You should create a `calculateTotal` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTotal); -``` - -Your `calculateTotal` method should have a `subTotal` variable declared with `const`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+subTotal\s*=/); -``` - -Your `calculateTotal` method should use the `reduce` method on the `items` array. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/); -``` - -Your `reduce` callback should use `total` and `item` as the first and second parameter. Remember to use arrow function syntax. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/); -``` - -Your `reduce` callback should return the sum of `total` and `item.price`. Use an implicit return. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/); -``` - -Your `reduce` call should have an initial value of `0`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md deleted file mode 100644 index 8d4036f7ea6..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f02b22cce1c11fe9604381 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Part of the total cost will include the tax, so you need to calculate that as well. Create a `calculateTaxes` method in the `ShoppingCart` class. This method should take an `amount` parameter. - -# --hints-- - -You should create a `calculateTaxes` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTaxes); -``` - -Your `calculateTaxes` method should take an `amount` parameter. - -```js -assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md deleted file mode 100644 index 82d277b0ab0..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f02bdeb9b428208b97eb6b -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -For clarity, wrap the `taxRate / 100` calculation in parentheses. - -# --hints-- - -You should divide the `taxRate` by 100 in your `calculateTaxes` method. Remember to use the `this` keyword. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/); -``` - -You should wrap the `this.taxRate / 100` calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/); -``` - -You should multiply the `amount` parameter by the `taxRate` divided by 100 in your `calculateTaxes` method. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/); -``` - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -```js -console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md deleted file mode 100644 index 0954c9b4ac6..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 63f02c6e18773921ba50aa53 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Because of the way computers store and work with numbers, calculations involving decimal numbers can result in some strange behavior. For example, `0.1 + 0.2` is not equal to `0.3`. This is because computers store decimal numbers as binary fractions, and some binary fractions cannot be represented exactly as decimal fractions. - -We want to clean up the number result from your calculation. Wrap your calculation in parentheses (don't include the `return` statement!) and call the `.toFixed()` method on it. Pass the `.toFixed()` method the number `2` as an argument. This will round the number to two decimal places and return a string. - -# --hints-- - -You should wrap your calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/) -``` - -You should call the `.toFixed()` method on your calculation. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/) -``` - -You should pass the `.toFixed()` method the number `2` as an argument. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return (this.taxRate / 100) * amount; - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md deleted file mode 100644 index d925dca7812..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 63f0311f5ea9382388d6124f -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -The issue with `.toFixed()` returning a string is that you want to be able to perform calculations with the tax rate. To fix this, you can pass the `.toFixed()` call (including the calculation) to the `parseFloat()` function. This will convert the fixed string back into a number, preserving the existing decimal places. - -Pass your `.toFixed()` call to `parseFloat()`. - -# --hints-- - -You should pass your entire calculation (excluding the `return` statement) to `parseFloat()`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return ((this.taxRate / 100) * amount).toFixed(2); - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md deleted file mode 100644 index b0527ca7c31..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f033fdb1fbcc254999fcc3 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Your cart currently isn't visible on the webpage. To make it visible, start by adding an event listener to the `cartBtn` variable, listening for the click event. The callback does not need any parameters. - -# --hints-- - -You should add an event listener to the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/); -``` - -You should add an empty callback function (using arrow syntax) to the event listener. Remember that it does not need any parameters. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md deleted file mode 100644 index 48e1daa6e0e..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f03446c2ed3e264be6c7fc -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Start by inverting the value of `isCartShowing`. Remember that you can use the logical not operator `!` to invert the value of a boolean. Assign the inverted value to `isCartShowing`. - -# --hints-- - -You should invert the value of `isCartShowing`. - -```js -assert.match(code, /!isCartShowing/); -``` - -You should assign the inverted value of `isCartShowing` to `isCartShowing`. - -```js -assert.match(code, /isCartShowing\s*=\s*!isCartShowing/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md deleted file mode 100644 index 1e9f9959098..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f0348a54a177272071a595 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `Hide`, otherwise set it to `Show`. - -# --hints-- - -You should use the assignment operator on the `textContent` property of the `showHideCartSpan` variable. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Hide` if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Show` if `isCartShowing` is false. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md deleted file mode 100644 index 3fcf304cca6..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 63f034d012f74627ce538d3a -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `block`, otherwise set it to `none`. - -Now you should be able to see your cart and add items to it. - -# --hints-- - -You should access the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/) -``` - -You should use the assignment operator on the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `block` if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `none` if `isCartShowing` is false. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md deleted file mode 100644 index a4c481b5796..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f03686c5ea863533ec71f4 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Declare a variable `tax` and assign it the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument. - -# --hints-- - -Use `const` to declare a variable named `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+tax\s*=/); -``` - -Assign the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument, to the `tax` variable. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md deleted file mode 100644 index 936b8a7add9..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f036ec91fdf238c90665f5 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Update the `total` value to be the sum of the `subTotal` and `tax` values. - -# --hints-- - -You should update the `total` value. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total/); -``` - -You should set the `total` value to be the sum of the `subTotal` and `tax` values. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md deleted file mode 100644 index cba09f5a3e6..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 63f0370b340915399d31e5eb -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -You're going to update the HTML in this method as well. Set the `textContent` of the `cartSubTotal` to be the value of `subTotal` to a fixed 2 decimal places. Use template literal syntax to add the dollar sign to the beginning of the value. - -# --hints-- - -You should access the `textContent` property of the `cartSubTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `subTotal` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartSubTotal` element to your template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md deleted file mode 100644 index 37c08222320..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 63f0374d5351223a747c301d -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Following the same pattern as your `cartSubTotal`, update the `cartTaxes` to display the `tax` value, and your `cartTotal` to display the `total` property. - -# --hints-- - -You should access the `textContent` property of the `cartTaxes` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/); -``` - -You should call the `.toFixed()` method on the `tax` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTaxes` element to `tax.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should access the `textContent` property of the `cartTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `total` variable, passing `2` as the argument. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTotal` element to your `total.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md deleted file mode 100644 index 56336e0263e..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f0378e173e3c3b7638b528 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Finally, return the value of the `total` property. Remember your `this` keyword. - -# --hints-- - -Your `calculateTotal` method should return the value of the `total` property. - -```js -assert.equal(cart.calculateTotal(), 0); -cart.addItem(1, products); -assert.approximately(cart.calculateTotal(), 14.06, 0.1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md deleted file mode 100644 index db0f9862452..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f038a0ae041d3c5b0cdf23 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Your last feature is to allow users to clear their cart. Add a `clearCart()` method to your `ShoppingCart` class. - -# --hints-- - -Your `ShoppingCart` class should have a `clearCart` method. - -```js -assert.isFunction(cart.clearCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md deleted file mode 100644 index 50339959f43..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -id: 63f038e671d3f73d5a041973 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -The first thing you should do is check if the `items` array is empty. If it is, display an `alert` to the user with the text `Your shopping cart is already empty`, then return from the function. - -Remember that `0` is a falsy value, so you can use the `!` operator to check if the array is empty. - -After displaying the alert, return from the function to stop execution. - -# --hints-- - -You should create an `if` statement that checks if the `items` array is empty, using the negation operator. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/); -``` - -Your `if` statement should display an `alert` to the user with the text `Your shopping cart is already empty`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/); -``` - -Your `if` statement should return from the function. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md deleted file mode 100644 index 23f034e9067..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 63f039dbcef7673e4e758fa3 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Browsers have a built-in `confirm()` function which displays a confirmation prompt to the user. `confirm()` accepts a string, which is the message displayed to the user. It returns `true` if the user confirms, and `false` if the user cancels. - -Declare a variable `isCartCleared` and assign it the value of calling `confirm()` with the string `"Are you sure you want to clear all items from your shopping cart?"`. - -# --hints-- - -You should use `const` to declare the `isCartCleared` variable. - -```js -const afterClearCart = code.split('clearCart()')[1]; -assert.match(afterClearCart, /const\s+isCartCleared\s*=/); -``` - -You should call the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(/); -``` - -You should pass the string `Are you sure you want to clear all items from your shopping cart?` to the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -You should assign the value of the `confirm()` function to the `isCartCleared` variable. - -```js -assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md deleted file mode 100644 index be4fde050a5..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -id: 63f03a7143a6ef3f7f3344f0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -You only want to clear the cart if the user confirms the prompt. Create an `if` statement that checks if the user confirmed the prompt. - -In the `if` statement, set the `items` property back to an empty array, then set the `total` property to `0`. - -# --hints-- - -You should create an `if` statement that checks if the user confirmed the prompt. Remember that you can check the truthiness of `isCartCleared` directly. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/); -``` - -Your `if` statement should set the `items` property back to an empty array. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/); -``` - -Your `if` statement should set the `total` property to `0`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md deleted file mode 100644 index 3b6705168d8..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f03ac2b428b2404a5a7518 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -You also need to start clearing the HTML. Set the `innerHTML` property of the `productsContainer` back to an empty string. - -# --hints-- - -In your `if` statement, you should set the `innerHTML` property of the `productsContainer` back to an empty string. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md deleted file mode 100644 index 5a1e7f099f3..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 63f03af535682e4138fdb915 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Set the `textContent` of the `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal` elements all to the number `0`. - -# --hints-- - -You should set the `textContent` of the `totalNumberOfItems` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartSubTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTaxes` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTotal\.textContent\s*=\s*0/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md deleted file mode 100644 index 913c5c53bdb..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md +++ /dev/null @@ -1,744 +0,0 @@ ---- -id: 63f03b1ed5ab15420c057463 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Your final step is to make your clear button functional. Add a `click` event listener to the `clearCartBtn`. For the callback, you can pass in `cart.clearCart` directly. - -However, doing so will not work, because the context of `this` will be the `clearCartBtn` element. You need to bind the `clearCart` method to the `cart` object. - -You can do this by passing `cart.clearCart.bind(cart)` as the callback. - -And with that, your shopping cart project is complete! - -# --hints-- - -You should add an event listener to your `clearCartBtn` element. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(/); -``` - -Your event listener should listen for the `click` event. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/); -``` - -Your event listener should take `cart.clearCart.bind(cart)` as the callback. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - -clearCartBtn.addEventListener("click", cart.clearCart.bind(cart)); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md deleted file mode 100644 index c33ce088a1c..00000000000 --- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f6721d5110af243ef8f3d9 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now call your `.calculateTotal()` method inside your `forEach` loop. - -# --hints-- - -You should call `cart.calculateTotal()` inside your `forEach` loop. - -```js -const afterForEach = code.split('[...addToCartBtns].forEach(')[1]; -assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
    -

    Desserts Page

    -
    -
    - -
    - -
    -

    Total number of items: 0

    -

    Subtotal: $0

    -

    Taxes: $0

    -

    Total: $0

    -
    -
    -
    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
    -

    ${name}

    -

    $${price}

    -

    Category: ${category}

    - -
    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
    -

    - ${name} -

    -

    ${price}

    -
    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md new file mode 100644 index 00000000000..d522cf2c5ab --- /dev/null +++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md @@ -0,0 +1,388 @@ +--- +id: 659ebe52d74b132a1d75c891 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug. + +The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function. +# --hints-- + +You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`. + +```js +assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn localStorage by Building a Todo App + + + + +
    +

    Todo App

    +
    + + + +
    +

    Discard unsaved changes?

    +
    + + +
    +
    +     +
    +
    +
    + + + + +``` + +```css +:root { + --white: #fff; + --light-grey: #f5f6f7; + --dark-grey: #0a0a23; + --yellow: #f1be32; + --golden-yellow: #feac32; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--dark-grey); +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + color: var(--light-grey); + margin: 20px 0 40px 0; +} + +.todo-app { + background-color: var(--white); + width: 300px; + height: 350px; + border: 5px solid var(--yellow); + border-radius: 8px; + padding: 15px; + position: relative; + display: flex; + flex-direction: column; + gap: 10px; +} + +.btn { + cursor: pointer; + width: 100px; + margin: 10px; + color: var(--dark-grey); + background-color: var(--golden-yellow); + background-image: linear-gradient(#fecc4c, #ffac33); + border-color: var(--golden-yellow); + border-width: 3px; +} + +.btn:hover { + background-image: linear-gradient(#ffcc4c, #f89808); +} + +.large-btn { + width: 80%; + font-size: 1.2rem; + align-self: center; + justify-self: center; +} + +.close-task-form-btn { + background: none; + border: none; + cursor: pointer; +} + +.close-icon { + width: 20px; + height: 20px; +} + +.task-form { + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--white); + border-radius: 5px; + padding: 15px; + width: 300px; + height: 350px; + flex-direction: column; + justify-content: space-between; + overflow: auto; +} + +.task-form-header { + display: flex; + justify-content: flex-end; +} + +.task-form-body { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.task-form-footer { + display: flex; + justify-content: center; +} + +.task-form-label, +#title-input, +#date-input, +#description-input { + display: block; +} + +.task-form-label { + margin-bottom: 5px; + font-size: 1.3rem; + font-weight: bold; +} + +#title-input, +#date-input, +#description-input { + width: 100%; + margin-bottom: 10px; + padding: 2px; +} + +#confirm-close-dialog { + padding: 10px; + margin: 10px auto; + border-radius: 15px; +} + +.confirm-close-dialog-btn-container { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.discard-message-text { + font-weight: bold; + font-size: 1.5rem; +} + +#tasks-container { + height: 100%; + overflow-y: auto; +} + +.task { + margin: 5px 0; +} + +.hidden { + display: none; +} + +@media (min-width: 576px) { + .todo-app, + .task-form { + width: 400px; + height: 450px; + } + + .task-form-label { + font-size: 1.5rem; + } + + #title-input, + #date-input { + height: 2rem; + } + + #title-input, + #date-input, + #description-input { + padding: 5px; + margin-bottom: 20px; + } +} +``` + +```js +const taskForm = document.getElementById("task-form"); +const confirmCloseDialog = document.getElementById("confirm-close-dialog"); +const openTaskFormBtn = document.getElementById("open-task-form-btn"); +const closeTaskFormBtn = document.getElementById("close-task-form-btn"); +const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); +const cancelBtn = document.getElementById("cancel-btn"); +const discardBtn = document.getElementById("discard-btn"); +const tasksContainer = document.getElementById("tasks-container"); +const titleInput = document.getElementById("title-input"); +const dateInput = document.getElementById("date-input"); +const descriptionInput = document.getElementById("description-input"); + +const taskData = []; +let currentTask = {}; + +const addOrUpdateTask = () => { + --fcc-editable-region-- + + --fcc-editable-region-- + const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); + const taskObj = { + id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, + title: titleInput.value, + date: dateInput.value, + description: descriptionInput.value, + }; + + if (dataArrIndex === -1) { + taskData.unshift(taskObj); + } else { + taskData[dataArrIndex] = taskObj; + } + + updateTaskContainer() + reset() +}; + +const updateTaskContainer = () => { + tasksContainer.innerHTML = ""; + + taskData.forEach( + ({ id, title, date, description }) => { + (tasksContainer.innerHTML += ` +
    +

    Title: ${title}

    +

    Date: ${date}

    +

    Description: ${description}

    + + +
    + `) + } + ); +}; + + +const deleteTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + buttonEl.parentElement.remove(); + taskData.splice(dataArrIndex, 1); +} + +const editTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + currentTask = taskData[dataArrIndex]; + + titleInput.value = currentTask.title; + dateInput.value = currentTask.date; + descriptionInput.value = currentTask.description; + + addOrUpdateTaskBtn.innerText = "Update Task"; + + taskForm.classList.toggle("hidden"); +} + +const reset = () => { + titleInput.value = ""; + dateInput.value = ""; + descriptionInput.value = ""; + taskForm.classList.toggle("hidden"); + currentTask = {}; +} + +openTaskFormBtn.addEventListener("click", () => + taskForm.classList.toggle("hidden") +); + +closeTaskFormBtn.addEventListener("click", () => { + const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; + if (formInputsContainValues) { + confirmCloseDialog.showModal(); + } else { + reset(); + } +}); + +cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); + +discardBtn.addEventListener("click", () => { + confirmCloseDialog.close(); + reset() +}); + +taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + addOrUpdateTask(); +}); +``` diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md deleted file mode 100644 index f4b05b12871..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e0e72c65bc8e73dfe1e -videoId: LGQuIIv2RVA -title: Elements and Tags Question A -challengeType: 15 -dashedName: elements-and-tags-question-a ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `

    `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

    `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
    ` or ``, but some can also be used without the closing forward slash such as `
    ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) - -## --text-- - -What are HTML tags? - -## --answers-- - -HTML tags tell the browser what content an element contains. - ---- - -HTML tags tell the browser when to load its content. - ---- - -HTML tags tell the browser what content the next element contains. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md deleted file mode 100644 index 51bf43a7014..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 637f4e1672c65bc8e73dfe1f -title: Elements and Tags Question B -challengeType: 15 -dashedName: elements-and-tags-question-b ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `

    `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

    `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
    ` or ``, but some can also be used without the closing forward slash such as `
    ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --text-- - -What are the three parts of most HTML elements? - -## --answers-- - -An opening tag, self closing tag, and content. - ---- - -An opening tag, closing tag, and content. - ---- - -An opening tag, closing tag, and attribute. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md deleted file mode 100644 index ab85844e81b..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e1c72c65bc8e73dfe20 -title: HTML Boilerplate Question A -challengeType: 15 -dashedName: html-boilerplate-question-a ---- - -# --description-- - -To demonstrate an HTML boilerplate, you first need an HTML file to work with. - -Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. - -You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. - -To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. - -It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. - -## The DOCTYPE - -Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. - -The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: - -```html - -``` - -However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. - -Open the `index.html` file created earlier in your text editor and add `` to the very first line. - -# --question-- -## --text-- - -What is the purpose of the `DOCTYPE` declaration? - -## --answers-- - -It tells the browser which version of HTML to use to render the document. - ---- - -It tells the browser that this document uses JavaScript. - ---- - -It tells the browser the title of the document. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md deleted file mode 100644 index ffd10a4b5ac..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 637f4e2872c65bc8e73dfe21 -title: HTML Boilerplate Question B -challengeType: 15 -dashedName: html-boilerplate-question-b ---- - -# --description-- - -After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. - -This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. - -Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: - -```html - - - -``` - -## What is the lang attribute? -`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. - -# --question-- - -## --text-- - -What is the `html` element? - -## --answers-- - -It is the root element in the document and tells the browser which version of HTML it should use. - ---- - -It is the root element in the document and all other elements should descend from it. - ---- - -It is the root element in the document and all other elements should come after it. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md deleted file mode 100644 index e4ddaa12c4b..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e2f72c65bc8e73dfe22 -title: HTML Boilerplate Question C -challengeType: 15 -dashedName: html-boilerplate-question-c ---- - -# --description-- - -The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. - -## The Charset Meta Element -You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. - -Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. - -## Title Element -Another element you should always include in the head of an HTML document is the `title` element: - -```html -My First Webpage -``` - -The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. - -If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. - -There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. - -Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: - - -```html - - - - - - My First Webpage - - -``` - -# --question-- - -## --text-- - -What is the purpose of the `head` element? - -## --answers-- - -The `head` element is used to display all elements that are displayed on the webpage. - ---- - -The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. - ---- - -The `head` element is used to display the header content on top of the webpage. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md deleted file mode 100644 index 302b6a95d44..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e3672c65bc8e73dfe23 -videoId: V8UAEoOvqFg -title: HTML Boilerplate Question D -challengeType: 15 -dashedName: html-boilerplate-question-d ---- - -# --description-- - -The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. - -To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. - ---- - -Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. - ---- - -Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. - -## --text-- - -What is the purpose of the `body` element? - -## --answers-- - -This is where all important information about the webpage is displayed such as the `title` and `meta` tags. - ---- - -This is where you tell the browser how to render the webpage correctly. - ---- - -This is where all content will be displayed on the page such images, text, and links. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md deleted file mode 100644 index 6c1bfb0a976..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 6374f208de18c50e48ba767b -title: Introduction To HTML and CSS Question A -challengeType: 15 -dashedName: introduction-to-html-and-css-question-a ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --assignment-- - -Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. - -## --text-- - -Which of the following statements is true? - -## --answers-- - -CSS is used to create the basic structure of a webpage, and HTML is used to add style. - ---- - -HTML is used to create the basic structure of a webpage, and CSS is used to add style. - ---- - -HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. - - -## --video-solution-- - -2 - - diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md deleted file mode 100644 index 87aff63d4ec..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 6376327e2724a688c04636e3 -title: Introduction To HTML and CSS Question B -challengeType: 15 -dashedName: introduction-to-html-and-css-question-b ---- - -# --description-- - - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to add paragraphs of text on a webpage? - -## --answers-- - -CSS - ---- - -JavaScript - ---- - -HTML - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md deleted file mode 100644 index 2ca9f2fbacb..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 637633162724a688c04636e4 -title: Introduction To HTML and CSS Question C -challengeType: 15 -dashedName: introduction-to-html-and-css-question-c ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to change the font and background color of a button? - -## --answers-- - -You should use CSS to change the background color and font of a button. - ---- - -You should use JavaScript to change the background color and font of a button. - ---- - -You should use HTML to change the background color and font of a button. - -## --video-solution-- - -1 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md deleted file mode 100644 index 53e4c08471a..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 637633672724a688c04636e5 -title: Introduction To HTML and CSS Question D -challengeType: 15 -dashedName: introduction-to-html-and-css-question-d ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -What is the difference between HTML, CSS, and JavaScript? - -## --answers-- - -HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. - ---- - -CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. - ---- - -JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md deleted file mode 100644 index b4d237448f3..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f704072c65bc8e73dfe36 -videoId: tsEQgGjSmkM -title: Links and Images Question A -challengeType: 15 -dashedName: links-and-images-question-a ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- Finally, add the following `h1` to the `body`: `

    Homepage

    ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. - -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. - -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Links video above. - -## --text-- - -What HTML tag is used to create a link? - -## --answers-- - -`` - ---- - -`

    ` - ---- - -`

      ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md deleted file mode 100644 index a138268c406..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f703572c65bc8e73dfe35 -title: Links and Images Question B -challengeType: 15 -dashedName: links-and-images-question-b ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

      Homepage

      ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `      ` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- -## --text-- - -What is an attribute? -## --answers-- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. - ---- - -An HTML attribute is used to tell the browser what the element contains. - ---- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md deleted file mode 100644 index 8863b087456..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 637f703072c65bc8e73dfe34 -title: Links and Images Question C -challengeType: 15 -dashedName: links-and-images-question-c ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

      Homepage

      ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --text-- - -What attribute tells links where to go to? - -## --answers-- - -`src` - ---- - -`href` - ---- - -`link` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md deleted file mode 100644 index 37eebffbabf..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 637f702872c65bc8e73dfe33 -videoId: ta3Oxx7Yqbo -title: Links and Images Question D -challengeType: 15 -dashedName: links-and-images-question-d ---- - -# --description-- - - -Generally, there are two kinds of links you will create: - -- Links to pages on other websites on the internet - -- Links to pages located on your own websites - - -## Absolute Links -Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. - -You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. - -`https://www.theodinproject.com/about` - -## Relative Links -Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. - -Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. - -Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: - -```html - - - - - Odin Links and Images - - - -

      About Page

      - - -``` - -Back in the `index` page, add the following anchor element to create a link to the `about` page: - -```html - -

      Homepage

      - click me - - About - -``` - -Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. - -This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. - -But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. - -Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. - -Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. - -To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. - -```html - -

      Homepage

      - About - -``` - -Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. - -In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. - -```html - -

      Homepage

      - About - -``` - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML File Structure video above. - -## --text-- - -What is the difference between an absolute and a relative link? - -## --answers-- - -An absolute link is a link to another page on the current website. A relative link is a link to another website. - ---- - -An absolute link is a link to another website. A relative link is a link another page on the current website. - ---- - -There is no difference between absolute and relative links. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md deleted file mode 100644 index ae008078088..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 637f702372c65bc8e73dfe32 -videoId: 0xoztJCHpbQ -title: Links and Images Question E -challengeType: 15 -dashedName: links-and-images-question-e ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

      Homepage

      - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## `Alt` attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included: - - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Images Video above. - -## --text-- - -Which tag is used to display an image? - -## --answers-- - -`` - ---- - -`` - ---- - -`` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md deleted file mode 100644 index e1af2d6a659..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701c72c65bc8e73dfe31 -title: Links and Images Question F -challengeType: 15 -dashedName: links-and-images-question-f ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

      Homepage

      -       click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -What two attributes do images always need to have? - -## --answers-- - -`href` and `alt` - ---- - -`name` and `href` - ---- - -`alt` and `src` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md deleted file mode 100644 index 5bc84fa6c96..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701572c65bc8e73dfe30 -title: Links and Images Question G -challengeType: 15 -dashedName: links-and-images-question-g ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

      Homepage

      - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -How do you access a parent directory in a filepath? - -## --answers-- - -`../` - ---- - -`./` - ---- - -`.../` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md deleted file mode 100644 index 71157081ae7..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 637f700b72c65bc8e73dfe2f -title: Links and Images Question H -challengeType: 15 -dashedName: links-and-images-question-h ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

      Homepage

      - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --assignment-- - -Read about the four main image formats that can be used on the web. - -## --text-- - -What are the four main image formats that you can use for images on the web? - -## --answers-- - -TIFF, GIF, PNG, and SVG. - ---- - -JPG, PNG, GIF, and SVG. - ---- - -JPG, PDF, SVG, and GIF. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md deleted file mode 100644 index f4625eb7e31..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e3e72c65bc8e73dfe24 -videoId: kcHKFZBVtf4 -title: Understand Ordered and Unordered List Question A -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-a ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
        ` element, and each item within the list is created using the list item element `
      • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
          ` element. Each individual item in them is again created using the list item element `
        1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --assignment-- - -Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. - ---- - -Make an unordered shopping list of your favorite foods. - ---- - -Make an ordered list of todo’s you need to get done today. - ---- - -Make an unordered list of places you’d like to visit someday. - ---- - -Make an ordered list of your all time top 5 favorite video games or movies. - -## --text-- - -What HTML tag is used to create an unordered list? - -## --answers-- - -`
        2. ` - ---- - -`
            ` - ---- - -`
              ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md deleted file mode 100644 index 67e79f0ccb9..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e4672c65bc8e73dfe25 -title: Understand Ordered and Unordered List Question B -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-b ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                ` element, and each item within the list is created using the list item element `
              • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                  ` element. Each individual item in them is again created using the list item element `
                1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create an ordered list? - -## --answers-- - -`
                    ` - ---- - -`
                  1. ` - ---- - -`
                      ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md deleted file mode 100644 index 1edd6feffbf..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e5172c65bc8e73dfe26 -title: Understand Ordered and Unordered List Question C -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-c ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                        ` element, and each item within the list is created using the list item element `
                      • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                          ` element. Each individual item in them is again created using the list item element `
                        1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create list items within both unordered and ordered lists? - -## --answers-- - -`
                            ` - ---- - -`
                          1. ` - ---- - -`
                              ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md deleted file mode 100644 index 8698b62aca8..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 637f4e5872c65bc8e73dfe27 -videoId: yqcd-XkxZNM -title: Working With Text Question A -challengeType: 15 -dashedName: working-with-text-question-a ---- - -# --description-- - -What would you expect the following text to output on an HTML page? - -```html - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. - -``` - -It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below: - - - -When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line. - -If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `

                              ` tag. - -Changing our example from before to use paragraph elements fixes the issue: - - - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. - -## --text-- - -How do you create a paragraph in HTML? - -## --answers-- - -`

                              This is a paragraph

                              ` - ---- - -`

                              This is a paragraph

                              ` - ---- - -`This is a paragraph` - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md deleted file mode 100644 index 17d3c900359..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 637f4e5f72c65bc8e73dfe28 -title: Working With Text Question B -challengeType: 15 -dashedName: working-with-text-question-b ---- - -# --description-- - -Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. - -There are 6 different levels of headings starting from `

                              ` to `

                              `. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. - -Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `

                              ` tag. - - - -Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. - -# --question-- -## --text-- - -How many different levels of headings are there and what is the difference between them? - -## --answers-- - -There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. - ---- - -There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. - ---- - -There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md deleted file mode 100644 index 6ccf0e06658..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 637f4e6672c65bc8e73dfe29 -videoId: gW6cBZLUk6M -title: Working With Text Question C -challengeType: 15 -dashedName: working-with-text-question-c ---- - -# --description-- - -The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. - -You can use `strong` on its own: - - - -But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: - - - -Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Bold and Italic Text Video above. - -## --text-- - -What element should you use to make text bold and important? - -## --answers-- - -`This is an important message` - ---- - -`

                              This is an important message

                              ` - ---- - -`This is an important message` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md deleted file mode 100644 index e686b2698e0..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 637f4e6e72c65bc8e73dfe2a -title: Working With Text Question D -challengeType: 15 -dashedName: working-with-text-question-d ---- - -# --description-- - -The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. - -To use `em` on its own: - - -Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: - - - -# --question-- -## --text-- - -What element should you use to make text italicized to add emphasis? - -## --answers-- - -`This is an italic message` - ---- - -`This is an italic message` - ---- - -`This is an italic message` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md deleted file mode 100644 index a0a7ba2fda9..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e7972c65bc8e73dfe2b -title: Working With Text Question E -challengeType: 15 -dashedName: working-with-text-question-e ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the `body` element is the parent and the `p` is the child: - -```html - - - - -

                              Lorem ipsum dolor sit amet.

                              - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: - -```html - - - - -

                              Lorem ipsum dolor sit amet.

                              -

                              Ut enim ad minim veniam.

                              - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship do two elements have if they are at the same level of nesting? - -## --answers-- - -The elements are each other's parents. - ---- - -The elements are each other's children. - ---- - -The elements are siblings. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md deleted file mode 100644 index 7d440cfab25..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f4e8072c65bc8e73dfe2c -title: Working With Text Question F -challengeType: 15 -dashedName: working-with-text-question-f ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the body element is the parent and the paragraph is the child: - -```html - - - - -

                              Lorem ipsum dolor sit amet.

                              - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: - -```html - - - - -

                              Lorem ipsum dolor sit amet.

                              -

                              Ut enim ad minim veniam.

                              - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship does an element have with any nested element within it? - -## --answers-- - -The element within the other element is called the parent element. - ---- - -The element within the other element is called the child element. - ---- - -The element within the other element is called the sibling element. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md deleted file mode 100644 index 5f5d141fa46..00000000000 --- a/curriculum/challenges/arabic/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e8772c65bc8e73dfe2d -title: Working With Text Question G -challengeType: 15 -dashedName: working-with-text-question-g ---- - -# --description-- - -HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. - -Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: - -```html -

                              View the html to see the hidden comments

                              - - - -

                              Some paragraph text

                              - - -``` - -# --question-- - -## --assignment-- - -To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. - -## --text-- - -How do you create HTML comments? - -## --answers-- - -`/* This is an HTML comment */` - ---- - -`` - ---- - -`<-- This is an HTML comment --!>` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md deleted file mode 100644 index 5b3f6a44858..00000000000 --- a/curriculum/challenges/arabic/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5900f36e1000cf542c50fe80 -title: 'Problem 1: Multiples of 3 and 5' -challengeType: 1 -forumTopicId: 301722 -dashedName: problem-1-multiples-of-3-and-5 ---- - -# --description-- - -If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. - -Find the sum of all the multiples of 3 or 5 below the provided parameter value `number`. - -# --hints-- - -`multiplesOf3and5(10)` should return a number. - -```js -assert(typeof multiplesOf3and5(10) === 'number'); -``` - -`multiplesOf3and5(49)` should return 543. - -```js -assert.strictEqual(multiplesOf3and5(49), 543); -``` - -`multiplesOf3and5(1000)` should return 233168. - -```js -assert.strictEqual(multiplesOf3and5(1000), 233168); -``` - -`multiplesOf3and5(8456)` should return 16687353. - -```js -assert.strictEqual(multiplesOf3and5(8456), 16687353); -``` - -`multiplesOf3and5(19564)` should return 89301183. - -```js -assert.strictEqual(multiplesOf3and5(19564), 89301183); -``` - -# --seed-- - -## --seed-contents-- - -```js -function multiplesOf3and5(number) { - - return true; -} - -multiplesOf3and5(1000); -``` - -# --solutions-- - -```js -const multiplesOf3and5 = (number) => { - var total = 0; - - for(var i = 0; i < number; i++) { - if(i % 3 == 0 || i % 5 == 0) { - total += i; - } - } - return total; -}; -``` diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md deleted file mode 100644 index a8abd3ff027..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 651dd5ae6ffb500e3f2ce47c -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -```js -console.log('with code'); -``` - -*** - -Making a statement based on her assumption. - -### --feedback-- - -No, that's not correct - -*** - -Expressing a possibility. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md deleted file mode 100644 index 27f5dcb5e42..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5d86ffb500e3f2ce47d -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md deleted file mode 100644 index a79f83d6f5a..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd5f41d697d0aab7833b5 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md deleted file mode 100644 index 13028d7c28a..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 651dd3e06ffb500e3f2ce478 -title: "Dialogue: Introducing" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-introducing ---- - -# --description-- - -What the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md deleted file mode 100644 index 3d67f522c07..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543abeff5f028dba112f278 -title: "I am: I'm" -challengeType: 19 -dashedName: i-am-im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, the verb `to be` is used to talk about identities, characteristics, and more. The contraction `I'm` is a combination of `I` and `am`. Here, Tom uses it to introduce himself. - -# --question-- - -## --text-- - -Which operation correctly expands the contraction `I'm`? - -## --answers-- - -`I is` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I am` - -*** - -`I was` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I have` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md deleted file mode 100644 index a2aa6a8f717..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 6543abf5f5f028dba112f279 -title: I'm -challengeType: 22 -dashedName: im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -The word `I'm` is a contraction of `I am`. Contractions are a way to shorten common combinations of words, especially with verbs. - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, that's right! _ Tom McKenzie.` - -## --blanks-- - -`I'm` diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md deleted file mode 100644 index 3b8b7cff0bd..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 6537e6ece93e5724eeb27c54 -title: Name and Job Title -challengeType: 19 -dashedName: name-and-job-title -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, we often mention our job or role in a company by saying, `I'm [Name], the [Job title].` This lets others know our position or role. - -# --question-- - -## --text-- - -What is Maria's job role at the company? - -## --answers-- - -`Graphic Designer` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Member` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Lead` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`CEO` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md deleted file mode 100644 index 2a3c405b6ad..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 651dd5386ffb500e3f2ce47a -title: Right -challengeType: 22 -dashedName: right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, to check or confirm something people sometimes use tag questions. For example, `You are a programmer, right?` Here, `right?` is used as a tag to check or confirm the previous statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, _?` - -## --blanks-- - -`are` - -### --feedback-- - -Pay attention to the verb in the sentence. - -*** - -`right` - -### --feedback-- - -Pay attention to the verb in the sentence. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md deleted file mode 100644 index 2ae09721cbf..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 6543aa3df5f028dba112f275 -title: Team Lead -challengeType: 22 -dashedName: team-lead -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -A `team lead` is a person who leads or manages a team. In the dialogue, Maria introduces herself as the team lead, meaning she has a leadership role. - -# --fillInTheBlank-- - -## --sentence-- - -`I'm Maria, the _ _.` - -## --blanks-- - -team - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -lead - -### --feedback-- - -Focus on the term Maria used to describe herself. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md deleted file mode 100644 index 3349bcfead9..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 6543aae6f5f028dba112f277 -title: "That's Right: 2" -challengeType: 22 -dashedName: thats-right-2 -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -Placeholder Description \_\_\_ \_\_ - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, _ _! I'm Tom McKenzie. It's a pleasure to meet you.` - -## --blanks-- - -`that's` - -*** - -`right` diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md deleted file mode 100644 index e85982fd561..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543aaa9f5f028dba112f276 -title: That's Right -challengeType: 19 -dashedName: thats-right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -When someone makes a correct assumption or guess about you, you can confirm it using phrases like `that's right`. It's a way of agreeing or saying yes to what is said. - -# --question-- - -## --text-- - -Which phrase does Tom use to confirm Maria's statement about him? - -## --answers-- - -`that's wrong` - -### --feedback-- - -`That's wrong` is used to disagree. - -*** - -`that's okay` - -### --feedback-- - -`that's okay` usually shows acceptance, not confirmation. - -*** - -`that's right` - -*** - -`that's left` - -### --feedback-- - -`that's left` refers to a direction, not confirmation. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md deleted file mode 100644 index dd254987129..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 651dd5296ffb500e3f2ce479 -title: You Are -challengeType: 22 -dashedName: you-are -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, when making introductions or identifying someone, you use the verb `to be`. In this case, `You are` is used to address the person Maria is talking to and affirmatively identify their occupation. - -Maria is introducing herself and confirming Tom's job role. `Are` is used in the present affirmative to make a statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, right?` - -## --blanks-- - -are - -### --feedback-- - -The verb `to be` is an irregular verb. When conjugated with the pronoun `you`, `be` becomes `are`. For example: `You are an English learner.` diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md new file mode 100644 index 00000000000..a041fbddef7 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md @@ -0,0 +1,15 @@ +--- +id: 655c0feadb1dd77f6cda623f +title: "Dialogue 1: A Job Interview" +challengeType: 21 +videoId: nLDychdBwUg +dashedName: dialogue-1-a-job-interview +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md new file mode 100644 index 00000000000..97f3f3245d8 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md @@ -0,0 +1,54 @@ +--- +id: 657b0f0be03b2137ed88b36c +title: Task 1 +challengeType: 19 +dashedName: task-1 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `interview` is a formal meeting where someone asks questions to learn about another person's experience, skills, or opinions. In job interviews, like in the dialogue, the interviewer asks about the candidate's previous job experiences. + +# --question-- + +## --text-- + +What is the purpose of Anna's meeting with the candidate? + +## --answers-- + +To discuss a new project at Acme Tech + +### --feedback-- + +The dialogue is about an interview, not a project discussion. + +--- + +To give a presentation on web development + +### --feedback-- + +The dialogue focuses on an interview, not a presentation. + +--- + +To have a casual conversation about programming + +### --feedback-- + +This is a formal interview, not a casual conversation. + +--- + +To conduct an interview about the candidate's job experience + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md new file mode 100644 index 00000000000..301a777a900 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md @@ -0,0 +1,50 @@ +--- +id: 657b106ced8c653be6b3218f +title: Task 2 +challengeType: 22 +dashedName: task-2 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Thanks for coming in for this interview. _ you _ me about your _ job experiences?` + +## --blanks-- + +`Can` + +### --feedback-- + +This word is used to ask if someone is able to do something. + +--- + +`tell` + +### --feedback-- + +This word is used when asking someone to give information. + +--- + +`previous` + +### --feedback-- + +This word is used to describe something that happened before now. + + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md new file mode 100644 index 00000000000..ad5202d23d2 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md @@ -0,0 +1,58 @@ +--- +id: 657b108cf870283d22b21e8e +title: Task 3 +challengeType: 19 +dashedName: task-3 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the simple present tense is used to describe habitual or usual actions. However, when you are talking about past roles or experiences, like in an interview, you should use the simple past tense. + +The simple past tense often involves changing verbs. For example, `is` becomes `was` for singular subjects and `are` becomes `were` for plural subjects. + +For example, `I am a teacher` in the present becomes `I was a teacher` for past experiences. Similarly, `They are engineers` changes to `They were engineers` when speaking about the past. + +# --question-- + +## --text-- + +What was the candidate's position at Acme Tech? + +## --answers-- + +`A project manager` + +### --feedback-- + +The candidate stated they were a programmer, not a project manager. + +--- + +`A database analyst` + +### --feedback-- + +The candidate mentioned being a programmer, which is different from a database analyst. + +--- + +`A programmer` + +--- + +`A software tester` + +### --feedback-- + +The candidate specifically mentioned their role as a programmer, not a software tester. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md new file mode 100644 index 00000000000..f757d7077f1 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md @@ -0,0 +1,38 @@ +--- +id: 657b110ad8afcc3f8e586362 +title: Task 4 +challengeType: 22 +dashedName: task-4 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that have been completed in the past. It involves changing verbs to show that the action happened before now. In this challenge, you'll practice using the simple past form of verb `to be`. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ there for three years. I _ responsible for developing web applications and maintaining the company's database.` + +## --blanks-- + +`was` + +### --feedback-- + +The first `was` indicates the completion of the time period the candidate spent at their previous job. + +--- + +`was` + +### --feedback-- + +The second `was` is used to describe past responsibility, indicating what the candidate used to do in their previous job. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md new file mode 100644 index 00000000000..a2258172744 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md @@ -0,0 +1,49 @@ +--- +id: 657b115008a62d41c0d7482f +title: Task 5 +challengeType: 19 +dashedName: task-5 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the context of programming and technology, the term `web applications` refers to software programs that run on a web server and are accessed through a web browser. They are an essential part of modern technology, allowing users to perform functions or access services over the internet. + +# --question-- + +## --text-- + +What does `web applications` refer to in the context of programming? + +## --answers-- + +Mobile apps that are downloaded from app stores + +### --feedback-- + +While mobile apps are a type of application, `web applications` specifically refer to those accessed through a web browser. + +--- + +Programs that run on a web server and are accessed via a web browser + +--- + +Physical hardware used in networking + +### --feedback-- + +Web applications are software, not physical hardware. + +--- + +Websites that only provide information without user interaction + +### --feedback-- + +Web applications are interactive and functional, not just informational. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md new file mode 100644 index 00000000000..6c2c5ba78bf --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md @@ -0,0 +1,49 @@ +--- +id: 657b119f0ce64343420bb850 +title: Task 6 +challengeType: 19 +dashedName: task-6 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `database` is a structured collection of data, typically stored electronically in a computer system. It is used to organize, store, and retrieve large amounts of information efficiently. In programming, `database` is essential for managing data that applications need to function. + +# --question-- + +## --text-- + +What is a `database` in the context of programming? + +## --answers-- + +A structured collection of data stored electronically + +--- + +A tool for designing websites + +### --feedback-- + +While important in web development, a database is not a tool for designing websites, but for storing data. + +--- + +A programming language used to create applications + +### --feedback-- + +A database is not a programming language; it's a system for storing and managing data. + +--- + +A type of computer virus + +### --feedback-- + +A database is a safe and structured way to store data, not a computer virus. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md new file mode 100644 index 00000000000..03e329649a9 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md @@ -0,0 +1,40 @@ +--- +id: 657b11e082e48a44eb4bfc09 +title: Task 7 +challengeType: 22 +dashedName: task-7 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's response and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ also part of the _ update team.` + +## --blanks-- + +`was` + +### --feedback-- + +This word is a past tense verb. You use it to talk about something that happened in the past. + +--- + +`software` + +### --feedback-- + +This word refers to computer programs. It's an important term in technology and programming. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md new file mode 100644 index 00000000000..67343b31705 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -0,0 +1,57 @@ +--- +id: 657b11f87368cf463ea4fe46 +title: Task 8 +challengeType: 19 +dashedName: task-8 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. For example: + + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. + `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + +# --question-- + +## --text-- + +How does Anna ask about specific projects in the past tense? + +## --answers-- + +`Where there any specific projects you'd like to mention?` + +### --feedback-- + +`Where` is used for locations. The correct form for asking about past events is `Were`. + +--- + +`Were there any specific projects you'd like to mention?` + +--- + +`Was there any specific projects you'd like to mention?` + +### --feedback-- + +`Was` is used with singular nouns. Since `projects` is plural, `Were` is the correct choice. + +--- + +`Are there any specific projects you'd like to mention?` + +### --feedback-- + +`Are` is present tense. The question is about past projects, so `Were` is needed. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md new file mode 100644 index 00000000000..e6bc643d065 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md @@ -0,0 +1,55 @@ +--- +id: 657b1240ef768447b80817ad +title: Task 9 +challengeType: 19 +dashedName: task-9 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense, as reviewed earlier, is used for actions completed in the past. In this context, `we were involved in` combines the simple past tense (`were`) with the expression `involved in`, which means being a part of something, especially in an active or important role. For example, `They were involved in organizing the event` means they played an important role in organizing it. + +# --question-- + +## --text-- + +How does the candidate describe their role in the project? + +## --answers-- + +`We had involvement in the development of the e-commerce platform.` + +### --feedback-- + +Although this phrase communicates involvement, the more common expression in English is `were involved in`. + +--- + +`We were engaged in the development of the e-commerce platform.` + +### --feedback-- + +`engaged in` is similar but not the exact phrase used by the candidate. `Involved in` specifically indicates an active participation. + +--- + +`We were involved in the development of the e-commerce platform.` + +--- + +`We participated in the development of the e-commerce platform.` + +### --feedback-- + +While `participated in` suggests involvement, the specific phrase used here is `involved in`. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md new file mode 100644 index 00000000000..f51e04c012a --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md @@ -0,0 +1,49 @@ +--- +id: 657b12ae08dd7049b300c901 +title: Task 10 +challengeType: 19 +dashedName: task-10 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +An `e-commerce platform` refers to a software application that allows businesses to manage their online sales operations. It typically includes features for displaying products, processing orders, and handling customer transactions. This term is essential in the world of online business, as it enables companies to sell goods and services over the internet. + +# --question-- + +## --text-- + +What is an `e-commerce platform` in the context of online business? + +## --answers-- + +A platform for social media marketing + +### --feedback-- + +While e-commerce platforms may use social media for marketing, they are primarily used for online sales operations. + +--- + +A software application for managing online sales + +--- + +A tool for website design and development + +### --feedback-- + +An e-commerce platform is specifically for managing online sales, not just website design. + +--- + +A system for email communication with customers + +### --feedback-- + +Though communication might be a feature, an e-commerce platform's main function is to manage online sales. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md new file mode 100644 index 00000000000..092c2b7ff32 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md @@ -0,0 +1,41 @@ +--- +id: 657b12e7c306334b7c320221 +title: Task 11 +challengeType: 22 +dashedName: task-11 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's statement and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for the checkout process, and it _ a successful implementation.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense of `are` used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense of `is` used for singular subjects or situations. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md new file mode 100644 index 00000000000..5a555480e1c --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md @@ -0,0 +1,49 @@ +--- +id: 657b13088693ef4ce21ce0e4 +title: Task 12 +challengeType: 19 +dashedName: task-12 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `checkout process` refers to the steps involved in completing a purchase, whether in a physical store or online. In a physical store, this usually involves taking items to a cashier, paying, and receiving a receipt. In online shopping, it includes adding items to a cart, entering shipping and payment details, and finalizing the order. + +# --question-- + +## --text-- + +What does the `checkout process` typically involve? + +## --answers-- + +Signing up for a store's loyalty program + +### --feedback-- + +While loyalty programs are part of customer engagement, the checkout process is specifically about completing a transaction. + +--- + +Arranging items on shelves in a store + +### --feedback-- + +Arranging items is a part of store management, not related to the checkout process of completing a purchase. + +--- + +Conducting market research + +### --feedback-- + +Market research is important for business strategy, but it's separate from the checkout process, which is directly involved in sales transactions. + +--- + +Completing a purchase through payment and receipt of goods + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md new file mode 100644 index 00000000000..db7a9bbed14 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md @@ -0,0 +1,49 @@ +--- +id: 657b133afcef714e542b557a +title: Task 13 +challengeType: 19 +dashedName: task-13 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Implementation` in a technical or business context refers to the process of putting a plan or design into effect. In software development, for instance, implementation involves the actual coding and setup of a software application based on designed specifications. It is a critical phase where ideas or plans are turned into a functioning reality. + +# --question-- + +## --text-- + +What does `implementation` mean in a project context? + +## --answers-- + +The planning stage of a project + +### --feedback-- + +Planning is the phase where strategies are formed, not the actual execution or implementation of those plans. + +--- + +The analysis of project results + +### --feedback-- + +Analysis is about evaluating outcomes, whereas implementation is about executing or carrying out the project plans. + +--- + +The process of team formation + +### --feedback-- + +Team formation is part of project setup, but implementation specifically refers to executing the planned tasks of the project. + +--- + +The execution of a plan or design + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md new file mode 100644 index 00000000000..1fa977ff3c0 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md @@ -0,0 +1,49 @@ +--- +id: 657b135e9029fb4f8141e40c +title: Task 14 +challengeType: 22 +dashedName: task-14 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. This is a great way to practice and remember these words. + +# --fillInTheBlank-- + +## --sentence-- + +`Anna: That's excellent. _ there any specific projects you'd like to mention?` + +`Candidate: Yes, in one of my team's projects, we were _ in the development of an e-commerce platform. We were responsible for the _ process, and it was a successful implementation.` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past tense form of `are`. The first letter should be capitalized. + +--- + +`involved` + +### --feedback-- + +This word means participating actively in something. + +--- + +`checkout` + +### --feedback-- + +This term refers to the process of completing a purchase. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md new file mode 100644 index 00000000000..94904516eba --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md @@ -0,0 +1,54 @@ +--- +id: 657b138d33db9e50f116b5f0 +title: Task 15 +challengeType: 19 +dashedName: task-15 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and answer the question. + +# --question-- + +## --text-- + +How does Anna ask about the candidate's educational background in computer science? + +## --answers-- + +`Are you educated in computer science?` + +### --feedback-- + +`Are you` is present tense, but Anna's question is about the candidate's past education. + +--- + +`Do you study computer science?` + +### --feedback-- + +`Do you study` is present tense. The question is about past education. + +--- + +`Were you educated in computer science?` + +--- + +`Have you studied computer science?` + +### --feedback-- + +`Have you studied` is a different form, asking if they have ever studied it at any time. `Were you educated` specifically asks about formal education in the past. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md new file mode 100644 index 00000000000..6044644f850 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md @@ -0,0 +1,49 @@ +--- +id: 657b1431076b365555784189 +title: Task 16 +challengeType: 19 +dashedName: task-16 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `bachelor's degree` is an undergraduate academic degree awarded by colleges and universities upon completion of a course of study. In the term `bachelor's degree`, the use of the noun (`bachelor`) followed by the `'s` indicates possession or association. This form is commonly used to show that something belongs to or is related to the noun, as in `today's news` or `teacher's guide`. + +# --question-- + +## --text-- + +What does `bachelor's degree` refer to? + +## --answers-- + +An undergraduate academic degree + +--- + +A type of professional certification + +### --feedback-- + +A bachelor's degree is an academic qualification, not a professional certification. + +--- + +A high school diploma + +### --feedback-- + +A bachelor's degree is a higher education qualification, more advanced than a high school diploma. + +--- + +A master's program entry requirement + +### --feedback-- + +While a bachelor's degree may be required for a master's program, it itself refers to an undergraduate degree. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md new file mode 100644 index 00000000000..299109790e0 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md @@ -0,0 +1,56 @@ +--- +id: 657b145976723b56a97b8dda +title: Task 17 +challengeType: 19 +dashedName: task-17 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `I was introduced to` uses the simple past tense form `was` of the verb `be`, combined with the past participle `introduced`. This structure, `be` followed by a verb suffixed with `-ed`, is often used to describe actions that happened to the subject in the past. For example: + +`At college, I was introduced to many programing languages` + +# --question-- + +## --text-- + +What does the candidate mean by saying `I was introduced to various programming languages and software development principles`? + +## --answers-- + +I taught myself various programming languages and principles + +### --feedback-- + +`I was introduced to` implies being formally taught or shown by someone else, not self-teaching. + +--- + +I learned about various programming languages and principles in my studies + +--- + +I have extensive experience with various programming languages and principles + +### --feedback-- + +The phrase indicates initial exposure to these topics, not necessarily extensive experience. + +--- + +I developed various programming languages and principles + +### --feedback-- + +Being introduced to something means learning about it for the first time, not creating or developing it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md new file mode 100644 index 00000000000..2e11e13fa69 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md @@ -0,0 +1,49 @@ +--- +id: 657b149630b3ea5873269a38 +title: Task 18 +challengeType: 19 +dashedName: task-18 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `various` is an adjective used to describe a number of different types or kinds of something, emphasizing diversity or variety. It is often used to indicate that there are several distinct items or examples being referred to. For example, saying `various books` means books of different kinds or genres. + +# --question-- + +## --text-- + +What does `various` imply when talking about programming languages and software development principles? + +## --answers-- + +Different types or kinds + +--- + +A specific type or kind + +### --feedback-- + +The term `various` implies diversity, not specificity. + +--- + +Only one type + +### --feedback-- + +`Various` indicates a number of different types, not just one. + +--- + +Irrelevant or unrelated types + +### --feedback-- + +`Various` does mean different types, but these are usually relevant and related to the context. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md new file mode 100644 index 00000000000..b217384d87c --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md @@ -0,0 +1,38 @@ +--- +id: 657b14d8353d665a187fe771 +title: Task 19 +challengeType: 22 +dashedName: task-19 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this challenge, you'll practice filling in key terms from the dialogue. These terms are commonly used in job interviews and are essential for understanding the context of the discussion. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Sure, I was a programmer at Acme Tech. I was there for three years. I was responsible for developing web _ and maintaining the company's _. I was also part of the software update team.` + +## --blanks-- + +`applications` + +### --feedback-- + +These are programs designed to perform specific tasks or functions. + +--- + +`database` + +### --feedback-- + +This is a collection of information organized for easy access, management, and updating. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md new file mode 100644 index 00000000000..5d81b22a9e7 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md @@ -0,0 +1,62 @@ +--- +id: 657b153ac677705c7059530d +title: Task 20 +challengeType: 19 +dashedName: task-20 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `could you tell me` is a polite way to ask someone for information. It's commonly used in formal or professional situations, like job interviews or meetings. +In English, some verbs have irregular past forms, meaning they do not follow the regular pattern of adding `-ed` to make the past tense. `Can` is one such verb, and its irregular simple past form is `could`. + +The existence of irregular forms, like `could`, often comes from the way language has evolved over time. These forms do not follow the regular patterns and need to be memorized. + +For example: + +- Present: `I can speak English.` +- Past: `I could speak English when I was six.` + +# --question-- + +## --text-- + +What does the phrase `could you tell me` in Anna's sentence express? + +## --answers-- + +A polite request for information + +--- + +A command to do something immediately + +### --feedback-- + +The phrase `could you tell me` is used for polite requests, not direct commands. + +--- + +A suggestion for future action + +### --feedback-- + +This phrase is asking for information now, not suggesting something for the future. + +--- + +An offer to help someone + +### --feedback-- + +This phrase is more about asking for information than offering help. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md new file mode 100644 index 00000000000..ecf0d666af0 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md @@ -0,0 +1,54 @@ +--- +id: 657b15dbcafe4d5f39a5de82 +title: Task 21 +challengeType: 19 +dashedName: task-21 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `previous` is used to describe something that happened before the current time or situation. It's often used to refer to past experiences, jobs, or events. + +# --question-- + +## --text-- + +In the context of Anna's question, what does `previous` refer to? + +## --answers-- + +Past roles and responsibilities + +--- + +Future roles and responsibilities + +### --feedback-- + +`Previous` refers to something that has already happened, not something in the future. + +--- + +Current roles and responsibilities + +### --feedback-- + +`Previous` means something that happened before now, not what is happening currently. + +--- + +Unrelated roles and responsibilities + +### --feedback-- + +`Previous` specifically relates to roles and responsibilities that were held before, not those unrelated. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md new file mode 100644 index 00000000000..8497f67b9bb --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md @@ -0,0 +1,53 @@ +--- +id: 657b160d6a8662610fe6a523 +title: Task 22 +challengeType: 22 +dashedName: task-22 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that were completed in the past. Regular verbs in the past tense usually end with `-ed`, while irregular verbs have unique past forms. For example, as you learned in previous tasks, `was` and `were` are the past forms of `is` and `are`. + +Examples of simple past tense: + +- `I worked at a company.` (`work` becomes `worked`) +- `I was happy.` (`is` becomes `was`) +- `We were busy.` (`are` becomes `were`) + +# --fillInTheBlank-- + +## --sentence-- + +`Hello! Certainly. I _ at Mock Corporation for five years. I _ part of a team of software engineers, and we _ responsible for developing and maintaining various applications.` + +## --blanks-- + +`worked` + +### --feedback-- + +Think of the past tense of `work`, a regular verb that follows the usual `-ed` ending pattern. + +--- + +`was` + +### --feedback-- + +Recall the past tense form of `is`, which changes to a completely different word in its irregular past form. + +--- + +`were` + +### --feedback-- + +Consider the past tense of `are`, an irregular verb that also changes to a different word in the past. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md new file mode 100644 index 00000000000..8e1b26a3bce --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md @@ -0,0 +1,46 @@ +--- +id: 657b163c9da40e62b904be1f +title: Task 23 +challengeType: 22 +dashedName: task-23 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the past simple interrogative. In questions, the simple past tense often begins with a past tense verb, followed by the subject and the rest of the sentence. This structure is used to ask about past events or states. + +# --fillInTheBlank-- + +## --sentence-- + +`That's great to hear. _ the members of the team _ _ any specific achievements or projects?` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past form of `are` used to ask about a past state or condition. + +--- + +`involved` + +### --feedback-- + +Think of a word that means `participated in` or `engaged with`. + +--- + +`in` + +### --feedback-- + +A preposition that often follows `involved` to indicate participation or inclusion. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md new file mode 100644 index 00000000000..bc7924edcf6 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md @@ -0,0 +1,54 @@ +--- +id: 657b18e71067d6680b9ac5d3 +title: Task 24 +challengeType: 19 +dashedName: task-24 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `redesign` means to design something again or differently. It's often used in the context of improving or updating the design of an existing product, service, or structure. In software and web development, redesigning is a common practice to enhance functionality, user experience, or aesthetics. + +# --question-- + +## --text-- + +What does `redesign` imply in Candidate2's statement about the website project? + +## --answers-- + +To design for the first time + +### --feedback-- + +`Redesign` implies working on something that already exists, not creating it for the first time. + +--- + +To remove the design + +### --feedback-- + +`Redesign` means to change or improve the existing design, not to remove it. + +--- + +To change or improve an existing design + +--- + +To copy a design + +### --feedback-- + +`Redesign` involves making changes or improvements, not copying a design as it is. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md new file mode 100644 index 00000000000..ed588a90563 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md @@ -0,0 +1,54 @@ +--- +id: 657b1985ae17886b05b382b1 +title: Task 25 +challengeType: 19 +dashedName: task-25 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `performance` in a technical context often refers to how well a system or component operates, especially in terms of speed, efficiency, and reliability. For websites and software, performance can relate to how quickly pages load, the responsiveness of the application, or the stability of the system under various conditions. + +# --question-- + +## --text-- + +What does `performance` refer to in Candidate2's statement about the website? + +## --answers-- + +A live presentation + +### --feedback-- + +While `performance` can mean a presentation, in this context, it relates to the functioning of the website. + +--- + +Artistic display + +### --feedback-- + +In a technical context, `performance` refers to operational effectiveness, not an artistic aspect. + +--- + +Financial success + +### --feedback-- + +`Performance` in this context is about the website's operational aspects, not its financial success. + +--- + +How well the website operates + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md new file mode 100644 index 00000000000..98e6bda774a --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md @@ -0,0 +1,54 @@ +--- +id: 657b19bf7b32af6caf763ef7 +title: Task 26 +challengeType: 19 +dashedName: task-26 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `collaborative effort` refers to a situation where people work together as a team to achieve a common goal. This kind of teamwork is essential in many work environments, especially on projects where different skills and perspectives are needed. + +# --question-- + +## --text-- + +What does `collaborative effort` imply in the context of Candidate2's statement? + +## --answers-- + +Working independently + +### --feedback-- + +`Collaborative effort` means working together as a team, not independently. + +--- + +Teamwork to achieve a goal + +--- + +Avoiding responsibility + +### --feedback-- + +`Collaborative effort` involves taking shared responsibility, not avoiding it. + +--- + +Focusing on individual skills + +### --feedback-- + +`Collaborative effort` emphasizes teamwork over individual skills. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md new file mode 100644 index 00000000000..56a621b07c6 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md @@ -0,0 +1,38 @@ +--- +id: 657b1a03df3ec46eca276046 +title: Task 27 +challengeType: 22 +dashedName: task-27 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. + +# --fillInTheBlank-- + +## --sentence-- + +`Yes, our team _ involved in a project to _ the company's website.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`redesign` + +### --feedback-- + +This word means to design something again in a different way. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md new file mode 100644 index 00000000000..66d49e9e89f --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md @@ -0,0 +1,55 @@ +--- +id: 657b1a27dc6daf6ffd52ff1f +title: Task 28 +challengeType: 19 +dashedName: task-28 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the noun suffixed with `'s` followed by a second noun structure is used to show possession or belonging. If the first noun is singular, as in `Sarah's laptop`, it indicates that the laptop belongs to Sarah. However, if the first noun is plural, the structure changes to noun suffixed with `'`, as in `teachers' office`, indicating an office for teachers. + +# --question-- + +## --text-- + +What does `master's degree` in the context of the dialogue refer to? + +## --answers-- + +A degree for school teachers + +### --feedback-- + +`Master's degree` refers to an advanced academic degree, not specifically for teachers. + +--- + +A primary level educational degree + +### --feedback-- + +`Master's degree` is a higher education qualification, beyond the primary level. + +--- + +A degree in mastering skills + +### --feedback-- + +While it implies expertise, `master's degree` specifically refers to an academic qualification. + +--- + +An advanced academic degree + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md new file mode 100644 index 00000000000..bf63c3e8d24 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md @@ -0,0 +1,49 @@ +--- +id: 657b1a637e4dc571f8f4d3d7 +title: Task 29 +challengeType: 19 +dashedName: task-29 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `appreciate` is often used to express gratitude or to acknowledge the value or importance of something or someone's actions. It's a way of showing that you recognize and are thankful for someone's help, effort, or achievement. + +# --question-- + +## --text-- + +In a work meeting, your colleague says, `I really appreciate your help on this project.` What is your colleague expressing? + +## --answers-- + +Dissatisfaction with your work + +### --feedback-- + +`Appreciate` means to be grateful or thankful, not to show dissatisfaction. + +--- + +Indifference to your contribution + +### --feedback-- + +`Appreciate` is used to express positive recognition, not indifference. + +--- + +Gratitude for your contribution + +--- + +A need for more assistance + +### --feedback-- + +`Appreciate` here indicates satisfaction with the help received, not a request for more assistance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md new file mode 100644 index 00000000000..4fa33c1c2d0 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md @@ -0,0 +1,47 @@ +--- +id: 657b1a9581015573806e1e20 +title: Task 30 +challengeType: 22 +dashedName: task-30 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words you learned. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for implementing new features and ensuring the website's performance. It _ a _ effort, and we were able to deliver the project on time.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense form of `are`, used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`collaborative` + +### --feedback-- + +This word means working together as a team. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md new file mode 100644 index 00000000000..6013cb50f86 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md @@ -0,0 +1,39 @@ +--- +id: 657b1cc072206e7ac3db88b8 +title: Task 31 +challengeType: 22 +dashedName: task-31 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the missing words correctly. This is a great way to practice what you've learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I have a _ degree in computer science. My studies _ quite intensive, and I was introduced to many different methodologies.` + +## --blanks-- + +`master's` + +### --feedback-- + +This term, using the `noun's noun` structure, refers to an advanced academic degree. + +--- + +`were` + +### --feedback-- + +This is the past tense form of `are` used for plural subjects or things. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md new file mode 100644 index 00000000000..1c7c7b4603c --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md @@ -0,0 +1,30 @@ +--- +id: 657b1d080265ba7c4f96bf79 +title: Task 32 +challengeType: 22 +dashedName: task-32 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task helps you review the word you learned. Listen to the dialogue and complete the sentence correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`Impressive! We _ candidates with strong educational backgrounds and practical experience.` + +## --blanks-- + +`appreciate` + +### --feedback-- + +This word means to recognize the value or importance of something or someone's actions. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md new file mode 100644 index 00000000000..28e4211c290 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md @@ -0,0 +1,15 @@ +--- +id: 657b1d4ec0e2587e8bcc95f7 +title: "Dialogue 3: Two Workmates Talk About Their Backgrounds" +challengeType: 21 +dashedName: dialogue-3-two-workmates-talk-about-their-backgrounds +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md new file mode 100644 index 00000000000..df8ebc66d25 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md @@ -0,0 +1,54 @@ +--- +id: 657b1da0b27fef8117827ce5 +title: Task 33 +challengeType: 19 +dashedName: task-33 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned about the simple past tense. Now, you can explore it further. The simple past tense is often formed by adding `-ed` to a verb. But, when a verb ends with an `e`, you just add a `d`. For example, `notice` becomes `noticed`. + +# --question-- + +## --text-- + +What does `noticed` in Sarah's sentence indicate? + +## --answers-- + +Sarah observed something in the past + +--- + +Sarah is planning to observe something + +### --feedback-- + +The simple past tense `noticed` indicates a completed action in the past, not a future plan. + +--- + +Sarah continuously observes something + +### --feedback-- + +The simple past tense `noticed` is used for actions that were completed, not ongoing actions. + +--- + +Sarah never observes anything + +### --feedback-- + +`Noticed` implies that Sarah did observe something, not never observing. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md new file mode 100644 index 00000000000..5a1ba6afbfc --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md @@ -0,0 +1,30 @@ +--- +id: 657b1dfec76149836ea5c7d0 +title: Task 34 +challengeType: 22 +dashedName: task-34 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you will focus on the past simple negative. It's created by adding `not` after the auxiliary verb `was` or `were`. For example, `was` becomes `wasn't` (`was not`) and `were` becomes `weren't` (`were not`). This form is used to describe something that did not happen in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`It _ exactly tech-related, but I learned a lot about problem-solving and critical thinking.` + +## --blanks-- + +`wasn't` + +### --feedback-- + +This word is used to make a negative statement in the past tense. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md new file mode 100644 index 00000000000..da30e71e20a --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md @@ -0,0 +1,49 @@ +--- +id: 657b1e2fad2ffe84ab420a56 +title: Task 35 +challengeType: 19 +dashedName: task-35 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You're already familiar with `wasn't` and `weren't` for past simple negative. Now, let's explore `didn't`, a contraction of `did not`. It's used with the base form of verbs (the infinitive without `to`) to express that an action did not happen in the past. For example, `didn't go` means the action of going did not occur. + +# --question-- + +## --text-- + +Imagine you are reading a story about a character who planned to attend a concert but couldn't. How would you describe this situation? + +## --answers-- + +The character enjoyed the concert + +### --feedback-- + +Using `didn't` suggests the character did not go to the concert, contradicting the idea of enjoying it. + +--- + +The character didn't attend the concert + +--- + +The character always goes to concerts + +### --feedback-- + +This expression refers to a regular habit, not a specific event in the past. + +--- + +The character is looking forward to the next concert + +### --feedback-- + +This option is about future anticipation. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md new file mode 100644 index 00000000000..938a8118ce2 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md @@ -0,0 +1,54 @@ +--- +id: 657b1e66159fec86336a737b +title: Task 36 +challengeType: 19 +dashedName: task-36 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned the basics of the simple past tense. Now you can dive deeper into it. Typically, the simple past tense is formed by adding `-ed` to regular verbs. For instance, the verb `play` becomes `played` in the simple past. This tense is used to describe actions that were completed at a specific time in the past. + +# --question-- + +## --text-- + +What does `I played` in Sophie's sentence suggest about her experience with coding? + +## --answers-- + +She casually experimented with coding in the past + +--- + +She is currently playing a coding game + +### --feedback-- + +`Played` is in the past tense, indicating a past action, not something happening currently. + +--- + +She plans to start coding soon + +### --feedback-- + +`Played` implies she already has some experience with coding, not that she is planning to start. + +--- + +She never tried coding + +### --feedback-- + +Using `played` confirms she did engage in coding, contradicting the idea of never trying it. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md new file mode 100644 index 00000000000..2bd70b3d732 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md @@ -0,0 +1,49 @@ +--- +id: 657b1e9a62603587747f7f45 +title: Task 37 +challengeType: 19 +dashedName: task-37 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In English, when forming questions in the simple past tense, you often use `did`. This is followed by the subject and the base form of the verb (without `ed`). For example, `Did you enjoy` is a past simple interrogative phrase where `did` is the auxiliary verb, `you` is the subject, and `enjoy` is the base form of the verb. + +# --question-- + +## --text-- + +What does a question like `Did you enjoy the concert last night?` ask about? + +## --answers-- + +Are you going to enjoy the concert? + +### --feedback-- + +This implies a future event. The question with `did` is asking about a past experience. + +--- + +Do you enjoy concerts in general? + +### --feedback-- + +This is asking about general preferences, not a specific past event. + +--- + +Did you have a good experience at the concert last night? + +--- + +Will you enjoy future concerts? + +### --feedback-- + +The question is about a past event, not future experiences. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md new file mode 100644 index 00000000000..430fa995037 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md @@ -0,0 +1,42 @@ +--- +id: 657b1ee1de7216896b5b4361 +title: Task 38 +challengeType: 22 +dashedName: task-38 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blank correctly. This task is a review. Remember, the simple past tense is used to talk about actions or situations in the past, and the negative form is used to describe things that did not happen. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: That's interesting! So, you _ work on many programming projects during your studies?` + +`Sophie: No, not really. I _ around with coding, but most of my projects involved circuit designs and electrical systems. It was a bit different.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used here to talk about something that was not done in the past. + +--- + +`played` + +### --feedback-- + +This word suggests that Sophie casually engaged in coding for pleasure or interest. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md new file mode 100644 index 00000000000..dfcc68a881a --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md @@ -0,0 +1,40 @@ +--- +id: 657b1f0585d48f8ac0b19654 +title: Task 39 +challengeType: 22 +dashedName: task-39 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you'll focus on answering questions in the simple past tense. When responding to a past simple interrogative (a question), you can answer affirmatively with `did` or negatively with `didn't`. For example, `Did you go to the party?` can be answered with `I did` (affirmative) or `I didn't` (negative). Listen to the dialogue and fill in the blanks correctly to practice this structure. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: I see. _ you enjoy your time there, even if it wasn't entirely tech-focused? Sophie: I _.` + +## --blanks-- + +`Did` + +### --feedback-- + +This word is used to form a past simple interrogative question. The first letter should be capitalized. + +--- + +`did` + +### --feedback-- + +This response is an affirmative answer to the past simple interrogative question. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md new file mode 100644 index 00000000000..92e4b28c489 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md @@ -0,0 +1,49 @@ +--- +id: 657b1f598f63008c8bdb20b8 +title: Task 40 +challengeType: 19 +dashedName: task-40 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the simple past tense, some verbs are irregular and don't follow the regular `-ed` ending pattern. One example of this is the verb `meet`, which becomes `met` in the past tense. This is important to remember when talking about past events. + +# --question-- + +## --text-- + +During a class reunion, an old friend tells you, `We met for the first time in art class.` What is your friend referring to with `met`? + +## --answers-- + +We are meeting right now in art class + +### --feedback-- + +The use of `met` indicates a past event, not something happening currently. + +--- + +Our first encounter was in the past, specifically in art class + +--- + +We will meet for the first time soon + +### --feedback-- + +`Met` indicates a past action, not a future arrangement. + +--- + +We have never been in art class together + +### --feedback-- + +`Met` suggests a past meeting. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md new file mode 100644 index 00000000000..e3cdc339c1f --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md @@ -0,0 +1,49 @@ +--- +id: 657b1f981cd42e8dc3b282d9 +title: Task 41 +challengeType: 19 +dashedName: task-41 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn another special case in this task. It's the past tense form of `have`. Unlike regular verbs that add `-ed` for the past tense, `have` becomes `had`. This irregular form is used for both singular and plural subjects in the past tense, making it a unique and important verb to remember. + +# --question-- + +## --text-- + +What does `had` imply in a sentence like `They had a meeting yesterday?` + +## --answers-- + +They possessed or experienced something in the past + +--- + +They are having a meeting right now + +### --feedback-- + +`Had` is used for past actions, indicating the meeting occurred in the past, not at the present moment. + +--- + +They will have a meeting tomorrow + +### --feedback-- + +`Had` indicates a past action, not a future plan. + +--- + +They never have meetings + +### --feedback-- + +Using `had` confirms that the meeting took place in the past. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md new file mode 100644 index 00000000000..9f86ab82bcb --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md @@ -0,0 +1,47 @@ +--- +id: 657b1fe950c0df90346e5d12 +title: Task 42 +challengeType: 22 +dashedName: task-42 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the words `met`, `had`, and `wasn't`. You have already learned these words. Listen to the dialogue and fill in the blanks with the correct words. This exercise is a good way to practice and reinforce your understanding of these words in context. + +# --fillInTheBlank-- + +## --sentence-- + +`I did. It was challenging, but I _ some fantastic people. We _ a bunch of fun coding marathons, although I _ always a very strong programmer.` + +## --blanks-- + +`met` + +### --feedback-- + +This word is used here to describe encountering people in the past. + +--- + +`had` + +### --feedback-- + +This word is used to express possession or experiences in the past. + +--- + +`wasn't` + +### --feedback-- + +This word is the negative form in the past tense, indicating something that was not the case. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md new file mode 100644 index 00000000000..2ee4e256d2a --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md @@ -0,0 +1,39 @@ +--- +id: 657b201372864e91d4f5bb53 +title: Task 43 +challengeType: 22 +dashedName: task-43 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +When a verb ends in a consonant followed by `y`, you should change the `y` to `i` and add `ed` for the past tense. For example, `carry` becomes `carried`. Note that this rule applies when the `y` follows a consonant, not a vowel, so the simple past form of `convey` is `conveyed`. For regular verbs, you simply add `ed` to form the past tense. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ at a small college as well and _ in information technology.` + +## --blanks-- + +`studied` + +### --feedback-- + +The past simple tense of `study` is formed by changing `y` to `i` and adding `ed`. + +--- + +`majored` + +### --feedback-- + +This word follows the regular past simple tense formation by just adding `ed`. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md new file mode 100644 index 00000000000..67255d1bac6 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md @@ -0,0 +1,26 @@ +--- +id: 657b20338e0802931673c1e1 +title: Task 44 +challengeType: 22 +dashedName: task-44 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + +# --description-- + +You've learned that for verbs ending in `e`, you simply add `d` to form the simple past tense. Choose the correct form of `love` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she really _ the beach vacation.` + +## --blanks-- + +`loved` + +### --feedback-- + +To form the simple past, add `d` to the base form of the verb, `love`. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md new file mode 100644 index 00000000000..4d89a2935c0 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md @@ -0,0 +1,54 @@ +--- +id: 657b20985d315095e5c3851d +title: Task 45 +challengeType: 19 +dashedName: task-45 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this context, `got` is a special case in the simple past tense. It's the past tense of `get`. Unlike regular verbs that typically add `-ed` for the past tense, `get` changes to `got`. + +# --question-- + +## --text-- + +In the context of Sarah's statement, what does `got` imply about her experience? + +## --answers-- + +She is getting the opportunity now + +### --feedback-- + +`Got` indicates a past opportunity, not something happening currently. + +--- + +She had the opportunity in the past + +--- + +She will get the opportunity in the future + +### --feedback-- + +`Got` refers to a past experience, not a future possibility. + +--- + +She never gets such opportunities + +### --feedback-- + +`Got` in this context suggests she did have this opportunity. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md new file mode 100644 index 00000000000..ac32d364daa --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md @@ -0,0 +1,50 @@ +--- +id: 657b21e28a01039cb27b4f13 +title: Task 46 +challengeType: 19 +dashedName: task-46 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `exactly` is used to emphasize the truth or accuracy of a statement or description. It can mean `precisely` or `just`. For example, if someone says, `It's exactly what I needed`, they mean that it is precisely or perfectly what was required. `Exactly` often highlights that something is correct in every detail. + +# --question-- + +## --text-- + +What does `exactly` imply in a sentence like `This is exactly the kind of work I enjoy`? + +## --answers-- + +This is somewhat similar to the work I enjoy + +### --feedback-- + +`Exactly` indicates a perfect match, not just a similarity. + +--- + +This is the opposite of the work I enjoy + +### --feedback-- + +`Exactly` implies a perfect match, not an opposite. + +--- + +I am not sure if this is the work I enjoy + +### --feedback-- + +Using `exactly` shows certainty, not uncertainty. + +--- + +This is precisely the type of work that I find enjoyable + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md new file mode 100644 index 00000000000..36c267c651b --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md @@ -0,0 +1,35 @@ +--- +id: 657b221b2ab0ac9e18a173ef +title: Task 47 +challengeType: 22 +dashedName: task-47 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Let's look at `exactly` and `exact`. You use `exactly` to show something is just right or very true. It is an adverb. For example, `You did it exactly right!`. + +`Exact` is an adjective, and it describes something very correct or precise, like in `the exact time`. + +# --fillInTheBlank-- + +## --sentence-- + +`She knew the _ time of the meeting. She arrived _ at 3 pm.` + +## --blanks-- + +`exact` + +### --feedback-- + +This word is an adjective, describing the noun `time`. + +--- + +`exactly` + +### --feedback-- + +This word is an adverb, showing that her arrival time was very precise. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md new file mode 100644 index 00000000000..82dcdea8fbb --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -0,0 +1,39 @@ +--- +id: 657b223e41ce6b9f9a01d214 +title: Task 48 +challengeType: 22 +dashedName: task-48 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You'll review the past simple negative in this task. It's formed using `was` or `were` with `not`, like `weren't` (`were not`) or `wasn't` (`was not`). It's used to talk about things that did not happen or were not true in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`They _ _ big projects.` + +## --blanks-- + +`weren't` + +### --feedback-- + +It's the negative form of `were` in the past tense, used to say something was not true or did not happen. + +--- + +`exactly` + +### --feedback-- + +This word is used to emphasize the statement, suggesting the projects were not precisely big. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md new file mode 100644 index 00000000000..06ce8ba3d76 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md @@ -0,0 +1,15 @@ +--- +id: 657b227f7ad32ea17e2cdf28 +title: "Dialogue 4: A Developer with a Different Background" +challengeType: 21 +dashedName: dialogue-4-a-developer-with-a-different-background +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md new file mode 100644 index 00000000000..abee49452c1 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md @@ -0,0 +1,56 @@ +--- +id: 657b2310b8cd52a4f15c1818 +title: Task 49 +challengeType: 19 +dashedName: task-49 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `unconventional` is used to describe something that's not based on or conforming to what is generally done or believed. It often implies a method or approach that is different from the norm. + +# --question-- + +## --text-- + +What does `unconventional` imply about Alice's background in tech? + +## --answers-- + +Her background is different from the usual way people get into tech + +--- + +Her background is exactly the same as most people in tech + +### --feedback-- + +`Unconventional` means not following the usual conventions, which contradicts being the same as most people. + +--- + +She doesn't have any background in tech + +### --feedback-- + +`Unconventional` suggests a different approach, not the absence of a background. + +--- + +She followed a very traditional path into tech + +### --feedback-- + +`Unconventional` indicates a non-traditional path, not a very traditional one. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md new file mode 100644 index 00000000000..47917952aff --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md @@ -0,0 +1,39 @@ +--- +id: 657b2340be1593a6517fe77b +title: Task 50 +challengeType: 22 +dashedName: task-50 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple negative, `did not` (contracted to `didn't`) is followed by the base form of a verb. This structure is used to express that an action did not happen in the past. In this dialogue, Alice is describing her educational background related to technology. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ _ tech at a traditional university.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used in the past simple negative to indicate that an action was not done. + +--- + +`study` + +### --feedback-- + +The base form of the verb is used after the contraction in negative past simple sentences. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md new file mode 100644 index 00000000000..e19667245f9 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md @@ -0,0 +1,54 @@ +--- +id: 657b236aa1eb9fa7b209aa03 +title: Task 51 +challengeType: 19 +dashedName: task-51 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `mostly` is used to indicate that something is true to a large extent but not completely. It suggests that while other factors or methods may be involved, the primary aspect is what is mentioned. + +# --question-- + +## --text-- + +In Alice's statement, what does `mostly` suggest about her way of learning? + +## --answers-- + +She only learned through formal education + +### --feedback-- + +`Mostly` implies a greater emphasis on self-teaching rather than exclusive formal education. + +--- + +She didn't learn anything on her own + +### --feedback-- + +The use of `mostly` indicates a significant amount of self-learning, not an absence of it. + +--- + +She learned equally through self-teaching and formal courses + +### --feedback-- + +`Mostly` suggests a greater emphasis on one method over an equal balance. + +--- + +Her learning was primarily through her own efforts, with some formal courses + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md new file mode 100644 index 00000000000..10f6121949b --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md @@ -0,0 +1,36 @@ +--- +id: 657b23a413d28da927e087ca +title: Task 52 +challengeType: 22 +dashedName: task-52 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +This task reviews how an adverb is often formed by adding `-ly` to an adjective. + + +# --fillInTheBlank-- + +## --sentence-- + +`She completed _ of her work before lunch. The office is _ quiet in the mornings.` + +## --blanks-- + +`most` + +### --feedback-- + +This word is used as an adjective to describe the quantity of work completed. + +--- + +`mostly` + +### --feedback-- + +This word is used as an adverb to describe the general state of the office. + + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md new file mode 100644 index 00000000000..8f0a554d33f --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md @@ -0,0 +1,50 @@ +--- +id: 657b23bc0e32f9aa9c62eb82 +title: Task 53 +challengeType: 19 +dashedName: task-53 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `self-taught` refers to acquiring knowledge or skills without direct teaching from a traditional teacher or educational institution. It involves learning independently. The word `taught` is the past participle of `teach`. When someone is `self-taught`, it means they have taught themselves. + +# --question-- + +## --text-- + +What does `self-taught` imply when someone says, `I am self-taught in programming`? + +## --answers-- + +They were taught programming by a professional teacher + +### --feedback-- + +`Self-taught` indicates learning independently, not being taught by a professional teacher. + +--- + +They have no knowledge of programming + +### --feedback-- + +`Self-taught` means they have acquired knowledge or skills, not that they lack them. + +--- + +They learned programming on their own, without formal education + +--- + +They are planning to learn programming in the future + +### --feedback-- + +`Self-taught` refers to learning that has already taken place, not future plans. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md new file mode 100644 index 00000000000..daa0ed7fa3b --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md @@ -0,0 +1,27 @@ +--- +id: 657b23f03b449aac2c517089 +title: Task 54 +challengeType: 22 +dashedName: task-54 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `took` is a special case in the simple past tense. It's the past tense of `take`. Unlike regular verbs that follow the standard `-ed` ending for the past tense, `take` changes to `took`. This irregular form is important to know because it's commonly used to talk about actions that happened in the past. Choose the correct past tense form of `take` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she _ a photography class.` + +## --blanks-- + +`took` + +### --feedback-- + +This word is the past tense form of `take`. It's used to talk about actions that happened in the past. + + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md new file mode 100644 index 00000000000..aa093ae629c --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md @@ -0,0 +1,49 @@ +--- +id: 657b242d06512dadaea55056 +title: Task 55 +challengeType: 19 +dashedName: task-55 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The verb `attend` means to be present at an event or place. It's often used regarding schools, colleges, meetings, or events. It implies regular participation or presence at a specific place or event. + +# --question-- + +## --text-- + +If a friend tells you, `I'm going to attend the new art workshop downtown`, what are they planning to do? + +## --answers-- + +They are planning to teach at the art workshop + +### --feedback-- + +`Attend` suggests participating as a learner or member, not as a teacher. + +--- + +They might visit the workshop once + +### --feedback-- + +`Attend` implies regular or scheduled participation, not a one-time visit. + +--- + +They are not interested in art workshops + +### --feedback-- + +Saying they will `attend` indicates interest and intent to participate, not a lack of interest. + +--- + +They plan to regularly participate in the art workshop + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md new file mode 100644 index 00000000000..4dd651ea958 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md @@ -0,0 +1,39 @@ +--- +id: 657b24542024c8af092cd6c4 +title: Task 56 +challengeType: 22 +dashedName: task-56 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple, negative sentences are formed using `did not`, contracted to `didn't`, followed by the base form of the main verb. Listen to the dialogue and fill in the blanks with these words. + +# --fillInTheBlank-- + +## --sentence-- + +`So, you _ _ a regular college or anything like that?` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used to form a negative statement in the past tense. + +--- + +`attend` + +### --feedback-- + +The word means being present at an event or place. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md new file mode 100644 index 00000000000..15b9abab580 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md @@ -0,0 +1,48 @@ +--- +id: 657b24774d8cdab052ffe2a6 +title: Task 57 +challengeType: 22 +dashedName: task-57 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and fill in the blanks correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ study tech at a traditional university. I'm _, and I _ a lot of online courses.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used to form a negative statement in the past tense. + +--- + +`self-taught` + +### --feedback-- + +This word describes acquiring knowledge or skills independently. + +--- + +`took` + +### --feedback-- + +This word is the past tense form of a verb meaning to have completed an action. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md new file mode 100644 index 00000000000..b7c7a773588 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md @@ -0,0 +1,40 @@ +--- +id: 657b24a500800cb1c6945da9 +title: Task 58 +challengeType: 22 +dashedName: task-58 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`No, not at all. I _ at a different job, but I got really interested in programming and tech, so I _ learning in my free time.` + +## --blanks-- + +`was` + +### --feedback-- + +Use `to be` in the past tense. + +--- + +`started` + +### --feedback-- + +Use the verb `start`in the past tense. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md new file mode 100644 index 00000000000..14bccd55f81 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md @@ -0,0 +1,41 @@ +--- +id: 657b2be1b19500c63fc1a467 +title: Task 59 +challengeType: 22 +dashedName: task-59 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`That's impressive! _ you _ learning on your own?` + +## --blanks-- + +`Did` + +### --feedback-- + +Auxiliary verb for questions. This word should be capitalized. + +--- + +`enjoy` + +### --feedback-- + +A verb used to describe you are having fun. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md new file mode 100644 index 00000000000..f55f7908a4f --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md @@ -0,0 +1,38 @@ +--- +id: 657b2c040bb5f6c77fa5df80 +title: Task 60 +challengeType: 22 +dashedName: task-60 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You'll be filling in blanks with words you're already familiar with. + +# --fillInTheBlank-- + +## --sentence-- + +`Absolutely. It _ challenging, but I _ it.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of the verb `to be`, used for singular subjects. + +--- + +`loved` + +### --feedback-- + +This is the past tense form of a verb expressing a strong liking or enjoyment. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md new file mode 100644 index 00000000000..dc14016d020 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md @@ -0,0 +1,38 @@ +--- +id: 657b2d618b8851cc5baf9490 +title: Task 61 +challengeType: 22 +dashedName: task-61 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Listen to the audio and complete the sentence. + + +# --fillInTheBlank-- + +Fill in the blank with correct words. + + +## --sentence-- + +`Yes, I did. I built a few small web applications, just to practice. It _ a great way to apply what I _.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `to be`, used here for a singular subject. + +--- + +`learned` + +### --feedback-- + +This is the past tense form of `learn`, indicating the acquisition of knowledge or skills in the past. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md new file mode 100644 index 00000000000..b2433b84777 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md @@ -0,0 +1,54 @@ +--- +id: 657b2d9cb974dace59024964 +title: Task 62 +challengeType: 19 +dashedName: task-62 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `got` in this context is a versatile term and can have several meanings. In its simplest form, it's the past tense of `get`, which can mean to receive, arrive, become, or reach, depending on the context. In Tom's statement, `got` refers to the progress or level Alice reached through self-study. + +# --question-- + +## --text-- + +What does `got` imply in Tom's statement about Alice's progress? + +## --answers-- + +She received something while studying + +### --feedback-- + +While `got` can mean receiving, in this context it refers to the extent or level of progress. + +--- + +She achieved or reached a significant level in her studies + +--- + +She needs to get more resources for studying + +### --feedback-- + +`Got` here refers to past progress, not a current need for more resources. + +--- + +She didn't make any progress in her studies + +### --feedback-- + +`Got` in this sentence clearly indicates significant progress, not a lack of it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md new file mode 100644 index 00000000000..3ea0498bbbe --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md @@ -0,0 +1,15 @@ +--- +id: 657b2dd7745fdcd03e5160f4 +title: "Dialogue 5: Anna Talks About her Experience" +challengeType: 21 +dashedName: dialogue-5-anna-talks-about-her-experience +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md new file mode 100644 index 00000000000..8a3ff270f80 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -0,0 +1,54 @@ +--- +id: 657b2e0666d4a9d1b851f90e +title: Task 63 +challengeType: 19 +dashedName: task-63 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `tech recruiter` refers to a professional role focused on recruiting candidates for technology-related positions. This role involves understanding the tech industry, identifying qualified candidates, and matching them with suitable tech job openings. + +# --question-- + +## --text-- + +What is Tom asking about when he mentions `Tech recruiter` in his question? + +## --answers-- + +The technical skills needed to be a recruiter + +### --feedback-- + +`Tech recruiter` here refers to the job role, not the specific skills required for the job. + +--- + +The technology used by recruiters + +### --feedback-- + +While technology is involved, `Tech recruiter` refers to the profession itself, not the tools used. + +--- + +The person's career path in becoming a technology recruitment specialist + +--- + +Recruiting people to learn technology + +### --feedback-- + +`Tech recruiter` is about hiring for tech roles, not recruiting people to learn technology. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md new file mode 100644 index 00000000000..340203d5990 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md @@ -0,0 +1,49 @@ +--- +id: 657b2ec6c054efd71e503a27 +title: Task 64 +challengeType: 19 +dashedName: task-64 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `actually` is often used to express a fact or reality, sometimes contrasting with what was thought, believed, or said before. It adds emphasis to a statement to clarify a truth or correct a previous assumption or statement. + +# --question-- + +## --text-- + +What does `actually` imply in a sentence like `I actually prefer working remotely`? + +## --answers-- + +The truth is contrary to what might have been assumed or stated before + +--- + +I never work remotely + +### --feedback-- + +`Actually` in this context is used to express a real preference. + +--- + +I always work in an office setting + +### --feedback-- + +Using `actually` here is meant to reveal a preference for remote work, not office work. + +--- + +I don't have any work preferences + +### --feedback-- + +`Actually` suggests a specific preference, contradicting the idea of having none. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md new file mode 100644 index 00000000000..51c4c579915 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md @@ -0,0 +1,33 @@ +--- +id: 657b2eeb31e435d89ecce6f3 +title: Task 65 +challengeType: 22 +dashedName: task-65 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn about `actual` in this task. It's a describing word (adjective). It means what something is really like. For example, `the actual color` means the real color. You often add `-ly` to an adjective to form an adverb. This rule helps change many describing words into words that tell people how something is said or done. Here, you add `-ly` to `actual` and it's the adverb `actually`. + +# --fillInTheBlank-- + +## --sentence-- + +`The _ size of the room was quite small. She _ likes small cozy spaces.` + +## --blanks-- + +`actual` + +### --feedback-- + +This word describes the real size of the room. + +--- + +`actually` + +### --feedback-- + +This word is used to say she really likes small spaces. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md new file mode 100644 index 00000000000..101e280ee29 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md @@ -0,0 +1,54 @@ +--- +id: 657b2f0b3bcfe7d9f4151854 +title: Task 66 +challengeType: 19 +dashedName: task-66 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The terms `therapist` and `counselor` refer to professionals who provide guidance and support to people dealing with emotional, psychological, or mental health issues. Both play a vital role in helping individuals work through personal challenges. In Anna's statement, these terms describe the career paths she was considering. + +# --question-- + +## --text-- + +In Anna's statement, what does `therapist or counselor` refer to? + +## --answers-- + +Jobs in the technology industry + +### --feedback-- + +`Therapist or counselor` refers to mental health and emotional support roles, not technology-related jobs. + +--- + +Career paths in mental health and emotional support + +--- + +Educational courses she wanted to take + +### --feedback-- + +While these roles require education, the terms directly refer to the job roles, not the courses. + +--- + +Hobbies that she was interested in + +### --feedback-- + +`Therapist or counselor` are professional career paths, not hobbies. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md new file mode 100644 index 00000000000..40c9c66ce5e --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md @@ -0,0 +1,49 @@ +--- +id: 657b2f3bf7a2cbdb58d959d5 +title: Task 67 +challengeType: 19 +dashedName: task-67 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `last` is used to refer to the most recent past occurrence of a period or event. For example, `last year` means the year before this one, `last month` refers to the month before the current one, and `last week` points to the week before this week. Understanding time expressions like `last year`, `last month`, `last week`, or `last day` helps in talking about events that happened in the recent past. + +# --question-- + +## --text-- + +When someone mentions in a discussion about changes, `I switched careers last year.` What does `last year` indicate about the timing of their career change? + +## --answers-- + +They are planning to switch careers in the near future + +### --feedback-- + +This suggests a future action, but `last year` indicates the change already occurred in the past. + +--- + +They have been considering a career change for a long time + +### --feedback-- + +Though they might have considered it for a long time, `last year` specifically identifies when the change took place. + +--- + +The career change is happening currently + +### --feedback-- + +`Last year` refers to a completed action in the past, not something happening in the present. + +--- + +The career switch happened in the previous year + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md new file mode 100644 index 00000000000..796bb1e6c39 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md @@ -0,0 +1,49 @@ +--- +id: 657b2f6cb66826dcbac08094 +title: Task 68 +challengeType: 19 +dashedName: task-68 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Organizational psychology` is a field of psychology that studies how people interact within groups, particularly in workplace settings. It focuses on understanding workplace dynamics, employee behavior, and organizational structure to improve the work environment and increase productivity. + +# --question-- + +## --text-- + +What does `organizational psychology` typically involve? + +## --answers-- + +It deals with organizing office spaces + +### --feedback-- + +While organization is a part of the field, `organizational psychology` primarily focuses on people and behavior, not physical space. + +--- + +It's about the psychology of organizing events + +### --feedback-- + +`Organizational psychology` is not specifically about event planning but rather about behavior in workplace groups. + +--- + +It's the study of how people behave and interact in workplace groups + +--- + +It focuses on individual psychological treatment + +### --feedback-- + +`Organizational psychology` looks at group dynamics in workplaces, not individual therapy. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md new file mode 100644 index 00000000000..e185bc5a457 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md @@ -0,0 +1,38 @@ +--- +id: 657b2fa89ddc20de629ca21f +title: Task 69 +challengeType: 22 +dashedName: task-69 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will fill in the blanks with words you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ studied psychology in college. My plan was to become a _ or counselor.` + +## --blanks-- + +`actually` + +### --feedback-- + +This word is used to emphasize the accuracy or truth of a statement. + +--- + +`therapist` + +### --feedback-- + +This word refers to a professional role focused on mental health and emotional support. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md new file mode 100644 index 00000000000..ecc1ceb6792 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md @@ -0,0 +1,46 @@ +--- +id: 657b2fc9c0f96bdfddfce4d9 +title: Task 70 +challengeType: 22 +dashedName: task-70 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this exercise, you will explore the phrase `pique one's interest`. This phrase means to stimulate or arouse someone's curiosity or interest in something. It's often used when something catches your attention and makes you want to learn more about it. Alongside this phrase, you will fill in the blanks with familiar words that you've already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ a course in organizational _, and it _ my interest in the workplace and employee dynamics.` + +## --blanks-- + +`took` + +### --feedback-- + +This word refers to the action of participating in or completing a course. + +--- + +`psychology` + +### --feedback-- + +This word describes the study of the mind and behavior, particularly in a workplace setting in this context. + +--- + +`piqued` + +### --feedback-- + +This word means to arouse or stimulate interest or curiosity. You should correctly use its simple past tense. diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md new file mode 100644 index 00000000000..acc29551124 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md @@ -0,0 +1,49 @@ +--- +id: 657b2fea728c2be14a8a98c4 +title: Task 71 +challengeType: 19 +dashedName: task-71 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Employee dynamics` refers to the way employees interact and work together in a workplace. It's an example of using one noun (`employee`) to describe another noun (`dynamics`). This type of descriptive noun helps give more specific information about the subject. Other examples include `race car`, where `race` describes the type of car, and `garden hose`, where `garden` describes the type of hose. + +# --question-- + +## --text-- + +What does `employee dynamics` refer to in a workplace context? + +## --answers-- + +The dynamics of machines used by employees + +### --feedback-- + +`Employee dynamics` specifically refers to interactions and relationships among employees, not machinery. + +--- + +The interactions and relationships among employees + +--- + +The employment status of workers + +### --feedback-- + +`Employee dynamics` is about how employees work together, not their employment status. + +--- + +The dynamics of hiring new employees + +### --feedback-- + +`Employee dynamics` refers to existing employee interactions, not the hiring process. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md new file mode 100644 index 00000000000..bcbb031c907 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md @@ -0,0 +1,54 @@ +--- +id: 657b3026ff79fbe2dda6cb39 +title: Task 72 +challengeType: 19 +dashedName: task-72 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `That's a cool twist` is often used to express that something is interestingly unexpected or surprisingly different. The word `twist` here refers to a change or development in a situation or story that is unusual or unexpected. `Cool` in this context means it's positively received. + +# --question-- + +## --text-- + +What is Tom expressing when he says `That's a cool twist`? + +## --answers-- + +He finds the unexpected change or development interesting + +--- + +He thinks the situation is confusing + +### --feedback-- + +While a `twist` can be surprising, Tom's use of `cool` suggests he finds it interesting rather than confusing. + +--- + +He is unhappy with the new development + +### --feedback-- + +`Cool twist` usually indicates a positive reaction, not dissatisfaction. + +--- + +He expected the development all along + +### --feedback-- + +The term `twist` implies that the development was unexpected. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md new file mode 100644 index 00000000000..6a30241c1a2 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md @@ -0,0 +1,55 @@ +--- +id: 657b306fe94f29e4b4aa9105 +title: Task 73 +challengeType: 19 +dashedName: task-73 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `not right away` is used to indicate that something didn't happen immediately or at the earliest opportunity. It suggests that there was a delay or a period before the action or change took place. This phrase helps to set the timeline of events or actions. + +# --question-- + +## --text-- + +What does Anna mean when she says `not right away`? + +## --answers-- + +She immediately started working in HR at a tech company + +### --feedback-- + +`Not right away` indicates a delay or period before taking action, not immediate action. + +--- + +She started working in a different role before moving to HR at a tech company + +--- + +She has never worked in HR + +### --feedback-- + +The statement implies she did work in HR, just not immediately. + +--- + +She was always focused on training and development + +### --feedback-- + +`Not right away` suggests a progression or change over time, not a constant focus. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md new file mode 100644 index 00000000000..b21bdf5b3e6 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md @@ -0,0 +1,49 @@ +--- +id: 657b30ac03b523e6640deaf1 +title: Task 74 +challengeType: 22 +dashedName: task-74 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will practice filling in the blanks with words that you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`Tom: That's a cool _. _ you immediately start working as a tech recruiter after college? Anna: Not right away. I _ in a general HR role at a non-tech company first, focusing on training and development.` + + +## --blanks-- + +`twist` + +### --feedback-- + +It refers to an interesting or unexpected change in a situation. + +--- + +`Did` + +### --feedback-- + +The auxiliary verb used to form a question in the past simple tense. The first letter should be capitalized. + +--- + +`worked` + +### --feedback-- + +Past tense form of `work`, indicating an action completed in the past. + diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md new file mode 100644 index 00000000000..f843ccf34aa --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md @@ -0,0 +1,54 @@ +--- +id: 657b30e1b9f035e7e656fd01 +title: Task 75 +challengeType: 19 +dashedName: task-75 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `employee` is someone who works for a company or a person. When you talk about `employees' well-being`, you are talking about the health and happiness of all the people who work there. The `'s` after `employees` means that the well-being belongs to the employees. It's like `the cat's toy` (one cat) and `the cats' toy` (more than one cat). + +# --question-- + +## --text-- + +What does Anna mean by saying `employees' well-being.` + +## --answers-- + +It's about the health of the company + +### --feedback-- + +`Employees'` means the people who work, not the company. + +--- + +One worker's health and happiness + +### --feedback-- + +`Employees'` with an `'s` shows it's about all workers, not just one. + +--- + +Where the employees work + +### --feedback-- + +`Well-being` is about health and happiness, not a place. + +--- + +The health and happiness of all the workers + +## --video-solution-- + +4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md new file mode 100644 index 00000000000..8e17e595d98 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md @@ -0,0 +1,54 @@ +--- +id: 657b315533e4edeba65111b8 +title: Task 76 +challengeType: 19 +dashedName: task-76 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +A `psychologist` is a professional who studies the human mind and behavior. They often help people understand and manage their emotions, behaviors, and mental processes. In Anna's statement, she refers to becoming a psychologist, indicating her professional choice related to studying and working with psychology. + +# --question-- + +## --text-- + +What does `psychologist` mean in Anna's statement? + +## --answers-- + +It means someone who studies physics + +### --feedback-- + +`Psychologist` refers to a person who studies the mind and behavior, not physics. + +--- + +It's a type of medical doctor + +### --feedback-- + +While related to health, a psychologist is different from a medical doctor and focuses on mental processes. + +--- + +A professional who studies and works with the human mind and behavior + +--- + +A teacher at a school + +### --feedback-- + +A psychologist may teach, but their primary role is studying and working with the mind and behavior, not general teaching. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md new file mode 100644 index 00000000000..40eee7185d9 --- /dev/null +++ b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md @@ -0,0 +1,15 @@ +--- +id: 657b46c9be150f577f5a1086 +title: "Dialogue 2: Another Job Interview" +challengeType: 21 +dashedName: dialogue-2-another-job-interview +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md deleted file mode 100644 index 0a0f3472141..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0feadb1dd77f6cda623f -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md deleted file mode 100644 index e1563f9b06b..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0f39ee87517d584d81f9 -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md deleted file mode 100644 index 7aa1e30008d..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5a46ffb500e3f2ce47b -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -*** - -Giving a job description. - -*** - -Making a statement based on her assumption. - -*** - -Expressing a possibility. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md deleted file mode 100644 index 2ee50fe5647..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5e46ffb500e3f2ce47e -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md b/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md deleted file mode 100644 index adc4b41f091..00000000000 --- a/curriculum/challenges/arabic/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd6071d697d0aab7833b6 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md deleted file mode 100644 index 7c6e3cca299..00000000000 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: bd7158d8c242eddfaeb5bd13 -title: 製作一個個人作品集展示頁 -challengeType: 14 -forumTopicId: 301143 -dashedName: build-a-personal-portfolio-webpage ---- - -# --description-- - -**目標：** 構建一個功能類似於 https://personal-portfolio.freecodecamp.rocks 的應用程序 - -**需求：** - -1. 你的作品集應該有一個 `id` 爲 `welcome-section` 的歡迎部分 -1. 歡迎部分應該有一個包含文本的 `h1` 元素 -1. 你的作品集應該有一個 `id` 爲 `projects` 的項目部分 -1. 項目部分應該包含至少一個 `class` 爲 `project-tile` 的元素來保存項目 -1. 項目部分應該包含至少一個項目的鏈接 -1. 你的作品集應該有一個 id 爲 `navbar` 的導航欄 -1. 導航欄應該至少包含一個鏈接，你可以點擊它來導航到頁面的不同部分 -1. 你的作品集應該有一個 id 爲 `profile-link` 的鏈接，在新標籤中打開你的 GitHub 或 freeCodeCodeCamp 個人主頁 -1. 你的作品集應該至少有一個媒體查詢 -1. 歡迎部分的高度應該等於視口的高度 -1. 導航欄應該始終位於視口的頂部 - -完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！ - -**注意：** 請在你的 HTML 中添加 `` 以鏈接你的樣式表並應用你的 CSS - -# --hints-- - -你的作品集應該有一個 `id` 爲 `welcome-section` 的歡迎部分。 - -```js -const el = document.getElementById('welcome-section') -assert(!!el); -``` - -你的 `#welcome-section` 元素應該包含一個 `h1` 元素。 - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1').length, - 0, - 'Welcome section should contain an h1 element ' -); -``` - -在 `#welcome-section` 元素中，你不應該有任何空的 `h1` 元素。 - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, - 0, - 'h1 element in welcome section should contain your name or camper ' + - 'name ' -); -``` - -你應該有一個 `id` 爲 `projects` 的項目部分。 - -```js -const el = document.getElementById('projects') -assert(!!el); -``` - -你的作品集應該包含至少一個 class 爲 `project-tile` 的元素。 - -```js -assert.isAbove( - document.querySelectorAll('#projects .project-tile').length, - 0 -); -``` - -你的 `#projects` 元素應該包含至少一個 `a` 元素。 - -```js -assert.isAbove(document.querySelectorAll('#projects a').length, 0); -``` - -你的作品集應該有一個 `id` 爲 `navbar` 的導航欄。 - -```js -const el = document.getElementById('navbar'); -assert(!!el); -``` - -你的 `#navbar` 元素應該包含至少一個 `a` 元素，它的 `href` 屬性以 `#` 開頭。 - -```js -const links = [...document.querySelectorAll('#navbar a')].filter( - (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#' -); - -assert.isAbove( - links.length, - 0, - 'Navbar should contain an anchor link ' -); -``` - -你的作品集應該有一個 `id` 爲 `profile-link` 的 `a` 元素。 - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.tagName === 'A') -``` - -你的 `#profile-link` 元素應該有一個值爲 `_blank` 的 `target` 屬性。 - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.target === '_blank') -``` - -你的作品集應該至少有一個媒體查詢。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -你的 `#navbar` 元素應該始終位於視口的頂部。 - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const navbar = document.getElementById('navbar'); - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - "Navbar's parent should be body and it should be at the top of " + - 'the viewport ' - ); - - window.scroll(0, 500); - - await timeout(1); - - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - 'Navbar should be at the top of the viewport even after ' + - 'scrolling ' - ); - window.scroll(0, 0); -})(); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Personal Portfolio - - - - - -
                              -
                              -
                              -

                              It's me!

                              - -

                              Naomi Carrigan

                              -

                              Welcome to my portfolio page!

                              -
                              -
                              -

                              Projects

                              -

                              Here's what I've worked on!

                              -

                              - - - - -

                              -
                              -

                              Contact me!

                              -

                              Use the links below to get in touch.

                              -

                              FreeCodeCamp.org | GitHub | Facebook | LinkedIn -

                              - - - -``` - -```css -nav{ - position: fixed; - width: 100%; - text-align: right; - font-size: 24pt; - top: 0%; - right: 5px; - background-color: #000000; - color: #ffffff; -} -@media (max-width: 500px){ - nav{ - display: none; - } -} -a{ - color: #ffffff; -} -main{ - text-align: center; - background-color: black; - font-family:Pacifico -} -h1{ - font-size: 48pt; -} -h2{ - font-size: 24pt; -} -p{ - font-size: 12pt; -} -#welcome-section{ - background-color:#251a4a; - color: #FFFFFF; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#projects{ - background-color: #060a9c; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#contact{ - background-color: #03300b; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -``` diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md deleted file mode 100644 index 76ac5f5af60..00000000000 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: 製作一個產品登錄頁 -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**目標：** 構建一個功能類似於 https://product-landing-page.freecodecamp.rocks 的應用程序 - -**需求：** - -1. 你的產品登錄頁應該有一個 `id="header"` 的 `header` 元素 -1. 你可以在 `header` 元素中看到一個 `id="header-img"` 的圖像（比如一個 logo） -1. 在 `#header` 元素中，你可以看到一個 `id="nav-bar"` 的 `nav` 元素 -1. 在 `nav` 元素中，你可以看到至少三個可點擊的元素，每個元素的 class 爲 `nav-link` -1. 當你點擊 `nav` 內的 `.nav-link` 按鈕時，應滾動到登錄頁相應的部分 -1. 你可以觀看一個 `id="video"` 的嵌入的產品視頻 -1. 你的登錄頁有一個 `id="form"` 的 `form` 元素 -1. 在表單中，應存在一個 `id="email"` 的 `input` 輸入框供用戶填寫郵箱地址 -1. 在 `#email` 輸入框內應有描述該區域用途的佔位符文本 -1. `#email` 輸入框應該用 HTML5 驗證來確認輸入的內容是否爲郵箱地址 -1. 在表單中，有一個 `id="submit"` 的 `input` 提交按鈕 -1. 當你點擊 `#submit` 元素時，郵箱會被提交到一個靜態頁面 (使用這個模擬 URL：`https://www.freecodecamp.com/email-submit`) -1. 導航欄應該始終位於視口的頂部 -1. 你的產品登陸頁面至少要有一個媒體查詢 -1. 你的產品登陸頁面應該至少使用一次 CSS flexbox - -完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！ - -**注意：** 請在你的 HTML 中添加 `` 以鏈接你的樣式表並應用你的 CSS - -# --hints-- - -你應該有一個 `id` 爲 `header` 的 `header` 元素。 - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -你應該有一個 `id` 爲 `header-img` 的 `img` 元素。 - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -你的 `#header-img` 元素應該是 `#header` 元素的子元素。 - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -你的 `#header-img` 應該有一個 `src` 屬性。 - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -你的 `#header-img` 的 `src` 值應該是一個有效的 URL（以 `http` 開頭）。 - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -你應該有一個 `nav` 元素，其 `id` 爲 `nav-bar`。 - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -你的 `#nav-bar` 應該是 `#header` 的後代。 - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -`#nav-bar` 中應該至少有 3 個 `.nav-link` 元素。 - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -每個 `.nav-link` 元素都應該有一個 `href` 屬性。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -每個 `.nav-link` 元素都應該鏈接到登錄頁上的相應元素（有一個 `href` 值是另一個元素的 id。例如 `#footer`）。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -你應該有一個 `video` 或 `iframe` 元素，其中 `id` 爲 `video`。 - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -你的 `#video` 應該有一個 `src` 屬性。 - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -你應該有一個 `form` 元素，其 `id` 爲 `form`。 - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -你應該有一個 `input` 元素，其中 `id` 爲 `email`。 - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#email` 應該是 `#form` 的後代。 - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -你的 `#email` 應該具有帶有佔位符文本的 `placeholder` 屬性。 - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你的 `#email` 應該通過將其 `type` 設置爲 `email` 來使用 HTML5 驗證。 - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -你應該有一個 `input` 元素，其中 `id` 爲`submit`。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#submit` 應該是 `#form` 的後代。 - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -你的 `#submit` 應該具有 `submit` 的 `type`。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -你的 `#form` 應該具有 `action` 屬性爲 `https://www.freecodecamp.com/email-submit`。 - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -你的 `#email` 元素應該具有值爲 `email` 的 `name` 屬性。 - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -你的 `#nav-bar` 應該始終位於視口的頂部。 - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const header = document.getElementById('header'); - const headerChildren = header.children; - const navbarCandidates = [header, ...headerChildren]; - - // Return smallest top position of all navbar candidates - const getNavbarPosition = (candidates = []) => { - return candidates.reduce( - (min, candidate) => - Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)), - Infinity - ); - }; - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the viewport ' - ); - - window.scroll(0, 500); - await timeout(1); - - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the ' + - 'viewport even after scrolling ' - ); - - window.scroll(0, 0); -})(); -``` - -你的產品登陸頁面至少要有一個媒體查詢。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -你的產品登陸頁面應該至少使用一次 CSS Flexbox。 - -```js -const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display) -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media') -const usesFlex = cssRules.find(rule => hasFlex(rule)) -const usesFlexMedia = mediaRules.find(mediaRule => { - return [...mediaRule.cssRules].find(rule => hasFlex(rule)) -}) -assert(usesFlex || usesFlexMedia) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Product Landing Page - - - -
                              -

                              - Pokemon Daycare Service -

                              -
                              -

                              What we offer

                              -
                              -
                              - -
                              -
                              Guaranteed friendly and loving staff!
                              -
                              -
                              -
                              - -
                              -
                              - Comfortable environment for Pokemon to explore and play! -
                              -
                              -
                              -
                              - -
                              -
                              - Multiple membership plans to fit your lifestyle! -
                              -
                              -
                              -
                              -

                              Check us out!

                              - A sneak peek into our facility: -
                              - -
                              -
                              -

                              Membership Plans

                              -
                              -
                              - Basic Membership
                              -
                                -
                              • One Pokemon
                                • -
                              • Food and berries provided
                                • -
                              - $9.99/month -
                              -
                              - Silver Membership
                              -
                                -
                              • Up to Three Pokemon
                                • -
                              • Food and berries provided
                                • -
                              • Grooming and accessories included
                                • -
                              - $19.99/month -
                              -
                              - Gold Membership
                              -
                                -
                              • Up to six Pokemon!
                                • -
                              • Food and berries provided
                                • -
                              • Grooming and accessories included
                                • -
                              • Personal training for each Pokemon
                                • -
                              • Breeding and egg hatching
                                • -
                              - $29.99/month -
                              -
                              -
                              -
                              -

                              Sign up for our newsletter!

                              - - -
                              - -
                              - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md deleted file mode 100644 index c0be38804a3..00000000000 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: 製作一個調查表格 -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**目標：** 構建一個功能類似於 https://survey-form.freecodecamp.rocks 的應用程序 - -**需求：** - -1. 你應該有一個 `id` 爲 `title` 的 `h1` 元素 -1. 你應該有一個 `id` 爲 `description` 的 `p` 元素 -1. 你應該有一個 `id` 爲 `survey-form` 的 `form` 元素 -1. 在表單元素內，你**需要**在 `input` 字段中輸入你的名字，該字段的 `id` 爲 `name`，`type` 爲 `text` -1. 在表單元素內，你**需要**在 `input` 字段中輸入你的郵箱，該字段的 `id` 爲 `email` -1. 如果你輸入了格式不正確的郵箱，你將會看見 HTML5 驗證錯誤信息 -1. 在表單中，你可以在 `input` 字段中輸入一個數字，該字段的 `id` 爲 `number` -1. 數字輸入不應接受非數字，或是阻止你輸入它們，或是顯示一個 HTML5 驗證錯誤（取決於你的瀏覽器）。 -1. 如果你輸入的數字超出了範圍（使用 `min` 和 `max` 屬性定義），你將會看見 HTML5 驗證錯誤信息 -1. 表單中的名字、郵箱和數字輸入框需有對應的包含描述輸入框用途的 `label` 元素，id 應分別爲 `id="name-label"`、`id="email-label"` 和 `id="number-label"` -1. 在表單中的名字、郵箱和數字輸入框中，你能看到各自的描述文字作爲佔位符 -1. 在表單元素內， 你應該有一個 `select` 下拉元素， `id` 爲 `dropdown`，它至少有兩個選項 -1. 在表單元素內， 你可以從至少兩個單選按鈕的組中選擇一個選項，該選項使用 `name` 屬性 -1. 在表單元素內，你可以從一系列複選框中選擇幾個字段，每個複選框都必須具有 `value` 屬性 -1. 在表單元素內，你會有一個 `textarea` 以獲取額外的評論 -1. 在表單元素內，你將收到一個按鈕，其 `id` 爲 `submit`，提交所有輸入 - -完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！ - -**注意：** 請在你的 HTML 中添加 `` 以鏈接你的樣式表並應用你的 CSS - -# --hints-- - -你應該有一個 `id` 爲 `title` 的 `h1` 元素。 - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -你的 `#title` 元素不應爲空。 - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -你應該有一個 `id` 爲 `description` 的 `p` 元素。 - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -你的 `#description` 不應爲空。 - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -你應該有一個 `id` 爲 `survey-form` 的 `form` 元素。 - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -你應該有一個 `id` 爲 `name` 的 `input` 元素。 - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#name` 元素應該具有 `type` 爲 `text`。 - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -你的 `#name` 元素應該在表單中是必填項。 - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -你的 `#name` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -你應該有一個 `id` 爲 `email` 的 `input` 元素。 - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#email` 元素應該具有 `type` 爲 `email`。 - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -你的 `#email` 元素應該需要輸入。 - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -你的 `#email` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -你應該有一個 `id` 爲 `number` 的 `input` 元素。 - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#number` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -你的 `#number` 元素應該具有 `type` 爲 `number`。 - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -你的 `#number` 應該有一個值爲數字的 `min` 屬性。 - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -你的 `#number` 應該有一個值爲數字的 `max` 屬性。 - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -你應該有一個 `id` 爲 `name-label` 的 `label` 元素。 - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -你應該有一個 `id` 爲 `email-label` 的 `label` 元素。 - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -你應該有一個 `id` 爲 `number-label` 的 `label` 元素。 - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -你的 `#name-label` 應包含描述輸入的文本。 - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -你的 `#email-label` 應包含描述輸入的文本。 - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -你的 `#number-label` 應該包含描述輸入的文本。 - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -你的 `#name-label` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -你的 `#email-label` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -你的 `#number-label` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -你的 `#name` 元素應該有 `placeholder` 屬性與佔位符文本。 - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你的 `#email` 元素應該有 `placeholder` 屬性與佔位符文本。 - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你的 `#number` 元素應該有 `placeholder` 屬性與佔位符文本。 - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你應該有一個 `id` 爲 `dropdown` 的 `select` 元素。 - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -你的 `#dropdown` 應該至少有兩個可選擇（未禁用）`option` 元素。 - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -你的 `#dropdown` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -你應該有至少兩個 `input` 元素，`type` 爲 `radio`（單選按鈕）。 - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -你至少應該有兩個單選按鈕，是 `#survey-form` 的子元素。 - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -你所有的單選按鈕都應該有一個 `value` 屬性和值。 - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -你所有的單選按鈕都應該有一個 `name` 屬性和值。 - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -每個單選按鈕組應至少有 2 個單選按鈕。 - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -你應該至少有兩個 `input` 元素，`type` 爲 `checkbox`（複選框），它們是 `#survey-form` 的子元素。 - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -你在 `#survey-form` 中的所有複選框都應該有 `value` 屬性和值。 - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -你至少應該有一個 `textarea` 元素，它是 `#survey-form` 的子元素。 - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -你應該有一個 `id` 爲 `submit` 的 `input` 或 `button` 元素。 - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -你的 `#submit` 元素應該具有 `type` 爲 `submit`。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -你的 `#submit` 元素應該是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Survey Form - - -

                              Survey Form

                              -

                              The card below was built as a sample survey form for freeCodeCamp.

                              -
                              -

                              Join the Togepi Fan Club!

                              -

                              - Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -

                              -
                              - - - - -

                              Who is your favourite Pokemon?

                              - - - -

                              Which communications do you want to receive?

                              - - - -

                              Any other information you would like to share?

                              - -

                              - Please note: This form is a proof of concept. Submitting the form - will not actually transmit your data. -

                              - -
                              -
                              - - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md deleted file mode 100644 index 90e2e434f88..00000000000 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: 製作一個技術文檔頁面 -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**目標：** 構建一個功能類似於 https://technical-documentation-page.freecodecamp.rocks 的應用程序 - -**需求：** - -1. 你能看見一個 `id="main-doc"` 的 `main`元素，它包含頁面的主要內容（技術文檔）。 -1. 在 `#main-doc` 元素內，我能看見至少 5 個 `section` 元素，每個元素都有一個 class 爲 `main-section`。 應存在至少 5 個這樣的元素。 -1. 每個 `.main-section` 中的第一個元素應該是 `header` 元素，其中包含描述該部分主題的文本。 -1. class 爲 `main-section` 的每個 `section` 元素應該有一個與包含在其中的每個 `header` 的文本相對應的 `id`。 所有空格都應該被替換爲下劃線（例如，包含標題 “JavaScript and Java” 的 section 應有一個相應的 `id="JavaScript_and_Java"`）。 -1. 所有 `.main-section` 元素總計（不是每個）包含至少 10 個 `p` 元素。 -1. 所有 `.main-section` 元素總計（不是每個）包含至少 5 個 `code` 元素。 -1. 所有 `.main-section` 元素總計（不是每個）包含至少 5 個 `li` 元素。 -1. 你能看見一個 `id="navbar"` 的 `nav` 元素。 -1. navbar 元素應包含一個 `header` 元素，其中包含描述技術文檔主題的文本。 -1. 此外，導航欄應包含 class 爲 `nav-link` 的鏈接元素（`a`）。 每個 class 爲 `main-section` 的元素都需要有一個。 -1. `#navbar` 中的 `header` 元素必須在任何鏈接 (`a`) 之前。 -1. class 爲 `nav-link` 的每個元素都應該包含每個 `section` 的 `header` 文本對應的文本（例如，如果你有一個 “Hello world” 部分/標題，你的導航欄應該有一個包含文本 “Hello world” 的元素）。 -1. 當你點擊一個 navbar 元素時，頁面應該導航到 `#main-doc` 元素的相應部分（例如，如果你點擊包含文本 “Hello world” 的 `.nav-link` 元素，頁面將導航到一個帶有對應 header 和 id 的 `section` 元素）。 -1. 在常規尺寸的設備上（筆記本電腦、臺式機），帶有 `id="navbar"` 的元素應該顯示在屏幕左側，並且始終對用戶可見。 -1. 你的技術文檔應該使用至少一個媒體查詢。 - -完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！ - -**注意：** 請在你的 HTML 中添加 `` 以鏈接你的樣式表並應用你的 CSS - -# --hints-- - -你應該有一個 `id` 爲 `main-doc` 的 `main` 元素。 - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -你至少應該有 5 個 class 爲 `main-section` 的 `section` 元素。 - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -你所有的 `.main-section` 元素都應該是 `section` 元素。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -你至少應該有 5 個 `.main-section` 元素，它們是 `#main-doc` 的子元素。 - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -每個 `.main-section` 的第一個子元素都應該是一個 `header` 元素。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -你的 `header` 元素不應爲空。 - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -你所有的 `.main-section` 元素都應該有 `id`。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -每個 `.main-section` 都應該有一個與其第一個子元素的文本匹配的 `id`，把子元素的文本中的空格都替換爲下劃線（`_`）用於 id。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -在你的 `.main-section` 元素中總計應有至少 10 個 `p` 元素 - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -所有 `.main-section` 元素內總計應有至少 5 個 `code` 元素。 - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -所有 `.main-section` 元素內總計應有至少 5 個 `li` 元素。 - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -你應該有一個 `id` 爲 `navbar` 的 `nav` 元素。 - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -你的 `#navbar` 應該只有一個 `header` 元素。 - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -你應該至少有一個 class 爲 `nav-link` 的 `a` 元素。 - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -你所有的 `.nav-link` 元素都應該是錨點（`a`）元素。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -你所有的 `.nav-link` 元素都應該在 `#navbar` 中。 - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -你應該有相同數量的 `.nav-link` 和 `.main-section` 元素。 - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -`#navbar` 中的 `header` 元素必須在 `#navbar` 中的任何鏈接（`a`）之前。 - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -每個 `.nav-link` 應該有與其相關 `section` 的 `header` 文本相對應的文本（例如，如果你有一個 “Hello world” 部分/標題，你的 `#navbar` 應該有一個 `.nav-link` 包含文本 “Hello world”）。 - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -每個 `.nav-link` 都應該有一個 `href` 屬性，該屬性鏈接到其對應的 `.main-section`（例如，如果你單擊包含文本 “Hello world” 的 `.nav-link` 元素，頁面導航到具有該 id 的 `section` 元素）。 - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -你的 `#navbar` 元素應該始終位於視口的頂部。 - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -你的技術文檔項目應該使用至少一個媒體查詢。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Technical Documentation Page - - - -
                              -
                              -
                              Introduction
                              -

                              - Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -

                              -
                              -
                              -
                              Definitions
                              -

                              - To start with, let's define some of the more common terms used in - algebra: -

                              -
                                -
                              • - Variable: A variable is an unknown value, usually represented - by a letter. -
                                • -
                              • - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. -
                                • -
                              • - Equation: An equation is a mathematical argument in which two - expressions result in the same value. -
                                • -
                              -
                              -
                              -
                              Examples
                              -

                              - Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.

                              - x + 5 = 12

                              - In this above example, we have: -

                              -
                                -
                              • Variable: The variable in the example is "x".
                                • -
                              • - Expression: There are two expressions in this example. They - are "x+5" and "12". -
                                • -
                              • - Equation: The entire example, "x+5=12", is an equation. -
                                • -
                              -
                              -
                              -
                              Solving Equations
                              -

                              - The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".

                              - x + 5 = 12

                              - In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
                              For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.

                              - x + 5 - 5 = 12 - 5

                              - The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:

                              - x = 7

                              - We now have our solution to this equation! -

                              -
                              -
                              -
                              Solving Equations II
                              -

                              - Let us look at a slightly more challenging equation.

                              - 3x + 4 = 13

                              - Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:

                              - 3x = 9

                              - "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.

                              - x = 3

                              - And now we have our solution! -

                              -
                              -
                              -
                              Solving Equations III
                              -

                              - Now we are getting in to more complex operations. Here is another - equation for us to look at:

                              - x^2 - 8 = 8

                              - Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.

                              - x^2 = 16

                              - But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
                              - An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -

                              - x = √9

                              - Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:

                              - x = 3 -

                              -
                              -
                              -
                              System of Equations
                              -

                              - As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:

                              - y = 3x

                              - An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
                              - Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:

                              - y = 3x | y - 6 = x - A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:

                              - 3x - 6 = x

                              - Now we can solve for "x"! We start by adding 6 to each side.

                              - 3x = x + 6

                              - We still need to get "x" by itself, so we subtract "x" from both sides - and get:

                              - 2x = 6

                              - If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!

                              - x = 3

                              - However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:

                              - y = 3x

                              - We have a value for "x" now, so let's see what happens if we put that - value in.

                              - y = 3*3

                              - We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:

                              - x = 3 and y = 9

                              -

                              -
                              -
                              -
                              Try it Yourself!
                              -

                              Coming Soon!

                              -

                              Keep an eye out for new additions!

                              -
                              -
                              -
                              More Information
                              -

                              Check out the following links for more information!

                              - -
                              -
                              - - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md deleted file mode 100644 index 32b990e7626..00000000000 --- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: 製作一個致敬頁 -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**目標：** 構建一個功能類似於 https://tribute-page.freecodecamp.rocks 的應用程序 - -**需求：** - -1. 你的致敬頁應該包含一個 `id` 爲 `main` 的 `main` 元素，它應該包含所有其他元素 -1. 你應該會看到一個 `id` 爲 `title` 的元素，其中包含一個字符串（即文本），描述了致敬頁面的主題（例如 “Dr. Norman Borlaug”) -1. 你應該有一個 `id` 爲 `img-div` 的 `figure` 或 `div` 元素 -1. 在 `#img-div` 元素中，你應該看到一個 `id="image"` 的 `img` 元素 -1. 在 `#img-div` 元素內，你應該看到一個 `id="img-caption"` 的元素，其中包含對 `#img-div` 中圖像的文本描述 -1. 你應該看到一個 `id="tribute-info"` 的元素，其中包含描述致敬頁主題的文本內容 -1. 你應該看到一個帶有相應 `id="tribute-link"` 的 `a` 元素，該元素鏈接到外部站點，其中包含有關致敬頁面主題的附加信息。 提示：你必須爲元素提供 `target` 屬性，並設置其爲 `_blank`，以便可以在新選項卡中打開鏈接。 -1. 你的 `#image` 應該使用 `max-width` 和 `height` 屬性來響應式調整大小，相對於其父元素的寬度，但不超過其原始大小 -1. 你的 `img` 元素應該在其父元素內居中 - -完成需求並通過下面的所有測試來完成這個項目。 賦予它你自己的個人風格。 編程愉快！ - -**注意：** 請在你的 HTML 中添加 `` 以鏈接你的樣式表並應用你的 CSS - -# --hints-- - -你應該有一個 `main` 元素且該元素的 `id` 爲 `main`. - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -你的 `#img-div`、`#image`、`#img-caption`、`#tribute-info` 和 `#tribute-link` 應該是 `#main` 的子元素。 - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -你應該有一個 `id` 爲 `title` 的元素。 - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -你的 `#title` 元素不應爲空。 - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -你應該有一個 `id` 爲 `img-div` 的 `figure` 或 `div` 元素。 - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -你應該有一個 `id` 爲 `image` 的 `img` 元素。 - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -你的 `#image` 元素應該是 `#img-div` 元素的子元素。 - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -你應該有一個 `id` 爲 `img-caption` 的 `figcaption` 元素或 `div` 元素。 - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -你的 `#img-caption` 元素應該是 `#img-div` 元素的子元素。 - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -你的 `#img-caption` 不應爲空。 - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -你應該有一個 `id` 爲 `tribute-info` 的元素。 - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -你的 `#tribute-info` 不應爲空。 - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -你應該有一個 `id` 爲 `tribute-link` 的 `a` 元素。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -你的 `#tribute-link` 應該有一個 `href` 屬性和值。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -你的 `#tribute-link` 元素應該有一個值爲 `_blank` 的 `target` 屬性。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -你的 `img` 元素應該具有 `display` 值爲 `block`。 - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -你的 `#image` 應該具有 `max-width` 值爲 `100%`。 - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -你的 `#image` 應該具有 `height` 值爲 `auto`。 - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -你的 `#image` 應該在其父元素內居中. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - - Tribute Page - - -

                              Tribute Page

                              -

                              The below card was designed as a tribute page for freeCodeCamp.

                              -
                              -
                              - An image of Togepi -
                              Togepi, happy as always.
                              -
                              -

                              Togepi

                              -
                              -
                              -

                              - Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -

                              -

                              - Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -

                              -
                              -

                              Battle Information

                              -
                                -
                              • Type: Fairy
                                • -
                              • Evolutions: Togepi -> Togetic -> Togekiss
                                • -
                              • Moves: Growl, Pound, Sweet Kiss, Charm
                                • -
                              • Weaknesses: Poison, Steel
                                • -
                              • Resistances: Dragon
                                • -
                              -

                              - Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -

                              -
                              -
                              - - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md deleted file mode 100644 index 0c08112f6d7..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05b -title: 編寫你自己的函數 -challengeType: 11 -videoId: nLDychdBwUg -bilibiliIds: - aid: 249487483 - bvid: BV1Fv411J7bS - cid: 376340281 -dashedName: build-your-own-functions ---- - -# --description-- - -更多資源 - -\- 練習 - -# --question-- - -## --text-- - -下面這個 Python 程序會打印什麼？： - -```python -def fred(): - print("Zap") -def jane(): - print("ABC") - -jane() -fred() -jane() -``` - -## --answers-- - -
                              Zap
-ABC
-jane
-fred
-jane
                              - ---- - -
                              Zap
-ABC
-Zap
                              - ---- - -
                              ABC
-Zap
-jane
                              - ---- - -
                              ABC
-Zap
-ABC
                              - ---- - -
                              Zap
-Zap
-Zap
                              - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index 6b089118bf9..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: Tuples 的比較和排序 -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -更多資源： - -\- 練習 - -# --question-- - -## --text-- - -哪個代碼與示例代碼完成相同的功能？ - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index 534565453b2..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: 根據條件執行 -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -以下哪個代碼縮進，能夠滿足當“x=0”和“y=10”的時，打印 "Yes"？ - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index 3ea3e730f49..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: '數據可視化：郵件列表' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -更多資源： - -\- 練習：Geodata - -\- 練習：Gmane 模型 - -\- 練習：Gmane Spider - -\- 練習：Gmane Viz - -\- 練習：Page Rank - -\- 練習：Page Spider - -\- 練習：Page Viz - -# --question-- - -## --text-- - -哪個是常見的 JavaScript 可視化庫？ - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index 0173ae65db1..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: '數據可視化：頁面排名' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -頁面排名算法是如何工作的？ - -## --answers-- - -它決定哪些頁面之間的連接程度最高。 - ---- - -它用瀏覽量來決定排名 - ---- - -它能判斷出哪些頁面包含最重要的內容。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index 719d6d3a5a2..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: 字典和循環 -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -更多資源： - -\- 練習 - -# --question-- - -## --text-- - -以下代碼將打印什麼? - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -
                              annie 42
-jan 100
                              - ---- - -
                              chuck 1
-annie 42
-jan 100
                              - ---- - -
                              chuck 1
                              - ---- - -
                              [Error]（錯誤）
                              - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index 8dbc1fa8eae..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: '字典：常見應用' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -這段代碼將打印什麼? - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[將返回錯誤] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index ea88070f2c5..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: 文件作爲序列 -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -更多資源： - -\- 練習 - -# --question-- - -## --text-- - -“continue”這個詞在循環中間起到什麼作用？ - -## --answers-- - -循環後直接跳轉到代碼。 - ---- - -跳到代碼的下一行。 - ---- - -跳到循環的下一個迭代。 - ---- - -跳過下一個代碼塊。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index 25f3a82de49..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: 中間表達式 -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -更多資源： - -\- 練習 1 - -\- 練習 2 - -# --question-- - -## --text-- - -這些代碼運作之後會打印出什麼： - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index a5b88cb0fff..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: 中間字符串 -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -更多資料： - -\- 練習 - -# --question-- - -## --text-- - -下面的代碼中 i 的值是什麼？ - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True（真） - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index d3f0f03928c..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: '導言：Python 的元素' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -以下代碼將打印出什麼？ - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index de7430c7d55..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: '導言：硬件架構' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -當你的程序運作時，它被存儲在哪裏？ - -## --answers-- - -硬盤。 - ---- - -內存。 - ---- - -中央處理器。 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index 84b3339ccb2..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: '導言：Python 這門編程語言' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -運行這兩行代碼後打印出什麼樣的內容： - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index 73382ff8434..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: '導言：爲何編程？' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -更多資源： - -\- 在 Windows 上安裝 Python - -\- 在 MacOS 上安裝 Python - -# --question-- - -## --text-- - -誰應該學習編程？ - -## --answers-- - -大學生。 - -### --feedback-- - -College students should learn to program, but there's a better answer. - ---- - -People who want to become software developers. - -### --feedback-- - -People who want to become software developers should learn to program, but there's a better answer. - ---- - -Everyone. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index 00588e5b5fc..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: '迭代：定義循環' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -以下代碼將打印多少行？ - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index 4d884d3bfbe..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: '迭代：循環成語' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -以下是一個如何在一串數值中找到最小的數值的代碼。 一行代碼有錯誤，導致整個代碼無法和預期一樣的運行。 那麼是哪一行？ - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index 8a123ae92a0..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: '迭代：更多模式' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -更多資源： - -\- 練習 - -# --question-- - -## --text-- - -其中哪一個評估爲 False（假）？ - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 8a88edaf3cf..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: 循環和迭代 -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -這些代碼會打印出什麼？ - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -
                              0
-1
-2
                              - ---- - -
                              0
-1
-2
-3
                              - ---- - -
                              1
-2
                              - ---- - -
                              1
-2
-3
                              - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index 26a506ad38b..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: 建立關係數據庫 -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -您將使用什麼 SQL 命令來檢索具有電子郵件地址 `quincy@freecodecamp.org` 的所有用戶？ - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index 22897a73072..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: 更多條件結構 -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -更多資源： - -\- 練習 1 - -\- 練習 2 - -# --question-- - -## --text-- - -給出以下代碼： - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -哪一行/幾行應該被 `try` 塊包圍？ - -## --answers-- - -1 - ---- - -3 - ---- - -3、4 - ---- - -4 - ---- - -無 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index 40bae7aca42..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: 網絡協議 -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -通常使用哪種類型的 HTTP 請求來訪問一個網站？ - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index 6054557c8bf..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: '聯網：文本處理' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -大多數網站使用哪種編碼類型？ - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index ad3c1fa68ef..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: '網絡：在 Python 中使用 urllib' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -以下代碼的輸出將是什麼樣的？ - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -只有 “romeo.txt” 的內容。 - ---- - -“romeo.txt” 的 header 和內容。 - ---- - -“romeo.txt” 的 header、footer 和內容。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index f80f9431397..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: '網絡：使用 Python 進行 Web 爬取' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -更多資料： - -\- 練習：socket1 - -\- 練習：urllib - -\- 練習：urllinks - -# --question-- - -## --text-- - -哪個 Python 庫是用於解析 HTML 文檔並從中提取數據？ - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index be1652018de..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: 用 Python 聯網 -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -哪個 Python 庫提供對 TCP 套接字的訪問？ - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index be6b702b765..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: '聯網：編寫一個 Web 瀏覽器' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -以下代碼創建了什麼？ - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -一個簡單的 web 服務器 - ---- - -一個簡單的 email 客戶端 - ---- - -一個簡單的待辦事項列表 - ---- - -一個簡單的 web 瀏覽器 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index 3a3f1a0ddca..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: 對象的生命週期 -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -以下程序將打印什麼？ - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - -
                              -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 2
-Quincy party count 3
-
                              - ---- - -
                              -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 1
-Quincy party count 2
-
                              - ---- - -
                              -Quincy constructed
-Quincy party count 1
-Quincy party count 2
-Miya constructed
-Miya party count 1
-
                              - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index 0d949f7ee4e..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: '對象：一個示例類' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -以下程序將打印什麼？ - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - -
                              -So far 1
-So far 2
-
                              - ---- - -
                              -0
-0
-
                              - ---- - -
                              -2
-2
-
                              - ---- - -
                              -2
-4
-
                              - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index 1e426f4a465..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: '對象：繼承' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -面向對象編程中的繼承是指什麼？ - -## --answers-- - -擴展父類時創建的新類。 - ---- - -類的構造實例。 - ---- - -通過擴展現有類來創建新類的能力。 - ---- - -在使用類構造對象時調用的方法。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index db5073b264b..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Python 字典 -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -當這些代碼運行之後，dict 等於什麼？ - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index 3d96e3f9d99..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Python 函數 -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -在 Python 中，關鍵詞 “def” 有什麼作用？ - -## --answers-- - -這是一個俚語，代表“這些代碼真的酷斃了”。 - ---- - -它表示一個函數的開始。 - ---- - -它表示以下的縮進代碼段將被儲存起來以後再用。 - ---- - -它代表一個函數的開始，然後接下來的代碼會被儲存到以後使用。 - ---- - -以上全都不對。 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index 95515a4af1b..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Python 列表 -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -在這些代碼運行後，x 的值是什麼？ - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index 2af6724ba6b..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Python 對象 -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -關於 Python 對象的說法，哪一個是不正確的？ - -## --answers-- - -對象被創建和使用 - ---- - -對象是代碼和數據的一部分 - ---- - -對象隱藏細節 - ---- - -對象是五個標準數據類型之一 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index 3ec4fff47b9..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: 閱讀文件中 -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -在字符串中，用什麼來代表新的一行？ - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index 6e7aeb131ce..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: '正則表達式：匹配和提取數據' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -該程序會打印出什麼？ - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index 17719ddfdd4..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: '正則表達式： 實用應用' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -在正則表達式中，怎麼搜索一個 “$” 符號? - -## --answers-- - -$ - ---- - -\\dollar\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index 5a69f4743d8..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: 正則表達式 -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -哪一個正則表達式匹配只有一個空白字符？ - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index fb4f6f20f8c..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: 關係數據庫設計 -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -對於一個字符串數據應該被保存在一個數據庫裏多少次，最佳實踐是什麼？ - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index feaa6c97803..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: 關係數據庫和 SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -下載 SQLite -下載 DB Browser for SQLite -使用 SQLite - -# --question-- - -## --text-- - -哪一個不是數據庫中的主要數據結構？ - -## --answers-- - -索引 - ---- - -表格 - ---- - -行 - ---- - -列 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index dfb268f3d94..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: '關係數據庫：聯接操作' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -在 SQL 語句中使用 JOIN 子句時，ON 的作用是什麼？ - -## --answers-- - -它指示在哪些表上執行 JOIN。 - ---- - -它指定用於 JOIN 的字段。 - ---- - -它指示如何將兩個表連接在一起。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index 4de8b607355..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: '關係型數據庫：多對多關係' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -更多資料： - -\- 練習：Email - -\- 練習：Roster - -\- 練習：Tracks - -\- 練習：Twfriends - -\- 練習：Twspider - -# --question-- - -## --text-- - -哪個是多對多關係的示例？ - -## --answers-- - -老師與學生 - ---- - -客戶與訂單 - ---- - -書與內頁 - ---- - -城市與國家 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index 67ad950fb37..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: '關係型數據庫：關係的建立' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -INSERT 命令在 SQL 中的作用是什麼？ - -## --answers-- - -它定義新行，通過列出我們要包括的字段，然後列出要放入新行中的值。 - ---- - -它定義新列，通過列出要包含的行以及要放入新列中的值。 - ---- - -它定義一個新表，通過列出要包括的行和字段以及要放入表中的值。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index 8917f717819..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: 在關係型數據庫中表示關係 -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -什麼是外鍵？ - -## --answers-- - -一個不應存在於這裏的鍵 - ---- - -一個使用非拉丁字符的鍵 - ---- - -一個指向不同表中關聯行的主鍵的數字 - ---- - -一個在“現實世界”中可能用於查找行的鍵 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index 01fb3e462ea..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: 字符串和列表 -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -更多資源： - -\- 練習 - -# --question-- - -## --text-- - -在這個代碼中，n 等於什麼？ - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -郵件 - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index 5efedb9fb06..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Python 字符串 -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -這些代碼會打印出什麼？ - -```python -for n in "banana": - print(n) -``` - -## --answers-- - -
                              -n
-n
-
                              - ---- - -
                              -0
-1
-
                              - ---- - -
                              -0
-1
-2
-3
-4
-5
-
                              - ---- - -
                              -b
-a
-n
-a
-n
-a
-
                              - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index 79d4a3db4e7..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: 元組集合 -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -這些代碼會打印出什麼？ - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - -
                              -k i
-k i
-k i
-
                              - ---- - -
                              -quincy 0
-beau 1
-kris 2
-
                              - ---- - -
                              -quincy 1
-beau 5
-kris 9
-
                              - ---- - -
                              -1 quincy
-5 beau
-9 kris
-
                              - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index 2cfb03665eb..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: 使用網絡服務 -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -通過互聯網發送數據的兩種最常見的方法是什麼？ - -## --answers-- - -JSON 和 TXT - ---- - -JSON 和 XML - ---- - -XML 和 TXT - ---- - -XML 和 PHP - ---- - -PHP 和 TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index d2bfb4d0f7e..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: '變量、表達式和語句' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -賦值語句中使用的符號是什麼？ - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index e70f11c7186..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: 使用 Python 可視化數據 -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -大多數數據在使用之前需要 \_\_\_\_\_\_ 。 - -## --answers-- - -轉換爲 JSON 格式 - ---- - -圖形化 - ---- - -清理 - ---- - -記憶 - ---- - -轉化成歌曲 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index 96ced63d988..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'Web 服務：API 速率限制和安全性' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -更多資料： - -\- 練習：GeoJSON - -\- 練習：JSON - -\- 練習：Twitter - -\- 練習：XML - -# --question-- - -## --text-- - -當 Twitter API 發出請求時，必須始終隨請求一起發送什麼信息？ - -## --answers-- - -Twitter 用戶名 - ---- - -日期範圍 - ---- - -搜索詞 - ---- - -密鑰 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index 7f3096da632..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'Web 服務：API' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -API 的全稱是什麼？ - -## --answers-- - -應用便攜式智能（Application Portable Intelligence） - ---- - -國際助理編程（Associate Programming International） - ---- - -應用程序接口（Application Program Interface） - ---- - -動作便攜式接口（Action Portable Interface） - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index 0054962c8e4..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'Web 服務：JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -這些代碼會打印出什麼？ - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[Error]（錯誤） - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index 6717dba64a9..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'Web 服務：面向服務的方法' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -用面向服務的方法來開發網絡應用，數據位於何處？ - -## --answers-- - -分佈在許多通過互聯網或內部網絡連接的計算機系統上。 - ---- - -在主 Web 服務器上的不同服務中。 - ---- - -在單獨的數據庫服務器上。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index 24369bb1984..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'Web 服務：XML 模式' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -什麼是 XSD？ - -## --answers-- - -XML 的 W3C 模式規範。 - ---- - -來自 MOZ 的標準 JSON 模式。 - ---- - -可擴展情境驅動程序 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index 1a4eaa6504a..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'Web 服務：XML' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -以下 XML 有什麼問題？ - -```xml - - Chuck - - +1 734 303 4456 - - -``` - -## --answers-- - -Email 標籤缺少結束標籤。 - ---- - -間距將導致 XML 無效。 - ---- - -Phone 標籤缺少結束標籤。 - ---- - -純文本應使用 UTF-8 編碼。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md deleted file mode 100644 index 8dc15110f7b..00000000000 --- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f065 -title: 使用列表 -challengeType: 11 -videoId: lCnHfTHkhbE -bilibiliIds: - aid: 376965958 - bvid: BV1No4y1S7oi - cid: 376387989 -dashedName: working-with-lists ---- - -# --question-- - -## --text-- - -使用下列哪種方法可以在列表末尾添加元素？ - -## --answers-- - -insert - ---- - -push - ---- - -append - ---- - -new - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md deleted file mode 100644 index 4da06305c70..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f33310c1851c6c4da013250 -title: 步驟 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -是時候添加一些菜單內容。 在現有的 `header` 元素下面添加一個 `main`元素。 它最終將包含有關咖啡館提供的咖啡和甜點的價格信息。 - -# --hints-- - -你應該有一個 `
                              ` 開始標籤。 - -```js -assert(code.match(/
                              /i)); -``` - -你應該有一個 `
                              ` 結束標籤。 - -```js -assert(code.match(/<\/main>/i)); -``` - -你不應該改變你的 `header` 元素。 確認你沒有刪除結束標籤。 - -```js -assert($('header').length === 1); -``` - -你的 `main` 元素應該在你的 `header` 元素之後。 - -```js -const main = document.querySelectorAll('main')[0]; -assert(main.previousElementSibling.tagName === 'HEADER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - ---fcc-editable-region-- -
                              -

                              CAMPER CAFE

                              -

                              Est. 2020

                              -
                              ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index 8d6d04de4fe..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Flexbox 是一種一維 CSS 佈局方法，側重於內容的流動。 它提供了控制容器在容器中的間隔和對齊方式的能力。 - -若要將元素設置爲使用 Flexbox 佈局，請將 `display` 屬性設置爲 `flex`。 這將使元素變成一個 flex 容器。 flex 容器內的直接子元素叫做 flex 項目。 - -創建 `.gallery` 選擇器並將其設置爲 flex 容器。 - -# --hints-- - -應該有一個 `.gallery` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); -``` - -`.gallery` 選擇器應該有一個值爲 `flex` 的 `display` 屬性。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
                              -

                              css flexbox photo gallery

                              -
                              -
                              - - - - - - - - - -
                              - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; -} - -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { - width: 100%; - max-width: 350px; - height: 300px; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index 0000ee5bd5c..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: 步驟 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -首先設置你的 HTML 結構。 添加一個 `` 聲明和一個 `html` 元素，其中 `lang` 屬性設置爲 `en`。 在 `html` 元素中，添加一個 `head` 元素和一個 `body` 元素。 - -# --hints-- - -代碼應包含 `DOCTYPE` 引用。 - -```js -assert(code.match(/` 關閉 `DOCTYPE` 聲明。 - -```js -assert(code.match(/html\s*>/gi)); -``` - -`DOCTYPE` 聲明應位於 HTML 的開頭。 - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -`html` 元素應該有一個 `lang` 屬性爲 `en` 的開始標籤。 - -```js -assert(code.match(//gi)); -``` - -`html` 元素應該有一個結束標籤。 - -```js -assert(code.match(/<\/html\s*>/)); -``` - -應該有一個 `head` 的開始標籤。 - -```js -assert(code.match(//i)); -``` - -應該有一個 `head` 的結束標籤。 - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -應該有一個 `body` 開始標籤。 - -```js -assert(code.match(//i)); -``` - -應該有一個 `body` 結束標籤。 - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -`head` 和 `body` 元素應該是兄弟元素。 - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -`head` 元素應該在 `html` 元素內。 - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -`body` 元素應該在 `html` 元素內。 - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md deleted file mode 100644 index 60427912616..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: 步驟 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -在你的 `head` 元素中，添加一個 `meta` 標籤，並將 `charset` 屬性設置爲 `utf-8`。 同時添加一個包含文本 `Picasso Painting` 的 `title` 元素。 - -# --hints-- - -應該只添加一個 `meta` 元素。 - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -`meta` 元素應該有一個 `charset` 屬性。 - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -`charset` 屬性應設置爲 `utf-8`。 - -```js -assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -``` - -應該只添加一個 `title` 元素。 - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -`title` 元素應該包含文本 `Picasso Painting`。 請注意拼寫和大小寫的問題。 - -```js -assert(document.querySelector('title')?.innerText === 'Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md deleted file mode 100644 index 182dcdb4a51..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: 步驟 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -FontAwesome 是一個 SVG 圖標庫，其中許多都可以免費使用。 你將在此項目中使用其中一些圖標，因此你需要將外部樣式錶鏈接到你的 HTML。 - -添加一個 `link` 元素，其中 `rel` 爲 `stylesheet`，`href` 爲 `https://use.fontawesome.com/releases/v5.8.2/css/all.css`。 - -# --hints-- - -你應該有兩個 `link` 元素。 - -```js -assert(document.querySelectorAll('link').length === 2); -``` - -`link` 元素應該具有 `stylesheet` 的 `rel`。 - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); -``` - -`link` 元素應該有一個 `href` 爲 `https://use.fontawesome.com/releases/v5.8.2/css/all.css`。 - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index 51a5534c3aa..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: 步驟 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -要開始繪畫，請爲你的 `body` 元素提供顏色爲 `rgb(184, 132, 46)` 的 `background-color`。 - -# --hints-- - -應該使用 `body` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -`body` 元素應將 `background-color` 屬性設置爲 `rgb (184, 132, 46)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index d5346cd98cf..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: 步驟 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -在你的 body 標籤中，添加一個 `div` 元素。 給它一個 `back-wall` 的 `id`。 - -# --hints-- - -應該準確添加 1 個 `div` 元素。 - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -`div` 元素應該具有 `back-wall` 的 `id` 值。 - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index 03f37afc802..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: 步驟 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -使用 id 選擇器爲 id `back-wall` 設置 `background-color` 爲 `#8B4513`。 - -# --hints-- - -應該使用 `#back-wall` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -`#back-wall` 選擇器應該有一個 `#8B4513` 的 `background-color`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index 8d6f9623f65..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: 步驟 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -給 `#back-wall` 元素一個 `100%` 的 `width` 和一個 `60%` 的 `height` 。 - -# --hints-- - -應該將 `#back-wall` 選擇器的 `width` 設置爲 `100%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -應該將 `#back-wall` 選擇器的 `height` 設置爲 `60%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index 5b7304777c8..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: 步驟 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -通常，HTML 以自上而下的方式呈現。 代碼頂部的元素位於頁面頂部。 但是，很多時候你可能希望將元素移動到不同的位置。 你可以使用 `position` 屬性來執行此操作。 - -將 `#back-wall` 元素的 `position` 屬性設置爲 `absolute`。 `absolute` 位置將元素從自上而下的文檔流中取出，並允許你相對於其容器調整它。 - -手動定位元素時，你可以使用 `top`、`left`、`right` 和 `bottom` 移動其佈局。 設置 `#back-wall` 的 `top` 值爲 `0`，`left` 值爲 `0`。 - - -# --hints-- - -`#back-wall` 選擇器應該將 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -`#back-wall` 選擇器應該將 `top` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -`#back-wall` 選擇器應該將 `left` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index f3561221562..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: 步驟 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -`z-index` 屬性用於爲你的 HTML 元素創建“層”。 如果你熟悉圖像編輯工具，你可能以前使用過圖層。 這是一個類似的概念。 - -`z-index` 值較高的元素會顯示在 `z-index` 值較低的元素之上。 這可以與上一課中的定位相結合，創造出獨特的效果。 - -由於 `back-wall` 元素需要出現在你將要創建的其他元素的“後面”，因此爲 `back-wall` 元素提供一個 `z-index` 爲 `-1` 的屬性。 - -# --hints-- - -`#back-wall` 選擇器應該將 `z-index` 屬性設置爲 `-1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index 46a0b3e5070..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: 步驟 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -在你的 `#back-wall` 元素的下方，創建一個 `div`，其包含 `class` 爲 `characters`。 這是你將創建繪畫角色的地方。 - -# --hints-- - -應該只添加一個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -新的 `div` 元素應該在 `#back-wall` 元素之後。 - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -新的 `div` 元素應該將 `class` 設置爲 `characters`。 - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index 4afdc8f91cc..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: 步驟 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -在該 `.characters` 元素中，創建另一個 `div`，其 `id` 爲 `offwhite-character`。 - -# --hints-- - -應該只創建一個額外的 `div` 元素。 - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -新的 `div` 元素應該嵌套在 `.characters` 元素中。 - -```js -assert(document.querySelector('.characters div')); -``` - -新的 `div` 元素應具有 `offwhite-character` 的 `id`。 - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index aded8e67234..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: 步驟 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -在 `offwhite-character` 元素內創建四個 `div` 元素。 按順序爲這些 `div` 元素提供以下 `id` 值：`white-hat`、`black-mask`、`gray-instrument`、`tan-table`。 - -# --hints-- - -應該在 `.offwhite-character` 元素中添加四個 `div` 元素。 - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -第一個新 `div` 元素應該具有 `white-hat` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -第二個新 `div` 元素應具有 `black-mask` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -第三個新 `div` 元素應該具有 `gray-instrument` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -第四個新 `div` 元素應該具有 `tan-table` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index c9cea83da21..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: 步驟 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -這個角色需要眼睛。 在 `#black-mask` 元素中創建兩個 `div` 元素。 按順序爲它們提供 `eyes left` 和 `eyes right` 類。 - -# --hints-- - -應該在 `#black-mask` 元素中創建 2 個 `div` 元素。 - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -第一個新 `div` 應該有 `eyes` 和 `left` 類。 - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -第二個新 `div` 應該有 `eyes` 和 `right` 類。 - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index 9a208e5fde3..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: 步驟 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -爲樂器創建一些“點”。 在你的 `#gray-instrument` 元素中添加五個 `div` 元素。 將每個的 `class` 設置爲 `black-dot`。 - -# --hints-- - -`#gray-instrument` 元素中應該有五個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -五個 `div` 元素都應該具有類 `black-dot`。 - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index 53c38788182..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: 步驟 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `offwhite-character` 的元素創建規則。 給它一個 `width` 爲 `300px`、一個 `height` 爲 `550px` 和一個 `background-color` 爲 `GhostWhite`。 - -# --hints-- - -應該使用 `#offwhite-character` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -`#offwhite-character` 應該有一個 `width` 屬性設置爲 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -`#offwhite-character` 應該有一個 `height` 屬性設置爲 `550px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -`#offwhite-character` 應該有一個 `background-color` 屬性設置爲 `GhostWhite`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index 05ec3a94553..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: 步驟 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -將 `#offwhite-character` 移至適當位置，爲此，給它一個 `absolute` 的 `position`，一個 `top` 值爲 `20%`，一個 `left` 值爲 `17.5%`。 - -# --hints-- - -`#offwhite-character` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -`#offwhite-character` 選擇器應該有一個 `top` 屬性設置爲 `20%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -`#offwhite-character` 選擇器應該有一個 `left` 屬性設置爲 `17.5%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index 79bd03ce662..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: 步驟 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -使用 id 選擇器，爲 id 爲 `white-hat` 的元素設置樣式。 給它一個 `width` 和 `height` 均爲 `0`，以及一個 `solid` 的 `border-style`。 - -# --hints-- - -應該使用 `#white-hat` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -`#white-hat` 選擇器應該將 `width` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -`#white-hat` 選擇器應該將 `height` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -`#white-hat` 選擇器應該有一個 `border-style` 屬性設置爲 `solid`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index b355c9b2c38..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: 步驟 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -這看起來不太對勁。 將 `border-width` 設置爲 `0 120px 140px 180px`，以便正確調整帽子的大小。 - -# --hints-- - -`#white-hat` 選擇器應該有一個 `border-width` 屬性設置爲 `0 120px 140px 180px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index 156637bfb82..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: 步驟 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -現在你有一個大盒子。 把它的 `border-top-color`、`border-right-color` 和 `border-left-color` 都設置爲 `transparent`。 將 `border-bottom-color` 設置爲 `GhostWhite`。 這會讓它看起來更像一頂帽子。 - -# --hints-- - -`#white-hat` 選擇器應該有一個 `border-top-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -`#white-hat` 選擇器應該有一個 `border-right-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -`#white-hat` 選擇器應該有一個 `border-left-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -`#white-hat` 選擇器應該有一個 `border-bottom-color` 屬性設置爲 `GhostWhite`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index e9ad59faddd..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: 步驟 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -給帽子一個 `position` 值爲 `absolute`、一個 `top` 值爲 `-140px` 和一個 `left` 值爲 `0`。 - -# --hints-- - -`#white-hat` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -`#white-hat` 選擇器應該有一個 `top` 屬性設置爲 `-140px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -`#white-hat` 選擇器應該有一個 `left` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index 19eb84f6f7d..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: 步驟 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `black-mask` 的元素創建規則。 給它一個 `100%` 的 `width`、一個 `50px` 的 `height`，和一個 `rgb(45, 31, 19)` 的 `background-color`。 - -# --hints-- - -應該有一個 `#black-mask` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -`#black-mask` 選擇器應該將 `width` 屬性設置爲 `100%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -`#black-mask` 選擇器應該將 `height` 屬性設置爲 `50px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -`#black-mask` 選擇器應該有一個 `background-color` 屬性設置爲 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index f3c40bd9613..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: 步驟 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -爲面罩提供 `position` 值爲 `absolute`，以及 `top` 和 `left` 的值均爲 `0`。 - -# --hints-- - -`#black-mask` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -`#black-mask` 選擇器應該有一個 `top` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -`#black-mask` 選擇器應該有一個 `left` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index cb3bcce83f1..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: 步驟 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -爲確保你可以看到面罩，請將 `z-index` 設置爲 `1`。 - -# --hints-- - -`#black-mask` 選擇器應該有一個 `z-index` 屬性設置爲 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index f3f5e3af7e6..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: 步驟 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -使用 id 選擇器，給 id 爲 `gray-instrument` 的元素一個 `width` 爲 `15%`，`height` 設置爲 `40%` 和 `background-color` 爲 `rgb(167, 162, 117)`。 - -# --hints-- - -應該有一個 `#gray-instrument` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -`#gray-instrument` 選擇器應該有一個 `width` 屬性設置爲 `15%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -`#gray-instrument` 選擇器應該將 `height` 屬性設置爲 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -`#gray-instrument` 選擇器應將 `background-color` 屬性設置爲 `rgb(167, 162, 117)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index fa364a4ed54..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: 步驟 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -現在移動它。將 `position` 設置爲 `absolute`、`top` 設置爲 `50px`，以及 `left` 設置爲 `125px`。 - -# --hints-- - -`#gray-instrument` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -`#gray-instrument` 選擇器應該將 `top` 值設置爲 `50px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -`#gray-instrument` 選擇器應將 `left` 值設置爲 `125px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index 0c6e8ab5ea6..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: 步驟 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -將 `z-index` 設置爲 `1`。 - -# --hints-- - -`#gray-instrument` 選擇器應將 `z-index` 屬性設置爲 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index 20442150702..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: 步驟 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -使用類選擇器爲具有 `black-dot` 類的元素創建規則。 將 `width` 設置爲 `10px`，`height` 設置爲 `10px`，`background-color` 設置爲 `rgb(45, 31, 19)`。 - -# --hints-- - -應該有一個 `.black-dot` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -`.black-dot` 選擇器應該有一個 `width` 屬性設置爲 `10px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -`.black-dot` 選擇器應該將 `height` 屬性設置爲 `10px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -`.black-dot` 選擇器應該有一個 `background-color` 屬性設置爲 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index a4998791a92..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: 步驟 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -這些點有點太方了。 給 `black-dot` 類一個 `border-radius` 爲 `50%` 來修復它。 - -# --hints-- - -`.black-dot` 選擇器應該將 `border-radius` 屬性設置爲 `50%`。 - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index 63b15ed063a..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: 步驟 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -將圓點移至適當位置，爲此，將 `display` 設置爲 `block`、將 `margin` 設置爲 `auto`，並將 `margin-top` 設置爲 `65%`。 - -# --hints-- - -`.black-dot` 選擇器應該有一個 `display` 屬性設置爲 `block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -`.black-dot` 選擇器應該有一個 `margin` 屬性設置爲 `auto`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -`.black-dot` 選擇器應該有一個 `margin-top` 屬性設置爲 `65%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index 54c8edd78ab..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: 步驟 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -使用 id 選擇器，爲 id 爲 `tan-table` 的元素設置樣式。 給它一個 `width` 值爲 `450px`、一個 `height` 值爲 `140px`，和一個 `background-color` 值爲 `#D2691E`。 - -# --hints-- - -應該有一個 `#tan-table` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -`#tan-table` 選擇器應該有一個 `width` 屬性設置爲 `450px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -`#tan-table` 選擇器應該將 `height` 屬性設置爲 `140px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -`#tan-table` 選擇器應該將 `background-color` 屬性設置爲 `#D2691E`。 - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index fa55136e0d4..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: 步驟 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -將表格移至適當位置，爲此，給它一個 `position` 值爲 `absolute`、一個 `top` 值爲 `275px`，和一個 `left` 值爲 `15px`。 - -# --hints-- - -`#tan-table` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -`#tan-table` 選擇器應該有一個 `top` 屬性設置爲 `275px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -`#tan-table` 選擇器應該有一個 `left` 屬性設置爲 `15px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index f674ea718cb..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: 步驟 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -給表格一個 `z-index` 爲 `1`。 - -# --hints-- - -`#tan-table` 選擇器應該有一個 `z-index` 屬性設置爲 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index a20432284cc..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: 步驟 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -在你的 `div#offwhite-character` 元素之後，添加一個 `div`，其 `id` 爲 `black-character`。 - -# --hints-- - -應該在 `.characters` 元素中添加一個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -新的 `div` 元素應該將 `id` 設置爲 `black-character`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index 6c2a0938af5..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: 步驟 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -在你的新的 `#black-character` 元素中，添加三個 `div` 元素，並按以下順序設置 `id` 值：`black-hat`、`gray-mask`、`white-paper`。 - -# --hints-- - -`#black-character` 元素中應該有三個 `div` 元素。 - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -第一個新 `div` 元素應該將 `id` 設置爲 `black-hat`。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -第二個新 `div` 元素應該將 `id` 設置爲 `gray-mask`。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -第三個新 `div` 元素應該將 `id` 設置爲 `white-paper`。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index 78f53d72c91..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: 步驟 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -面具需要眼睛。 在你的 `#gray-mask` 元素中，添加兩個 `div` 元素。 第一個應該將 `class` 設置爲 `eyes left`，第二個應該將 `class` 設置爲 `eyes right`。 - -# --hints-- - -`#gray-mask` 元素中應該有兩個 `div` 元素。 - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -第一個新 `div` 元素應該將 `class` 設置爲 `eyes left`。 - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -第二個新 `div` 元素應該將 `class` 設置爲 `eyes right`。 - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index ac0eca4cef6..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: 步驟 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -是時候使用一些 FontAwesome 圖標了。 - -`i` 元素用於習語文本，或與“正常”文本內容分開的文本。 這可能適用於_斜體_文本，例如科學術語，也可能適用於 FontAwesome 提供的圖標。 - -在你的 `#white-paper` 元素中，添加四個 `i` 元素。 給它們一個 `fas fa-music` 的 `class`。 - -這個特殊的類是 FontAwesome 如何確定要加載哪個圖標。 `fas` 表示圖標的類別（此處爲 FontAwesome Solid 字體），而 `fa-music` 選擇特定圖標。 - -# --hints-- - -你的 `#white-paper` 元素中應該有四個新的 `i` 元素。 - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -你的所有 `i` 元素都應將 `class` 設置爲 `fas fa-music`。 - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index 270d879dd43..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: 步驟 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `black-character` 的元素創建規則。 將 `width` 設置爲 `300px`，`height` 設置爲 `500px`，`background-color` 設置爲 `rgb(45, 31, 19)`。 - -# --hints-- - -你應該使用 `#black-character` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -你的 `#black-character` 選擇器應該有一個 `width` 屬性設置爲 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -你的 `#black-character` 選擇器應該有一個 `height` 屬性設置爲 `500px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -你的 `#black-character` 選擇器應該有一個 `background-color` 屬性設置爲 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index affcbcd30ee..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: 步驟 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -通過將 `position` 設置爲 `absolute`，`top` 設置爲 `30%`，`left` 設置爲 `59%`，將 `#black-character` 元素移動到位。 - -# --hints-- - -你的 `#black-character` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -你的 `#black-character` 選擇器應該有一個 `top` 屬性設置爲 `30%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -你的 `#black-character` 選擇器應該有一個 `left` 屬性設置爲 `59%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index ccf6e6c578c..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: 步驟 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `black-hat` 的元素創建規則。 給它一個 `width` 值爲 `0`、一個 `height` 值爲 `0`，和一個 `border-style` 值爲 `solid`。 - -# --hints-- - -你應該有一個 `#black-hat` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -你的 `#black-hat` 選擇器應該有一個 `width` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -你的 `#black-hat` 選擇器應該有一個 `height` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -你的 `#black-hat` 選擇器應該有一個 `border-style` 屬性設置爲 `solid`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index 441d5716993..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: 步驟 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -就像你的 `#white-hat` 一樣，你應該爲 `#black-hat` 元素設置邊框樣式。 給它添加值爲 `transparent` 的 `border-top-color`、`border-right-color` 和 `border-bottom-color`。 將 `border-left-color` 設置爲 `rgb(45, 31, 19)`。 - -# --hints-- - -你的 `#black-hat` 選擇器應該有一個 `border-top-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -你的 `#black-hat` 選擇器應該有一個 `border-right-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -你的 `#black-hat` 選擇器應該有一個 `border-bottom-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -你的 `#black-hat` 選擇器應該有一個 `border-left-color` 屬性設置爲 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index 07c5e27af8d..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: 步驟 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -現在定位 `#black-hat` 元素。 給它一個 `position` 爲 `absolute`，一個 `top` 爲 `-150px` 和一個 `left` 爲 `0`。 - -# --hints-- - -你的 `#black-hat` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -你的 `#black-hat` 選擇器應該有一個 `top` 屬性設置爲 `-150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -你的 `#black-hat` 選擇器應該有一個 `left` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index f9c03e172b9..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: 步驟 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -使用 id 選擇器，爲 id 爲 `gray-mask` 的元素設置樣式。 給它一個 `width` 爲 `150px`、一個 `height` 爲 `150px` 和一個 `background-color` 爲 `rgb(167, 162, 117)`。 - -# --hints-- - -你應該有一個 `#gray-mask` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -你的 `#gray-mask` 選擇器應該將 `width` 屬性設置爲 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -你的 `#gray-mask` 選擇器應該將 `height` 屬性設置爲 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -你的 `#gray-mask` 選擇器應將 `background-color` 屬性設置爲 `rgb(167, 162, 117)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index 4fe9d20306b..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: 步驟 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -通過將 `position` 設置爲 `absolute`、將 `top` 設置爲 `-10px`，以及將 `left` 設置爲 `70px`，來定位 `#gray-mask`。 - -# --hints-- - -你的 `#gray-mask` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -你的 `#gray-mask` 選擇器應該有一個 `top` 屬性設置爲 `-10px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -你的 `#gray-mask` 選擇器應該有一個 `left` 屬性設置爲 `70px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index 1e4a12eaf82..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: 步驟 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -使用 id 選擇器，爲 id 爲 `white-paper` 的元素創建規則。 將 `width` 設置爲 `400px`、`height` 設置爲 `100px`、`background-color` 設置爲 `GhostWhite`。 - -# --hints-- - -你應該有一個 `#white-paper` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -你的 `#white-paper` 選擇器應該將 `width` 屬性設置爲 `400px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -你的 `#white-paper` 選擇器應該將 `height` 屬性設置爲 `100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -你的 `#white-paper` 選擇器應該將 `background-color` 屬性設置爲 `GhostWhite`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index d2e32f82a8f..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: 步驟 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -給 `#white-paper` 一個 `position` 爲 `absolute`、一個 `top` 爲 `250px` 和一個 `left` 爲 `-150px`，將其移動到位。 - -# --hints-- - -你的 `#white-paper` 選擇器應該將 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -你的 `#white-paper` 選擇器應該有一個 `top` 屬性設置爲 `250px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -你的 `#white-paper` 選擇器應該有一個 `left` 屬性設置爲 `-150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index 732eeab5f50..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: 步驟 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -將 `#white-paper` 的 `z-index` 設置爲 `1`。 - -# --hints-- - -你的 `#white-paper` 選擇器應該將 `z-index` 屬性設置爲 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index 238cd3ce22d..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: 步驟 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -FontAwesome 圖標帶有自己的樣式來定義圖標。 但是，你仍然可以自己設置樣式，以更改顏色和大小等內容。 現在，使用類選擇器來選中具有 `fa-music` 類的圖標。 將 `display` 設置爲 `inline-block`，將 `margin-top` 設置爲 `8%`，並將 `margin-left` 設置爲 `13%`。 - -# --hints-- - -你應該有一個 `.fa-music` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -你的 `.fa-music` 選擇器應該有一個 `display` 屬性設置爲 `inline-block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -你的 `.fa-music` 選擇器應該有一個 `margin-top` 屬性設置爲 `8%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -你的 `.fa-music` 選擇器應該有一個 `margin-left` 屬性設置爲 `13%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index 0f50fa60d7b..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: 步驟 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -在你的 `#black-character` 元素下方，添加兩個新的 `div` 元素。 這些將是披肩。 給它們添加 `class` 爲 `blue`。 然後給第一個設置 `id` 爲 `blue-left`，給第二個設置 `id` 爲 `blue-right`。 - -# --hints-- - -你的 `.characters` 元素中應該有兩個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -你的兩個新 `div` 元素應該將 `class` 設置爲 `blue`。 - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -你的第一個新 `div` 應該具有 `blue-left` 的 `id`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -你的第二個新 `div` 應該具有 `blue-right` 的 `id`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index d790541f148..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: 步驟 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -使用類選擇器來定位具有 `blue` 類的新元素。 將 `background-color` 設置爲 `#1E90FF`。 - -# --hints-- - -你應該有一個 `.blue` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -你的 `.blue` 選擇器應該有一個 `background-color` 屬性設置爲 `#1E90FF`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index 379d44c0fb2..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: 步驟 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -使用 id 選擇器選中 id 爲 `blue-left` 的元素。 給它一個 `width` 爲 `500px` 和一個 `height` 爲 `300px`。 - -# --hints-- - -你應該有一個 `#blue-left` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -你的 `#blue-left` 選擇器應該有一個 `width` 屬性設置爲 `500px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -你的 `#blue-left` 選擇器應該有一個 `height` 屬性設置爲 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index 62733f01504..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: 步驟 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -現在將 `position` 設置爲 `absolute`，將 `top` 設置爲 `20%`，將 `left` 設置爲 `20%`。 - -# --hints-- - -你的 `#blue-left` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -你的 `#blue-left` 選擇器應該有一個 `top` 屬性設置爲 `20%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -你的 `#blue-left` 選擇器應該有一個 `left` 屬性設置爲 `20%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index 9673d3bd87a..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: 步驟 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -接着，使用 id 選擇器選中 id 爲 `blue-right` 的元素。 將 `width` 設置爲 `400px`，將 `height` 設置爲 `300px`。 - -# --hints-- - -你應該有一個 `#blue-right` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -你的 `#blue-right` 選擇器應該有一個 `width` 屬性設置爲 `400px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -你的 `#blue-right` 選擇器應該有一個 `height` 屬性設置爲 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index 9a2abdf5474..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: 步驟 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -爲 `#blue-right` 提供正確的定位，將 `position` 設置爲 `absolute`，`top` 設置爲 `50%`，`left` 設置爲 `40%`。 - -# --hints-- - -你的 `#blue-right` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -你的 `#blue-right` 選擇器應該有一個 `top` 屬性設置爲 `50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -你的 `#blue-right` 選擇器應該有一個 `left` 屬性設置爲 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index 2d7ce80f60c..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: 步驟 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -在你的 `.blue` 元素下方，添加另一個 `div`。 將它的 `id` 值設置爲 `orange-character`。 - -# --hints-- - -你的 `.characters` 元素中應該有一個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -你的新 `div` 元素應將 `id` 設置爲 `orange-character`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index ad92fbfca59..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: 步驟 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -在該 `#orange-character` 元素中，添加四個 `div` 元素。 按順序給它們 `id` 值爲 `black-round-hat`、`eyes-div`、`triangles` 和 `guitar`。 - -# --hints-- - -你的 `#orange-character` 元素中應該有四個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -你的第一個新 `div` 元素應該將 `id` 設置爲 `black-round-hat`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -你的第二個新 `div` 元素應該將 `id` 設置爲 `eyes-div`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -你的第三個新 `div` 元素應該將 `id` 設置爲 `triangles`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -你的第四個新 `div` 元素應該將 `id` 設置爲 `guitar`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index 93ba42220d6..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: 步驟 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -`#eyes-div` 元素應該有一些眼睛。 在裏面添加兩個 `div` 元素。 給第一個添加 `eyes left` 的 `class`，給第二個添加 `eyes right` 的 `class`。 - -# --hints-- - -你應該有兩個 `div` 元素嵌套在 `#eyes-div` 中。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -第一個新的 `div` 應該有 `class` 設置爲 `eyes left`。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -第二個新的 `div` 應該有 `class` 設置爲 `eyes right`。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index b712063f48d..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: 步驟 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -在 `#triangles` div 中，你需要添加將成爲三角形的元素。 創建三十個 `div` 元素，併爲每個元素賦予 `triangle` 類。 - -# --hints-- - -你的 `#triangles` 元素中應該有 30 個 `div` 元素。 - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -所有 30 個新的 `div` 元素都應有 `class` 爲 `triangle`。 - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index a897d7e96bf..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: 步驟 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -在 `#guitar` 元素中，創建三個 `div` 元素。 給前兩個添加 `guitar` 的 `class`。 然後給第一個添加 `id` 值爲 `guitar-left`，給第二個添加 `id` 值爲 `guitar-right`。 給第三個 `div` 添加 `id` 值爲 `guitar-neck`。 - -第三個 `div` 不應該有 `guitar` 類。 - -# --hints-- - -你的 `#guitar` 元素中應該有三個新的 `div` 元素。 - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -你的第一個新 `div` 應該有一個 `class` 設置爲 `guitar`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -你的第一個新 `div` 應該將 `id` 設置爲 `guitar-left`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -你的第二個新 `div` 應該有一個 `class` 設置爲 `guitar`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -你的第二個新 `div` 應該將 `id` 設置爲 `guitar-right`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -你的第三個新 `div` 應該將 `id` 設置爲 `guitar-neck`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -你不應該給第三個新 `div` 一個 `guitar` 的 `class`。 - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index f949d4be5d7..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: 步驟 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -爲你的 `.guitar` 使用另一個 FontAwesome 圖標。 在 `#guitar-left` 和 `#guitar-right` 元素中，添加一個 `i` 元素，並給它一個 `class` 爲 `fas fa-bars`。 - -# --hints-- - -在你的 `#guitar-left` 元素中，你應該添加一個 `i` 元素。 - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -在你的 `#guitar-right` 元素中，你應該添加一個 `i` 元素。 - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -你的兩個新 `i` 元素應該有 `class` 爲 `fas fa-bars`。 - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - --fcc-editable-region-- -
                              - -
                              -
                              - -
                              - --fcc-editable-region-- -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index 29e9be59cfe..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: 步驟 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -使用 id 選擇器選擇你的 `orange-character` 元素。 給它一個 `width` 爲 `250px`、一個 `height` 爲 `550px` 和一個 `background-color` 爲 `rgb(240, 78, 42)`。 - -# --hints-- - -你應該有一個 `#orange-character` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -你的 `#orange-character` 選擇器應該有一個 `width` 屬性設置爲 `250px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -你的 `#orange-character` 選擇器應該將 `height` 屬性設置爲 `550px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -你的 `#orange-character` 選擇器應該有一個 `background-color` 屬性設置爲 `rgb(240, 78, 42)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index 8a0566e192b..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: 步驟 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -給 `#orange-character` 設置 `position` 爲 `absolute`，`top` 爲 `25%`，以及 `left` 爲 `40%`。 - -# --hints-- - -你的 `#orange-character` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -你的 `#orange-character` 選擇器應該有一個 `top` 屬性設置爲 `25%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -你的 `#orange-character` 選擇器應該有一個 `left` 屬性設置爲 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index e85031fd377..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: 步驟 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `black-round-hat` 的元素設置樣式。 將`width`設置爲`180px`，`height`設置爲`150px`，`background-color` 設置爲 `rgb(45, 31, 19)`。 - -# --hints-- - -你應該有一個 `#black-round-hat` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -你的 `#black-round-hat` 選擇器應該有一個 `width` 屬性設置爲 `180px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -你的 `#black-round-hat` 選擇器應該有一個 `height` 屬性設置爲 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -你的 `#black-round-hat` 選擇器應該有一個 `background-color` 屬性設置爲 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index cd661f6dc06..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: 步驟 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -`#black-round-hat` 元素應該是圓形的。 給它一個 `50%` 的 `border-radius` 來解決這個問題。 - -# --hints-- - -你的 `#black-round-hat` 選擇器應該有一個 `border-radius` 屬性設置爲 `50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index be2424a3021..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: 步驟 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -移動 `#black-round-hat` 元素，使它的 `position` 爲 `absolute`，`top` 爲 `-100px`，以及 `left` 爲 `5px`。 - -# --hints-- - -你的 `#black-round-hat` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -你的 `#black-round-hat` 選擇器應該有一個 `top` 屬性設置爲 `-100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -你的 `#black-round-hat` 選擇器應該有一個 `left` 屬性設置爲 `5px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index 1bc8fe19a11..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: 步驟 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -將 `#black-round-hat` 元素放在正確的一層上，`z-index` 爲 `-1`。 - -# --hints-- - -你的 `#black-round-hat` 選擇器應該有一個 `z-index` 屬性設置爲 `-1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index ade9fe4838f..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: 步驟 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -使用 id 選擇器爲 id 爲 `eyes-div` 的元素創建規則。 將 `width` 設置爲 `180px`，並將 `height` 設置爲 `50px`。 - -# --hints-- - -你應該創建一個 `#eyes-div` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -你的 `#eyes-div` 選擇器應該有一個 `width` 屬性設置爲 `180px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -你的 `#eyes-div` 選擇器應該將 `height` 屬性設置爲 `50px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index db9b950cd8f..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: 步驟 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -現在將 `#eyes-div` 元素移動到位，將 `position` 設置爲 `absolute`，`top` 設置爲 `-40px`，並且 `left` 設置爲 `20px`。 - -# --hints-- - -你的 `#eyes-div` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -你的 `#eyes-div` 選擇器應該有一個 `top` 屬性設置爲 `-40px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -你的 `#eyes-div` 選擇器應該有一個 `left` 屬性設置爲 `20px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index c969146d401..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: 步驟 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -將 `#eyes-div` 的 `z-index` 值設置爲 `3`。 - -# --hints-- - -你的 `#eyes-div` 選擇器應該有一個 `z-index` 屬性設置爲 `3`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index 81bc7daee60..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: 步驟 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -現在使用 class 選擇器來定位 `guitar`。 這將爲吉他的兩個“半部分”設置樣式。 將 `width` 設置爲 `150px`，`height` 設置爲 `120px`，`background-color` 設置爲 `Goldenrod`，`border-radius` 設置爲 `50%`。 - -# --hints-- - -你應該創建一個 `.guitar` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -你的 `.guitar` 選擇器應該有一個 `width` 屬性設置爲 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -你的 `.guitar` 選擇器應該有一個 `height` 屬性設置爲 `120px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -你的 `.guitar` 選擇器應該有一個 `background-color` 屬性設置爲 `Goldenrod`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -你的 `.guitar` 選擇器應該有一個 `border-radius` 屬性設置爲 `50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index 665734674f5..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: 步驟 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -選擇值爲 `guitar-left` 的 `id`，將 `position` 設置爲 `absolute`，`left` 設置爲 `0px`。 - -# --hints-- - -你應該創建一個新的 `#guitar-left` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -你的 `#guitar-left` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index 97d7d75952a..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: 步驟 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -選擇值爲 `guitar-right` 的 `id`，將 `position` 設置爲 `absolute`。 這一次，將 `left` 設置爲 `100px`。 - -# --hints-- - -你應該創建一個新的 `#guitar-right` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -你的 `#guitar-right` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -你的 `#guitar-right` 選擇器應該有一個 `left` 屬性設置爲 `100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index d2883da6184..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: 步驟 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -現在你需要將條形圖標移動到位。 爲 `fa-bars` 類創建一個類選擇器。 將 `display` 設置爲 `block`，`margin-top` 設置爲 `30%`，`margin-left` 設置爲 `40%`。 - -# --hints-- - -您應該創建一個 `.fa-bars` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -你的 `.fa-bars` 選擇器應該有一個 `display` 屬性設置爲 `block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -你的 `.fa-bars` 選擇器應該有一個 `margin-top` 屬性設置爲 `30%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -你的 `.fa-bars` 選擇器應該有一個 `margin-left` 屬性設置爲 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index 7d637ae5967..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: 步驟 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -使用 id 選擇器爲 id `guitar-neck` 創建規則。 將 `width` 設置爲 `200px`，`height` 設置爲 `30px`，`background-color` 設置爲 `#D2691E`。 - -# --hints-- - -你應該創建一個 `#guitar-neck` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -你的 `#guitar-neck` 選擇器應該有一個 `width` 屬性設置爲 `200px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -你的 `#guitar-neck` 選擇器應該有一個 `height` 屬性設置爲 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -你的 `#guitar-neck` 選擇器應該有一個 `background-color` 屬性設置爲 `#D2691E`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index d8d1a7d850a..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: 步驟 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -現在移動 `#guitar-neck` 元素，`position` 爲 `absolute`，`top` 值爲 `45px`，以及 `left` 值爲 `200px`。 - -# --hints-- - -你的 `#guitar-neck` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -你的 `#guitar-neck` 選擇器應該有一個 `top` 屬性設置爲 `45px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -你的 `#guitar-neck` 選擇器應該有一個 `left` 屬性設置爲 `200px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index 4c0d4fa4bb1..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: 步驟 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -給 `#guitar-neck` 元素一個 `z-index` 值爲 `3`。 - -# --hints-- - -你的 `#guitar-neck` 選擇器應該有一個 `z-index` 屬性設置爲 `3`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index 6ca75938135..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: 步驟 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -是時候用 `eyes` 類設置元素的樣式了。 使用類選擇器將 `width` 設置爲 `35px`，`height` 設置爲 `20px`，`background-color` 設置爲 `#8B4513`，`border-radius` 設置爲 `20px 50%`。 - -# --hints-- - -你應該創建一個 `.eyes` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -你的 `.eyes` 選擇器應該有一個 `width` 屬性設置爲 `35px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -你的 `.eyes` 選擇器應該有一個 `height` 屬性設置爲 `20px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -你的 `.eyes` 選擇器應該有一個 `background-color` 屬性設置爲 `#8B4513`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -你的 `.eyes` 選擇器應該有一個 `border-radius` 屬性設置爲 `20px 50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index 837580da5cf..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: 步驟 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -以 `right` 值定位 `class`，並將 `position` 設置爲 `absolute`，`top` 設置爲`15px`，`right` 設置爲 `30px`。 - -# --hints-- - -你應該創建一個 `.right` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -你的 `.right` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -你的 `.right` 選擇器應該有一個 `top` 屬性設置爲 `15px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -你的 `.right` 選擇器應該有一個 `right` 屬性設置爲 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index e633052c867..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: 步驟 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -對於值爲 `left` 的 `class`，創建選擇器並將 `position` 設置爲 `absolute`，`top` 設置爲 `15px`，`left` 設置爲 `30px`。 - -# --hints-- - -你應該創建一個新的 `.left` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -你的 `.left` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -你的 `.left` 選擇器應該有一個 `top` 屬性設置爲 `15px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -你的 `.left` 選擇器應該有一個 `left` 屬性設置爲 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index c9dde71e4fe..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: 步驟 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -最後一個步驟。 FontAwesome 圖標有點太小了。 使用 `fas` 類選擇器定位它們，並將 `font-size` 設置爲 `30px`。 - -這樣，你的畢加索畫就完成了！ - -# --hints-- - -你應該創建一個 `.fas` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -你的 `.fas` 選擇器應該有一個 `font-size` 屬性設置爲 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index 90e7e03a78f..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: 步驟 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -鏈接你的 CSS 文件，即使你還沒有編寫任何 CSS。 - -添加一個 `link` 元素，其中 `rel` 值爲 `stylesheet`，`href` 值爲 `styles.css`。 - -# --hints-- - - -你的代碼應該有一個 `link` 元素。 - -```js -assert.match(code, / link')); -``` - -你的 `link` 元素應該有一個 `rel` 屬性，其值爲 `stylesheet`。 - -```js -const link_element = document.querySelector('link'); -const rel = link_element.getAttribute("rel"); -assert.equal(rel, "stylesheet"); -``` - -你的 `link` 元素應該有一個 `href` 屬性，其值爲 `styles.css`。 - -```js -const link = document.querySelector('link'); -assert.equal(link.dataset.href, "styles.css"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index 6b4d6f86f4b..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: 步驟 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -調整 `.triangle` 元素的佈局，設置 `display` 爲 `inline-block`。 - -# --hints-- - -你的 `.triangle` 選擇器應該有一個 `display` 屬性設置爲 `inline-block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index d492bbd24e7..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: 步驟 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -給你的 `.triangle` 元素正確的顏色。 將 `border-top-color`、`border-bottom-color` 和 `border-left-color` 設置爲 `transparent`。 將 `border-right-color` 設置爲 `Gold`。 - -# --hints-- - -你的 `.triangle` 選擇器應該有一個 `border-top-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -你的 `.triangle` 選擇器應該有一個 `border-bottom-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -你的 `.triangle` 選擇器應該有一個 `border-left-color` 屬性設置爲 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -你的 `.triangle` 選擇器應該有一個 `border-right-color` 屬性設置爲 `Gold`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index e0129d1fdeb..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: 步驟 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -爲你的 `.triangle` 元素的邊框設置樣式。 將 `border-style` 設置爲 `solid`，`border-width` 設置爲 `42px 45px 45px 0`。 - -# --hints-- - -你的 `.triangle` 選擇器應該有一個 `border-style` 屬性設置爲 `solid`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -你的 `.triangle` 選擇器應該有一個 `border-width` 屬性設置爲 `42px 45px 45px 0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index 7c70f066962..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: 步驟 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -爲具有 `triangle` 類的元素創建一個類選擇器。 將 `width` 設置爲 `0`，`height` 設置爲 `0`。 - -# --hints-- - -你應該創建一個 `.triangle` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -你的 `.triangle` 選擇器應該有一個 `width` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -你的 `.triangle` 選擇器應該有一個 `height` 屬性設置爲 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index 3072a879505..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: 步驟 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -使用 id 選擇器選中 id 爲 `triangles` 的元素。 將 `width` 設置爲 `250px`，`height` 設置爲 `550px`。 - -# --hints-- - -你應該添加一個 `#triangles` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -你的 `#triangles` 選擇器應該有一個 `width` 屬性設置爲 `250px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -你的 `#triangles` 選擇器應該將 `height` 屬性設置爲 `550px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index d6111da82ac..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: 步驟 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -現在爲 `guitar` 使用 id 選擇器。 將 `width` 設置爲 `100%`，`height` 設置爲 `100px`。 - -# --hints-- - -你應該創建一個 `#guitar` 選擇器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -你的 `#guitar` 選擇器應該有一個 `width` 屬性設置爲 `100%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -你的 `#guitar` 選擇器應該有一個 `height` 屬性設置爲 `100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index fb463092edd..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: 步驟 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -在同一個 `#guitar` 選擇器中，將 `position` 設置爲 `absolute`，`top` 設置爲 `120px`，`left` 設置爲 `0px`。 - -# --hints-- - -你的 `#guitar` 選擇器應該有一個 `position` 屬性設置爲 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -你的 `#guitar` 選擇器應該有一個 `top` 屬性設置爲 `120px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -你的 `#guitar` 選擇器應該有一個 `left` 屬性設置爲 `0px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index 3f70c1409ef..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: 步驟 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -爲 `#guitar` 規則添加 `z-index` 爲 `3`。 - -# --hints-- - -你的 `#guitar` 選擇器應該有一個 `z-index` 屬性設置爲 `3`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - -
                              -
                              - -
                              -
                              -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index b58fe99b637..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: 步驟 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -將 `#black-hat` 的 `border-width` 設置爲 `150px 0 0 300px`。 - -# --hints-- - -你的 `#black-hat` 選擇器應該有一個 `border-width` 屬性設置爲 `150px 0 0 300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              -
                              - - - - -
                              -
                              -
                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md deleted file mode 100644 index 5e08c7fa65e..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f5c1cb7575c7551ed8a40 -title: 步驟 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -數字 `230` 的較大字體導致其溢出。 將 `.calories-info h1` 的 `overflow` 屬性設置爲 `hidden` 以避免這種情況。 - -# --hints-- - -`.calories-info h1` 選擇器應該有一個 `overflow` 屬性設置爲 `hidden`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                              -
                              -

                              Nutrition Facts

                              -
                              -

                              8 servings per container

                              -

                              Serving size 2/3 cup (55g)

                              -
                              -
                              -
                              -

                              Amount per serving

                              -

                              Calories 230

                              -
                              -
                              - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- -.calories-info h1 { - margin: -5px -2px; -} ---fcc-editable-region-- - -.calories-info span { - font-size: 1.2em; -} -``` diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md deleted file mode 100644 index 0954cf89590..00000000000 --- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f6a7d4ba8037bc086c2c7 -title: 步驟 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -給 `.divider` 選擇器一個 `clear` 屬性設置爲 `right`。 這將清除 `float` 屬性，將分隔線和任何後續內容推到 `float` 文本下方。 - -# --hints-- - -`.divider` 選擇器應該有一個 `clear` 屬性設置爲 `right`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                              -
                              -

                              Nutrition Facts

                              -
                              -

                              8 servings per container

                              -

                              Serving size 2/3 cup (55g)

                              -
                              -
                              -
                              -

                              Amount per serving

                              -

                              Calories 230

                              -
                              -
                              -
                              -

                              % Daily Value *

                              -
                              -
                              -
                              - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - ---fcc-editable-region-- -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} ---fcc-editable-region-- - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md deleted file mode 100644 index 6fbd60146d1..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 56533eb9ac21ba0edf2244e2 -title: 構建一個凱撒密碼 -challengeType: 5 -forumTopicId: 16003 -dashedName: build-a-caesars-cipher ---- - -# --description-- - -凱撒密碼（ Caesar cipher）是最簡單且最廣爲人知的密碼（ciphers），也被稱爲移位密碼（shift cipher）。 在移位密碼中，明文中的字母通過按照一個固定數目進行偏移後被替換成新的字母。 - -現代最常被應用到的一個變種就是 ROT13 加密，也就是明文中的字母向後移 13 位。 也就是， `A ↔ N`，`B ↔ O` 等等。 - -編寫一個函數，它將把使用 ROT13 加密編碼的字符串作爲輸入並返回解碼字符串。 - -所有解碼後的字母都必須爲字母大寫。 請不要解碼非字母的字符（例如，空格、標點符號），但你需要在結果中保留它們。 - -# --hints-- - -`rot13("SERR PBQR PNZC")` 應解碼爲 `FREE CODE CAMP` - -```js -assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); -``` - -`rot13("SERR CVMMN!")` 應解碼爲 `FREE PIZZA!` - -```js -assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); -``` - -`rot13("SERR YBIR?")` 應解碼爲 `FREE LOVE?` - -```js -assert(rot13('SERR YBIR?') === 'FREE LOVE?'); -``` - -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` 應解碼爲 `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` - -```js -assert( - rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === - 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function rot13(str) { - return str; -} - -rot13("SERR PBQR PNZC"); -``` - -# --solutions-- - -```js -var lookup = { - 'A': 'N','B': 'O','C': 'P','D': 'Q', - 'E': 'R','F': 'S','G': 'T','H': 'U', - 'I': 'V','J': 'W','K': 'X','L': 'Y', - 'M': 'Z','N': 'A','O': 'B','P': 'C', - 'Q': 'D','R': 'E','S': 'F','T': 'G', - 'U': 'H','V': 'I','W': 'J','X': 'K', - 'Y': 'L','Z': 'M' -}; - -function rot13(encodedStr) { - var codeArr = encodedStr.split(""); // String to Array - var decodedArr = []; // Your Result goes here - // Only change code below this line - - decodedArr = codeArr.map(function(letter) { - if(lookup.hasOwnProperty(letter)) { - letter = lookup[letter]; - } - return letter; - }); - - // Only change code above this line - return decodedArr.join(""); // Array to String -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md deleted file mode 100644 index 46cc235a37c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: aa2e6f85cab2ab736c9a9b24 -title: 構建一個收銀機 -challengeType: 5 -forumTopicId: 16012 -dashedName: build-a-cash-register ---- - -# --description-- - -設計一個收銀機抽屜函數 `checkCashRegister()`，它接受購買價格作爲第一個參數（`price`），付款作爲第二個參數（`cash`），和抽屜的現金（`cid`）作爲第三個參數。 - -`cid` 是包含貨幣面值的二維數組。 - -函數 `checkCashRegister()` 應返回含有 `status` 屬性和 `change` 屬性的對象。 - -如果收銀機內的金額少於應找回的零錢數，或者你無法返回確切的數目時，返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 - -如果收銀機內的金額恰好等於應找回的零錢數，返回 `{status: "CLOSED", change: [...]}`，其中 `change` 的屬性值就是收銀機內的金額。 - -否則，返回 `{status: "OPEN", change: [...]}`，其中 `change` 鍵值是應找回的零錢數，並將找零的面值由高到低排序。 - -
                              貨幣單位面值
                              Penny0.01 美元（PENNY）
                              Nickel0.05 美元（NICKEL）
                              Dime0.1 美元（DIME）
                              Quarter0.25 美元（QUARTER）
                              Dollar1 美元（ONE）
                              Five Dollars5 美元（FIVE）
                              Ten Dollars10 美元（TEN）
                              Twenty Dollars20 美元（TWENTY）
                              One-hundred Dollars100 美元（ONE HUNDRED）
                              - -下面的抽屜裏現金數組示例： - -```js -[ - ["PENNY", 1.01], - ["NICKEL", 2.05], - ["DIME", 3.1], - ["QUARTER", 4.25], - ["ONE", 90], - ["FIVE", 55], - ["TEN", 20], - ["TWENTY", 60], - ["ONE HUNDRED", 100] -] -``` - -# --hints-- - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 應返回一個對象。 - -```js -assert.deepEqual( - Object.prototype.toString.call( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]) - ), - '[object Object]' -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 應返回 `{status: "OPEN", change: [["QUARTER", 0.5]]}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { status: 'OPEN', change: [['QUARTER', 0.5]] } -); -``` - -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 應返回 `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`。 - -```js -assert.deepEqual( - checkCashRegister(3.26, 100, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { - status: 'OPEN', - change: [ - ['TWENTY', 60], - ['TEN', 20], - ['FIVE', 15], - ['ONE', 1], - ['QUARTER', 0.5], - ['DIME', 0.2], - ['PENNY', 0.04] - ] - } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 應返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 應返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 1], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 應返回 `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { - status: 'CLOSED', - change: [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ] - } -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function checkCashRegister(price, cash, cid) { - let change; - return change; -} - -checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); -``` - -# --solutions-- - -```js -const denom = [ - { name: "ONE HUNDRED", val: 100 }, - { name: "TWENTY", val: 20 }, - { name: "TEN", val: 10 }, - { name: "FIVE", val: 5 }, - { name: "ONE", val: 1 }, - { name: "QUARTER", val: 0.25 }, - { name: "DIME", val: 0.1 }, - { name: "NICKEL", val: 0.05 }, - { name: "PENNY", val: 0.01 }, -]; - -function checkCashRegister(price, cash, cid) { - const output = { status: null, change: [] }; - let change = cash - price; - const register = cid.reduce( - function (acc, curr) { - acc.total += curr[1]; - acc[curr[0]] = curr[1]; - return acc; - }, - { total: 0 } - ); - if (register.total === change) { - output.status = "CLOSED"; - output.change = cid; - return output; - } - if (register.total < change) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - const change_arr = denom.reduce(function (acc, curr) { - let value = 0; - while (register[curr.name] > 0 && change >= curr.val) { - change -= curr.val; - register[curr.name] -= curr.val; - value += curr.val; - change = Math.round(change * 100) / 100; - } - if (value > 0) { - acc.push([curr.name, value]); - } - return acc; - }, []); - if (change_arr.length < 1 || change > 0) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - output.status = "OPEN"; - output.change = change_arr; - return output; -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md deleted file mode 100644 index 8e183f9478e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: aaa48de84e1ecc7c742e1124 -title: 構建一個迴文檢測器 -challengeType: 5 -forumTopicId: 16004 -dashedName: build-a-palindrome-checker ---- - -# --description-- - -如果傳入的字符串是迴文字符串，則返回 `true`。 否則，返回 `false` 。 - -迴文（palindrome），指在忽略標點符號、大小寫和空格的前提下，正着讀和反着讀一模一樣。 - -**注意：** 檢查迴文時，你需要先去除 **所有非字母數字的字符**（標點、空格和符號），並將所有字母都轉換成大寫或都轉換成小寫。 - -我們會傳入具有不同格式的字符串，如 `racecar`、`RaceCar` 和 `race CAR` 等等。 - -我們也會傳入一些包含特殊符號的字符串，例如 `2A3*3a2`、`2A3 3a2`、`2_A3*3#A2`。 - -# --hints-- - -`palindrome("eye")` 應返回一個布爾值。 - -```js -assert(typeof palindrome('eye') === 'boolean'); -``` - -`palindrome("eye")` 應返回 `true`。 - -```js -assert(palindrome('eye') === true); -``` - -`palindrome("_eye")` 應返回 `true`。 - -```js -assert(palindrome('_eye') === true); -``` - -`palindrome("race car")` 應返回 `true`。 - -```js -assert(palindrome('race car') === true); -``` - -`palindrome("not a palindrome")` 應返回 `false`。 - -```js -assert(palindrome('not a palindrome') === false); -``` - -`palindrome("A man, a plan, a canal. Panama")` 應返回 `true`。 - -```js -assert(palindrome('A man, a plan, a canal. Panama') === true); -``` - -`palindrome("never odd or even")` 應返回 `true`。 - -```js -assert(palindrome('never odd or even') === true); -``` - -`palindrome("nope")` 應返回 `false`。 - -```js -assert(palindrome('nope') === false); -``` - -`palindrome("almostomla")` 應返回 `false`。 - -```js -assert(palindrome('almostomla') === false); -``` - -`palindrome("My age is 0, 0 si ega ym.")` 應返回 `true`。 - -```js -assert(palindrome('My age is 0, 0 si ega ym.') === true); -``` - -`palindrome("1 eye for of 1 eye.")` 應返回 `false`。 - -```js -assert(palindrome('1 eye for of 1 eye.') === false); -``` - -`palindrome("0_0 (: /-\ :) 0-0")` 應返回 `true`。 - -```js -assert(palindrome('0_0 (: /- :) 0-0') === true); -``` - -`palindrome("five|\_/|four")` 應返回 `false`。 - -```js -assert(palindrome('five|_/|four') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function palindrome(str) { - return true; -} - -palindrome("eye"); -``` - -# --solutions-- - -```js -function palindrome(str) { - var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); - var aux = string.split(''); - if (aux.join('') === aux.reverse().join('')){ - return true; - } - - return false; -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md deleted file mode 100644 index 801e90b5260..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: a7f4d8f2483413a6ce226cac -title: 構建羅馬數字轉換器 -challengeType: 5 -forumTopicId: 16044 -dashedName: build-a-roman-numeral-converter ---- - -# --description-- - -把傳入的數字轉爲羅馬數字。 - -| 羅馬數字 | 阿拉伯數字 | -| ---- | ----- | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| C | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -所有羅馬數字答案都應該大寫。 - -# --hints-- - -`convertToRoman(2)` 應該返回字符串 `II`。 - -```js -assert.deepEqual(convertToRoman(2), 'II'); -``` - -`convertToRoman(3)` 應該返回字符串 `III`。 - -```js -assert.deepEqual(convertToRoman(3), 'III'); -``` - -`convertToRoman(4)` 應該返回字符串 `IV`。 - -```js -assert.deepEqual(convertToRoman(4), 'IV'); -``` - -`convertToRoman(5)` 應該返回字符串 `V`。 - -```js -assert.deepEqual(convertToRoman(5), 'V'); -``` - -`convertToRoman(9)` 應該返回字符串 `IX`。 - -```js -assert.deepEqual(convertToRoman(9), 'IX'); -``` - -`convertToRoman(12)` 應該返回字符串 `XII`。 - -```js -assert.deepEqual(convertToRoman(12), 'XII'); -``` - -`convertToRoman(16)` 應該返回字符串 `XVI`。 - -```js -assert.deepEqual(convertToRoman(16), 'XVI'); -``` - -`convertToRoman(29)` 應該返回字符串 `XXIX`。 - -```js -assert.deepEqual(convertToRoman(29), 'XXIX'); -``` - -`convertToRoman(44)` 應該返回字符串 `XLIV`. - -```js -assert.deepEqual(convertToRoman(44), 'XLIV'); -``` - -`convertToRoman(45)` 應該返回字符串 `XLV`。 - -```js -assert.deepEqual(convertToRoman(45), 'XLV'); -``` - -`convertToRoman(68)` 應該返回字符串 `LXVIII` - -```js -assert.deepEqual(convertToRoman(68), 'LXVIII'); -``` - -`convertToRoman(83)` 應該返回字符串 `LXXXIII` - -```js -assert.deepEqual(convertToRoman(83), 'LXXXIII'); -``` - -`convertToRoman(97)` 應該返回字符串 `XCVII` - -```js -assert.deepEqual(convertToRoman(97), 'XCVII'); -``` - -`convertToRoman(99)` 應該返回字符串 `XCIX` - -```js -assert.deepEqual(convertToRoman(99), 'XCIX'); -``` - -`convertToRoman(400)` 應該返回字符串 `CD` - -```js -assert.deepEqual(convertToRoman(400), 'CD'); -``` - -`convertToRoman(500)` 應該返回字符串 `D` - -```js -assert.deepEqual(convertToRoman(500), 'D'); -``` - -`convertToRoman(501)` 應該返回字符串 `DI` - -```js -assert.deepEqual(convertToRoman(501), 'DI'); -``` - -`convertToRoman(649)` 應該返回字符串 `DCXLIX` - -```js -assert.deepEqual(convertToRoman(649), 'DCXLIX'); -``` - -`convertToRoman(798)` 應該返回字符串 `DCCXCVIII` - -```js -assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); -``` - -`convertToRoman(891)` 應該返回字符串 `DCCCXCI` - -```js -assert.deepEqual(convertToRoman(891), 'DCCCXCI'); -``` - -`convertToRoman(1000)` 應該返回字符串 `M` - -```js -assert.deepEqual(convertToRoman(1000), 'M'); -``` - -`convertToRoman(1004)` 應該返回字符串 `MIV` - -```js -assert.deepEqual(convertToRoman(1004), 'MIV'); -``` - -`convertToRoman(1006)` 應該返回字符串 `MVI` - -```js -assert.deepEqual(convertToRoman(1006), 'MVI'); -``` - -`convertToRoman(1023)` 應該返回字符串 `MXXIII` - -```js -assert.deepEqual(convertToRoman(1023), 'MXXIII'); -``` - -`convertToRoman(2014)` 應該返回字符串 `MMXIV` - -```js -assert.deepEqual(convertToRoman(2014), 'MMXIV'); -``` - -`convertToRoman(3999)` 應該返回字符串 `MMMCMXCIX` - -```js -assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); -``` - -# --seed-- - -## --seed-contents-- - -```js -function convertToRoman(num) { - return num; -} - -convertToRoman(36); -``` - -# --solutions-- - -```js -function convertToRoman(num) { - var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; - var res = []; - ref.forEach(function(p) { - while (num >= p[1]) { - res.push(p[0]); - num -= p[1]; - } - }); - return res.join(''); -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md deleted file mode 100644 index ce3a692fbd7..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: aff0395860f5d3034dc0bfc9 -title: 構建電話號碼驗證器 -challengeType: 5 -forumTopicId: 16090 -dashedName: build-a-telephone-number-validator ---- - -# --description-- - -如果傳入的字符串是一個有效的美國電話號碼，則返回 `true`。 - -用戶可以按照他們選擇的方式填寫表單字段，只要它是有效美國號碼的格式即可。 以下是美國電話號碼的有效格式示例（其他格式變化，請參考下面的測試）： - -
                              555-555-5555
                              (555)555-5555
                              (555) 555-5555
                              555 555 5555
                              5555555555
                              1 555 555 5555
                              - -在這個挑戰中，傳入的字符串可能是例如 `800-692-7753` 或者 `8oo-six427676;laskdjf` 的號碼。 你的任務是根據上面不同的格式組合，判斷它是否爲有效的電話號碼。 地區代碼是必需的。 如果提供了國家/地區代碼，則必須確認國家/地區代碼爲`1` 。 如果傳入的字符串是有效的美國電話號碼，則返回 `true`，否則返回 `false` 。 - -# --hints-- - -`telephoneCheck("555-555-5555")` 應返回一個布爾值。 - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` 應返回 `true`。 - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` 應返回 `false`。 - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` 應返回 `true`。 - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` 應返回 `true`。 - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` 應返回 `false`。 - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` 應返回 `false`。 - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` 應返回 `false`。 - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` 應返回 `false`。 - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` 應返回 `false`。 - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` 應返回 `false`。 - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` 應返回 `false`。 - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` 應返回 `false`。 - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` 應返回 `false`。 - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index cb39eb7bf96..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: 步驟 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -你一直使用 `var` 關鍵字聲明變量。 然而，在現代 JavaScript 中，最佳實踐是使用 `let` 關鍵詞。 這會修正幾種使用 `var` 後導致代碼難以調試的異常行爲。 - -將你所有的 `var` 關鍵字更改爲 `let`。 - -# --hints-- - -你的代碼中不應該有任何 `var` 關鍵字。 - -```js -assert.notMatch(code, /var/); -``` - -你應該使用 `let` 關鍵字聲明變量 `xp` 。 - -```js -assert.match(code, /let xp/); -``` - -你應該使用 `let` 關鍵字聲明變量 `health` 。 - -```js -assert.match(code, /let health/); -``` - -你應該使用 `let` 關鍵字聲明變量 `gold` 。 - -```js -assert.match(code, /let gold/); -``` - -你應該使用 `let` 關鍵字聲明變量 `currentWeapon` 。 - -```js -assert.match(code, /let currentWeapon/); -``` - -你不應該更改你的變量的值。 - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - - -
                              -
                              - XP: 0 - Health: 100 - Gold: 50 -
                              -
                              - - - -
                              -
                              - Monster Name: - Health: -
                              -
                              - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                              -
                              - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js ---fcc-editable-region-- -var xp = 0; -var health = 100; -var gold = 50; -var currentWeapon = 0; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md deleted file mode 100644 index cd564871491..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 62a8f2bc37675e77d5835235 -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -JavaScript has a conditional operator called the ternary operator. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`. - -Here is an example of an `if-else` expression changed to a ternary: - -```js -if (num > 5) { - bigger() -} else { - smaller() -} - -num > 5 ? bigger() : smaller(); -``` - -Change your new `if-else` expression to a ternary. - -# --hints-- - -You should remove the `if` and `else` from your `else if` block. - -```js -const block = attack.toString().split("else if"); -assert.notMatch(block[1], /if/); -assert.notMatch(block[1], /else/); -``` - -You should check if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2/); -``` - -Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); -``` - -Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - -
                              -
                              - XP: 0 - Health: 100 - Gold: 50 -
                              -
                              - - - -
                              -
                              - Monster Name: - Health: -
                              -
                              - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                              -
                              - - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js -let xp = 0; -let health = 100; -let gold = 50; -let currentWeapon = 0; -let fighting; -let monsterHealth; -let inventory = ["stick"]; - -const button1 = document.querySelector('#button1'); -const button2 = document.querySelector("#button2"); -const button3 = document.querySelector("#button3"); -const text = document.querySelector("#text"); -const xpText = document.querySelector("#xpText"); -const healthText = document.querySelector("#healthText"); -const goldText = document.querySelector("#goldText"); -const monsterStats = document.querySelector("#monsterStats"); -const monsterName = document.querySelector("#monsterName"); -const monsterHealthText =document.querySelector("#monsterHealth"); -const weapons = [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]; -const monsters = [ - { - name: "slime", - level: 2, - health: 15 - }, - { - name: "fanged beast", - level: 8, - health: 60 - }, - { - name: "dragon", - level: 20, - health: 300 - } -] -const locations = [ - { - name: "town square", - "button text": ["Go to store", "Go to cave", "Fight dragon"], - "button functions": [goStore, goCave, fightDragon], - text: "You are in the town square. You see a sign that says \"Store\"." - }, - { - name: "store", - "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], - "button functions": [buyHealth, buyWeapon, goTown], - text: "You enter the store." - }, - { - name: "cave", - "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], - "button functions": [fightSlime, fightBeast, goTown], - text: "You enter the cave. You see some monsters." - }, - { - name: "fight", - "button text": ["Attack", "Dodge", "Run"], - "button functions": [attack, dodge, goTown], - text: "You are fighting a monster." - }, - { - name: "kill monster", - "button text": ["Go to town square", "Go to town square", "Go to town square"], - "button functions": [goTown, goTown, goTown], - text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' - }, - { - name: "lose", - "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], - "button functions": [restart, restart, restart], - text: "You die. ☠️" - } -]; - -// initialize buttons -button1.onclick = goStore; -button2.onclick = goCave; -button3.onclick = fightDragon; - -function update(location) { - monsterStats.style.display = "none"; - button1.innerText = location["button text"][0]; - button2.innerText = location["button text"][1]; - button3.innerText = location["button text"][2]; - button1.onclick = location["button functions"][0]; - button2.onclick = location["button functions"][1]; - button3.onclick = location["button functions"][2]; - text.innerText = location.text; -} - -function goTown() { - update(locations[0]); -} - -function goStore() { - update(locations[1]); -} - -function goCave() { - update(locations[2]); -} - -function buyHealth() { - if (gold >= 10) { - gold -= 10; - health += 10; - goldText.innerText = gold; - healthText.innerText = health; - } else { - text.innerText = "You do not have enough gold to buy health."; - } -} - -function buyWeapon() { - if (currentWeapon < weapons.length - 1) { - if (gold >= 30) { - gold -= 30; - currentWeapon++; - goldText.innerText = gold; - let newWeapon = weapons[currentWeapon].name; - text.innerText = "You now have a " + newWeapon + "."; - inventory.push(newWeapon); - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "You do not have enough gold to buy a weapon."; - } - } else { - text.innerText = "You already have the most powerful weapon!"; - button2.innerText = "Sell weapon for 15 gold"; - button2.onclick = sellWeapon; - } -} - -function sellWeapon() { - if (inventory.length > 1) { - gold += 15; - goldText.innerText = gold; - let currentWeapon = inventory.shift(); - text.innerText = "You sold a " + currentWeapon + "."; - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "Don't sell your only weapon!"; - } -} - -function fightSlime() { - fighting = 0; - goFight(); -} - -function fightBeast() { - fighting = 1; - goFight(); -} - -function fightDragon() { - fighting = 2; - goFight(); -} - -function goFight() { - update(locations[3]); - monsterHealth = monsters[fighting].health; - monsterStats.style.display = "block"; - monsterName.innerText = monsters[fighting].name; - monsterHealthText.innerText = monsterHealth; -} - ---fcc-editable-region-- -function attack() { - text.innerText = "The " + monsters[fighting].name + " attacks."; - text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; - health -= monsters[fighting].level; - monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; - healthText.innerText = health; - monsterHealthText.innerText = monsterHealth; - if (health <= 0) { - lose(); - } else if (monsterHealth <= 0) { - if (fighting === 2) { - winGame(); - } else { - defeatMonster(); - } - } -} ---fcc-editable-region-- - -function dodge() { - text.innerText = "You dodge the attack from the " + monsters[fighting].name; -} - -function defeatMonster() { - gold += Math.floor(monsters[fighting].level * 6.7); - xp += monsters[fighting].level; - goldText.innerText = gold; - xpText.innerText = xp; - update(locations[4]); -} - -function lose() { - update(locations[5]); -} - -function restart() { - xp = 0; - health = 100; - gold = 50; - currentWeapon = 0; - inventory = ["stick"]; - goldText.innerText = gold; - healthText.innerText = health; - xpText.innerText = xp; - goTown(); -} -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md new file mode 100644 index 00000000000..d178d5a5a2b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -0,0 +1,682 @@ +--- +id: 659b0093d7db5a1a1122b7bd +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +```js +const animals = ["dog", "cat", "horse"]; +animals.indexOf("cat") // 1 +``` + +Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`. + +# --hints-- + +You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/) +``` + +You should pass in `userData.currentSong` into the `indexOf()` method. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
                              +
                              +
                              +
                              +
                              +
                              +
                              +

                              freeCodeCamp

                              +
                              +
                              +
                              +
                              +
                              +
                              +
                              + song cover art +
                              +
                              +
                              +

                              +

                              +
                              +
                              + + + + + +
                              +
                              +
                              +
                              +
                              +
                              +
                              +
                              +
                              +
                              +

                              Playlist

                              +
                              +
                              +
                              +
                              +
                              +
                                +
                                +
                                + + + +``` + +```css +:root { + /* colors */ + --primary-color: #dfdfe2; + --secondary-color: #ffffff; + --app-background-color: #4d4d62; + --background-color: #1b1b32; + --foreground-color: #3b3b4f; + --highlight-color: #f1be32; + + /* font sizes */ + --root-font-size: 16px; + font-size: var(--root-font-size); + + /* font-families */ + --font-headline: "Roboto Mono", monospace; + --font-family: "Lato", sans-serif; +} + +*, +*::after, +*::before { + box-sizing: border-box; +} + +body { + background-color: var(--app-background-color); + color: var(--primary-color); + font-family: var(--font-family); +} + +h1 { + font-size: 1.125rem; + line-height: 1.6; +} + +h2 { + font-size: var(--root-font-size); +} + +ul { + margin: 0; +} + +.container { + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; +} + +.player, +.playlist { + width: 450px; + background-color: var(--background-color); + border: 3px solid var(--foreground-color); +} + +.player { + height: 260px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +.player-bar, +.playlist-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + width: 100%; + height: 30px; + background-color: var(--foreground-color); +} + +.parallel-lines { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + padding: 0 5px; +} + +.parallel-lines > div { + height: 2px; + width: 100%; + min-width: 75px; + background-color: var(--highlight-color); +} + +.fcc-title, +.playlist-title { + color: var(--secondary-color); + margin: 0 10px; + font-family: var(--font-headline); +} + +.player-content { + display: flex; + background-color: var(--foreground-color); + width: 430px; + height: 200px; + column-gap: 13px; + align-items: center; + justify-content: center; +} + +#player-album-art { + background-color: var(--secondary-color); + border: 6px solid var(--background-color); +} + +#player-album-art img { + width: 150px; + display: block; +} + +.player-display { + display: flex; + flex-direction: column; + row-gap: 20px; + padding: 14px; + background-color: var(--background-color); + height: 153px; + width: 226px; +} + +.player-display-song-artist { + height: 80px; +} + +.player-buttons svg { + fill: var(--primary-color); +} + +.playing > svg { + fill: var(--highlight-color); +} + +.player-buttons { + display: flex; + justify-content: space-around; +} + +button { + background: transparent; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: var(--root-font-size); + outline-color: var(--highlight-color); + text-align: center; +} + +.playlist-song { + outline-color: var(--highlight-color); +} + +.playlist li:not(:last-child) { + border-bottom: 1px solid var(--background-color); +} + +button:focus, +.playlist-song:focus { + outline-style: dashed; + outline-width: 2px; +} + +/* Playlist */ +.playlist { + height: auto; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +#playlist-songs { + width: 430px; + height: 100%; + background-color: var(--foreground-color); + display: flex; + flex-direction: column; + row-gap: 8px; + padding: 8px 9px; + visibility: visible; + justify-content: start; + list-style: none; +} + +.playlist-song { + display: flex; + height: 55px; + justify-content: space-between; + align-items: center; + padding: 5px; +} + +[aria-current="true"] { + background-color: var(--background-color); +} + +[aria-current="true"] p { + color: var(--highlight-color); +} + +.playlist-song-info { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + column-gap: 7px; + padding: 5px 0; + font-family: var(--font-family); +} + +#player-song-title, +#player-song-artist { + margin: 0; +} + +#player-song-artist { + color: var(--highlight-color); + font-size: 0.75rem; +} + +#player-song-title { + font-size: 1.125rem; +} + +.playlist-song-title { + font-size: 0.85rem; + width: 241px; + text-align: left; +} + +.playlist-song-artist { + font-size: 0.725rem; + width: 80px; +} + +.playlist-song-duration { + font-size: 0.725rem; + margin: auto; + font-family: var(--font-headline); + width: 30px; +} + +.playlist-song-delete { + padding: 0; + width: 20px; + height: 20px; +} + +.playlist-song-delete, +.playlist-song-delete { + fill: var(--foreground-color); +} + +.playlist-song-delete:hover circle, +.playlist-song-delete:focus circle { + fill: #ff0000; +} + +@media (max-width: 700px) { + .player, + .playlist { + width: 300px; + } + + .player { + height: 340px; + } + + #playlist-songs { + height: 280px; + padding: 5px 6px; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-color: var(--background-color) var(--secondary-color); + scrollbar-width: thin; + } + + #playlist-songs::-webkit-scrollbar { + width: 5px; + } + + #playlist-songs::-webkit-scrollbar-track { + background: var(--background-color); + } + + #playlist-songs::-webkit-scrollbar-thumb { + background: var(--secondary-color); + } + + h1 { + font-size: 0.813rem; + } + + h2 { + font-size: 0.75rem; + } + + .player-bar, + .playlist-bar, + .player-content, + #playlist-songs { + width: 280px; + } + + .playlist-song { + justify-content: space-between; + } + + .playlist-song-title { + width: 140px; + } + + .playlist-song-artist { + width: 40px; + } + + .playlist-song-duration > button { + padding: 0; + } + + .player-content { + display: inline; + position: relative; + justify-items: center; + height: 100%; + } + + #player-album-art { + z-index: -100; + height: 280px; + box-shadow: none; + background: #000; + } + + #player-album-art img { + width: 100%; + opacity: 0.6; + } + + .player-display-song-artist { + padding: 0 10px; + } + + .player-display-song-artist > p { + white-space: pre-wrap; + } + + .player-display { + position: absolute; + width: 100%; + z-index: 1000; + background-color: transparent; + top: 0; + height: 280px; + justify-content: space-between; + text-align: center; + } +} +``` + +```js +const playlistSongs = document.getElementById("playlist-songs"); +const playButton = document.getElementById("play"); +const pauseButton = document.getElementById("pause"); +const nextButton = document.getElementById("next"); +const previousButton = document.getElementById("previous"); +const shuffleButton = document.getElementById("shuffle"); + +const allSongs = [ + { + id: 0, + title: "Scratching The Surface", + artist: "Quincy Larson", + duration: "4:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3", + }, + { + id: 1, + title: "Can't Stay Down", + artist: "Quincy Larson", + duration: "4:15", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3", + }, + { + id: 2, + title: "Still Learning", + artist: "Quincy Larson", + duration: "3:51", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3", + }, + { + id: 3, + title: "Cruising for a Musing", + artist: "Quincy Larson", + duration: "3:34", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3", + }, + { + id: 4, + title: "Never Not Favored", + artist: "Quincy Larson", + duration: "3:35", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3", + }, + { + id: 5, + title: "From the Ground Up", + artist: "Quincy Larson", + duration: "3:12", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3", + }, + { + id: 6, + title: "Walking on Air", + artist: "Quincy Larson", + duration: "3:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3", + }, + { + id: 7, + title: "Can't Stop Me. Can't Even Slow Me Down.", + artist: "Quincy Larson", + duration: "3:52", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3", + }, + { + id: 8, + title: "The Surest Way Out is Through", + artist: "Quincy Larson", + duration: "3:10", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3", + }, + { + id: 9, + title: "Chasing That Feeling", + artist: "Quincy Larson", + duration: "2:43", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3", + }, +]; + +const audio = new Audio(); +let userData = { + songs: [...allSongs], + currentSong: null, + songCurrentTime: 0, +}; + +const playSong = (id) => { + const song = userData?.songs.find((song) => song.id === id); + audio.src = song.src; + audio.title = song.title; + + if (userData?.currentSong === null || userData?.currentSong.id !== song.id) { + audio.currentTime = 0; + } else { + audio.currentTime = userData.songCurrentTime; + } + userData.currentSong = song; + playButton.classList.add("playing"); + + audio.play(); +}; + +const pauseSong = () => { + userData.songCurrentTime = audio.currentTime; + + playButton.classList.remove("playing"); + audio.pause(); +}; + +const renderSongs = (array) => { + const songsHTML = array + .map((song)=> { + return ` +
                              • + + +
                                • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +const getCurrentSongIndex = () => { + +} +--fcc-editable-region-- + +playButton.addEventListener("click", () => { + if (userData?.currentSong === null) { + playSong(userData?.songs[0].id); + } else { + playSong(userData?.currentSong.id); + } +}); + +pauseButton.addEventListener("click", pauseSong); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md deleted file mode 100644 index d65212aca6b..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 63ec14d1c216aa063f0be4af -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive. - -To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively. - -Since these will not change, remember to use `const` to declare them. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#products-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#dessert-card-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md deleted file mode 100644 index 98110e0bc8a..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 63ec19978a066607e23439f8 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#clear-cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md deleted file mode 100644 index b3616baccb4..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 63ec1a16f930b108b8a76806 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#total-items` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#subtotal` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#taxes` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#total` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md deleted file mode 100644 index a973654d0d6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 63ec1bbf5584390a7d08d41f -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`. - -Then, use `let` to declare a variable named `isCartShowing` and set it to `false`. - -# --hints-- - -You should use `document.getElementById()` to get the `#show-hide-cart` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should use `let` to declare a variable named `isCartShowing`. - -```js -assert.match(code, /let\s+isCartShowing/); -``` - -You should set the `isCartShowing` variable to `false`. - -```js -assert.match(code, /let\s+isCartShowing\s*=\s*false/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md deleted file mode 100644 index 172acaf6e3f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 63ec1cb59f2a4c0be5b6dfa0 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products. - -# --hints-- - -You should declare a `products` variable with `const`. - -```js -assert.match(code, /const\s+products/); -``` - -You should set the `products` variable to an empty array. - -```js -assert.match(code, /const\s+products\s*=\s*\[\s*\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md deleted file mode 100644 index 0815e4ecb06..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 63ec20a06fff670d37befbd9 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -You now need to start adding products. Before you do that, you need to consider the structure of your product data. A product will need a unique identifier to distinguish it from other products, a price so people know how much it costs, and a name so people know what they are buying. You should also add a category to each product. - -Add an object to your `products` array. Give this object an `id` property set to the number `1`, a `name` property set to `Vanilla Cupcakes (6 Pack)`, a `price` property set to the number `12.99`, and a `category` property set to `Cupcake`. - -# --hints-- - -Your products array should have one value. - -```js -assert.equal(products.length, 1); -``` - -Your products array should have an object as its first value. - -```js -assert.isObject(products[0]); -``` - -Your products array should have an object with an `id` property set to the number `1`. - -```js -assert.equal(products[0].id, 1); -``` - -Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`. - -```js -assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your products array should have an object with a `price` property set to the number `12.99`. - -```js -assert.equal(products[0].price, 12.99); -``` - -Your products array should have an object with a `category` property set to `Cupcake`. - -```js -assert.equal(products[0].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md deleted file mode 100644 index 30754019c8c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md +++ /dev/null @@ -1,472 +0,0 @@ ---- -id: 63ec3287b182ec0efe8a3135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up. - -| `name` | `price` | `category` | -| ------------------------------ | ------- | ----------- | -| `French Macaroon` | `3.99` | `Macaroon` | -| `Pumpkin Cupcake` | `3.99` | `Cupcake` | -| `Chocolate Cupcake` | `5.99` | `Cupcake` | -| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` | -| `Strawberry Ice Cream` | `2.99` | `Ice Cream` | -| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` | -| `Strawberry Pretzel` | `4.99` | `Pretzel` | -| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` | -| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` | -| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` | -| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` | - -# --hints-- - -Your second object in the `products` array should have an `id` property set to the number `2`. - -```js -assert.equal(products[1].id, 2); -``` - -Your second object in the `products` array should have a `name` property set to `French Macaroon`. - -```js -assert.equal(products[1].name, 'French Macaroon'); -``` - -Your second object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[1].price, 3.99); -``` - -Your second object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[1].category, 'Macaroon'); -``` - -Your third object in the `products` array should have an `id` property set to the number `3`. - -```js -assert.equal(products[2].id, 3); -``` - -Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`. - -```js -assert.equal(products[2].name, 'Pumpkin Cupcake'); -``` - -Your third object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[2].price, 3.99); -``` - -Your third object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[2].category, 'Cupcake'); -``` - -Your fourth object in the `products` array should have an `id` property set to the number `4`. - -```js -assert.equal(products[3].id, 4); -``` - -Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`. - -```js -assert.equal(products[3].name, 'Chocolate Cupcake'); -``` - -Your fourth object in the `products` array should have a `price` property set to the number `5.99`. - -```js -assert.equal(products[3].price, 5.99); -``` - -Your fourth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[3].category, 'Cupcake'); -``` - -Your fifth object in the `products` array should have an `id` property set to the number `5`. - -```js -assert.equal(products[4].id, 5); -``` - -Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`. - -```js -assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)'); -``` - -Your fifth object in the `products` array should have a `price` property set to the number `10.99`. - -```js -assert.equal(products[4].price, 10.99); -``` - -Your fifth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[4].category, 'Pretzel'); -``` - -Your sixth object in the `products` array should have an `id` property set to the number `6`. - -```js -assert.equal(products[5].id, 6); -``` - -Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`. - -```js -assert.equal(products[5].name, 'Strawberry Ice Cream'); -``` - -Your sixth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[5].price, 2.99); -``` - -Your sixth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[5].category, 'Ice Cream'); -``` - -Your seventh object in the `products` array should have an `id` property set to the number `7`. - -```js -assert.equal(products[6].id, 7); -``` - -Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`. - -```js -assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)'); -``` - -Your seventh object in the `products` array should have a `price` property set to the number `9.99`. - -```js -assert.equal(products[6].price, 9.99); -``` - -Your seventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[6].category, 'Macaroon'); -``` - -Your eighth object in the `products` array should have an `id` property set to the number `8`. - -```js -assert.equal(products[7].id, 8); -``` - -Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`. - -```js -assert.equal(products[7].name, 'Strawberry Pretzel'); -``` - -Your eighth object in the `products` array should have a `price` property set to the number `4.99`. - -```js -assert.equal(products[7].price, 4.99); -``` - -Your eighth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[7].category, 'Pretzel'); -``` - -Your ninth object in the `products` array should have an `id` property set to the number `9`. - -```js -assert.equal(products[8].id, 9); -``` - -Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`. - -```js -assert.equal(products[8].name, 'Butter Pecan Ice Cream'); -``` - -Your ninth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[8].price, 2.99); -``` - -Your ninth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[8].category, 'Ice Cream'); -``` - -Your tenth object in the `products` array should have an `id` property set to the number `10`. - -```js -assert.equal(products[9].id, 10); -``` - -Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`. - -```js -assert.equal(products[9].name, 'Rocky Road Ice Cream'); -``` - -Your tenth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[9].price, 2.99); -``` - -Your tenth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[9].category, 'Ice Cream'); -``` - -Your eleventh object in the `products` array should have an `id` property set to the number `11`. - -```js -assert.equal(products[10].id, 11); -``` - -Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`. - -```js -assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)'); -``` - -Your eleventh object in the `products` array should have a `price` property set to the number `11.99`. - -```js -assert.equal(products[10].price, 11.99); -``` - -Your eleventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[10].category, 'Macaroon'); -``` - -Your twelfth object in the `products` array should have an `id` property set to the number `12`. - -```js -assert.equal(products[11].id, 12); -``` - -Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`. - -```js -assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)'); -``` - -Your twelfth object in the `products` array should have a `price` property set to the number `12.99`. - -```js -assert.equal(products[11].price, 12.99); -``` - -Your twelfth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[11].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md deleted file mode 100644 index 2a000e8614e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 63ec3427fc3e9214c9ed2a14 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that. - -Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function. - -# --hints-- - -You should call the `.forEach` method of your `products` array. - -```js -assert.match(code, /products\.forEach\(/); -``` - -You should use arrow syntax to create an empty callback function. - -```js -assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/) -``` - -You should pass your empty callback function to the `.forEach` method. - -```js -assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md deleted file mode 100644 index e9a2c069456..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 63ec36f6133df7160be3ec66 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Remember that you can use destructuring to extract multiple values from an array or object in a single statement. - -For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in. - -# --hints-- - -You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters. - -```js -assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/); -``` - -Your destructuring should be the first parameter of the callback function. - -```js -assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - () => {} -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md deleted file mode 100644 index 4add604d105..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 63ec47b454495519739486a7 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable. - -# --hints-- - -You should use access the `innerHTML` property of the `dessertCards` variable. - -```js -assert.match(code, /dessertCards\.innerHTML/); -``` - -You should use the addition assignment operator on the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/); -``` - -You should add an empty template literal string to the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md deleted file mode 100644 index 02a59b523b4..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 63ee5d38a5d29d0696f8d820 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable. - -# --hints-- - -You should create a `div` element. - -```js -assert.isAtLeast(document.querySelectorAll('div')?.length, 12); -``` - -Your `div` element should have a class of `dessert-card`. - -```js -assert.equal(document.querySelectorAll('.dessert-card')?.length, 12); -``` - -You should create an `h2` element. - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.length, 12); -``` - -Your `h2` element should have the text of the `name` variable. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your `h2` element should be inside the `div` element. - -```js -assert.equal(document.querySelectorAll('div h2')?.length, 12); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` - - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md deleted file mode 100644 index 96485328760..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63ee5d8f9e7168076e932fe2 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -After your `h2` element, create two `p` elements. Give the first a `class` of `dessert-price`, and the text of the `price` variable with a dollar sign in front of it. Give the second a `class` of `product-category`, and the text `Category:` followed by the value of the `category` variable. - -# --hints-- - -You should create two `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card')?.children.length, 3); -assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2) -``` - -Your `p` elements should come after your `h2` element. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2'); -assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P'); -assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P'); -``` - -Your first `p` element should have a `class` of `dessert-price`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price'); -``` - -Your first `p` element should have the text of the `price` variable with a dollar sign in front of it. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99'); -``` - -Your second `p` element should have a `class` of `product-category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category'); -``` - -Your second `p` element should have the text `Category:` followed by the value of the `category` variable. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                - -
                                - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md deleted file mode 100644 index 6092f597046..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 63ee5e0f08e82208364c4128 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Finally, after your `p` elements, create a `button` element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `Add to cart` for the text. - -# --hints-- - -You should create a `button` element. - -```js -assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12); -``` - -Your `button` element should come after your `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P'); -assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling); -``` - -Your `button` element should have an `id` set to the value of the `id` variable. - -```js -assert.equal(document.querySelector('.dessert-card button')?.id, '1'); -``` - -Your `button` element should have a `class` of `btn add-to-cart-btn`. - -```js -assert.include(document.querySelector('.dessert-card button')?.className, 'btn'); -assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn'); -``` - -Your `button` element should have the text `Add to cart`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md deleted file mode 100644 index 44ba9af32dc..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 63ee5ea8be892e0955ab346c -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -You are already familiar with an HTML `class`, but JavaScript also has a class. In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods. - -The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class: - -```js -class Computer {}; -``` - -Declare a `ShoppingCart` class. - -# --hints-- - -You should declare a `ShoppingCart` variable. - -```js -assert.match(code, /ShoppingCart/); -``` - -You should use the `class` keyword to declare a `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*/); -``` - -Your `ShoppingCart` class should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md deleted file mode 100644 index 87839e53275..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 63ee5fc113bcb20a5db9214b -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Classes have a special `constructor` method, which is called when a new instance of the class is created. The `constructor` method is a great place to initialize properties of the class. Here is an example of a class with a `constructor` method: - -```js -class Computer { - constructor() { - } -} -``` - -Add an empty `constructor` method to the `ShoppingCart` class. - -# --hints-- - -You should add a `constructor` method to the `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/) -``` - -Your `constructor` method should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md deleted file mode 100644 index 4f7a2390687..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 63ee611d478dca0b77f6a393 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -The `this` keyword in JavaScript is used to refer to the current object. Depending on where `this` is used, what it references changes. In the case of a class, it refers to the instance of the object being constructed. You can use the `this` keyword to set the properties of the object being instantiated. Here is an example: - -```js -class Computer { - constructor() { - this.ram = 16; - } -} -``` - -In your constructor, use the `this` keyword to set the `items` property to an empty array. Also, set the `total` property to `0`, and the `taxRate` property to `8.25`. - -# --hints-- - -You should use the `this` keyword to set the `items` property of your class to an empty array. - -```js -assert.match(code, /this\.items/); -const cart = new ShoppingCart(); -assert.isArray(cart.items); -assert.isEmpty(cart.items); -``` - -You should use the `this` keyword to set the `total` property of your class to `0`. - -```js -assert.match(code, /this\.total/); -const cart = new ShoppingCart(); -assert.equal(cart.total, 0); -``` - -You should use the `this` keyword to set the `taxRate` property of your class to `8.25`. - -```js -assert.match(code, /this\.taxRate/); -const cart = new ShoppingCart(); -assert.equal(cart.taxRate, 8.25); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - - } -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md deleted file mode 100644 index 86c81b0332a..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 63ee7c664f9b65137d925c8a -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Your `ShoppingCart` class needs the ability to add items. Create an empty `addItem` method, which takes two parameters: `id` and `products`. Creating a method might look like this: - -```js -class Computer { - constructor() { - this.ram = 16; - } - - addRam(amount) { - this.ram += amount; - } -} -``` - -The first parameter, `id`, is the `id` of the product the user has added to their cart. The second parameter, `products`, is an array of product objects. By using a parameter instead of directly referencing your existing `products` array, this method will be more flexible if you wanted to add additional product lists in the future. - -# --hints-- - -Your `ShoppingCart` class should have an `addItem` method. - -```js -const cart = new ShoppingCart(); -assert.isFunction(cart.addItem); -``` - -Your `addItem` method should take two parameters: `id` and `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/); -``` - -Your `addItem` method should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md deleted file mode 100644 index 88900979e4b..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 63eea5cea403a81a68ae493c -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -You need to find the product that the user is adding to the cart. Remember that arrays have a `.find()` method. In your `addItem` function, declare a `product` variable, and assign it the value of calling the `.find()` method on the `products` array. - -For the callback to `.find()`, pass a function that takes a single parameter `item`, and returns whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -# --hints-- - -You should declare a `product` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=/); -``` - -You should call the `.find()` method on your `products` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(/); -``` - -You should pass a callback function to the `.find()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/); -``` - -The callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/); -``` - -The callback function should return whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/); -``` - -You should assign the value of the `.find()` method to the `product` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md deleted file mode 100644 index fa4bbc91e2f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63eea817673c8e1c22927fa6 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Use `const` and destructuring to extract `name` and `price` variables from `product`. - -# --hints-- - -You should use destructuring to get the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/); -``` - -You should use `const` to declare the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/); -``` - -You should use destructuring to get the `name` and `price` variables from `product`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md deleted file mode 100644 index 21089f88380..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 63eea8e1e143ae1d098c8c9d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Now you need to push the `product` into the cart's `items` array. Remember to use the `this` keyword. - -# --hints-- - -You should call the `push` method on the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.push\(/); -``` - -Remember you need to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.push\(/); -``` - -You should `push` the `product` variable to the `items` array. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.deepEqual(cart.items, [products[0]]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md deleted file mode 100644 index f1583334ed8..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 63eeb8e86becbf1e75c2cb0d -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -You now need a total count of each product that the user has in the cart. Declare a `totalCountPerProduct` variable, and assign it an empty object. - -# --hints-- - -You should declare a `totalCountPerProduct` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/); -``` - -You should use `const` to declare `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/); -``` - -You should assign an empty object to `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md deleted file mode 100644 index af217952d82..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63eedebb0ec0231ff1cede1a -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Use the `.forEach()` method to loop through the `items` array. Pass an empty callback function that takes a single parameter `dessert`. - -# --hints-- - -You should use the `.forEach()` method on your `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.forEach\(/); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(/); -``` - -You should pass a callback function to the `.forEach()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/); -``` - -Your callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/); -``` - -Your callback function should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md deleted file mode 100644 index 24c1ac26daf..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 63efdbc22a0c56070beabed7 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -In your `forEach` callback, you need to update the `totalCountPerProduct` object. Using the `id` of the current `dessert` as your property, update the value of the property to be the current value plus one. Do not use the addition assignment operator for this. - -# --hints-- - -You should use dot notation to access the `id` property of `dessert`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /dessert\.id/); -``` - -You should use bracket notation to access the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the assignment operator to update the value of the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/); -``` - -You should update the value of `totalCountPerProduct` to be the current value plus one. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md deleted file mode 100644 index cba3963dbee..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 63efe370bbfc4a08d500118e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -You now have a small bug. When you try to access a property of an object and the property doesn't exist, you get `undefined`. This means if the dessert isn't already present in the `totalCountPerProduct` object, you end up trying to add `1` to `undefined`, which results in `NaN`. - -To fix this, you can use the `||` operator to set the value to `0` if it doesn't exist. Wrap your right-hand `totalCountPerProduct[data.id]` in parentheses, and add `|| 0` to the end of the expression. - -# --hints-- - -You should wrap your right-hand `totalCountPerProduct[data.id]` in parentheses. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the `||` operator. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/); -``` - -You should use `0` as your fallback value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/); -``` - -You should still add `1` to the value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1; - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md deleted file mode 100644 index 5e3da866f36..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 63eff02f00e69a0b2ac10b43 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Now you need to get prepared to update the display with the new product the user added. Declare a `currentProductCount` variable, and assign it the value of the `totalCountPerProduct` object's property matching the `id` of `product`. - -# --hints-- - -You should declare a `currentProductCount` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=/); -``` - -You should use `const` to declare `currentProductCount`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCount\s*=/); -``` - -You should assign the value of `totalCountPerProduct[product.id]` to `currentProductCount`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md deleted file mode 100644 index a1b63e599ad..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 63eff98ffb1d5a0d24ec79cb -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -You haven't written the code to generate the HTML yet, but if a product has already been added to the user's cart then there will be a matching element which you'll need. - -Use `.getElementById()` to get the matching element - you'll be setting the `id` value to `product-count-for-id${product.id}`, so use a template literal to query that value. - -Assign your query to a `currentProductCountSpan` variable. - -# --hints-- - -You should declare a `currentProductCountSpan` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/); -``` - -You should use `const` to declare `currentProductCountSpan`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/); -``` - -You should use `document.getElementById()` to get the matching element. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /document\.getElementById\(/); -``` - -You should use a template literal to query the `id` value. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/); -``` - -You should assign the value of `document.getElementById()` to `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md deleted file mode 100644 index 4573e021ac0..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63effe558c87a70e7072e447 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. - -# --hints-- - -You should check if `currentProductCount` is greater than `1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/); -``` - -You should use a ternary operator with your `currentProductCount > 1` condition. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/); -``` - -You should use `undefined` as the truthy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should use `undefined` as the falsy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md deleted file mode 100644 index aebdaf9a24f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 63f0165121a9181342d5bc66 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -For your truthy expression, removing the `undefined`, you need to update the `textContent` of the `currentProductCountSpan` to be the `currentProductCount` followed by an `x`. Use a template literal to do so. - -# --hints-- - -You should remove the `undefined` from your truthy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should access the `textContent` property of `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/); -``` - -You should use template literal syntax to update the `textContent` to be `${currentProductCount}x`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 ? undefined : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md deleted file mode 100644 index b6f14c6ae69..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 63f017b4ad028a148eb713c0 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -For your falsy expression, you'll need to add new HTML to your `productsContainer`. Start by removing the `undefined`, then use the addition assignment operator and template literal syntax to add a `div` with the `class` set to `product` and the `id` set to `dessert${id}` to the `innerHTML` property of the `productsContainer`. - -# --hints-- - -You should remove the `undefined` from your falsy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /undefined/); -``` - -You should use the addition assignment operator to add HTML to the `productsContainer`. Remember that HTML goes in the `innerHTML` property. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/); -``` - -You should use template literal syntax to add HTML to the `productsContainer`. - -```js -assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/); -``` - -You should add a `div` to the `productsContainer`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.tagName, "DIV"); -``` - -Your `div` should have the `class` set to `product`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.className, "product"); -``` - -Your `div` should have the `id` set to `dessert${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.id, "dessert1"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md deleted file mode 100644 index dd3815162fa..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 63f01861f813e01564c95315 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Inside your `div`, add two `p` elements. Set the text of the second `p` element to be the value of the `price` variable. - -# --hints-- - -You should add two `p` elements inside your `div` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children.length, 2); -assert.equal(div?.children[0].tagName, 'P'); -assert.equal(div?.children[1].tagName, 'P'); -``` - -Your second `p` element should have the text of the `price` variable. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children[1].textContent, '12.99'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                - -
                                - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md deleted file mode 100644 index da747a73c32..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 63f018f04e487e164dc27bd9 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable. - -# --hints-- - -Your first `p` element should have a `span` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children.length, 1); -assert.equal(p.children[0].tagName, 'SPAN'); -``` - -Your `span` element should have a `class` of `product-count`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].className, 'product-count'); -``` - -Your `span` element should have an `id` of `product-count-for-id${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].id, 'product-count-for-id1'); -``` - -Your first `p` element should have the text of the `name` variable. This should be outside the span. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - -

                                -

                                ${price}

                                -
                                - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md deleted file mode 100644 index 852ac25d2b7..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 63f01c9791a0aa1751c73760 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -There is still more functionality that your `ShoppingCart` class needs, but first you need to be able to test the code you have currently written. You'll need to instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples: - -```js -const myComputer = new Computer(); -``` - -Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object. - -# --hints-- - -You should use `const` to declare a `cart` variable. - -```js -assert.match(code, /const\s+cart\s*=/); -``` - -You should use the `new` keyword to instantiate a new `ShoppingCart` object. - -```js -assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/); -``` - -You should assign your new `ShoppingCart` object to the `cart` variable. - -```js -assert.isTrue(cart instanceof ShoppingCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } -}; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md deleted file mode 100644 index c2590b8a8ea..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f0224ceb16dc196d2c860a -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -You need to get all of the `Add to cart` buttons that you added to the DOM earlier. Declare an `addToCartBtns` variable, and assign it the value of calling the `getElementsByClassName()` method on the `document` object, passing in the string `add-to-cart-btn`. - -# --hints-- - -You should use `const` to declare your `addToCartBtns` variable. - -```js -assert.match(code, /const\s+addToCartBtns\s*=/); -``` - -You should call the `getElementsByClassName()` method on the `document` object. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/); -``` - -You should pass the string `add-to-cart-btn` to the `getElementsByClassName()` method. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/); -``` - -You should assign the value returned by the `getElementsByClassName()` method to the `addToCartBtns` variable. - -```js -assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } -}; - -const cart = new ShoppingCart(); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md deleted file mode 100644 index fd0129e37ca..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f026d041bc6c1a3d5cba0f -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -You need to iterate through the buttons in your `addToCartBtns` variable. However, `.getElementsByClassName()` returns a Collection, which does not have a `forEach` method. - -Use the spread operator on the `addToCartBtns` variable to convert it into an array. Then, use the `forEach` method to iterate through the array. Do not pass a callback function yet. - -# --hints-- - -You should use the spread operator on the `addToCartBtns` variable. - -```js -assert.match(code, /\.\.\.addToCartBtns/); -``` - -You should spread the `addToCartBtns` variable into an array. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/); -``` - -You should use the `forEach` method on the array you created. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/); -``` - -You should not pass a callback function to the `forEach` method. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md deleted file mode 100644 index cae3ba72dbe..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0284532742c1b26c7a052 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Add your callback function to the `forEach` method. It should take a `btn` parameter. Then, in the callback, add an event listener to the `btn`. The event listener should listen for a `click` event, and should take another callback with an `event` parameter. The second callback should be empty. - -# --hints-- - -You should use arrow syntax to add a callback function to the `forEach` method which takes a `btn` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/); -``` - -You should add an event listener to the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/); -``` - -You should add an empty callback function to the event listener. Remember to give it an `event` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md deleted file mode 100644 index c27e13717f0..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0289df84a581bbdbd29b7 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -In your event listener callback, call the `.addItem()` method of your `cart` object, and pass in the `event.target.id`. Remember that the `id` here will be a string, so you need to convert it to a number. - -Pass your `products` array as the second argument. - -# --hints-- - -Your event listener callback should call the `.addItem()` method of your `cart` object. - -```js -assert.match(code, /cart\.addItem\(/); -``` - -Your `.addItem()` method should be called with the `event.target.id` as the first argument. Remember to convert the `id` to a number using `Number()`. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/); -``` - -Your `.addItem()` method should be called with the `products` array as the second argument. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - - }) - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md deleted file mode 100644 index 4b53ebc3ff1..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 63f0295e673b661ccb299e8a -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -You need a way to access the total number of items in the cart. The best way to do this is to add another method to your `ShoppingCart` class, rather than accessing the `items` array directly. - -Add a `getCounts` method to the `ShoppingCart` class. It should return the number of items in the `items` array. - -# --hints-- - -Your `ShoppingCart` class should have a `getCounts` method. - -```js -assert.isFunction(cart.getCounts); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const afterCounts = code.split('getCounts')[1]; -assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/); -``` - -Your `getCounts` method should return the number of items in the `items` array. - -```js -assert.equal(cart.getCounts(), 0); -cart.addItem(1, products); -assert.equal(cart.getCounts(), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md deleted file mode 100644 index b75a16738ae..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 63f029b96b9e9e1df93be951 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Now you can update the total number of items on the webpage. Assign the value of your `cart` object's `.getCounts()` method to the `textContent` of the `totalNumberOfItems` variable. - -# --hints-- - -You should access the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent/) -``` - -You should assign the value of your `cart` object's `.getCounts()` method to the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md deleted file mode 100644 index ff8d5d86a2e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 63f02a4ef92d711ec1ff618c -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -You also need to update the total price of the cart when the user adds an item. Create a `calculateTotal` method in the `ShoppingCart` class. - -In that method, declare a `subTotal` variable and use the `reduce` method on the `items` array to calculate the sum of the `price` property of each item in the array. Use `total` and `item` as the parameters for your callback. - -Remember to set your initial value in the `reduce` method. - -# --hints-- - -You should create a `calculateTotal` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTotal); -``` - -Your `calculateTotal` method should have a `subTotal` variable declared with `const`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+subTotal\s*=/); -``` - -Your `calculateTotal` method should use the `reduce` method on the `items` array. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/); -``` - -Your `reduce` callback should use `total` and `item` as the first and second parameter. Remember to use arrow function syntax. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/); -``` - -Your `reduce` callback should return the sum of `total` and `item.price`. Use an implicit return. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/); -``` - -Your `reduce` call should have an initial value of `0`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md deleted file mode 100644 index 8d4036f7ea6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f02b22cce1c11fe9604381 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Part of the total cost will include the tax, so you need to calculate that as well. Create a `calculateTaxes` method in the `ShoppingCart` class. This method should take an `amount` parameter. - -# --hints-- - -You should create a `calculateTaxes` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTaxes); -``` - -Your `calculateTaxes` method should take an `amount` parameter. - -```js -assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md deleted file mode 100644 index 82d277b0ab0..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f02bdeb9b428208b97eb6b -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -For clarity, wrap the `taxRate / 100` calculation in parentheses. - -# --hints-- - -You should divide the `taxRate` by 100 in your `calculateTaxes` method. Remember to use the `this` keyword. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/); -``` - -You should wrap the `this.taxRate / 100` calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/); -``` - -You should multiply the `amount` parameter by the `taxRate` divided by 100 in your `calculateTaxes` method. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/); -``` - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -```js -console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md deleted file mode 100644 index 0954c9b4ac6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 63f02c6e18773921ba50aa53 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Because of the way computers store and work with numbers, calculations involving decimal numbers can result in some strange behavior. For example, `0.1 + 0.2` is not equal to `0.3`. This is because computers store decimal numbers as binary fractions, and some binary fractions cannot be represented exactly as decimal fractions. - -We want to clean up the number result from your calculation. Wrap your calculation in parentheses (don't include the `return` statement!) and call the `.toFixed()` method on it. Pass the `.toFixed()` method the number `2` as an argument. This will round the number to two decimal places and return a string. - -# --hints-- - -You should wrap your calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/) -``` - -You should call the `.toFixed()` method on your calculation. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/) -``` - -You should pass the `.toFixed()` method the number `2` as an argument. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return (this.taxRate / 100) * amount; - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md deleted file mode 100644 index d925dca7812..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 63f0311f5ea9382388d6124f -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -The issue with `.toFixed()` returning a string is that you want to be able to perform calculations with the tax rate. To fix this, you can pass the `.toFixed()` call (including the calculation) to the `parseFloat()` function. This will convert the fixed string back into a number, preserving the existing decimal places. - -Pass your `.toFixed()` call to `parseFloat()`. - -# --hints-- - -You should pass your entire calculation (excluding the `return` statement) to `parseFloat()`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return ((this.taxRate / 100) * amount).toFixed(2); - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md deleted file mode 100644 index b0527ca7c31..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f033fdb1fbcc254999fcc3 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Your cart currently isn't visible on the webpage. To make it visible, start by adding an event listener to the `cartBtn` variable, listening for the click event. The callback does not need any parameters. - -# --hints-- - -You should add an event listener to the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/); -``` - -You should add an empty callback function (using arrow syntax) to the event listener. Remember that it does not need any parameters. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md deleted file mode 100644 index 48e1daa6e0e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f03446c2ed3e264be6c7fc -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Start by inverting the value of `isCartShowing`. Remember that you can use the logical not operator `!` to invert the value of a boolean. Assign the inverted value to `isCartShowing`. - -# --hints-- - -You should invert the value of `isCartShowing`. - -```js -assert.match(code, /!isCartShowing/); -``` - -You should assign the inverted value of `isCartShowing` to `isCartShowing`. - -```js -assert.match(code, /isCartShowing\s*=\s*!isCartShowing/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md deleted file mode 100644 index 1e9f9959098..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f0348a54a177272071a595 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `Hide`, otherwise set it to `Show`. - -# --hints-- - -You should use the assignment operator on the `textContent` property of the `showHideCartSpan` variable. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Hide` if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Show` if `isCartShowing` is false. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md deleted file mode 100644 index 3fcf304cca6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 63f034d012f74627ce538d3a -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `block`, otherwise set it to `none`. - -Now you should be able to see your cart and add items to it. - -# --hints-- - -You should access the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/) -``` - -You should use the assignment operator on the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `block` if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `none` if `isCartShowing` is false. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md deleted file mode 100644 index a4c481b5796..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f03686c5ea863533ec71f4 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Declare a variable `tax` and assign it the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument. - -# --hints-- - -Use `const` to declare a variable named `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+tax\s*=/); -``` - -Assign the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument, to the `tax` variable. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md deleted file mode 100644 index 936b8a7add9..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f036ec91fdf238c90665f5 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Update the `total` value to be the sum of the `subTotal` and `tax` values. - -# --hints-- - -You should update the `total` value. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total/); -``` - -You should set the `total` value to be the sum of the `subTotal` and `tax` values. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md deleted file mode 100644 index cba09f5a3e6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 63f0370b340915399d31e5eb -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -You're going to update the HTML in this method as well. Set the `textContent` of the `cartSubTotal` to be the value of `subTotal` to a fixed 2 decimal places. Use template literal syntax to add the dollar sign to the beginning of the value. - -# --hints-- - -You should access the `textContent` property of the `cartSubTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `subTotal` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartSubTotal` element to your template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md deleted file mode 100644 index 37c08222320..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 63f0374d5351223a747c301d -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Following the same pattern as your `cartSubTotal`, update the `cartTaxes` to display the `tax` value, and your `cartTotal` to display the `total` property. - -# --hints-- - -You should access the `textContent` property of the `cartTaxes` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/); -``` - -You should call the `.toFixed()` method on the `tax` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTaxes` element to `tax.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should access the `textContent` property of the `cartTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `total` variable, passing `2` as the argument. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTotal` element to your `total.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md deleted file mode 100644 index 56336e0263e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f0378e173e3c3b7638b528 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Finally, return the value of the `total` property. Remember your `this` keyword. - -# --hints-- - -Your `calculateTotal` method should return the value of the `total` property. - -```js -assert.equal(cart.calculateTotal(), 0); -cart.addItem(1, products); -assert.approximately(cart.calculateTotal(), 14.06, 0.1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md deleted file mode 100644 index db0f9862452..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f038a0ae041d3c5b0cdf23 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Your last feature is to allow users to clear their cart. Add a `clearCart()` method to your `ShoppingCart` class. - -# --hints-- - -Your `ShoppingCart` class should have a `clearCart` method. - -```js -assert.isFunction(cart.clearCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md deleted file mode 100644 index 50339959f43..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -id: 63f038e671d3f73d5a041973 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -The first thing you should do is check if the `items` array is empty. If it is, display an `alert` to the user with the text `Your shopping cart is already empty`, then return from the function. - -Remember that `0` is a falsy value, so you can use the `!` operator to check if the array is empty. - -After displaying the alert, return from the function to stop execution. - -# --hints-- - -You should create an `if` statement that checks if the `items` array is empty, using the negation operator. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/); -``` - -Your `if` statement should display an `alert` to the user with the text `Your shopping cart is already empty`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/); -``` - -Your `if` statement should return from the function. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md deleted file mode 100644 index 23f034e9067..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 63f039dbcef7673e4e758fa3 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Browsers have a built-in `confirm()` function which displays a confirmation prompt to the user. `confirm()` accepts a string, which is the message displayed to the user. It returns `true` if the user confirms, and `false` if the user cancels. - -Declare a variable `isCartCleared` and assign it the value of calling `confirm()` with the string `"Are you sure you want to clear all items from your shopping cart?"`. - -# --hints-- - -You should use `const` to declare the `isCartCleared` variable. - -```js -const afterClearCart = code.split('clearCart()')[1]; -assert.match(afterClearCart, /const\s+isCartCleared\s*=/); -``` - -You should call the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(/); -``` - -You should pass the string `Are you sure you want to clear all items from your shopping cart?` to the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -You should assign the value of the `confirm()` function to the `isCartCleared` variable. - -```js -assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md deleted file mode 100644 index be4fde050a5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -id: 63f03a7143a6ef3f7f3344f0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -You only want to clear the cart if the user confirms the prompt. Create an `if` statement that checks if the user confirmed the prompt. - -In the `if` statement, set the `items` property back to an empty array, then set the `total` property to `0`. - -# --hints-- - -You should create an `if` statement that checks if the user confirmed the prompt. Remember that you can check the truthiness of `isCartCleared` directly. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/); -``` - -Your `if` statement should set the `items` property back to an empty array. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/); -``` - -Your `if` statement should set the `total` property to `0`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md deleted file mode 100644 index 3b6705168d8..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f03ac2b428b2404a5a7518 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -You also need to start clearing the HTML. Set the `innerHTML` property of the `productsContainer` back to an empty string. - -# --hints-- - -In your `if` statement, you should set the `innerHTML` property of the `productsContainer` back to an empty string. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md deleted file mode 100644 index 5a1e7f099f3..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 63f03af535682e4138fdb915 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Set the `textContent` of the `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal` elements all to the number `0`. - -# --hints-- - -You should set the `textContent` of the `totalNumberOfItems` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartSubTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTaxes` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTotal\.textContent\s*=\s*0/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md deleted file mode 100644 index 913c5c53bdb..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md +++ /dev/null @@ -1,744 +0,0 @@ ---- -id: 63f03b1ed5ab15420c057463 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Your final step is to make your clear button functional. Add a `click` event listener to the `clearCartBtn`. For the callback, you can pass in `cart.clearCart` directly. - -However, doing so will not work, because the context of `this` will be the `clearCartBtn` element. You need to bind the `clearCart` method to the `cart` object. - -You can do this by passing `cart.clearCart.bind(cart)` as the callback. - -And with that, your shopping cart project is complete! - -# --hints-- - -You should add an event listener to your `clearCartBtn` element. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(/); -``` - -Your event listener should listen for the `click` event. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/); -``` - -Your event listener should take `cart.clearCart.bind(cart)` as the callback. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - -clearCartBtn.addEventListener("click", cart.clearCart.bind(cart)); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md deleted file mode 100644 index c33ce088a1c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f6721d5110af243ef8f3d9 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now call your `.calculateTotal()` method inside your `forEach` loop. - -# --hints-- - -You should call `cart.calculateTotal()` inside your `forEach` loop. - -```js -const afterForEach = code.split('[...addToCartBtns].forEach(')[1]; -assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                -

                                Desserts Page

                                -
                                -
                                - -
                                - -
                                -

                                Total number of items: 0

                                -

                                Subtotal: $0

                                -

                                Taxes: $0

                                -

                                Total: $0

                                -
                                -
                                -
                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                -

                                ${name}

                                -

                                $${price}

                                -

                                Category: ${category}

                                - -
                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                -

                                - ${name} -

                                -

                                ${price}

                                -
                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md deleted file mode 100644 index a2ce162457c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9a -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. - -In JavaScript, you can access the DOM by referencing the global `document` object. - -To view the DOM, log it to the console with `console.log(document)`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast
                                - Lunch
                                - Dinner -
                                - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md deleted file mode 100644 index aab244748d6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9b -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -In our HTML document, we have a form element with an `id` attribute: `
                                ` - -To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. - -The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                - -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - - -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md deleted file mode 100644 index 31afd7303fc..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9c -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. - -Forms have an `onsubmit` event that can execute a function when the form is submitted. - -For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. - -Assign a function named `calculate` to the `onsubmit` event of your form. - -You will create the `calculate` function later. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md deleted file mode 100644 index bcd3b1bc287..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9d -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. Here is an example of an empty function called `square`: - -```js -function square() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(typeof calculate === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md deleted file mode 100644 index 8a02a67b570..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9e -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -By default, `onsubmit` will pass the event object as a parameter to the function it calls. People usually call it `e`, short for event. Update the `calculate()` function to accept `e` as parameter. - -Here is an example of an empty function called `square` that takes a `number` as a parameter: - -```js -function square(number) {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md deleted file mode 100644 index 0cd5d1525fd..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9f -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. - -Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md deleted file mode 100644 index ee8e8356f0d..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da0 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. - -To access elements with a certain class name, we use the `getElementsByClassName()` method. - -Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md deleted file mode 100644 index 9b80e0f827c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da1 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md deleted file mode 100644 index c5a2856f2c3..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da2 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -To make the document objects easier to handle, let's turn them into an array. Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md deleted file mode 100644 index 40f6a846fd5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da3 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md deleted file mode 100644 index 725bff25987..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da4 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md deleted file mode 100644 index fead88a0598..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da5 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. - -The `map()` method allows us to do exactly that. - -Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .toString() - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md deleted file mode 100644 index 714497fddbb..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da6 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Now we need to provide a function to `map()` that will be performed on each item of the array. - -This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: - -```js -function(meal){} -``` - -Enter in the above function as an argument in between the parentheses of the `.map()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md deleted file mode 100644 index 7d58167b80c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da7 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. - -If you want, console log `total` to see what results you are getting. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md deleted file mode 100644 index 4a199951818..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da8 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md deleted file mode 100644 index 6058cea614a..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da9 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md deleted file mode 100644 index 46dfade8b55..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daa -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. - -Chain the `reduce()` method to the `Array.from()` expression. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md deleted file mode 100644 index 065b5dce513..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dab -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: - -```js -function(accumulator, currentValue) { /* code to run */ } -``` - -or using arrow functions: - -```js -(accumulator, currentValue) => { /* code to run */ } -``` - -Insert the above callback function as an argument in the `.reduce()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md deleted file mode 100644 index 448c7702610..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dac -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. - -Here is an example of a `reduce()` method with an empty object as its initial value: - -```js -arr.reduce((accumulator, currentValue) => { - /* code to run */ -}, {}); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md deleted file mode 100644 index 4134f0401a2..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dad -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. - -We can use the reduce function as follows: - -```js -arr.reduce((accumulator, currentValue) => { - return accumulator + currentValue; -}, 0); -``` - -At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, since `arr[0] = 1 = currentValue`. - -At `arr[1]`, the function is `(1, 3) => 1 + 3`, - -Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. - -In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md deleted file mode 100644 index c9d4f5bd8ad..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 5e302e80e003129199103c78 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` - -You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. - -When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md deleted file mode 100644 index b36ed2d97b6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5e302e8ce003129199103c79 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Now let's simplify the `reduce()` callback function by refactoring it. - -Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. - -So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. - -Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md deleted file mode 100644 index 8825fbe6dd0..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dae -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. - -Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. - -If you inspect the Female radio button you will notice its id: `` - -Create a variable named `maxCalories` and set it equal to the document element with the id of `female`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md deleted file mode 100644 index 1e19c715fcf..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daf -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` - -Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md deleted file mode 100644 index 21d83417535..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db0 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. - -For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: - -```js -if (5 - 3 === 4) { - return 'Yes'; -} else { - return 'No'; -} -``` - -`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md deleted file mode 100644 index abe960e3120..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db1 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Now that we have `total` and `maxCalories`, we need to find out the difference between them. - -Create a variable named `difference` and set it equal to `total - maxCalories` - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md deleted file mode 100644 index ad3abc0bfe5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db2 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. - -To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). - -If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. - -Use the same ternary syntax that you used to determine `maxCalories`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md deleted file mode 100644 index 2dbdd8b547b..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db3 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
                                `. - -We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. - -Create a variable named `output` and set it equal to this division element with the `id` of `output`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md deleted file mode 100644 index 87062f28e7f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db4 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Now it's time to create the HTML elements that we will add inside of `output`. - -To create an element, use `createElement()`. For example: - -```js -const myHeading1 = document.createElement('h1') -``` - -Create an `h3` element and assign it to a variable named `result`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md deleted file mode 100644 index 90ad3c91cb4..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db5 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Next, we will create a text node that we will later append to the `result` element. - -JavaScript has a function called `createTextNode()` to accomplish this. For example: - -```js -const myText = document.createTextNode("Hello world!") -``` - -Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md deleted file mode 100644 index b93248efe69..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db6 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -We can now use the `difference` variable that we created above. - -Insert the `difference` variable inside the parentheses of `.createTextNode()` - -If you want to see what the text currently looks like, try `console.log(resultText)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md deleted file mode 100644 index fd08248b5f0..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db7 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Notice how if `total` is less than `maxCalories`, `difference` is a negative number. - -We want to show the absolute value of the difference so it displays "300" rather than "-300". - -Wrap the `difference` in a `Math.abs()` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md deleted file mode 100644 index f066a2b3607..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db8 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md deleted file mode 100644 index d2e8c9a31c3..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db9 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Next we want to add the text from the `surplusOrDeficit` variable that we previously created. - -Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md deleted file mode 100644 index 1311c2ac849..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dba -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. - -Some people consider this a little cumbersome and prefer to use template literals instead. - -Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. - -For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. - -Convert the data inside of `createTextNode()` to be a template literal. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md deleted file mode 100644 index 923d7d02e23..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbb -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: - -```js -result.appendChild(resultText); -``` - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md deleted file mode 100644 index 09da32b6cb5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbc -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Similarly, append the `result` to the `output` element with the `appendChild()` method. - -Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md deleted file mode 100644 index ccb8660bf13..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbd -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Next, let's create and add a horizontal rule (`hr`) element to the output. - -Create an `hr` element and assign it to a variable named `line`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md deleted file mode 100644 index e0f9bd9c47c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbe -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Add the `line` to the `output` element using the `appendChild()` method. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md deleted file mode 100644 index 4c4b069fb43..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbf -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Let's create a few more HTML elements to add to the `output`. - -Create an `h4` element and assign it to a variable named `recommended`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md deleted file mode 100644 index 0becd375fa5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc0 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Create a text node and assign it to a variable named `recommendedText`. - -This is similar to how your created the `resultText` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md deleted file mode 100644 index fd2d846ab52..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc1 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. - -Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". - -This is similar to template literal syntax previously used to create `resultText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md deleted file mode 100644 index 9e9d9c9c3f2..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc2 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Append the `recommendedText` node to the `recommended` element. - -This is similar to how the `resultText` is appended to `result` previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md deleted file mode 100644 index 9264e8ac9cf..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc3 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Append the `recommended` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md deleted file mode 100644 index 0fd8978f093..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc4 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. - -Create an `h4` element and assign it to a variable named `consumed`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md deleted file mode 100644 index 6bb2536f422..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc5 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. - -For example: - -```js -consumed.innerHTML = `Hello world`; -``` - -Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md deleted file mode 100644 index 29d043f4c6e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc6 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Append the `consumed` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md deleted file mode 100644 index c34dcad8f68..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc7 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Now it's time to add some styling which can be added directly as attributes or classes. - -In our CSS file, we have a styling rule for any elements with the class name `green-text`. - -On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. - -Now if you submit the form again and inspect the `result` element, you will see it as `

                                ` and notice that the text is now green. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md deleted file mode 100644 index 7298971ffec..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc8 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. - -For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. - -Set the `class` attribute of the `output` element equal to a class named `bordered-class`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md deleted file mode 100644 index 1b0bd348910..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc9 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. - -Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. - -The `calculate()` function is now finished! - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md deleted file mode 100644 index 56bbb142804..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dca -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. - -In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: - -```html - - - - -
                                - - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md deleted file mode 100644 index db8f9bc95c1..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcb -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -We want a function to run every time the user clicks the "Add Entry" button. - -Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: - -```js -function() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md deleted file mode 100644 index 886f041422c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcc -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Inside the function, create an `input` document element and assign it to a variable named `foodInput`. - -This is similar to how you created the `result` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md deleted file mode 100644 index 6860d68731d..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcd -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Set the `placeholder` property of the `foodInput` equal to `'food name'`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md deleted file mode 100644 index 89e37a9f626..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dce -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. - -In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. - -Add the class name `food-control` to the `foodInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md deleted file mode 100644 index e0ab30e27b5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcf -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Notice that parent container of all of the inputs has an `id` of `entries`: `
                                `. - -Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. - -This is similar to the other `appendChild()` methods that you have used previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md deleted file mode 100644 index ea1faf6c59c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md deleted file mode 100644 index 594af428356..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd1 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. - -This is similar to how to set the class of the `output` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md deleted file mode 100644 index 962a0309894..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd2 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -The `calorieInput` element should only accept numbers that are 0 or above. - -Set the `min` attribute of `calorieInput` to `0`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md deleted file mode 100644 index eac60b49fce..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd3 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. - -We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md deleted file mode 100644 index 7ffb7021744..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd4 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. - -To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md deleted file mode 100644 index 8e15285d2a9..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd5 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. - -The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md deleted file mode 100644 index df36314c4ae..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd6 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. - -Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md deleted file mode 100644 index 1e5b3e9b048..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd7 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. - -# --hints-- - -See description above for instructions. - -```js -assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md deleted file mode 100644 index 7a941b6559c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd8 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Create a variable named `clearOutput` and set it equal to a blank arrow function: - -```js -const clearOutput = () => {} -``` - -This is similar to `function clearOutput () {}`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearOutput === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md deleted file mode 100644 index e6a2d2c6337..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd9 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -We need to remove the contents inside of element with the `id` of `output`. - -In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md deleted file mode 100644 index f8984120835..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dda -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. - -Remove the `bordered-class` class. For example: - -```js -document.getElementById('my-div').classList.remove('my-class') -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md deleted file mode 100644 index 93a258c395b..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddb -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. - -In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/clearOutput\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md deleted file mode 100644 index 6a07e9aa83b..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddc -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearForm === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md deleted file mode 100644 index 88284a00280..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddd -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. - -Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. - -This is similar to how you declared the `total` variable previously in the `calculate` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md deleted file mode 100644 index 9cc201d5194..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dde -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. - -Add `foodInputs.forEach()`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md deleted file mode 100644 index 8044dac1e60..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddf -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -We need to provide a callback function in the parentheses of `forEach()`. - -This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. - -In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md deleted file mode 100644 index dd34b193b4c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de0 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. - -Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. - -This is similar to how you declared the `foodInputs` variable previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md deleted file mode 100644 index 652c8f99281..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de1 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md deleted file mode 100644 index b3cf00545fa..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de2 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. - -Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md deleted file mode 100644 index ead4dfe0e77..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de3 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Congratulations! Have fun playing with your completed calorie counter. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                -
                                -

                                Calorie Counter

                                -
                                - Sex -
                                - - - -
                                - - -
                                -
                                -
                                -
                                - Breakfast -
                                - Lunch -
                                - Dinner -
                                - - - -
                                -
                                -
                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md deleted file mode 100644 index 08bc2a4aa43..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 5d79253297c0ebb149ea9fed -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -In functional programming, we prefer immutable values over mutable values. - -Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. - -Start by creating an empty `infixToFunction` object using `const`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md deleted file mode 100644 index 3159f1d2410..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 5d7925323be8848dbc58a07a -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md deleted file mode 100644 index c5dbbab705c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792532f631702ae6d23e11 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now return the sum of `x` and `y` using the `return` keyword. - -# --hints-- - -See description above for instructions. - -```js -assert(add(1, 2) === 3 && add(100, 2000) === 2100); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md deleted file mode 100644 index 0a9d327d798..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5d7925329445167ecc2ac9c9 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. - -Assign `add` to a new variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md deleted file mode 100644 index 4e85d64fbe2..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792532b07918c3a5904913 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: - -```js -function(x) { - return x -} -``` - -First, remove the `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md deleted file mode 100644 index a9aa387addd..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792533cc8b18b6c133edc7 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: - -```js -const fn = function(x) { - return x; -} - -fn(); -``` - -Assign the anonymous function to the variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md deleted file mode 100644 index 68c44b16619..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 5d7925337954ed57a565a135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. - -Rewrite `addVar` using ES6's arrow syntax: - -```js -const fn = (x, y) => x; -``` - -Note that the value is returned implicitly. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md deleted file mode 100644 index 676f6c6f4ff..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d79253352e33dd59ec2f6de -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Add the key `+` to `infixToFunction` and assign it the value `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(infixToFunction['+'].toString() === addVar.toString()); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md deleted file mode 100644 index c44846417a5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792533d31e4f7fad33011d -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md deleted file mode 100644 index 2096072d738..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d792533e7707b9645d7b540 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Remove the now redundant `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof addVar === 'undefined'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md deleted file mode 100644 index 526e706eb08..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 5d79253378595ec568f70ab6 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Add similar definitions for `-`, `*` and `/` in `infixToFunction`. - -# --hints-- - -See description above for instructions. - -```js -assert( - infixToFunction['-'](10, 2) === 8 && - infixToFunction['*'](10, 10) === 100 && - infixToFunction['/'](100, 10) === 10 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md deleted file mode 100644 index 37432637ac6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5d7925330918ae4a2f282e7e -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md deleted file mode 100644 index 3d09b3967f2..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5d792533ed00e75d129e1b18 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). - -Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. - -This is how you would pass the `-` function: - -```js -str.replace(regex, infixToFunction["-"]) -``` - -# --hints-- - -See description above for instructions. - -```js -assert(infixEval('ab', /(a)b/) === 'aba'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md deleted file mode 100644 index 0926459ef14..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5d792533a5c42fb4d1a4b70d -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md deleted file mode 100644 index 23968d2e070..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5d79253358e8f646cbeb2bb0 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Change the `"+"` in the call to `infixToFunction` to `fn`. - -`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md deleted file mode 100644 index f3dd1211e6a..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5d792533bb38fab70b27f527 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". - -Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). - -# --hints-- - -See description above for instructions. - -```js -const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; -assert( - infixEval('23+35', regex) === '58' && - infixEval('100-20', regex) === '80' && - infixEval('10*10', regex) === '100' && - infixEval('120/6', regex) === '20' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md deleted file mode 100644 index e295114e777..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5d79253386060ed9eb04a070 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. - -To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. - -Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md deleted file mode 100644 index 1af15a10b8e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d792533717672657b81aa69 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -When defining an arrow function with a single argument, the parentheses can be omitted: - -```js -const greeting = name => `Hello !`; -``` - -Define a function `highPrecedence` which takes a single argument `str` and returns it. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('a') === 'a'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md deleted file mode 100644 index 5c2d8560932..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5d7925335ab63018dcec11fe -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Arrow functions can have multiple statements: - -```js -const fn = (x, y) => { - const result = x + y; - return result; // explicit return statement required -}; -``` - -Use this syntax for the `highPrecedence` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md deleted file mode 100644 index 1ddd40ce5d8..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5d7925330f300c342315066d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md deleted file mode 100644 index 3bfba3454a9..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5d792533aa6443215c9b16bf -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md deleted file mode 100644 index 333b8bcb122..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925334c5e22586dd72962 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -The ternary operator has the following syntax: - -```js -const result = condition ? valueIfTrue : valueIfFalse; -const result = 1 === 1 ? 1 : 0; // 1 -const result = 9 > 10 ? "Yes" : "No"; // "No" -``` - -Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2') === '' && - highPrecedence('2+2') === '2+2' && - code.includes('?') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md deleted file mode 100644 index c5f666b8a05..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5d79253307ecd49e030bdcd1 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. - -Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2*2') === '8' && - highPrecedence('2*2') === '4' && - highPrecedence('2+2') === '2+2' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md deleted file mode 100644 index c837d8e94e1..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5d792534257122211d3043af -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. - -# --hints-- - -See description above for instructions. - -```js -assert(spreadsheetFunctions['']('x') === 'x'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md deleted file mode 100644 index 58109dce7a4..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925346f4f2da6df4354a6 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md deleted file mode 100644 index 313db4427d6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5d792534cac2dbe0a719ea7a -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Set `noHigh` to `highPrecedence(str)` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md deleted file mode 100644 index bc94c78c155..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d792534857332d07ccba3ad -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md deleted file mode 100644 index 7972802a8b8..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5d792534d586ef495ea9df90 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Set `str2` to `infixEval(noHigh, infix)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md deleted file mode 100644 index f957c47d628..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5d79253410532e13d13fe574 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - applyFn - .toString() - .replace(/\s/g, '') - .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md deleted file mode 100644 index 42b80301fc6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d7925342415527083bd6667 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: - -```js -"a b c".split(" "); // ["a", "b", "c"]; -``` - -Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md deleted file mode 100644 index 33e85a097cc..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d792534c3d26890ac1484d4 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: - -```js -[1, 2, 3].map(x => x + 1); // [2, 3, 4] -``` - -In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md deleted file mode 100644 index abb91060f5e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d792534b92f3d1cd4410ce3 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md deleted file mode 100644 index bb2f8da03a5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 5d7925341193948dfe6d76b4 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md deleted file mode 100644 index f32c582d3ef..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d792534cf81365cfca58794 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md deleted file mode 100644 index a460b595da1..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d7925348ee084278ff15556 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. - -Now return `str2.replace(regex, "")` at the end of `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md deleted file mode 100644 index 45e848ecbeb..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d7925348a6a41c32f7a4e3e -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md deleted file mode 100644 index 7394c7c6472..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d792534408c5be896b0a46e -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. - -Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md deleted file mode 100644 index c86fe809104..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 5d792534f0eda837510e9192 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md deleted file mode 100644 index bfa91d4503f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d7925346b911fce161febaf -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md deleted file mode 100644 index 24d94216931..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d79253483eada4dd69258eb -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -`range` should set `arr` to `[start]` and should then return `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constarr=[start]') && - JSON.stringify(range(1)) === '[1]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md deleted file mode 100644 index 4307ef2889a..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d7925342b2b993ef18cd45f -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md deleted file mode 100644 index 0fa8e6fe0fb..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5d7925341747ad42b12f8e68 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. - -The `concat` method returns a new array instead of modifying an existing one: - -```js -[1,2,3].concat(4); // [1, 2, 3, 4] -[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] -``` - -Use `concat` instead of `push` to return the result of adding `end` to `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(1, 2)) === '[1,2]' && - code.includes('concat') && - !code.includes('push') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md deleted file mode 100644 index 448578598f5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: 5d792535b0b3c198ee3ed6f9 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -The `concat` method can also accept arrays: - -```js -[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] -[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] -``` - -Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md deleted file mode 100644 index 6e89d44a236..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d7925357a0533eb221b005d -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('arr') && - code.replace(/\s/g, '').includes('[start].concat([end])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md deleted file mode 100644 index 0d876da26b6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d792535591db67ee15b4106 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(3, 2)) === '[]' && - JSON.stringify(range(1, 3)) === '[1,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md deleted file mode 100644 index ee94e71d4a4..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d792535f1f7adf77de5831d -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md deleted file mode 100644 index 497b63c634b..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925353d2c505eafd50cd9 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Remove the curly braces and `return` keyword from `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md deleted file mode 100644 index 862a0002f2f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d79253539b5e944ba3e314c -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md deleted file mode 100644 index 9845839bbeb..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535a4f1cbff7a8b9a0b -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Make `charRange` return `range(start, end)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md deleted file mode 100644 index 43167394a7b..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535e3304f15a8890162 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md deleted file mode 100644 index f5bb024255e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 5d792535a40ea5ac549d6804 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md deleted file mode 100644 index 8369854b752..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925358c220e5b2998909e -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Now, pass `x` to `String.fromCharCode` in the arrow function. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md deleted file mode 100644 index 6253e20d545..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5d7925357729e183a49498aa -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md deleted file mode 100644 index 03ceaf96068..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253555aa652afbb68086 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md deleted file mode 100644 index 27b4b66f7f2..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253582be306d339564f6 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md deleted file mode 100644 index 72223dddb2c..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d7925352047e5c54882c436 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md deleted file mode 100644 index 1870ab8b951..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 5d79253568e441c0adf9db9f -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md deleted file mode 100644 index b394d603ed4..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925356ab117923b80c9cd -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md deleted file mode 100644 index e79d2b6f857..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d792535e54a8cd729a0d708 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md deleted file mode 100644 index 3d6a5a955b7..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -id: 5d7925353b307724a462b06b -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Finally, return `fn("A")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md deleted file mode 100644 index 994e931f57f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d792536735f71d746ee5d99 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. - -Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md deleted file mode 100644 index b06f86f5495..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d792536ad340d9dff2e4a96 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Now, remove the curly braces and return statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md deleted file mode 100644 index d1492aa5cbf..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925369614afd92d01fed5 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md deleted file mode 100644 index 8d17549a291..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d792536504e68254fe02236 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. - -Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md deleted file mode 100644 index 1c388711e2f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536c8d2f0fdfad768fe -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -You can add more arguments by simply adding another arrow with another argument name: - -```js -const manyArguments = a => b => c => d => [a, b, c, d] -``` - -Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md deleted file mode 100644 index 45e6af501cc..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d79253639028b8ec56afcda -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md deleted file mode 100644 index 19bbc068cd3..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d792536834f2fd93e84944f -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -You call curried functions like this: - -```js -const result = add(1)(2); -``` - -Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md deleted file mode 100644 index e220cf656e5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536ddff9ea73c90a994 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. - -Change `x => elemValue(n)(x)` to `elemValue(n)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md deleted file mode 100644 index eaff17e3511..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d7925361596f84067904f7f -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('const fn') && - code.includes('varRangeExpanded') && - evalFormula('A1:J133') === '3' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md deleted file mode 100644 index 03ec1f65ba2..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dd8a4daf255488ac -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md deleted file mode 100644 index b1139d99d92..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536449c73004f265fb1 -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md deleted file mode 100644 index a481e918c67..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d79253685fc69b8fe60a0d2 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. - -This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md deleted file mode 100644 index 64e48966f02..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dc6e3ab29525de9e -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md deleted file mode 100644 index 57da365160d..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536cfd0fd893c630abb -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.includes('varRegex') && - code.includes('varExpanded') && - evalFormula('aC12bc') === 'abc' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md deleted file mode 100644 index 2dc9ec5c8ab..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 5d7925366a5ff428fb483b40 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md deleted file mode 100644 index 0516f1f77e6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5d7925365d4035eeb2e395fd -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md deleted file mode 100644 index a1022f45c6a..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 5d7925364c106e9aaf05a16f -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. - -Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(evalFormula('(2+2)*2') === '8'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md deleted file mode 100644 index 5617221e798..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: 5d792536970cd8e819cc8a96 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -You can define arrow functions without arguments: - -```js -const two = () => 2; -``` - -Define an empty arrow function without arguments and assign it to `window.onload`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('window.onload=()=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md deleted file mode 100644 index 06b401c7e8e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5d792536e33baeaa60129e0a -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md deleted file mode 100644 index 59443f50dc9..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 5d7925379e2a488f333e2d43 -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Now define a function `createLabel` which takes an argument `name` and has an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md deleted file mode 100644 index 3a3a6f126c8..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5d7925379000785f6d8d9af3 -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Inside `createLabel`, assign `document.createElement("div")` to `label`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md deleted file mode 100644 index a9a1dcc5726..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 5d79253791391b0acddd0ac5 -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Add the following code to `createLabel`: - -```js -label.className = "label"; -label.textContent = name; -container.appendChild(label); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md deleted file mode 100644 index 780a9dab7fe..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373104ae5ae83f20a5 -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -The `forEach` method takes a function and calls it with each element of the array. - -Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md deleted file mode 100644 index ccfac003142..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373b7127cfaeb50c26 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). - -# --hints-- - -See description above for instructions. - -```js -assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md deleted file mode 100644 index 5216d89d1d9..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d792537cb3a5cd6baca5e1a -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md deleted file mode 100644 index 544000db907..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 5d79253742f3313d55db981f -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md deleted file mode 100644 index bf8bee8395a..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 5d7925379e0180a438ce7f95 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md deleted file mode 100644 index d57aa617713..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d792537c80984dfa5501b96 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Inside `letters.forEach`, assign `document.createElement("input")` to `input`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md deleted file mode 100644 index 4568ec50b24..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925377b54d8a76efb5657 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Add the following code to `letters.forEach`: - -```js -input.type = "text"; -input.id = y + x; -input.onchange = update; -container.appendChild(input); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md deleted file mode 100644 index 6543d3124fb..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925371398513549bb6395 -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md deleted file mode 100644 index 378c01975ac..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d792537ea3eaf302bf2d359 -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md deleted file mode 100644 index 93968d4e378..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 5d792537533b1c7843bfd029 -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -The `includes` method works on a string and checks if the argument is its substring. - -Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md deleted file mode 100644 index dcc989ea328..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537dc0fe84345d4f19e -title: Step 93 -challengeType: 0 -dashedName: step-93 ---- - -# --description-- - -Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md deleted file mode 100644 index ce97294c369..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537b6cadae0f4b0cda1 -title: Step 94 -challengeType: 0 -dashedName: step-94 ---- - -# --description-- - -The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. - -Use the `slice` method to log the first two letters of `value` to the console. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md deleted file mode 100644 index 1eaf868ad16..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 5d79253770083fb730c93a93 -title: Step 95 -challengeType: 0 -dashedName: step-95 ---- - -# --description-- - -You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. - -Change the call to `slice` to log all characters except the first instead. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md deleted file mode 100644 index cd6f2405a86..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d792537fef76b226b63b93b -title: Step 96 -challengeType: 0 -dashedName: step-96 ---- - -# --description-- - -Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md deleted file mode 100644 index fb91f29be96..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d79253760fca25ccbbd8990 -title: Step 97 -challengeType: 0 -dashedName: step-97 ---- - -# --description-- - -The array destructuring syntax can be used to extract values from arrays: - -```js -const [x, y] = [1, 2]; // in variables -const fn = ([x, y]) => x + y // in functions -``` - -Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && - spreadsheetFunctions['random']([1, 2]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md deleted file mode 100644 index c933b24aaac..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d7925374321824cba309875 -title: Step 98 -challengeType: 0 -dashedName: step-98 ---- - -# --description-- - -Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( - code.replace(/\s/g, '') - ) && spreadsheetFunctions['random']([1, 1]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md deleted file mode 100644 index 2a5ee766e3d..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md +++ /dev/null @@ -1,276 +0,0 @@ ---- -id: 5d7925381e8565a5c50ba7f1 -title: Step 99 -challengeType: 0 -dashedName: step-99 ---- - -# --description-- - -In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. - -You can check if this is the case by comparing a call to a function with another call (with the same arguments): - -```js -console.log(f(2) === f(2)); // always true for pure functions -``` - -Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md deleted file mode 100644 index 2f419cf2876..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925383f1b77db7f1ff59e -title: Step 100 -challengeType: 0 -dashedName: step-100 ---- - -# --description-- - -This is (probably) false, so `random` is certainly impure. - -The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. - -Call `window.onload()` in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md deleted file mode 100644 index 176257a88b5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d792538de9fa3f298bcd5f6 -title: Step 101 -challengeType: 0 -dashedName: step-101 ---- - -# --description-- - -Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md deleted file mode 100644 index ad427105522..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -id: 5d7925385b74f69642e1fea5 -title: Step 102 -challengeType: 0 -dashedName: step-102 ---- - -# --description-- - -Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. - -Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md deleted file mode 100644 index 231159b2b34..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d7925380ea76d55b2c97d7b -title: Step 103 -challengeType: 0 -dashedName: step-103 ---- - -# --description-- - -This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. - -Remove the `console.log` statement. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.includes('console.log')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md deleted file mode 100644 index 36fd2f83b90..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d792538be4fe331f1a6c008 -title: Step 104 -challengeType: 0 -dashedName: step-104 ---- - -# --description-- - -Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. - -But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. - -Change these calls to `""` - the function is now pure but doesn't work. - -# --hints-- - -See description above for instructions. - -```js -const nos = code.replace(/\s/g, ''); -assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md deleted file mode 100644 index 4b9e711aae6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 5d792538d169f33142175b95 -title: Step 105 -challengeType: 0 -dashedName: step-105 ---- - -# --description-- - -To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. - -Add an argument `cells` to `evalFormula`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md deleted file mode 100644 index 39584a049ae..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538e48b5a2c6e5bbe12 -title: Step 106 -challengeType: 0 -dashedName: step-106 ---- - -# --description-- - -When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md deleted file mode 100644 index 1ab52bf8124..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d7925387f3e9da5ec856dbe -title: Step 107 -challengeType: 0 -dashedName: step-107 ---- - -# --description-- - -Update the recursive call to `evalFormula` by passing in `cells` as the second argument. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md deleted file mode 100644 index 11e0b2d0bbc..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253824ae9b4a6e6f3108 -title: Step 108 -challengeType: 0 -dashedName: step-108 ---- - -# --description-- - -Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. - -# --hints-- - -See description above for instructions. - -```js -assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md deleted file mode 100644 index d4c961be237..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 5d7925383f122a279f4c54ad -title: Step 109 -challengeType: 0 -dashedName: step-109 ---- - -# --description-- - -The `find` method returns the first element of an array that satisfies the function passed to it. - -Chain `find` onto `cells` and pass it `cell => cell === id`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md deleted file mode 100644 index abdc6794679..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d7925387b682e962f209269 -title: Step 110 -challengeType: 0 -dashedName: step-110 ---- - -# --description-- - -In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md deleted file mode 100644 index 4baca0e6cc3..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538de774217b173288e -title: Step 111 -challengeType: 0 -dashedName: step-111 ---- - -# --description-- - -Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md deleted file mode 100644 index a2c5b9b1bef..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253891d93585323d1f3c -title: Step 112 -challengeType: 0 -dashedName: step-112 ---- - -# --description-- - -Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md deleted file mode 100644 index 637af181723..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925384e34e944ecb4612d -title: Step 113 -challengeType: 0 -dashedName: step-113 ---- - -# --description-- - -Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md deleted file mode 100644 index d12140aa462..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d792538631844ad0bdfb4c3 -title: Step 114 -challengeType: 0 -dashedName: step-114 ---- - -# --description-- - -`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. - -Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md deleted file mode 100644 index c966a9161ed..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -id: 5d792538e2a8d20cc580d481 -title: Step 115 -challengeType: 0 -dashedName: step-115 ---- - -# --description-- - -The `slice` method can also work on arrays. - -Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md deleted file mode 100644 index 5483ee8a3e9..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 5d792538f5004390d6678554 -title: Step 116 -challengeType: 0 -dashedName: step-116 ---- - -# --description-- - -You can also pass in a negative argument to `slice` to specify that index from the end: - -```js -[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] -``` - -Use a negative index to add a function `lasttwo` which returns the last two elements of an array. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md deleted file mode 100644 index 3e61d996f85..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 5d792539dd4fd4c96fd85f7e -title: Step 117 -challengeType: 0 -dashedName: step-117 ---- - -# --description-- - -The `%` operator returns the remainder: - -```js -4 % 3; // 1 -5 % 3; // 2 -6 % 3; // 0 -``` - -Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. - -# --hints-- - -See description above for instructions. - -```js -assert(isEven(20) && !isEven(31)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md deleted file mode 100644 index 8c4b6a9e314..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md +++ /dev/null @@ -1,292 +0,0 @@ ---- -id: 5d79253949802f8587c8bbd3 -title: Step 118 -challengeType: 0 -dashedName: step-118 ---- - -# --description-- - -The `filter` method keeps only the elements of an array that satisfy the function passed to it: - -```js -[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] -``` - -Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && - code.includes('filter') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md deleted file mode 100644 index c441a9459d8..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 5d7925395888767e9304c082 -title: Step 119 -challengeType: 0 -dashedName: step-119 ---- - -# --description-- - -The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. - -The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. - -For example, here's how to multiply all the value in an array: - -```js -[2, 3, 4].reduce((a, x) => a * x); // 24 -``` - -Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md deleted file mode 100644 index 787472aea1d..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 5d7925393b30099e37a34668 -title: Step 120 -challengeType: 0 -dashedName: step-120 ---- - -# --description-- - -The `includes` method checks if an element is in an array. - -Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md deleted file mode 100644 index f032db3ac16..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 5d7925398157757b23730fdd -title: Step 121 -challengeType: 0 -dashedName: step-121 ---- - -# --description-- - -The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: - -```js -[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] -// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array -// now it first tries [].concat(1) which works -``` - -Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md deleted file mode 100644 index 6b5714247b5..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d792539de4b9ac14dd40409 -title: Step 122 -challengeType: 0 -dashedName: step-122 ---- - -# --description-- - -Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === - '[1,3,5,7,9]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md deleted file mode 100644 index 8f15f9adfd4..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539534f1bf991bb987f -title: Step 123 -challengeType: 0 -dashedName: step-123 ---- - -# --description-- - -ES6 introduced a shorthand object literal syntax: - -```js -const a = 10; -const myObject = { a }; -console.log(myObject); // { a: 10 } -``` - -First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. - -# --hints-- - -See description above for instructions. - -```js -assert(sum([1, 2, 3]) === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md deleted file mode 100644 index eef96f2d471..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d7925394089b762f93ffa52 -title: Step 124 -challengeType: 0 -dashedName: step-124 ---- - -# --description-- - -Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. - -This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. - -# --hints-- - -See description above for instructions. - -```js -assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md deleted file mode 100644 index cb3b30d8c4f..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539ec758d45a6900173 -title: Step 125 -challengeType: 0 -dashedName: step-125 ---- - -# --description-- - -The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. - -As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md deleted file mode 100644 index 621e4cc4fbc..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md +++ /dev/null @@ -1,308 +0,0 @@ ---- -id: 5d7925398d525f61a9ff3a79 -title: Step 126 -challengeType: 0 -dashedName: step-126 ---- - -# --description-- - -The spread operator allow you to pass multiple arguments instead of an array: - -```js -const arr = [1, 2, 3]; -const sum3 = (a, b, c) => a + b + c; -sum3(...arr); // 6 -``` - -Use the spread operator to add `range` to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && - code.includes('...') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md deleted file mode 100644 index 8d27ee2bf76..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 5d792539a222f385c5c17d2b -title: Step 127 -challengeType: 0 -dashedName: step-127 ---- - -# --description-- - -Now define a `median` function which takes an argument `nums` (in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md deleted file mode 100644 index 08ffbd94e4a..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d7925398a7184b41b12a0e0 -title: Step 128 -challengeType: 0 -dashedName: step-128 ---- - -# --description-- - -The `sort` method sorts an array alphabetically: - -```js -["B", "C", "A"].sort(); // ["A", "B", "C"] -``` - -Assign the sorted `nums` to `sorted` in `median`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md deleted file mode 100644 index 49b025f4b1e..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d7925399afb905c34730a75 -title: Step 129 -challengeType: 0 -dashedName: step-129 ---- - -# --description-- - -But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: - -```js -[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] -``` - -If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. - -Use `sort` to sort `nums` in ascending order. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md deleted file mode 100644 index cad2f5aa466..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d792539728d1aa7788e2c9b -title: Step 130 -challengeType: 0 -dashedName: step-130 ---- - -# --description-- - -Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. - -You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md deleted file mode 100644 index df39b579f78..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d79253939434a2724c0ec41 -title: Step 131 -challengeType: 0 -dashedName: step-131 ---- - -# --description-- - -Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md deleted file mode 100644 index 1e4f1aca372..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 5d792539b9e1d3c54d8fe94a -title: Step 132 -challengeType: 0 -dashedName: step-132 ---- - -# --description-- - -Add a return statement to `median` so that it returns `isEven(length)`. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md deleted file mode 100644 index 4cf66a6dd6a..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5d792539b2e0bd8f9e8213e4 -title: Step 133 -challengeType: 0 -dashedName: step-133 ---- - -# --description-- - -Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. - -Note that the `middle` variable is close to the middle but is not actually the middle. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md deleted file mode 100644 index 2428ff3a79d..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 5d792539239148965a1a59a5 -title: Step 134 -challengeType: 0 -dashedName: step-134 ---- - -# --description-- - -Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.median([1, 20, 3]) === 3 && - spreadsheetFunctions.median([27, 7, 20, 10]) === 15 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md deleted file mode 100644 index ff91ae909fd..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d792539e1446045d0df6d28 -title: Step 135 -challengeType: 0 -dashedName: step-135 ---- - -# --description-- - -The `some` method checks if any element of the array satisfies the provided testing function. - -Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.someeven([1, 5, 4, 3]) && - !spreadsheetFunctions.someeven([3, 5, 9]) && - code.includes('.some') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md deleted file mode 100644 index ddede0016d6..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a2febbb77098730b9 -title: Step 136 -challengeType: 0 -dashedName: step-136 ---- - -# --description-- - -The `every` method checks if all elements of an array satisfy the provided testing function. - -Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && - !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && - code.includes('.every') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md deleted file mode 100644 index c475cf8ba22..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d79253a98bd9fdf7ce68d0a -title: Step 137 -challengeType: 0 -dashedName: step-137 ---- - -# --description-- - -We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. - -While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. - -Replace the body of `range` with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md deleted file mode 100644 index 52e294c3655..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 5d79253a1e9abf29de64c177 -title: Step 138 -challengeType: 0 -dashedName: step-138 ---- - -# --description-- - -The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. - -Make `range` return an array of `undefined` with size `end - start + 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md deleted file mode 100644 index ce1e1c87c73..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a8b29d78984369e4b -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -The `fill` method takes an argument and replaces all elements of the array with that argument. - -Use it on the array in `range` to replace everything with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md deleted file mode 100644 index 9630c3210b7..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 5d79253ad297a31cbe073718 -title: Step 140 -challengeType: 0 -dashedName: step-140 ---- - -# --description-- - -The function in the `map` method can actually take a second argument: the index of the element. - -This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). - -Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md deleted file mode 100644 index 7531f12a5a3..00000000000 --- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5dc10b8b93704f41d279eb5b -title: Step 141 -challengeType: 0 -dashedName: step-141 ---- - -# --description-- - -Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                -
                                -
                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md new file mode 100644 index 00000000000..d522cf2c5ab --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md @@ -0,0 +1,388 @@ +--- +id: 659ebe52d74b132a1d75c891 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug. + +The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function. +# --hints-- + +You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`. + +```js +assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn localStorage by Building a Todo App + + + + +
                                +

                                Todo App

                                +
                                + + + +
                                +

                                Discard unsaved changes?

                                +
                                + + +
                                +
                                +                                 +
                                +
                                +
                                + + + + +``` + +```css +:root { + --white: #fff; + --light-grey: #f5f6f7; + --dark-grey: #0a0a23; + --yellow: #f1be32; + --golden-yellow: #feac32; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--dark-grey); +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + color: var(--light-grey); + margin: 20px 0 40px 0; +} + +.todo-app { + background-color: var(--white); + width: 300px; + height: 350px; + border: 5px solid var(--yellow); + border-radius: 8px; + padding: 15px; + position: relative; + display: flex; + flex-direction: column; + gap: 10px; +} + +.btn { + cursor: pointer; + width: 100px; + margin: 10px; + color: var(--dark-grey); + background-color: var(--golden-yellow); + background-image: linear-gradient(#fecc4c, #ffac33); + border-color: var(--golden-yellow); + border-width: 3px; +} + +.btn:hover { + background-image: linear-gradient(#ffcc4c, #f89808); +} + +.large-btn { + width: 80%; + font-size: 1.2rem; + align-self: center; + justify-self: center; +} + +.close-task-form-btn { + background: none; + border: none; + cursor: pointer; +} + +.close-icon { + width: 20px; + height: 20px; +} + +.task-form { + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--white); + border-radius: 5px; + padding: 15px; + width: 300px; + height: 350px; + flex-direction: column; + justify-content: space-between; + overflow: auto; +} + +.task-form-header { + display: flex; + justify-content: flex-end; +} + +.task-form-body { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.task-form-footer { + display: flex; + justify-content: center; +} + +.task-form-label, +#title-input, +#date-input, +#description-input { + display: block; +} + +.task-form-label { + margin-bottom: 5px; + font-size: 1.3rem; + font-weight: bold; +} + +#title-input, +#date-input, +#description-input { + width: 100%; + margin-bottom: 10px; + padding: 2px; +} + +#confirm-close-dialog { + padding: 10px; + margin: 10px auto; + border-radius: 15px; +} + +.confirm-close-dialog-btn-container { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.discard-message-text { + font-weight: bold; + font-size: 1.5rem; +} + +#tasks-container { + height: 100%; + overflow-y: auto; +} + +.task { + margin: 5px 0; +} + +.hidden { + display: none; +} + +@media (min-width: 576px) { + .todo-app, + .task-form { + width: 400px; + height: 450px; + } + + .task-form-label { + font-size: 1.5rem; + } + + #title-input, + #date-input { + height: 2rem; + } + + #title-input, + #date-input, + #description-input { + padding: 5px; + margin-bottom: 20px; + } +} +``` + +```js +const taskForm = document.getElementById("task-form"); +const confirmCloseDialog = document.getElementById("confirm-close-dialog"); +const openTaskFormBtn = document.getElementById("open-task-form-btn"); +const closeTaskFormBtn = document.getElementById("close-task-form-btn"); +const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); +const cancelBtn = document.getElementById("cancel-btn"); +const discardBtn = document.getElementById("discard-btn"); +const tasksContainer = document.getElementById("tasks-container"); +const titleInput = document.getElementById("title-input"); +const dateInput = document.getElementById("date-input"); +const descriptionInput = document.getElementById("description-input"); + +const taskData = []; +let currentTask = {}; + +const addOrUpdateTask = () => { + --fcc-editable-region-- + + --fcc-editable-region-- + const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); + const taskObj = { + id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, + title: titleInput.value, + date: dateInput.value, + description: descriptionInput.value, + }; + + if (dataArrIndex === -1) { + taskData.unshift(taskObj); + } else { + taskData[dataArrIndex] = taskObj; + } + + updateTaskContainer() + reset() +}; + +const updateTaskContainer = () => { + tasksContainer.innerHTML = ""; + + taskData.forEach( + ({ id, title, date, description }) => { + (tasksContainer.innerHTML += ` +
                                +

                                Title: ${title}

                                +

                                Date: ${date}

                                +

                                Description: ${description}

                                + + +
                                + `) + } + ); +}; + + +const deleteTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + buttonEl.parentElement.remove(); + taskData.splice(dataArrIndex, 1); +} + +const editTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + currentTask = taskData[dataArrIndex]; + + titleInput.value = currentTask.title; + dateInput.value = currentTask.date; + descriptionInput.value = currentTask.description; + + addOrUpdateTaskBtn.innerText = "Update Task"; + + taskForm.classList.toggle("hidden"); +} + +const reset = () => { + titleInput.value = ""; + dateInput.value = ""; + descriptionInput.value = ""; + taskForm.classList.toggle("hidden"); + currentTask = {}; +} + +openTaskFormBtn.addEventListener("click", () => + taskForm.classList.toggle("hidden") +); + +closeTaskFormBtn.addEventListener("click", () => { + const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; + if (formInputsContainValues) { + confirmCloseDialog.showModal(); + } else { + reset(); + } +}); + +cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); + +discardBtn.addEventListener("click", () => { + confirmCloseDialog.close(); + reset() +}); + +taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + addOrUpdateTask(); +}); +``` diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md deleted file mode 100644 index f4b05b12871..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e0e72c65bc8e73dfe1e -videoId: LGQuIIv2RVA -title: Elements and Tags Question A -challengeType: 15 -dashedName: elements-and-tags-question-a ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `

                                `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                ` or ``, but some can also be used without the closing forward slash such as `
                                ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) - -## --text-- - -What are HTML tags? - -## --answers-- - -HTML tags tell the browser what content an element contains. - ---- - -HTML tags tell the browser when to load its content. - ---- - -HTML tags tell the browser what content the next element contains. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md deleted file mode 100644 index 51bf43a7014..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 637f4e1672c65bc8e73dfe1f -title: Elements and Tags Question B -challengeType: 15 -dashedName: elements-and-tags-question-b ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `

                                `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                ` or ``, but some can also be used without the closing forward slash such as `
                                ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --text-- - -What are the three parts of most HTML elements? - -## --answers-- - -An opening tag, self closing tag, and content. - ---- - -An opening tag, closing tag, and content. - ---- - -An opening tag, closing tag, and attribute. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md deleted file mode 100644 index ab85844e81b..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e1c72c65bc8e73dfe20 -title: HTML Boilerplate Question A -challengeType: 15 -dashedName: html-boilerplate-question-a ---- - -# --description-- - -To demonstrate an HTML boilerplate, you first need an HTML file to work with. - -Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. - -You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. - -To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. - -It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. - -## The DOCTYPE - -Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. - -The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: - -```html - -``` - -However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. - -Open the `index.html` file created earlier in your text editor and add `` to the very first line. - -# --question-- -## --text-- - -What is the purpose of the `DOCTYPE` declaration? - -## --answers-- - -It tells the browser which version of HTML to use to render the document. - ---- - -It tells the browser that this document uses JavaScript. - ---- - -It tells the browser the title of the document. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md deleted file mode 100644 index ffd10a4b5ac..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 637f4e2872c65bc8e73dfe21 -title: HTML Boilerplate Question B -challengeType: 15 -dashedName: html-boilerplate-question-b ---- - -# --description-- - -After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. - -This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. - -Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: - -```html - - - -``` - -## What is the lang attribute? -`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. - -# --question-- - -## --text-- - -What is the `html` element? - -## --answers-- - -It is the root element in the document and tells the browser which version of HTML it should use. - ---- - -It is the root element in the document and all other elements should descend from it. - ---- - -It is the root element in the document and all other elements should come after it. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md deleted file mode 100644 index e4ddaa12c4b..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e2f72c65bc8e73dfe22 -title: HTML Boilerplate Question C -challengeType: 15 -dashedName: html-boilerplate-question-c ---- - -# --description-- - -The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. - -## The Charset Meta Element -You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. - -Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. - -## Title Element -Another element you should always include in the head of an HTML document is the `title` element: - -```html -My First Webpage -``` - -The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. - -If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. - -There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. - -Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: - - -```html - - - - - - My First Webpage - - -``` - -# --question-- - -## --text-- - -What is the purpose of the `head` element? - -## --answers-- - -The `head` element is used to display all elements that are displayed on the webpage. - ---- - -The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. - ---- - -The `head` element is used to display the header content on top of the webpage. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md deleted file mode 100644 index 302b6a95d44..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e3672c65bc8e73dfe23 -videoId: V8UAEoOvqFg -title: HTML Boilerplate Question D -challengeType: 15 -dashedName: html-boilerplate-question-d ---- - -# --description-- - -The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. - -To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. - ---- - -Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. - ---- - -Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. - -## --text-- - -What is the purpose of the `body` element? - -## --answers-- - -This is where all important information about the webpage is displayed such as the `title` and `meta` tags. - ---- - -This is where you tell the browser how to render the webpage correctly. - ---- - -This is where all content will be displayed on the page such images, text, and links. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md deleted file mode 100644 index 6c1bfb0a976..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 6374f208de18c50e48ba767b -title: Introduction To HTML and CSS Question A -challengeType: 15 -dashedName: introduction-to-html-and-css-question-a ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --assignment-- - -Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. - -## --text-- - -Which of the following statements is true? - -## --answers-- - -CSS is used to create the basic structure of a webpage, and HTML is used to add style. - ---- - -HTML is used to create the basic structure of a webpage, and CSS is used to add style. - ---- - -HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. - - -## --video-solution-- - -2 - - diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md deleted file mode 100644 index 87aff63d4ec..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 6376327e2724a688c04636e3 -title: Introduction To HTML and CSS Question B -challengeType: 15 -dashedName: introduction-to-html-and-css-question-b ---- - -# --description-- - - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to add paragraphs of text on a webpage? - -## --answers-- - -CSS - ---- - -JavaScript - ---- - -HTML - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md deleted file mode 100644 index 2ca9f2fbacb..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 637633162724a688c04636e4 -title: Introduction To HTML and CSS Question C -challengeType: 15 -dashedName: introduction-to-html-and-css-question-c ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to change the font and background color of a button? - -## --answers-- - -You should use CSS to change the background color and font of a button. - ---- - -You should use JavaScript to change the background color and font of a button. - ---- - -You should use HTML to change the background color and font of a button. - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md deleted file mode 100644 index 53e4c08471a..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 637633672724a688c04636e5 -title: Introduction To HTML and CSS Question D -challengeType: 15 -dashedName: introduction-to-html-and-css-question-d ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -What is the difference between HTML, CSS, and JavaScript? - -## --answers-- - -HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. - ---- - -CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. - ---- - -JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md deleted file mode 100644 index b4d237448f3..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f704072c65bc8e73dfe36 -videoId: tsEQgGjSmkM -title: Links and Images Question A -challengeType: 15 -dashedName: links-and-images-question-a ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- Finally, add the following `h1` to the `body`: `

                                Homepage

                                ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. - -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. - -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Links video above. - -## --text-- - -What HTML tag is used to create a link? - -## --answers-- - -`` - ---- - -`

                                ` - ---- - -`

                                  ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md deleted file mode 100644 index a138268c406..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f703572c65bc8e73dfe35 -title: Links and Images Question B -challengeType: 15 -dashedName: links-and-images-question-b ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                  Homepage

                                  ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `                                  ` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- -## --text-- - -What is an attribute? -## --answers-- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. - ---- - -An HTML attribute is used to tell the browser what the element contains. - ---- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md deleted file mode 100644 index 8863b087456..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 637f703072c65bc8e73dfe34 -title: Links and Images Question C -challengeType: 15 -dashedName: links-and-images-question-c ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                  Homepage

                                  ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --text-- - -What attribute tells links where to go to? - -## --answers-- - -`src` - ---- - -`href` - ---- - -`link` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md deleted file mode 100644 index 37eebffbabf..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 637f702872c65bc8e73dfe33 -videoId: ta3Oxx7Yqbo -title: Links and Images Question D -challengeType: 15 -dashedName: links-and-images-question-d ---- - -# --description-- - - -Generally, there are two kinds of links you will create: - -- Links to pages on other websites on the internet - -- Links to pages located on your own websites - - -## Absolute Links -Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. - -You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. - -`https://www.theodinproject.com/about` - -## Relative Links -Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. - -Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. - -Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: - -```html - - - - - Odin Links and Images - - - -

                                  About Page

                                  - - -``` - -Back in the `index` page, add the following anchor element to create a link to the `about` page: - -```html - -

                                  Homepage

                                  - click me - - About - -``` - -Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. - -This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. - -But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. - -Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. - -Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. - -To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. - -```html - -

                                  Homepage

                                  - About - -``` - -Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. - -In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. - -```html - -

                                  Homepage

                                  - About - -``` - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML File Structure video above. - -## --text-- - -What is the difference between an absolute and a relative link? - -## --answers-- - -An absolute link is a link to another page on the current website. A relative link is a link to another website. - ---- - -An absolute link is a link to another website. A relative link is a link another page on the current website. - ---- - -There is no difference between absolute and relative links. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md deleted file mode 100644 index ae008078088..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 637f702372c65bc8e73dfe32 -videoId: 0xoztJCHpbQ -title: Links and Images Question E -challengeType: 15 -dashedName: links-and-images-question-e ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                  Homepage

                                  - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## `Alt` attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included: - - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Images Video above. - -## --text-- - -Which tag is used to display an image? - -## --answers-- - -`` - ---- - -`` - ---- - -`` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md deleted file mode 100644 index e1af2d6a659..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701c72c65bc8e73dfe31 -title: Links and Images Question F -challengeType: 15 -dashedName: links-and-images-question-f ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                  Homepage

                                  -                                   click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -What two attributes do images always need to have? - -## --answers-- - -`href` and `alt` - ---- - -`name` and `href` - ---- - -`alt` and `src` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md deleted file mode 100644 index 5bc84fa6c96..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701572c65bc8e73dfe30 -title: Links and Images Question G -challengeType: 15 -dashedName: links-and-images-question-g ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                  Homepage

                                  - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -How do you access a parent directory in a filepath? - -## --answers-- - -`../` - ---- - -`./` - ---- - -`.../` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md deleted file mode 100644 index 71157081ae7..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 637f700b72c65bc8e73dfe2f -title: Links and Images Question H -challengeType: 15 -dashedName: links-and-images-question-h ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                  Homepage

                                  - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --assignment-- - -Read about the four main image formats that can be used on the web. - -## --text-- - -What are the four main image formats that you can use for images on the web? - -## --answers-- - -TIFF, GIF, PNG, and SVG. - ---- - -JPG, PNG, GIF, and SVG. - ---- - -JPG, PDF, SVG, and GIF. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md deleted file mode 100644 index f4625eb7e31..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e3e72c65bc8e73dfe24 -videoId: kcHKFZBVtf4 -title: Understand Ordered and Unordered List Question A -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-a ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                    ` element, and each item within the list is created using the list item element `
                                  • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                      ` element. Each individual item in them is again created using the list item element `
                                    1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --assignment-- - -Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. - ---- - -Make an unordered shopping list of your favorite foods. - ---- - -Make an ordered list of todo’s you need to get done today. - ---- - -Make an unordered list of places you’d like to visit someday. - ---- - -Make an ordered list of your all time top 5 favorite video games or movies. - -## --text-- - -What HTML tag is used to create an unordered list? - -## --answers-- - -`
                                    2. ` - ---- - -`
                                        ` - ---- - -`
                                          ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md deleted file mode 100644 index 67e79f0ccb9..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e4672c65bc8e73dfe25 -title: Understand Ordered and Unordered List Question B -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-b ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                            ` element, and each item within the list is created using the list item element `
                                          • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                              ` element. Each individual item in them is again created using the list item element `
                                            1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create an ordered list? - -## --answers-- - -`
                                                ` - ---- - -`
                                              1. ` - ---- - -`
                                                  ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md deleted file mode 100644 index 1edd6feffbf..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e5172c65bc8e73dfe26 -title: Understand Ordered and Unordered List Question C -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-c ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                                    ` element, and each item within the list is created using the list item element `
                                                  • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                      ` element. Each individual item in them is again created using the list item element `
                                                    1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create list items within both unordered and ordered lists? - -## --answers-- - -`
                                                        ` - ---- - -`
                                                      1. ` - ---- - -`
                                                          ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md deleted file mode 100644 index 8698b62aca8..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 637f4e5872c65bc8e73dfe27 -videoId: yqcd-XkxZNM -title: Working With Text Question A -challengeType: 15 -dashedName: working-with-text-question-a ---- - -# --description-- - -What would you expect the following text to output on an HTML page? - -```html - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. - -``` - -It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below: - - - -When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line. - -If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `

                                                          ` tag. - -Changing our example from before to use paragraph elements fixes the issue: - - - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. - -## --text-- - -How do you create a paragraph in HTML? - -## --answers-- - -`

                                                          This is a paragraph

                                                          ` - ---- - -`

                                                          This is a paragraph

                                                          ` - ---- - -`This is a paragraph` - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md deleted file mode 100644 index 17d3c900359..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 637f4e5f72c65bc8e73dfe28 -title: Working With Text Question B -challengeType: 15 -dashedName: working-with-text-question-b ---- - -# --description-- - -Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. - -There are 6 different levels of headings starting from `

                                                          ` to `

                                                          `. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. - -Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `

                                                          ` tag. - - - -Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. - -# --question-- -## --text-- - -How many different levels of headings are there and what is the difference between them? - -## --answers-- - -There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. - ---- - -There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. - ---- - -There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md deleted file mode 100644 index 6ccf0e06658..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 637f4e6672c65bc8e73dfe29 -videoId: gW6cBZLUk6M -title: Working With Text Question C -challengeType: 15 -dashedName: working-with-text-question-c ---- - -# --description-- - -The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. - -You can use `strong` on its own: - - - -But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: - - - -Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Bold and Italic Text Video above. - -## --text-- - -What element should you use to make text bold and important? - -## --answers-- - -`This is an important message` - ---- - -`

                                                          This is an important message

                                                          ` - ---- - -`This is an important message` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md deleted file mode 100644 index e686b2698e0..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 637f4e6e72c65bc8e73dfe2a -title: Working With Text Question D -challengeType: 15 -dashedName: working-with-text-question-d ---- - -# --description-- - -The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. - -To use `em` on its own: - - -Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: - - - -# --question-- -## --text-- - -What element should you use to make text italicized to add emphasis? - -## --answers-- - -`This is an italic message` - ---- - -`This is an italic message` - ---- - -`This is an italic message` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md deleted file mode 100644 index a0a7ba2fda9..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e7972c65bc8e73dfe2b -title: Working With Text Question E -challengeType: 15 -dashedName: working-with-text-question-e ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the `body` element is the parent and the `p` is the child: - -```html - - - - -

                                                          Lorem ipsum dolor sit amet.

                                                          - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: - -```html - - - - -

                                                          Lorem ipsum dolor sit amet.

                                                          -

                                                          Ut enim ad minim veniam.

                                                          - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship do two elements have if they are at the same level of nesting? - -## --answers-- - -The elements are each other's parents. - ---- - -The elements are each other's children. - ---- - -The elements are siblings. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md deleted file mode 100644 index 7d440cfab25..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f4e8072c65bc8e73dfe2c -title: Working With Text Question F -challengeType: 15 -dashedName: working-with-text-question-f ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the body element is the parent and the paragraph is the child: - -```html - - - - -

                                                          Lorem ipsum dolor sit amet.

                                                          - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: - -```html - - - - -

                                                          Lorem ipsum dolor sit amet.

                                                          -

                                                          Ut enim ad minim veniam.

                                                          - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship does an element have with any nested element within it? - -## --answers-- - -The element within the other element is called the parent element. - ---- - -The element within the other element is called the child element. - ---- - -The element within the other element is called the sibling element. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md deleted file mode 100644 index 5f5d141fa46..00000000000 --- a/curriculum/challenges/chinese-traditional/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e8772c65bc8e73dfe2d -title: Working With Text Question G -challengeType: 15 -dashedName: working-with-text-question-g ---- - -# --description-- - -HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. - -Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: - -```html -

                                                          View the html to see the hidden comments

                                                          - - - -

                                                          Some paragraph text

                                                          - - -``` - -# --question-- - -## --assignment-- - -To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. - -## --text-- - -How do you create HTML comments? - -## --answers-- - -`/* This is an HTML comment */` - ---- - -`` - ---- - -`<-- This is an HTML comment --!>` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-data-graph-explorer/data-graph-explorer.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-data-graph-explorer/data-graph-explorer.md deleted file mode 100644 index 458aedbd74d..00000000000 --- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-data-graph-explorer/data-graph-explorer.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: 63d8402e39c73468b059cd43 -title: "Data Graph Explorer" -challengeType: 10 -dashedName: data-graph-explorer ---- - -# --description-- - -You will be working on this project with Google Colaboratory. - -After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link." - -# --instructions-- - -For this challenge, you need to create a multi-function calculator using Python that take input and do the following: - -- Get a .csv file in three ways - - uploading it from the local computer - - getting a url from user input - - putting the url in the code -- Use the Pandas library to save the .csv as a dataframe -- Print headings and the first two rows -- Store the column names as a list -- Choose one or two columns and convert the data to Numpy arrays -- Display data as a scatter plot or a line graph -- Be able to do this for different column combinations, and interpret the graphs - -Once you're done, submit the URL to the public Colab notebook on your Google drive. - diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-financial-calculator/financial-calculator.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-financial-calculator/financial-calculator.md deleted file mode 100644 index 572091e16db..00000000000 --- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-financial-calculator/financial-calculator.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: 63d8401e39c73468b059cd42 -title: "Financial Calculator" -challengeType: 10 -dashedName: financial-calculator ---- - -# --description-- - -You will be working on this project with Google Colaboratory. - -After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link." - -# --instructions-- - -For this challenge, you need to create a multi-function calculator using Python that take input and do the following: - -- Calculate annuity with monthly or continuous growth -- Calculate monthly mortgage payment -- Estimate retirement investment balance -- Determine how long until an amount doubles, given the rate -- Solve logarithmic equations -- Convert to (and from) scientific notation - -If you are struggling, you can follow the video walkthrough for this project. - -Once you're done, submit the URL to the public Colab notebook on your Google drive. - diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-graphing-calculator/graphing-calculator.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-graphing-calculator/graphing-calculator.md deleted file mode 100644 index 7d4d4f9253d..00000000000 --- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-graphing-calculator/graphing-calculator.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: 63d83ffd39c73468b059cd40 -title: "Graphing Calculator" -challengeType: 10 -dashedName: graphing-calculator ---- - -# --description-- - -You will be working on this project with Google Colaboratory. - -After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link." - -# --instructions-- - -For this challenge, you need to create a graphing calculator using Python that can take input and do the following: - -- Graph one or more functions -- Create a table of (x,y) values -- Shade above or below the line -- Solve and graph a system of equations -- Zoom in or out on a graph -- Solve quadratic equations - -If you are struggling, you can follow the video walkthrough for this project. - -Once you're done, submit the URL to the public Colab notebook on your Google drive. - diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-multi-function-calculator/multi-function-calculator.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-multi-function-calculator/multi-function-calculator.md deleted file mode 100644 index fa9924aa9d1..00000000000 --- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-multi-function-calculator/multi-function-calculator.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: 63d83ff239c73468b059cd3f -title: "Multi-Function Calculator" -challengeType: 10 -dashedName: multi-function-calculator ---- - -# --description-- - -You will be working on this project with Google Colaboratory. - -After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link." - -# --instructions-- - -For this challenge, you need to create a multi-function calculator using Python that take input and do the following: - -- solve proportions -- solve for x in equations -- factor square roots -- convert decimals to fractions and percents -- convert fractions to decimals and percents -- convert percents to decimals and fractions - -If you are struggling, you can follow the video walkthrough for this project. - -Once you're done, submit the URL to the public Colab notebook on your Google drive. - diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-three-math-games/three-math-games.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-three-math-games/three-math-games.md deleted file mode 100644 index d0969651fcc..00000000000 --- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-three-math-games/three-math-games.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: 63d8401039c73468b059cd41 -title: "Three Math Games" -challengeType: 10 -dashedName: three-math-games ---- - -# --description-- - -You will be working on this project with Google Colaboratory. - -After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link." - -# --instructions-- - -For this challenge, you need to create three math games using Python that do the following: - -- Scatter plot game - - Randomly generate points on a graph and the player has to input the (x,y) coordinates - - For added difficulty, make the graph larger -- Algebra practice game - - Generate one-step and two-step problems with random integer values and the player has to input the answer - - Use positive and negative values. For added difficulty, make the numbers larger -- Projectile game - - Display a "wall" with random height and location. Player has to move sliders to adjust a parabolic path to clear the wall - - For added difficulty, make a second level where players enter a, b, and c without sliders - -Once you're done, submit the URL to the public Colab notebook on your Google drive. - diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md deleted file mode 100644 index 5b3f6a44858..00000000000 --- a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5900f36e1000cf542c50fe80 -title: 'Problem 1: Multiples of 3 and 5' -challengeType: 1 -forumTopicId: 301722 -dashedName: problem-1-multiples-of-3-and-5 ---- - -# --description-- - -If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. - -Find the sum of all the multiples of 3 or 5 below the provided parameter value `number`. - -# --hints-- - -`multiplesOf3and5(10)` should return a number. - -```js -assert(typeof multiplesOf3and5(10) === 'number'); -``` - -`multiplesOf3and5(49)` should return 543. - -```js -assert.strictEqual(multiplesOf3and5(49), 543); -``` - -`multiplesOf3and5(1000)` should return 233168. - -```js -assert.strictEqual(multiplesOf3and5(1000), 233168); -``` - -`multiplesOf3and5(8456)` should return 16687353. - -```js -assert.strictEqual(multiplesOf3and5(8456), 16687353); -``` - -`multiplesOf3and5(19564)` should return 89301183. - -```js -assert.strictEqual(multiplesOf3and5(19564), 89301183); -``` - -# --seed-- - -## --seed-contents-- - -```js -function multiplesOf3and5(number) { - - return true; -} - -multiplesOf3and5(1000); -``` - -# --solutions-- - -```js -const multiplesOf3and5 = (number) => { - var total = 0; - - for(var i = 0; i < number; i++) { - if(i % 3 == 0 || i % 5 == 0) { - total += i; - } - } - return total; -}; -``` diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md deleted file mode 100644 index a8abd3ff027..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 651dd5ae6ffb500e3f2ce47c -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -```js -console.log('with code'); -``` - -*** - -Making a statement based on her assumption. - -### --feedback-- - -No, that's not correct - -*** - -Expressing a possibility. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md deleted file mode 100644 index 27f5dcb5e42..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5d86ffb500e3f2ce47d -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md deleted file mode 100644 index a79f83d6f5a..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd5f41d697d0aab7833b5 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md deleted file mode 100644 index 13028d7c28a..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 651dd3e06ffb500e3f2ce478 -title: "Dialogue: Introducing" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-introducing ---- - -# --description-- - -What the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md deleted file mode 100644 index 3d67f522c07..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543abeff5f028dba112f278 -title: "I am: I'm" -challengeType: 19 -dashedName: i-am-im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, the verb `to be` is used to talk about identities, characteristics, and more. The contraction `I'm` is a combination of `I` and `am`. Here, Tom uses it to introduce himself. - -# --question-- - -## --text-- - -Which operation correctly expands the contraction `I'm`? - -## --answers-- - -`I is` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I am` - -*** - -`I was` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I have` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md deleted file mode 100644 index a2aa6a8f717..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 6543abf5f5f028dba112f279 -title: I'm -challengeType: 22 -dashedName: im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -The word `I'm` is a contraction of `I am`. Contractions are a way to shorten common combinations of words, especially with verbs. - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, that's right! _ Tom McKenzie.` - -## --blanks-- - -`I'm` diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md deleted file mode 100644 index 3b8b7cff0bd..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 6537e6ece93e5724eeb27c54 -title: Name and Job Title -challengeType: 19 -dashedName: name-and-job-title -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, we often mention our job or role in a company by saying, `I'm [Name], the [Job title].` This lets others know our position or role. - -# --question-- - -## --text-- - -What is Maria's job role at the company? - -## --answers-- - -`Graphic Designer` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Member` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Lead` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`CEO` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md deleted file mode 100644 index 2a3c405b6ad..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 651dd5386ffb500e3f2ce47a -title: Right -challengeType: 22 -dashedName: right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, to check or confirm something people sometimes use tag questions. For example, `You are a programmer, right?` Here, `right?` is used as a tag to check or confirm the previous statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, _?` - -## --blanks-- - -`are` - -### --feedback-- - -Pay attention to the verb in the sentence. - -*** - -`right` - -### --feedback-- - -Pay attention to the verb in the sentence. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md deleted file mode 100644 index 2ae09721cbf..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 6543aa3df5f028dba112f275 -title: Team Lead -challengeType: 22 -dashedName: team-lead -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -A `team lead` is a person who leads or manages a team. In the dialogue, Maria introduces herself as the team lead, meaning she has a leadership role. - -# --fillInTheBlank-- - -## --sentence-- - -`I'm Maria, the _ _.` - -## --blanks-- - -team - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -lead - -### --feedback-- - -Focus on the term Maria used to describe herself. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md deleted file mode 100644 index 3349bcfead9..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 6543aae6f5f028dba112f277 -title: "That's Right: 2" -challengeType: 22 -dashedName: thats-right-2 -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -Placeholder Description \_\_\_ \_\_ - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, _ _! I'm Tom McKenzie. It's a pleasure to meet you.` - -## --blanks-- - -`that's` - -*** - -`right` diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md deleted file mode 100644 index e85982fd561..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543aaa9f5f028dba112f276 -title: That's Right -challengeType: 19 -dashedName: thats-right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -When someone makes a correct assumption or guess about you, you can confirm it using phrases like `that's right`. It's a way of agreeing or saying yes to what is said. - -# --question-- - -## --text-- - -Which phrase does Tom use to confirm Maria's statement about him? - -## --answers-- - -`that's wrong` - -### --feedback-- - -`That's wrong` is used to disagree. - -*** - -`that's okay` - -### --feedback-- - -`that's okay` usually shows acceptance, not confirmation. - -*** - -`that's right` - -*** - -`that's left` - -### --feedback-- - -`that's left` refers to a direction, not confirmation. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md deleted file mode 100644 index dd254987129..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 651dd5296ffb500e3f2ce479 -title: You Are -challengeType: 22 -dashedName: you-are -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, when making introductions or identifying someone, you use the verb `to be`. In this case, `You are` is used to address the person Maria is talking to and affirmatively identify their occupation. - -Maria is introducing herself and confirming Tom's job role. `Are` is used in the present affirmative to make a statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, right?` - -## --blanks-- - -are - -### --feedback-- - -The verb `to be` is an irregular verb. When conjugated with the pronoun `you`, `be` becomes `are`. For example: `You are an English learner.` diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md new file mode 100644 index 00000000000..a041fbddef7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md @@ -0,0 +1,15 @@ +--- +id: 655c0feadb1dd77f6cda623f +title: "Dialogue 1: A Job Interview" +challengeType: 21 +videoId: nLDychdBwUg +dashedName: dialogue-1-a-job-interview +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md new file mode 100644 index 00000000000..97f3f3245d8 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md @@ -0,0 +1,54 @@ +--- +id: 657b0f0be03b2137ed88b36c +title: Task 1 +challengeType: 19 +dashedName: task-1 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `interview` is a formal meeting where someone asks questions to learn about another person's experience, skills, or opinions. In job interviews, like in the dialogue, the interviewer asks about the candidate's previous job experiences. + +# --question-- + +## --text-- + +What is the purpose of Anna's meeting with the candidate? + +## --answers-- + +To discuss a new project at Acme Tech + +### --feedback-- + +The dialogue is about an interview, not a project discussion. + +--- + +To give a presentation on web development + +### --feedback-- + +The dialogue focuses on an interview, not a presentation. + +--- + +To have a casual conversation about programming + +### --feedback-- + +This is a formal interview, not a casual conversation. + +--- + +To conduct an interview about the candidate's job experience + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md new file mode 100644 index 00000000000..301a777a900 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md @@ -0,0 +1,50 @@ +--- +id: 657b106ced8c653be6b3218f +title: Task 2 +challengeType: 22 +dashedName: task-2 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Thanks for coming in for this interview. _ you _ me about your _ job experiences?` + +## --blanks-- + +`Can` + +### --feedback-- + +This word is used to ask if someone is able to do something. + +--- + +`tell` + +### --feedback-- + +This word is used when asking someone to give information. + +--- + +`previous` + +### --feedback-- + +This word is used to describe something that happened before now. + + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md new file mode 100644 index 00000000000..ad5202d23d2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md @@ -0,0 +1,58 @@ +--- +id: 657b108cf870283d22b21e8e +title: Task 3 +challengeType: 19 +dashedName: task-3 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the simple present tense is used to describe habitual or usual actions. However, when you are talking about past roles or experiences, like in an interview, you should use the simple past tense. + +The simple past tense often involves changing verbs. For example, `is` becomes `was` for singular subjects and `are` becomes `were` for plural subjects. + +For example, `I am a teacher` in the present becomes `I was a teacher` for past experiences. Similarly, `They are engineers` changes to `They were engineers` when speaking about the past. + +# --question-- + +## --text-- + +What was the candidate's position at Acme Tech? + +## --answers-- + +`A project manager` + +### --feedback-- + +The candidate stated they were a programmer, not a project manager. + +--- + +`A database analyst` + +### --feedback-- + +The candidate mentioned being a programmer, which is different from a database analyst. + +--- + +`A programmer` + +--- + +`A software tester` + +### --feedback-- + +The candidate specifically mentioned their role as a programmer, not a software tester. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md new file mode 100644 index 00000000000..f757d7077f1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md @@ -0,0 +1,38 @@ +--- +id: 657b110ad8afcc3f8e586362 +title: Task 4 +challengeType: 22 +dashedName: task-4 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that have been completed in the past. It involves changing verbs to show that the action happened before now. In this challenge, you'll practice using the simple past form of verb `to be`. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ there for three years. I _ responsible for developing web applications and maintaining the company's database.` + +## --blanks-- + +`was` + +### --feedback-- + +The first `was` indicates the completion of the time period the candidate spent at their previous job. + +--- + +`was` + +### --feedback-- + +The second `was` is used to describe past responsibility, indicating what the candidate used to do in their previous job. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md new file mode 100644 index 00000000000..a2258172744 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md @@ -0,0 +1,49 @@ +--- +id: 657b115008a62d41c0d7482f +title: Task 5 +challengeType: 19 +dashedName: task-5 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the context of programming and technology, the term `web applications` refers to software programs that run on a web server and are accessed through a web browser. They are an essential part of modern technology, allowing users to perform functions or access services over the internet. + +# --question-- + +## --text-- + +What does `web applications` refer to in the context of programming? + +## --answers-- + +Mobile apps that are downloaded from app stores + +### --feedback-- + +While mobile apps are a type of application, `web applications` specifically refer to those accessed through a web browser. + +--- + +Programs that run on a web server and are accessed via a web browser + +--- + +Physical hardware used in networking + +### --feedback-- + +Web applications are software, not physical hardware. + +--- + +Websites that only provide information without user interaction + +### --feedback-- + +Web applications are interactive and functional, not just informational. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md new file mode 100644 index 00000000000..6c2c5ba78bf --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md @@ -0,0 +1,49 @@ +--- +id: 657b119f0ce64343420bb850 +title: Task 6 +challengeType: 19 +dashedName: task-6 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `database` is a structured collection of data, typically stored electronically in a computer system. It is used to organize, store, and retrieve large amounts of information efficiently. In programming, `database` is essential for managing data that applications need to function. + +# --question-- + +## --text-- + +What is a `database` in the context of programming? + +## --answers-- + +A structured collection of data stored electronically + +--- + +A tool for designing websites + +### --feedback-- + +While important in web development, a database is not a tool for designing websites, but for storing data. + +--- + +A programming language used to create applications + +### --feedback-- + +A database is not a programming language; it's a system for storing and managing data. + +--- + +A type of computer virus + +### --feedback-- + +A database is a safe and structured way to store data, not a computer virus. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md new file mode 100644 index 00000000000..03e329649a9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md @@ -0,0 +1,40 @@ +--- +id: 657b11e082e48a44eb4bfc09 +title: Task 7 +challengeType: 22 +dashedName: task-7 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's response and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ also part of the _ update team.` + +## --blanks-- + +`was` + +### --feedback-- + +This word is a past tense verb. You use it to talk about something that happened in the past. + +--- + +`software` + +### --feedback-- + +This word refers to computer programs. It's an important term in technology and programming. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md new file mode 100644 index 00000000000..67343b31705 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -0,0 +1,57 @@ +--- +id: 657b11f87368cf463ea4fe46 +title: Task 8 +challengeType: 19 +dashedName: task-8 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. For example: + + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. + `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + +# --question-- + +## --text-- + +How does Anna ask about specific projects in the past tense? + +## --answers-- + +`Where there any specific projects you'd like to mention?` + +### --feedback-- + +`Where` is used for locations. The correct form for asking about past events is `Were`. + +--- + +`Were there any specific projects you'd like to mention?` + +--- + +`Was there any specific projects you'd like to mention?` + +### --feedback-- + +`Was` is used with singular nouns. Since `projects` is plural, `Were` is the correct choice. + +--- + +`Are there any specific projects you'd like to mention?` + +### --feedback-- + +`Are` is present tense. The question is about past projects, so `Were` is needed. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md new file mode 100644 index 00000000000..e6bc643d065 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md @@ -0,0 +1,55 @@ +--- +id: 657b1240ef768447b80817ad +title: Task 9 +challengeType: 19 +dashedName: task-9 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense, as reviewed earlier, is used for actions completed in the past. In this context, `we were involved in` combines the simple past tense (`were`) with the expression `involved in`, which means being a part of something, especially in an active or important role. For example, `They were involved in organizing the event` means they played an important role in organizing it. + +# --question-- + +## --text-- + +How does the candidate describe their role in the project? + +## --answers-- + +`We had involvement in the development of the e-commerce platform.` + +### --feedback-- + +Although this phrase communicates involvement, the more common expression in English is `were involved in`. + +--- + +`We were engaged in the development of the e-commerce platform.` + +### --feedback-- + +`engaged in` is similar but not the exact phrase used by the candidate. `Involved in` specifically indicates an active participation. + +--- + +`We were involved in the development of the e-commerce platform.` + +--- + +`We participated in the development of the e-commerce platform.` + +### --feedback-- + +While `participated in` suggests involvement, the specific phrase used here is `involved in`. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md new file mode 100644 index 00000000000..f51e04c012a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md @@ -0,0 +1,49 @@ +--- +id: 657b12ae08dd7049b300c901 +title: Task 10 +challengeType: 19 +dashedName: task-10 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +An `e-commerce platform` refers to a software application that allows businesses to manage their online sales operations. It typically includes features for displaying products, processing orders, and handling customer transactions. This term is essential in the world of online business, as it enables companies to sell goods and services over the internet. + +# --question-- + +## --text-- + +What is an `e-commerce platform` in the context of online business? + +## --answers-- + +A platform for social media marketing + +### --feedback-- + +While e-commerce platforms may use social media for marketing, they are primarily used for online sales operations. + +--- + +A software application for managing online sales + +--- + +A tool for website design and development + +### --feedback-- + +An e-commerce platform is specifically for managing online sales, not just website design. + +--- + +A system for email communication with customers + +### --feedback-- + +Though communication might be a feature, an e-commerce platform's main function is to manage online sales. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md new file mode 100644 index 00000000000..092c2b7ff32 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md @@ -0,0 +1,41 @@ +--- +id: 657b12e7c306334b7c320221 +title: Task 11 +challengeType: 22 +dashedName: task-11 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's statement and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for the checkout process, and it _ a successful implementation.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense of `are` used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense of `is` used for singular subjects or situations. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md new file mode 100644 index 00000000000..5a555480e1c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md @@ -0,0 +1,49 @@ +--- +id: 657b13088693ef4ce21ce0e4 +title: Task 12 +challengeType: 19 +dashedName: task-12 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `checkout process` refers to the steps involved in completing a purchase, whether in a physical store or online. In a physical store, this usually involves taking items to a cashier, paying, and receiving a receipt. In online shopping, it includes adding items to a cart, entering shipping and payment details, and finalizing the order. + +# --question-- + +## --text-- + +What does the `checkout process` typically involve? + +## --answers-- + +Signing up for a store's loyalty program + +### --feedback-- + +While loyalty programs are part of customer engagement, the checkout process is specifically about completing a transaction. + +--- + +Arranging items on shelves in a store + +### --feedback-- + +Arranging items is a part of store management, not related to the checkout process of completing a purchase. + +--- + +Conducting market research + +### --feedback-- + +Market research is important for business strategy, but it's separate from the checkout process, which is directly involved in sales transactions. + +--- + +Completing a purchase through payment and receipt of goods + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md new file mode 100644 index 00000000000..db7a9bbed14 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md @@ -0,0 +1,49 @@ +--- +id: 657b133afcef714e542b557a +title: Task 13 +challengeType: 19 +dashedName: task-13 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Implementation` in a technical or business context refers to the process of putting a plan or design into effect. In software development, for instance, implementation involves the actual coding and setup of a software application based on designed specifications. It is a critical phase where ideas or plans are turned into a functioning reality. + +# --question-- + +## --text-- + +What does `implementation` mean in a project context? + +## --answers-- + +The planning stage of a project + +### --feedback-- + +Planning is the phase where strategies are formed, not the actual execution or implementation of those plans. + +--- + +The analysis of project results + +### --feedback-- + +Analysis is about evaluating outcomes, whereas implementation is about executing or carrying out the project plans. + +--- + +The process of team formation + +### --feedback-- + +Team formation is part of project setup, but implementation specifically refers to executing the planned tasks of the project. + +--- + +The execution of a plan or design + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md new file mode 100644 index 00000000000..1fa977ff3c0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md @@ -0,0 +1,49 @@ +--- +id: 657b135e9029fb4f8141e40c +title: Task 14 +challengeType: 22 +dashedName: task-14 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. This is a great way to practice and remember these words. + +# --fillInTheBlank-- + +## --sentence-- + +`Anna: That's excellent. _ there any specific projects you'd like to mention?` + +`Candidate: Yes, in one of my team's projects, we were _ in the development of an e-commerce platform. We were responsible for the _ process, and it was a successful implementation.` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past tense form of `are`. The first letter should be capitalized. + +--- + +`involved` + +### --feedback-- + +This word means participating actively in something. + +--- + +`checkout` + +### --feedback-- + +This term refers to the process of completing a purchase. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md new file mode 100644 index 00000000000..94904516eba --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md @@ -0,0 +1,54 @@ +--- +id: 657b138d33db9e50f116b5f0 +title: Task 15 +challengeType: 19 +dashedName: task-15 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and answer the question. + +# --question-- + +## --text-- + +How does Anna ask about the candidate's educational background in computer science? + +## --answers-- + +`Are you educated in computer science?` + +### --feedback-- + +`Are you` is present tense, but Anna's question is about the candidate's past education. + +--- + +`Do you study computer science?` + +### --feedback-- + +`Do you study` is present tense. The question is about past education. + +--- + +`Were you educated in computer science?` + +--- + +`Have you studied computer science?` + +### --feedback-- + +`Have you studied` is a different form, asking if they have ever studied it at any time. `Were you educated` specifically asks about formal education in the past. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md new file mode 100644 index 00000000000..6044644f850 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md @@ -0,0 +1,49 @@ +--- +id: 657b1431076b365555784189 +title: Task 16 +challengeType: 19 +dashedName: task-16 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `bachelor's degree` is an undergraduate academic degree awarded by colleges and universities upon completion of a course of study. In the term `bachelor's degree`, the use of the noun (`bachelor`) followed by the `'s` indicates possession or association. This form is commonly used to show that something belongs to or is related to the noun, as in `today's news` or `teacher's guide`. + +# --question-- + +## --text-- + +What does `bachelor's degree` refer to? + +## --answers-- + +An undergraduate academic degree + +--- + +A type of professional certification + +### --feedback-- + +A bachelor's degree is an academic qualification, not a professional certification. + +--- + +A high school diploma + +### --feedback-- + +A bachelor's degree is a higher education qualification, more advanced than a high school diploma. + +--- + +A master's program entry requirement + +### --feedback-- + +While a bachelor's degree may be required for a master's program, it itself refers to an undergraduate degree. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md new file mode 100644 index 00000000000..299109790e0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md @@ -0,0 +1,56 @@ +--- +id: 657b145976723b56a97b8dda +title: Task 17 +challengeType: 19 +dashedName: task-17 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `I was introduced to` uses the simple past tense form `was` of the verb `be`, combined with the past participle `introduced`. This structure, `be` followed by a verb suffixed with `-ed`, is often used to describe actions that happened to the subject in the past. For example: + +`At college, I was introduced to many programing languages` + +# --question-- + +## --text-- + +What does the candidate mean by saying `I was introduced to various programming languages and software development principles`? + +## --answers-- + +I taught myself various programming languages and principles + +### --feedback-- + +`I was introduced to` implies being formally taught or shown by someone else, not self-teaching. + +--- + +I learned about various programming languages and principles in my studies + +--- + +I have extensive experience with various programming languages and principles + +### --feedback-- + +The phrase indicates initial exposure to these topics, not necessarily extensive experience. + +--- + +I developed various programming languages and principles + +### --feedback-- + +Being introduced to something means learning about it for the first time, not creating or developing it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md new file mode 100644 index 00000000000..2e11e13fa69 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md @@ -0,0 +1,49 @@ +--- +id: 657b149630b3ea5873269a38 +title: Task 18 +challengeType: 19 +dashedName: task-18 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `various` is an adjective used to describe a number of different types or kinds of something, emphasizing diversity or variety. It is often used to indicate that there are several distinct items or examples being referred to. For example, saying `various books` means books of different kinds or genres. + +# --question-- + +## --text-- + +What does `various` imply when talking about programming languages and software development principles? + +## --answers-- + +Different types or kinds + +--- + +A specific type or kind + +### --feedback-- + +The term `various` implies diversity, not specificity. + +--- + +Only one type + +### --feedback-- + +`Various` indicates a number of different types, not just one. + +--- + +Irrelevant or unrelated types + +### --feedback-- + +`Various` does mean different types, but these are usually relevant and related to the context. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md new file mode 100644 index 00000000000..b217384d87c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md @@ -0,0 +1,38 @@ +--- +id: 657b14d8353d665a187fe771 +title: Task 19 +challengeType: 22 +dashedName: task-19 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this challenge, you'll practice filling in key terms from the dialogue. These terms are commonly used in job interviews and are essential for understanding the context of the discussion. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Sure, I was a programmer at Acme Tech. I was there for three years. I was responsible for developing web _ and maintaining the company's _. I was also part of the software update team.` + +## --blanks-- + +`applications` + +### --feedback-- + +These are programs designed to perform specific tasks or functions. + +--- + +`database` + +### --feedback-- + +This is a collection of information organized for easy access, management, and updating. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md new file mode 100644 index 00000000000..5d81b22a9e7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md @@ -0,0 +1,62 @@ +--- +id: 657b153ac677705c7059530d +title: Task 20 +challengeType: 19 +dashedName: task-20 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `could you tell me` is a polite way to ask someone for information. It's commonly used in formal or professional situations, like job interviews or meetings. +In English, some verbs have irregular past forms, meaning they do not follow the regular pattern of adding `-ed` to make the past tense. `Can` is one such verb, and its irregular simple past form is `could`. + +The existence of irregular forms, like `could`, often comes from the way language has evolved over time. These forms do not follow the regular patterns and need to be memorized. + +For example: + +- Present: `I can speak English.` +- Past: `I could speak English when I was six.` + +# --question-- + +## --text-- + +What does the phrase `could you tell me` in Anna's sentence express? + +## --answers-- + +A polite request for information + +--- + +A command to do something immediately + +### --feedback-- + +The phrase `could you tell me` is used for polite requests, not direct commands. + +--- + +A suggestion for future action + +### --feedback-- + +This phrase is asking for information now, not suggesting something for the future. + +--- + +An offer to help someone + +### --feedback-- + +This phrase is more about asking for information than offering help. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md new file mode 100644 index 00000000000..ecf0d666af0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md @@ -0,0 +1,54 @@ +--- +id: 657b15dbcafe4d5f39a5de82 +title: Task 21 +challengeType: 19 +dashedName: task-21 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `previous` is used to describe something that happened before the current time or situation. It's often used to refer to past experiences, jobs, or events. + +# --question-- + +## --text-- + +In the context of Anna's question, what does `previous` refer to? + +## --answers-- + +Past roles and responsibilities + +--- + +Future roles and responsibilities + +### --feedback-- + +`Previous` refers to something that has already happened, not something in the future. + +--- + +Current roles and responsibilities + +### --feedback-- + +`Previous` means something that happened before now, not what is happening currently. + +--- + +Unrelated roles and responsibilities + +### --feedback-- + +`Previous` specifically relates to roles and responsibilities that were held before, not those unrelated. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md new file mode 100644 index 00000000000..8497f67b9bb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md @@ -0,0 +1,53 @@ +--- +id: 657b160d6a8662610fe6a523 +title: Task 22 +challengeType: 22 +dashedName: task-22 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that were completed in the past. Regular verbs in the past tense usually end with `-ed`, while irregular verbs have unique past forms. For example, as you learned in previous tasks, `was` and `were` are the past forms of `is` and `are`. + +Examples of simple past tense: + +- `I worked at a company.` (`work` becomes `worked`) +- `I was happy.` (`is` becomes `was`) +- `We were busy.` (`are` becomes `were`) + +# --fillInTheBlank-- + +## --sentence-- + +`Hello! Certainly. I _ at Mock Corporation for five years. I _ part of a team of software engineers, and we _ responsible for developing and maintaining various applications.` + +## --blanks-- + +`worked` + +### --feedback-- + +Think of the past tense of `work`, a regular verb that follows the usual `-ed` ending pattern. + +--- + +`was` + +### --feedback-- + +Recall the past tense form of `is`, which changes to a completely different word in its irregular past form. + +--- + +`were` + +### --feedback-- + +Consider the past tense of `are`, an irregular verb that also changes to a different word in the past. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md new file mode 100644 index 00000000000..8e1b26a3bce --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md @@ -0,0 +1,46 @@ +--- +id: 657b163c9da40e62b904be1f +title: Task 23 +challengeType: 22 +dashedName: task-23 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the past simple interrogative. In questions, the simple past tense often begins with a past tense verb, followed by the subject and the rest of the sentence. This structure is used to ask about past events or states. + +# --fillInTheBlank-- + +## --sentence-- + +`That's great to hear. _ the members of the team _ _ any specific achievements or projects?` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past form of `are` used to ask about a past state or condition. + +--- + +`involved` + +### --feedback-- + +Think of a word that means `participated in` or `engaged with`. + +--- + +`in` + +### --feedback-- + +A preposition that often follows `involved` to indicate participation or inclusion. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md new file mode 100644 index 00000000000..bc7924edcf6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md @@ -0,0 +1,54 @@ +--- +id: 657b18e71067d6680b9ac5d3 +title: Task 24 +challengeType: 19 +dashedName: task-24 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `redesign` means to design something again or differently. It's often used in the context of improving or updating the design of an existing product, service, or structure. In software and web development, redesigning is a common practice to enhance functionality, user experience, or aesthetics. + +# --question-- + +## --text-- + +What does `redesign` imply in Candidate2's statement about the website project? + +## --answers-- + +To design for the first time + +### --feedback-- + +`Redesign` implies working on something that already exists, not creating it for the first time. + +--- + +To remove the design + +### --feedback-- + +`Redesign` means to change or improve the existing design, not to remove it. + +--- + +To change or improve an existing design + +--- + +To copy a design + +### --feedback-- + +`Redesign` involves making changes or improvements, not copying a design as it is. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md new file mode 100644 index 00000000000..ed588a90563 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md @@ -0,0 +1,54 @@ +--- +id: 657b1985ae17886b05b382b1 +title: Task 25 +challengeType: 19 +dashedName: task-25 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `performance` in a technical context often refers to how well a system or component operates, especially in terms of speed, efficiency, and reliability. For websites and software, performance can relate to how quickly pages load, the responsiveness of the application, or the stability of the system under various conditions. + +# --question-- + +## --text-- + +What does `performance` refer to in Candidate2's statement about the website? + +## --answers-- + +A live presentation + +### --feedback-- + +While `performance` can mean a presentation, in this context, it relates to the functioning of the website. + +--- + +Artistic display + +### --feedback-- + +In a technical context, `performance` refers to operational effectiveness, not an artistic aspect. + +--- + +Financial success + +### --feedback-- + +`Performance` in this context is about the website's operational aspects, not its financial success. + +--- + +How well the website operates + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md new file mode 100644 index 00000000000..98e6bda774a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md @@ -0,0 +1,54 @@ +--- +id: 657b19bf7b32af6caf763ef7 +title: Task 26 +challengeType: 19 +dashedName: task-26 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `collaborative effort` refers to a situation where people work together as a team to achieve a common goal. This kind of teamwork is essential in many work environments, especially on projects where different skills and perspectives are needed. + +# --question-- + +## --text-- + +What does `collaborative effort` imply in the context of Candidate2's statement? + +## --answers-- + +Working independently + +### --feedback-- + +`Collaborative effort` means working together as a team, not independently. + +--- + +Teamwork to achieve a goal + +--- + +Avoiding responsibility + +### --feedback-- + +`Collaborative effort` involves taking shared responsibility, not avoiding it. + +--- + +Focusing on individual skills + +### --feedback-- + +`Collaborative effort` emphasizes teamwork over individual skills. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md new file mode 100644 index 00000000000..56a621b07c6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md @@ -0,0 +1,38 @@ +--- +id: 657b1a03df3ec46eca276046 +title: Task 27 +challengeType: 22 +dashedName: task-27 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. + +# --fillInTheBlank-- + +## --sentence-- + +`Yes, our team _ involved in a project to _ the company's website.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`redesign` + +### --feedback-- + +This word means to design something again in a different way. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md new file mode 100644 index 00000000000..66d49e9e89f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md @@ -0,0 +1,55 @@ +--- +id: 657b1a27dc6daf6ffd52ff1f +title: Task 28 +challengeType: 19 +dashedName: task-28 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the noun suffixed with `'s` followed by a second noun structure is used to show possession or belonging. If the first noun is singular, as in `Sarah's laptop`, it indicates that the laptop belongs to Sarah. However, if the first noun is plural, the structure changes to noun suffixed with `'`, as in `teachers' office`, indicating an office for teachers. + +# --question-- + +## --text-- + +What does `master's degree` in the context of the dialogue refer to? + +## --answers-- + +A degree for school teachers + +### --feedback-- + +`Master's degree` refers to an advanced academic degree, not specifically for teachers. + +--- + +A primary level educational degree + +### --feedback-- + +`Master's degree` is a higher education qualification, beyond the primary level. + +--- + +A degree in mastering skills + +### --feedback-- + +While it implies expertise, `master's degree` specifically refers to an academic qualification. + +--- + +An advanced academic degree + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md new file mode 100644 index 00000000000..bf63c3e8d24 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md @@ -0,0 +1,49 @@ +--- +id: 657b1a637e4dc571f8f4d3d7 +title: Task 29 +challengeType: 19 +dashedName: task-29 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `appreciate` is often used to express gratitude or to acknowledge the value or importance of something or someone's actions. It's a way of showing that you recognize and are thankful for someone's help, effort, or achievement. + +# --question-- + +## --text-- + +In a work meeting, your colleague says, `I really appreciate your help on this project.` What is your colleague expressing? + +## --answers-- + +Dissatisfaction with your work + +### --feedback-- + +`Appreciate` means to be grateful or thankful, not to show dissatisfaction. + +--- + +Indifference to your contribution + +### --feedback-- + +`Appreciate` is used to express positive recognition, not indifference. + +--- + +Gratitude for your contribution + +--- + +A need for more assistance + +### --feedback-- + +`Appreciate` here indicates satisfaction with the help received, not a request for more assistance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md new file mode 100644 index 00000000000..4fa33c1c2d0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md @@ -0,0 +1,47 @@ +--- +id: 657b1a9581015573806e1e20 +title: Task 30 +challengeType: 22 +dashedName: task-30 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words you learned. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for implementing new features and ensuring the website's performance. It _ a _ effort, and we were able to deliver the project on time.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense form of `are`, used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`collaborative` + +### --feedback-- + +This word means working together as a team. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md new file mode 100644 index 00000000000..6013cb50f86 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md @@ -0,0 +1,39 @@ +--- +id: 657b1cc072206e7ac3db88b8 +title: Task 31 +challengeType: 22 +dashedName: task-31 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the missing words correctly. This is a great way to practice what you've learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I have a _ degree in computer science. My studies _ quite intensive, and I was introduced to many different methodologies.` + +## --blanks-- + +`master's` + +### --feedback-- + +This term, using the `noun's noun` structure, refers to an advanced academic degree. + +--- + +`were` + +### --feedback-- + +This is the past tense form of `are` used for plural subjects or things. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md new file mode 100644 index 00000000000..1c7c7b4603c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md @@ -0,0 +1,30 @@ +--- +id: 657b1d080265ba7c4f96bf79 +title: Task 32 +challengeType: 22 +dashedName: task-32 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task helps you review the word you learned. Listen to the dialogue and complete the sentence correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`Impressive! We _ candidates with strong educational backgrounds and practical experience.` + +## --blanks-- + +`appreciate` + +### --feedback-- + +This word means to recognize the value or importance of something or someone's actions. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md new file mode 100644 index 00000000000..28e4211c290 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md @@ -0,0 +1,15 @@ +--- +id: 657b1d4ec0e2587e8bcc95f7 +title: "Dialogue 3: Two Workmates Talk About Their Backgrounds" +challengeType: 21 +dashedName: dialogue-3-two-workmates-talk-about-their-backgrounds +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md new file mode 100644 index 00000000000..df8ebc66d25 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md @@ -0,0 +1,54 @@ +--- +id: 657b1da0b27fef8117827ce5 +title: Task 33 +challengeType: 19 +dashedName: task-33 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned about the simple past tense. Now, you can explore it further. The simple past tense is often formed by adding `-ed` to a verb. But, when a verb ends with an `e`, you just add a `d`. For example, `notice` becomes `noticed`. + +# --question-- + +## --text-- + +What does `noticed` in Sarah's sentence indicate? + +## --answers-- + +Sarah observed something in the past + +--- + +Sarah is planning to observe something + +### --feedback-- + +The simple past tense `noticed` indicates a completed action in the past, not a future plan. + +--- + +Sarah continuously observes something + +### --feedback-- + +The simple past tense `noticed` is used for actions that were completed, not ongoing actions. + +--- + +Sarah never observes anything + +### --feedback-- + +`Noticed` implies that Sarah did observe something, not never observing. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md new file mode 100644 index 00000000000..5a1ba6afbfc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md @@ -0,0 +1,30 @@ +--- +id: 657b1dfec76149836ea5c7d0 +title: Task 34 +challengeType: 22 +dashedName: task-34 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you will focus on the past simple negative. It's created by adding `not` after the auxiliary verb `was` or `were`. For example, `was` becomes `wasn't` (`was not`) and `were` becomes `weren't` (`were not`). This form is used to describe something that did not happen in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`It _ exactly tech-related, but I learned a lot about problem-solving and critical thinking.` + +## --blanks-- + +`wasn't` + +### --feedback-- + +This word is used to make a negative statement in the past tense. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md new file mode 100644 index 00000000000..da30e71e20a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md @@ -0,0 +1,49 @@ +--- +id: 657b1e2fad2ffe84ab420a56 +title: Task 35 +challengeType: 19 +dashedName: task-35 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You're already familiar with `wasn't` and `weren't` for past simple negative. Now, let's explore `didn't`, a contraction of `did not`. It's used with the base form of verbs (the infinitive without `to`) to express that an action did not happen in the past. For example, `didn't go` means the action of going did not occur. + +# --question-- + +## --text-- + +Imagine you are reading a story about a character who planned to attend a concert but couldn't. How would you describe this situation? + +## --answers-- + +The character enjoyed the concert + +### --feedback-- + +Using `didn't` suggests the character did not go to the concert, contradicting the idea of enjoying it. + +--- + +The character didn't attend the concert + +--- + +The character always goes to concerts + +### --feedback-- + +This expression refers to a regular habit, not a specific event in the past. + +--- + +The character is looking forward to the next concert + +### --feedback-- + +This option is about future anticipation. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md new file mode 100644 index 00000000000..938a8118ce2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md @@ -0,0 +1,54 @@ +--- +id: 657b1e66159fec86336a737b +title: Task 36 +challengeType: 19 +dashedName: task-36 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned the basics of the simple past tense. Now you can dive deeper into it. Typically, the simple past tense is formed by adding `-ed` to regular verbs. For instance, the verb `play` becomes `played` in the simple past. This tense is used to describe actions that were completed at a specific time in the past. + +# --question-- + +## --text-- + +What does `I played` in Sophie's sentence suggest about her experience with coding? + +## --answers-- + +She casually experimented with coding in the past + +--- + +She is currently playing a coding game + +### --feedback-- + +`Played` is in the past tense, indicating a past action, not something happening currently. + +--- + +She plans to start coding soon + +### --feedback-- + +`Played` implies she already has some experience with coding, not that she is planning to start. + +--- + +She never tried coding + +### --feedback-- + +Using `played` confirms she did engage in coding, contradicting the idea of never trying it. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md new file mode 100644 index 00000000000..2bd70b3d732 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md @@ -0,0 +1,49 @@ +--- +id: 657b1e9a62603587747f7f45 +title: Task 37 +challengeType: 19 +dashedName: task-37 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In English, when forming questions in the simple past tense, you often use `did`. This is followed by the subject and the base form of the verb (without `ed`). For example, `Did you enjoy` is a past simple interrogative phrase where `did` is the auxiliary verb, `you` is the subject, and `enjoy` is the base form of the verb. + +# --question-- + +## --text-- + +What does a question like `Did you enjoy the concert last night?` ask about? + +## --answers-- + +Are you going to enjoy the concert? + +### --feedback-- + +This implies a future event. The question with `did` is asking about a past experience. + +--- + +Do you enjoy concerts in general? + +### --feedback-- + +This is asking about general preferences, not a specific past event. + +--- + +Did you have a good experience at the concert last night? + +--- + +Will you enjoy future concerts? + +### --feedback-- + +The question is about a past event, not future experiences. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md new file mode 100644 index 00000000000..430fa995037 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md @@ -0,0 +1,42 @@ +--- +id: 657b1ee1de7216896b5b4361 +title: Task 38 +challengeType: 22 +dashedName: task-38 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blank correctly. This task is a review. Remember, the simple past tense is used to talk about actions or situations in the past, and the negative form is used to describe things that did not happen. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: That's interesting! So, you _ work on many programming projects during your studies?` + +`Sophie: No, not really. I _ around with coding, but most of my projects involved circuit designs and electrical systems. It was a bit different.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used here to talk about something that was not done in the past. + +--- + +`played` + +### --feedback-- + +This word suggests that Sophie casually engaged in coding for pleasure or interest. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md new file mode 100644 index 00000000000..dfcc68a881a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md @@ -0,0 +1,40 @@ +--- +id: 657b1f0585d48f8ac0b19654 +title: Task 39 +challengeType: 22 +dashedName: task-39 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you'll focus on answering questions in the simple past tense. When responding to a past simple interrogative (a question), you can answer affirmatively with `did` or negatively with `didn't`. For example, `Did you go to the party?` can be answered with `I did` (affirmative) or `I didn't` (negative). Listen to the dialogue and fill in the blanks correctly to practice this structure. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: I see. _ you enjoy your time there, even if it wasn't entirely tech-focused? Sophie: I _.` + +## --blanks-- + +`Did` + +### --feedback-- + +This word is used to form a past simple interrogative question. The first letter should be capitalized. + +--- + +`did` + +### --feedback-- + +This response is an affirmative answer to the past simple interrogative question. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md new file mode 100644 index 00000000000..92e4b28c489 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md @@ -0,0 +1,49 @@ +--- +id: 657b1f598f63008c8bdb20b8 +title: Task 40 +challengeType: 19 +dashedName: task-40 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the simple past tense, some verbs are irregular and don't follow the regular `-ed` ending pattern. One example of this is the verb `meet`, which becomes `met` in the past tense. This is important to remember when talking about past events. + +# --question-- + +## --text-- + +During a class reunion, an old friend tells you, `We met for the first time in art class.` What is your friend referring to with `met`? + +## --answers-- + +We are meeting right now in art class + +### --feedback-- + +The use of `met` indicates a past event, not something happening currently. + +--- + +Our first encounter was in the past, specifically in art class + +--- + +We will meet for the first time soon + +### --feedback-- + +`Met` indicates a past action, not a future arrangement. + +--- + +We have never been in art class together + +### --feedback-- + +`Met` suggests a past meeting. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md new file mode 100644 index 00000000000..e3cdc339c1f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md @@ -0,0 +1,49 @@ +--- +id: 657b1f981cd42e8dc3b282d9 +title: Task 41 +challengeType: 19 +dashedName: task-41 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn another special case in this task. It's the past tense form of `have`. Unlike regular verbs that add `-ed` for the past tense, `have` becomes `had`. This irregular form is used for both singular and plural subjects in the past tense, making it a unique and important verb to remember. + +# --question-- + +## --text-- + +What does `had` imply in a sentence like `They had a meeting yesterday?` + +## --answers-- + +They possessed or experienced something in the past + +--- + +They are having a meeting right now + +### --feedback-- + +`Had` is used for past actions, indicating the meeting occurred in the past, not at the present moment. + +--- + +They will have a meeting tomorrow + +### --feedback-- + +`Had` indicates a past action, not a future plan. + +--- + +They never have meetings + +### --feedback-- + +Using `had` confirms that the meeting took place in the past. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md new file mode 100644 index 00000000000..9f86ab82bcb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md @@ -0,0 +1,47 @@ +--- +id: 657b1fe950c0df90346e5d12 +title: Task 42 +challengeType: 22 +dashedName: task-42 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the words `met`, `had`, and `wasn't`. You have already learned these words. Listen to the dialogue and fill in the blanks with the correct words. This exercise is a good way to practice and reinforce your understanding of these words in context. + +# --fillInTheBlank-- + +## --sentence-- + +`I did. It was challenging, but I _ some fantastic people. We _ a bunch of fun coding marathons, although I _ always a very strong programmer.` + +## --blanks-- + +`met` + +### --feedback-- + +This word is used here to describe encountering people in the past. + +--- + +`had` + +### --feedback-- + +This word is used to express possession or experiences in the past. + +--- + +`wasn't` + +### --feedback-- + +This word is the negative form in the past tense, indicating something that was not the case. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md new file mode 100644 index 00000000000..2ee4e256d2a --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md @@ -0,0 +1,39 @@ +--- +id: 657b201372864e91d4f5bb53 +title: Task 43 +challengeType: 22 +dashedName: task-43 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +When a verb ends in a consonant followed by `y`, you should change the `y` to `i` and add `ed` for the past tense. For example, `carry` becomes `carried`. Note that this rule applies when the `y` follows a consonant, not a vowel, so the simple past form of `convey` is `conveyed`. For regular verbs, you simply add `ed` to form the past tense. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ at a small college as well and _ in information technology.` + +## --blanks-- + +`studied` + +### --feedback-- + +The past simple tense of `study` is formed by changing `y` to `i` and adding `ed`. + +--- + +`majored` + +### --feedback-- + +This word follows the regular past simple tense formation by just adding `ed`. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md new file mode 100644 index 00000000000..67255d1bac6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md @@ -0,0 +1,26 @@ +--- +id: 657b20338e0802931673c1e1 +title: Task 44 +challengeType: 22 +dashedName: task-44 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + +# --description-- + +You've learned that for verbs ending in `e`, you simply add `d` to form the simple past tense. Choose the correct form of `love` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she really _ the beach vacation.` + +## --blanks-- + +`loved` + +### --feedback-- + +To form the simple past, add `d` to the base form of the verb, `love`. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md new file mode 100644 index 00000000000..4d89a2935c0 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md @@ -0,0 +1,54 @@ +--- +id: 657b20985d315095e5c3851d +title: Task 45 +challengeType: 19 +dashedName: task-45 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this context, `got` is a special case in the simple past tense. It's the past tense of `get`. Unlike regular verbs that typically add `-ed` for the past tense, `get` changes to `got`. + +# --question-- + +## --text-- + +In the context of Sarah's statement, what does `got` imply about her experience? + +## --answers-- + +She is getting the opportunity now + +### --feedback-- + +`Got` indicates a past opportunity, not something happening currently. + +--- + +She had the opportunity in the past + +--- + +She will get the opportunity in the future + +### --feedback-- + +`Got` refers to a past experience, not a future possibility. + +--- + +She never gets such opportunities + +### --feedback-- + +`Got` in this context suggests she did have this opportunity. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md new file mode 100644 index 00000000000..ac32d364daa --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md @@ -0,0 +1,50 @@ +--- +id: 657b21e28a01039cb27b4f13 +title: Task 46 +challengeType: 19 +dashedName: task-46 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `exactly` is used to emphasize the truth or accuracy of a statement or description. It can mean `precisely` or `just`. For example, if someone says, `It's exactly what I needed`, they mean that it is precisely or perfectly what was required. `Exactly` often highlights that something is correct in every detail. + +# --question-- + +## --text-- + +What does `exactly` imply in a sentence like `This is exactly the kind of work I enjoy`? + +## --answers-- + +This is somewhat similar to the work I enjoy + +### --feedback-- + +`Exactly` indicates a perfect match, not just a similarity. + +--- + +This is the opposite of the work I enjoy + +### --feedback-- + +`Exactly` implies a perfect match, not an opposite. + +--- + +I am not sure if this is the work I enjoy + +### --feedback-- + +Using `exactly` shows certainty, not uncertainty. + +--- + +This is precisely the type of work that I find enjoyable + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md new file mode 100644 index 00000000000..36c267c651b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md @@ -0,0 +1,35 @@ +--- +id: 657b221b2ab0ac9e18a173ef +title: Task 47 +challengeType: 22 +dashedName: task-47 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Let's look at `exactly` and `exact`. You use `exactly` to show something is just right or very true. It is an adverb. For example, `You did it exactly right!`. + +`Exact` is an adjective, and it describes something very correct or precise, like in `the exact time`. + +# --fillInTheBlank-- + +## --sentence-- + +`She knew the _ time of the meeting. She arrived _ at 3 pm.` + +## --blanks-- + +`exact` + +### --feedback-- + +This word is an adjective, describing the noun `time`. + +--- + +`exactly` + +### --feedback-- + +This word is an adverb, showing that her arrival time was very precise. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md new file mode 100644 index 00000000000..82dcdea8fbb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -0,0 +1,39 @@ +--- +id: 657b223e41ce6b9f9a01d214 +title: Task 48 +challengeType: 22 +dashedName: task-48 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You'll review the past simple negative in this task. It's formed using `was` or `were` with `not`, like `weren't` (`were not`) or `wasn't` (`was not`). It's used to talk about things that did not happen or were not true in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`They _ _ big projects.` + +## --blanks-- + +`weren't` + +### --feedback-- + +It's the negative form of `were` in the past tense, used to say something was not true or did not happen. + +--- + +`exactly` + +### --feedback-- + +This word is used to emphasize the statement, suggesting the projects were not precisely big. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md new file mode 100644 index 00000000000..06ce8ba3d76 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md @@ -0,0 +1,15 @@ +--- +id: 657b227f7ad32ea17e2cdf28 +title: "Dialogue 4: A Developer with a Different Background" +challengeType: 21 +dashedName: dialogue-4-a-developer-with-a-different-background +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md new file mode 100644 index 00000000000..abee49452c1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md @@ -0,0 +1,56 @@ +--- +id: 657b2310b8cd52a4f15c1818 +title: Task 49 +challengeType: 19 +dashedName: task-49 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `unconventional` is used to describe something that's not based on or conforming to what is generally done or believed. It often implies a method or approach that is different from the norm. + +# --question-- + +## --text-- + +What does `unconventional` imply about Alice's background in tech? + +## --answers-- + +Her background is different from the usual way people get into tech + +--- + +Her background is exactly the same as most people in tech + +### --feedback-- + +`Unconventional` means not following the usual conventions, which contradicts being the same as most people. + +--- + +She doesn't have any background in tech + +### --feedback-- + +`Unconventional` suggests a different approach, not the absence of a background. + +--- + +She followed a very traditional path into tech + +### --feedback-- + +`Unconventional` indicates a non-traditional path, not a very traditional one. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md new file mode 100644 index 00000000000..47917952aff --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md @@ -0,0 +1,39 @@ +--- +id: 657b2340be1593a6517fe77b +title: Task 50 +challengeType: 22 +dashedName: task-50 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple negative, `did not` (contracted to `didn't`) is followed by the base form of a verb. This structure is used to express that an action did not happen in the past. In this dialogue, Alice is describing her educational background related to technology. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ _ tech at a traditional university.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used in the past simple negative to indicate that an action was not done. + +--- + +`study` + +### --feedback-- + +The base form of the verb is used after the contraction in negative past simple sentences. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md new file mode 100644 index 00000000000..e19667245f9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md @@ -0,0 +1,54 @@ +--- +id: 657b236aa1eb9fa7b209aa03 +title: Task 51 +challengeType: 19 +dashedName: task-51 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `mostly` is used to indicate that something is true to a large extent but not completely. It suggests that while other factors or methods may be involved, the primary aspect is what is mentioned. + +# --question-- + +## --text-- + +In Alice's statement, what does `mostly` suggest about her way of learning? + +## --answers-- + +She only learned through formal education + +### --feedback-- + +`Mostly` implies a greater emphasis on self-teaching rather than exclusive formal education. + +--- + +She didn't learn anything on her own + +### --feedback-- + +The use of `mostly` indicates a significant amount of self-learning, not an absence of it. + +--- + +She learned equally through self-teaching and formal courses + +### --feedback-- + +`Mostly` suggests a greater emphasis on one method over an equal balance. + +--- + +Her learning was primarily through her own efforts, with some formal courses + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md new file mode 100644 index 00000000000..10f6121949b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md @@ -0,0 +1,36 @@ +--- +id: 657b23a413d28da927e087ca +title: Task 52 +challengeType: 22 +dashedName: task-52 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +This task reviews how an adverb is often formed by adding `-ly` to an adjective. + + +# --fillInTheBlank-- + +## --sentence-- + +`She completed _ of her work before lunch. The office is _ quiet in the mornings.` + +## --blanks-- + +`most` + +### --feedback-- + +This word is used as an adjective to describe the quantity of work completed. + +--- + +`mostly` + +### --feedback-- + +This word is used as an adverb to describe the general state of the office. + + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md new file mode 100644 index 00000000000..8f0a554d33f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md @@ -0,0 +1,50 @@ +--- +id: 657b23bc0e32f9aa9c62eb82 +title: Task 53 +challengeType: 19 +dashedName: task-53 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `self-taught` refers to acquiring knowledge or skills without direct teaching from a traditional teacher or educational institution. It involves learning independently. The word `taught` is the past participle of `teach`. When someone is `self-taught`, it means they have taught themselves. + +# --question-- + +## --text-- + +What does `self-taught` imply when someone says, `I am self-taught in programming`? + +## --answers-- + +They were taught programming by a professional teacher + +### --feedback-- + +`Self-taught` indicates learning independently, not being taught by a professional teacher. + +--- + +They have no knowledge of programming + +### --feedback-- + +`Self-taught` means they have acquired knowledge or skills, not that they lack them. + +--- + +They learned programming on their own, without formal education + +--- + +They are planning to learn programming in the future + +### --feedback-- + +`Self-taught` refers to learning that has already taken place, not future plans. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md new file mode 100644 index 00000000000..daa0ed7fa3b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md @@ -0,0 +1,27 @@ +--- +id: 657b23f03b449aac2c517089 +title: Task 54 +challengeType: 22 +dashedName: task-54 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `took` is a special case in the simple past tense. It's the past tense of `take`. Unlike regular verbs that follow the standard `-ed` ending for the past tense, `take` changes to `took`. This irregular form is important to know because it's commonly used to talk about actions that happened in the past. Choose the correct past tense form of `take` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she _ a photography class.` + +## --blanks-- + +`took` + +### --feedback-- + +This word is the past tense form of `take`. It's used to talk about actions that happened in the past. + + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md new file mode 100644 index 00000000000..aa093ae629c --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md @@ -0,0 +1,49 @@ +--- +id: 657b242d06512dadaea55056 +title: Task 55 +challengeType: 19 +dashedName: task-55 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The verb `attend` means to be present at an event or place. It's often used regarding schools, colleges, meetings, or events. It implies regular participation or presence at a specific place or event. + +# --question-- + +## --text-- + +If a friend tells you, `I'm going to attend the new art workshop downtown`, what are they planning to do? + +## --answers-- + +They are planning to teach at the art workshop + +### --feedback-- + +`Attend` suggests participating as a learner or member, not as a teacher. + +--- + +They might visit the workshop once + +### --feedback-- + +`Attend` implies regular or scheduled participation, not a one-time visit. + +--- + +They are not interested in art workshops + +### --feedback-- + +Saying they will `attend` indicates interest and intent to participate, not a lack of interest. + +--- + +They plan to regularly participate in the art workshop + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md new file mode 100644 index 00000000000..4dd651ea958 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md @@ -0,0 +1,39 @@ +--- +id: 657b24542024c8af092cd6c4 +title: Task 56 +challengeType: 22 +dashedName: task-56 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple, negative sentences are formed using `did not`, contracted to `didn't`, followed by the base form of the main verb. Listen to the dialogue and fill in the blanks with these words. + +# --fillInTheBlank-- + +## --sentence-- + +`So, you _ _ a regular college or anything like that?` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used to form a negative statement in the past tense. + +--- + +`attend` + +### --feedback-- + +The word means being present at an event or place. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md new file mode 100644 index 00000000000..15b9abab580 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md @@ -0,0 +1,48 @@ +--- +id: 657b24774d8cdab052ffe2a6 +title: Task 57 +challengeType: 22 +dashedName: task-57 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and fill in the blanks correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ study tech at a traditional university. I'm _, and I _ a lot of online courses.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used to form a negative statement in the past tense. + +--- + +`self-taught` + +### --feedback-- + +This word describes acquiring knowledge or skills independently. + +--- + +`took` + +### --feedback-- + +This word is the past tense form of a verb meaning to have completed an action. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md new file mode 100644 index 00000000000..b7c7a773588 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md @@ -0,0 +1,40 @@ +--- +id: 657b24a500800cb1c6945da9 +title: Task 58 +challengeType: 22 +dashedName: task-58 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`No, not at all. I _ at a different job, but I got really interested in programming and tech, so I _ learning in my free time.` + +## --blanks-- + +`was` + +### --feedback-- + +Use `to be` in the past tense. + +--- + +`started` + +### --feedback-- + +Use the verb `start`in the past tense. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md new file mode 100644 index 00000000000..14bccd55f81 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md @@ -0,0 +1,41 @@ +--- +id: 657b2be1b19500c63fc1a467 +title: Task 59 +challengeType: 22 +dashedName: task-59 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`That's impressive! _ you _ learning on your own?` + +## --blanks-- + +`Did` + +### --feedback-- + +Auxiliary verb for questions. This word should be capitalized. + +--- + +`enjoy` + +### --feedback-- + +A verb used to describe you are having fun. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md new file mode 100644 index 00000000000..f55f7908a4f --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md @@ -0,0 +1,38 @@ +--- +id: 657b2c040bb5f6c77fa5df80 +title: Task 60 +challengeType: 22 +dashedName: task-60 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You'll be filling in blanks with words you're already familiar with. + +# --fillInTheBlank-- + +## --sentence-- + +`Absolutely. It _ challenging, but I _ it.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of the verb `to be`, used for singular subjects. + +--- + +`loved` + +### --feedback-- + +This is the past tense form of a verb expressing a strong liking or enjoyment. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md new file mode 100644 index 00000000000..dc14016d020 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md @@ -0,0 +1,38 @@ +--- +id: 657b2d618b8851cc5baf9490 +title: Task 61 +challengeType: 22 +dashedName: task-61 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Listen to the audio and complete the sentence. + + +# --fillInTheBlank-- + +Fill in the blank with correct words. + + +## --sentence-- + +`Yes, I did. I built a few small web applications, just to practice. It _ a great way to apply what I _.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `to be`, used here for a singular subject. + +--- + +`learned` + +### --feedback-- + +This is the past tense form of `learn`, indicating the acquisition of knowledge or skills in the past. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md new file mode 100644 index 00000000000..b2433b84777 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md @@ -0,0 +1,54 @@ +--- +id: 657b2d9cb974dace59024964 +title: Task 62 +challengeType: 19 +dashedName: task-62 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `got` in this context is a versatile term and can have several meanings. In its simplest form, it's the past tense of `get`, which can mean to receive, arrive, become, or reach, depending on the context. In Tom's statement, `got` refers to the progress or level Alice reached through self-study. + +# --question-- + +## --text-- + +What does `got` imply in Tom's statement about Alice's progress? + +## --answers-- + +She received something while studying + +### --feedback-- + +While `got` can mean receiving, in this context it refers to the extent or level of progress. + +--- + +She achieved or reached a significant level in her studies + +--- + +She needs to get more resources for studying + +### --feedback-- + +`Got` here refers to past progress, not a current need for more resources. + +--- + +She didn't make any progress in her studies + +### --feedback-- + +`Got` in this sentence clearly indicates significant progress, not a lack of it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md new file mode 100644 index 00000000000..3ea0498bbbe --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md @@ -0,0 +1,15 @@ +--- +id: 657b2dd7745fdcd03e5160f4 +title: "Dialogue 5: Anna Talks About her Experience" +challengeType: 21 +dashedName: dialogue-5-anna-talks-about-her-experience +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md new file mode 100644 index 00000000000..8a3ff270f80 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -0,0 +1,54 @@ +--- +id: 657b2e0666d4a9d1b851f90e +title: Task 63 +challengeType: 19 +dashedName: task-63 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `tech recruiter` refers to a professional role focused on recruiting candidates for technology-related positions. This role involves understanding the tech industry, identifying qualified candidates, and matching them with suitable tech job openings. + +# --question-- + +## --text-- + +What is Tom asking about when he mentions `Tech recruiter` in his question? + +## --answers-- + +The technical skills needed to be a recruiter + +### --feedback-- + +`Tech recruiter` here refers to the job role, not the specific skills required for the job. + +--- + +The technology used by recruiters + +### --feedback-- + +While technology is involved, `Tech recruiter` refers to the profession itself, not the tools used. + +--- + +The person's career path in becoming a technology recruitment specialist + +--- + +Recruiting people to learn technology + +### --feedback-- + +`Tech recruiter` is about hiring for tech roles, not recruiting people to learn technology. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md new file mode 100644 index 00000000000..340203d5990 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md @@ -0,0 +1,49 @@ +--- +id: 657b2ec6c054efd71e503a27 +title: Task 64 +challengeType: 19 +dashedName: task-64 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `actually` is often used to express a fact or reality, sometimes contrasting with what was thought, believed, or said before. It adds emphasis to a statement to clarify a truth or correct a previous assumption or statement. + +# --question-- + +## --text-- + +What does `actually` imply in a sentence like `I actually prefer working remotely`? + +## --answers-- + +The truth is contrary to what might have been assumed or stated before + +--- + +I never work remotely + +### --feedback-- + +`Actually` in this context is used to express a real preference. + +--- + +I always work in an office setting + +### --feedback-- + +Using `actually` here is meant to reveal a preference for remote work, not office work. + +--- + +I don't have any work preferences + +### --feedback-- + +`Actually` suggests a specific preference, contradicting the idea of having none. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md new file mode 100644 index 00000000000..51c4c579915 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md @@ -0,0 +1,33 @@ +--- +id: 657b2eeb31e435d89ecce6f3 +title: Task 65 +challengeType: 22 +dashedName: task-65 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn about `actual` in this task. It's a describing word (adjective). It means what something is really like. For example, `the actual color` means the real color. You often add `-ly` to an adjective to form an adverb. This rule helps change many describing words into words that tell people how something is said or done. Here, you add `-ly` to `actual` and it's the adverb `actually`. + +# --fillInTheBlank-- + +## --sentence-- + +`The _ size of the room was quite small. She _ likes small cozy spaces.` + +## --blanks-- + +`actual` + +### --feedback-- + +This word describes the real size of the room. + +--- + +`actually` + +### --feedback-- + +This word is used to say she really likes small spaces. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md new file mode 100644 index 00000000000..101e280ee29 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md @@ -0,0 +1,54 @@ +--- +id: 657b2f0b3bcfe7d9f4151854 +title: Task 66 +challengeType: 19 +dashedName: task-66 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The terms `therapist` and `counselor` refer to professionals who provide guidance and support to people dealing with emotional, psychological, or mental health issues. Both play a vital role in helping individuals work through personal challenges. In Anna's statement, these terms describe the career paths she was considering. + +# --question-- + +## --text-- + +In Anna's statement, what does `therapist or counselor` refer to? + +## --answers-- + +Jobs in the technology industry + +### --feedback-- + +`Therapist or counselor` refers to mental health and emotional support roles, not technology-related jobs. + +--- + +Career paths in mental health and emotional support + +--- + +Educational courses she wanted to take + +### --feedback-- + +While these roles require education, the terms directly refer to the job roles, not the courses. + +--- + +Hobbies that she was interested in + +### --feedback-- + +`Therapist or counselor` are professional career paths, not hobbies. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md new file mode 100644 index 00000000000..40c9c66ce5e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md @@ -0,0 +1,49 @@ +--- +id: 657b2f3bf7a2cbdb58d959d5 +title: Task 67 +challengeType: 19 +dashedName: task-67 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `last` is used to refer to the most recent past occurrence of a period or event. For example, `last year` means the year before this one, `last month` refers to the month before the current one, and `last week` points to the week before this week. Understanding time expressions like `last year`, `last month`, `last week`, or `last day` helps in talking about events that happened in the recent past. + +# --question-- + +## --text-- + +When someone mentions in a discussion about changes, `I switched careers last year.` What does `last year` indicate about the timing of their career change? + +## --answers-- + +They are planning to switch careers in the near future + +### --feedback-- + +This suggests a future action, but `last year` indicates the change already occurred in the past. + +--- + +They have been considering a career change for a long time + +### --feedback-- + +Though they might have considered it for a long time, `last year` specifically identifies when the change took place. + +--- + +The career change is happening currently + +### --feedback-- + +`Last year` refers to a completed action in the past, not something happening in the present. + +--- + +The career switch happened in the previous year + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md new file mode 100644 index 00000000000..796bb1e6c39 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md @@ -0,0 +1,49 @@ +--- +id: 657b2f6cb66826dcbac08094 +title: Task 68 +challengeType: 19 +dashedName: task-68 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Organizational psychology` is a field of psychology that studies how people interact within groups, particularly in workplace settings. It focuses on understanding workplace dynamics, employee behavior, and organizational structure to improve the work environment and increase productivity. + +# --question-- + +## --text-- + +What does `organizational psychology` typically involve? + +## --answers-- + +It deals with organizing office spaces + +### --feedback-- + +While organization is a part of the field, `organizational psychology` primarily focuses on people and behavior, not physical space. + +--- + +It's about the psychology of organizing events + +### --feedback-- + +`Organizational psychology` is not specifically about event planning but rather about behavior in workplace groups. + +--- + +It's the study of how people behave and interact in workplace groups + +--- + +It focuses on individual psychological treatment + +### --feedback-- + +`Organizational psychology` looks at group dynamics in workplaces, not individual therapy. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md new file mode 100644 index 00000000000..e185bc5a457 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md @@ -0,0 +1,38 @@ +--- +id: 657b2fa89ddc20de629ca21f +title: Task 69 +challengeType: 22 +dashedName: task-69 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will fill in the blanks with words you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ studied psychology in college. My plan was to become a _ or counselor.` + +## --blanks-- + +`actually` + +### --feedback-- + +This word is used to emphasize the accuracy or truth of a statement. + +--- + +`therapist` + +### --feedback-- + +This word refers to a professional role focused on mental health and emotional support. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md new file mode 100644 index 00000000000..ecc1ceb6792 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md @@ -0,0 +1,46 @@ +--- +id: 657b2fc9c0f96bdfddfce4d9 +title: Task 70 +challengeType: 22 +dashedName: task-70 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this exercise, you will explore the phrase `pique one's interest`. This phrase means to stimulate or arouse someone's curiosity or interest in something. It's often used when something catches your attention and makes you want to learn more about it. Alongside this phrase, you will fill in the blanks with familiar words that you've already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ a course in organizational _, and it _ my interest in the workplace and employee dynamics.` + +## --blanks-- + +`took` + +### --feedback-- + +This word refers to the action of participating in or completing a course. + +--- + +`psychology` + +### --feedback-- + +This word describes the study of the mind and behavior, particularly in a workplace setting in this context. + +--- + +`piqued` + +### --feedback-- + +This word means to arouse or stimulate interest or curiosity. You should correctly use its simple past tense. diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md new file mode 100644 index 00000000000..acc29551124 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md @@ -0,0 +1,49 @@ +--- +id: 657b2fea728c2be14a8a98c4 +title: Task 71 +challengeType: 19 +dashedName: task-71 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Employee dynamics` refers to the way employees interact and work together in a workplace. It's an example of using one noun (`employee`) to describe another noun (`dynamics`). This type of descriptive noun helps give more specific information about the subject. Other examples include `race car`, where `race` describes the type of car, and `garden hose`, where `garden` describes the type of hose. + +# --question-- + +## --text-- + +What does `employee dynamics` refer to in a workplace context? + +## --answers-- + +The dynamics of machines used by employees + +### --feedback-- + +`Employee dynamics` specifically refers to interactions and relationships among employees, not machinery. + +--- + +The interactions and relationships among employees + +--- + +The employment status of workers + +### --feedback-- + +`Employee dynamics` is about how employees work together, not their employment status. + +--- + +The dynamics of hiring new employees + +### --feedback-- + +`Employee dynamics` refers to existing employee interactions, not the hiring process. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md new file mode 100644 index 00000000000..bcbb031c907 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md @@ -0,0 +1,54 @@ +--- +id: 657b3026ff79fbe2dda6cb39 +title: Task 72 +challengeType: 19 +dashedName: task-72 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `That's a cool twist` is often used to express that something is interestingly unexpected or surprisingly different. The word `twist` here refers to a change or development in a situation or story that is unusual or unexpected. `Cool` in this context means it's positively received. + +# --question-- + +## --text-- + +What is Tom expressing when he says `That's a cool twist`? + +## --answers-- + +He finds the unexpected change or development interesting + +--- + +He thinks the situation is confusing + +### --feedback-- + +While a `twist` can be surprising, Tom's use of `cool` suggests he finds it interesting rather than confusing. + +--- + +He is unhappy with the new development + +### --feedback-- + +`Cool twist` usually indicates a positive reaction, not dissatisfaction. + +--- + +He expected the development all along + +### --feedback-- + +The term `twist` implies that the development was unexpected. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md new file mode 100644 index 00000000000..6a30241c1a2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md @@ -0,0 +1,55 @@ +--- +id: 657b306fe94f29e4b4aa9105 +title: Task 73 +challengeType: 19 +dashedName: task-73 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `not right away` is used to indicate that something didn't happen immediately or at the earliest opportunity. It suggests that there was a delay or a period before the action or change took place. This phrase helps to set the timeline of events or actions. + +# --question-- + +## --text-- + +What does Anna mean when she says `not right away`? + +## --answers-- + +She immediately started working in HR at a tech company + +### --feedback-- + +`Not right away` indicates a delay or period before taking action, not immediate action. + +--- + +She started working in a different role before moving to HR at a tech company + +--- + +She has never worked in HR + +### --feedback-- + +The statement implies she did work in HR, just not immediately. + +--- + +She was always focused on training and development + +### --feedback-- + +`Not right away` suggests a progression or change over time, not a constant focus. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md new file mode 100644 index 00000000000..b21bdf5b3e6 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md @@ -0,0 +1,49 @@ +--- +id: 657b30ac03b523e6640deaf1 +title: Task 74 +challengeType: 22 +dashedName: task-74 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will practice filling in the blanks with words that you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`Tom: That's a cool _. _ you immediately start working as a tech recruiter after college? Anna: Not right away. I _ in a general HR role at a non-tech company first, focusing on training and development.` + + +## --blanks-- + +`twist` + +### --feedback-- + +It refers to an interesting or unexpected change in a situation. + +--- + +`Did` + +### --feedback-- + +The auxiliary verb used to form a question in the past simple tense. The first letter should be capitalized. + +--- + +`worked` + +### --feedback-- + +Past tense form of `work`, indicating an action completed in the past. + diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md new file mode 100644 index 00000000000..f843ccf34aa --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md @@ -0,0 +1,54 @@ +--- +id: 657b30e1b9f035e7e656fd01 +title: Task 75 +challengeType: 19 +dashedName: task-75 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `employee` is someone who works for a company or a person. When you talk about `employees' well-being`, you are talking about the health and happiness of all the people who work there. The `'s` after `employees` means that the well-being belongs to the employees. It's like `the cat's toy` (one cat) and `the cats' toy` (more than one cat). + +# --question-- + +## --text-- + +What does Anna mean by saying `employees' well-being.` + +## --answers-- + +It's about the health of the company + +### --feedback-- + +`Employees'` means the people who work, not the company. + +--- + +One worker's health and happiness + +### --feedback-- + +`Employees'` with an `'s` shows it's about all workers, not just one. + +--- + +Where the employees work + +### --feedback-- + +`Well-being` is about health and happiness, not a place. + +--- + +The health and happiness of all the workers + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md new file mode 100644 index 00000000000..8e17e595d98 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md @@ -0,0 +1,54 @@ +--- +id: 657b315533e4edeba65111b8 +title: Task 76 +challengeType: 19 +dashedName: task-76 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +A `psychologist` is a professional who studies the human mind and behavior. They often help people understand and manage their emotions, behaviors, and mental processes. In Anna's statement, she refers to becoming a psychologist, indicating her professional choice related to studying and working with psychology. + +# --question-- + +## --text-- + +What does `psychologist` mean in Anna's statement? + +## --answers-- + +It means someone who studies physics + +### --feedback-- + +`Psychologist` refers to a person who studies the mind and behavior, not physics. + +--- + +It's a type of medical doctor + +### --feedback-- + +While related to health, a psychologist is different from a medical doctor and focuses on mental processes. + +--- + +A professional who studies and works with the human mind and behavior + +--- + +A teacher at a school + +### --feedback-- + +A psychologist may teach, but their primary role is studying and working with the mind and behavior, not general teaching. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md new file mode 100644 index 00000000000..40eee7185d9 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md @@ -0,0 +1,15 @@ +--- +id: 657b46c9be150f577f5a1086 +title: "Dialogue 2: Another Job Interview" +challengeType: 21 +dashedName: dialogue-2-another-job-interview +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md deleted file mode 100644 index 0a0f3472141..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0feadb1dd77f6cda623f -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md deleted file mode 100644 index e1563f9b06b..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0f39ee87517d584d81f9 -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md deleted file mode 100644 index 7aa1e30008d..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5a46ffb500e3f2ce47b -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -*** - -Giving a job description. - -*** - -Making a statement based on her assumption. - -*** - -Expressing a possibility. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md deleted file mode 100644 index 2ee50fe5647..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5e46ffb500e3f2ce47e -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md b/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md deleted file mode 100644 index adc4b41f091..00000000000 --- a/curriculum/challenges/chinese-traditional/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd6071d697d0aab7833b6 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md deleted file mode 100644 index 8b9cd82b8bb..00000000000 --- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: bd7158d8c242eddfaeb5bd13 -title: 制作一个个人作品集展示页 -challengeType: 14 -forumTopicId: 301143 -dashedName: build-a-personal-portfolio-webpage ---- - -# --description-- - -**目标：** 构建一个功能类似于 https://personal-portfolio.freecodecamp.rocks 的应用程序 - -**需求：** - -1. 你的作品集应该有一个 `id` 为 `welcome-section` 的欢迎部分 -1. 欢迎部分应该有一个包含文本的 `h1` 元素 -1. 你的作品集应该有一个 `id` 为 `projects` 的项目部分 -1. 项目部分应该包含至少一个 `class` 为 `project-tile` 的元素来保存项目 -1. 项目部分应该包含至少一个项目的链接 -1. 你的作品集应该有一个 id 为 `navbar` 的导航栏 -1. 导航栏应该至少包含一个链接，你可以点击它来导航到页面的不同部分 -1. 你的作品集应该有一个 id 为 `profile-link` 的链接，在新标签中打开你的 GitHub 或 freeCodeCodeCamp 个人主页 -1. 你的作品集应该至少有一个媒体查询 -1. 欢迎部分的高度应该等于视口的高度 -1. 导航栏应该始终位于视口的顶部 - -完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！ - -**注意：** 请在你的 HTML 中添加 `` 以链接你的样式表并应用你的 CSS - -# --hints-- - -你的作品集应该有一个 `id` 为 `welcome-section` 的欢迎部分。 - -```js -const el = document.getElementById('welcome-section') -assert(!!el); -``` - -你的 `#welcome-section` 元素应该包含一个 `h1` 元素。 - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1').length, - 0, - 'Welcome section should contain an h1 element ' -); -``` - -在 `#welcome-section` 元素中，你不应该有任何空的 `h1` 元素。 - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, - 0, - 'h1 element in welcome section should contain your name or camper ' + - 'name ' -); -``` - -你应该有一个 `id` 为 `projects` 的项目部分。 - -```js -const el = document.getElementById('projects') -assert(!!el); -``` - -你的作品集应该包含至少一个 class 为 `project-tile` 的元素。 - -```js -assert.isAbove( - document.querySelectorAll('#projects .project-tile').length, - 0 -); -``` - -你的 `#projects` 元素应该包含至少一个 `a` 元素。 - -```js -assert.isAbove(document.querySelectorAll('#projects a').length, 0); -``` - -你的作品集应该有一个 `id` 为 `navbar` 的导航栏。 - -```js -const el = document.getElementById('navbar'); -assert(!!el); -``` - -你的 `#navbar` 元素应该包含至少一个 `a` 元素，它的 `href` 属性以 `#` 开头。 - -```js -const links = [...document.querySelectorAll('#navbar a')].filter( - (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#' -); - -assert.isAbove( - links.length, - 0, - 'Navbar should contain an anchor link ' -); -``` - -你的作品集应该有一个 `id` 为 `profile-link` 的 `a` 元素。 - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.tagName === 'A') -``` - -你的 `#profile-link` 元素应该有一个值为 `_blank` 的 `target` 属性。 - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.target === '_blank') -``` - -你的作品集应该至少有一个媒体查询。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -你的 `#navbar` 元素应该始终位于视口的顶部。 - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const navbar = document.getElementById('navbar'); - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - "Navbar's parent should be body and it should be at the top of " + - 'the viewport ' - ); - - window.scroll(0, 500); - - await timeout(1); - - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - 'Navbar should be at the top of the viewport even after ' + - 'scrolling ' - ); - window.scroll(0, 0); -})(); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Personal Portfolio - - - - - -
                                                          -
                                                          -
                                                          -

                                                          It's me!

                                                          - -

                                                          Naomi Carrigan

                                                          -

                                                          Welcome to my portfolio page!

                                                          -
                                                          -
                                                          -

                                                          Projects

                                                          -

                                                          Here's what I've worked on!

                                                          -

                                                          - - - - -

                                                          -
                                                          -

                                                          Contact me!

                                                          -

                                                          Use the links below to get in touch.

                                                          -

                                                          FreeCodeCamp.org | GitHub | Facebook | LinkedIn -

                                                          - - - -``` - -```css -nav{ - position: fixed; - width: 100%; - text-align: right; - font-size: 24pt; - top: 0%; - right: 5px; - background-color: #000000; - color: #ffffff; -} -@media (max-width: 500px){ - nav{ - display: none; - } -} -a{ - color: #ffffff; -} -main{ - text-align: center; - background-color: black; - font-family:Pacifico -} -h1{ - font-size: 48pt; -} -h2{ - font-size: 24pt; -} -p{ - font-size: 12pt; -} -#welcome-section{ - background-color:#251a4a; - color: #FFFFFF; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#projects{ - background-color: #060a9c; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#contact{ - background-color: #03300b; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md deleted file mode 100644 index fa468277751..00000000000 --- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: 制作一个产品登录页 -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**目标：** 构建一个功能类似于 https://product-landing-page.freecodecamp.rocks 的应用程序 - -**需求：** - -1. 你的产品登录页应该有一个 `id="header"` 的 `header` 元素 -1. 你可以在 `header` 元素中看到一个 `id="header-img"` 的图像（比如一个 logo） -1. 在 `#header` 元素中，你可以看到一个 `id="nav-bar"` 的 `nav` 元素 -1. 在 `nav` 元素中，你可以看到至少三个可点击的元素，每个元素的 class 为 `nav-link` -1. 当你点击 `nav` 内的 `.nav-link` 按钮时，应滚动到登录页相应的部分 -1. 你可以观看一个 `id="video"` 的嵌入的产品视频 -1. 你的登录页有一个 `id="form"` 的 `form` 元素 -1. 在表单中，应存在一个 `id="email"` 的 `input` 输入框供用户填写邮箱地址 -1. 在 `#email` 输入框内应有描述该区域用途的占位符文本 -1. `#email` 输入框应该用 HTML5 验证来确认输入的内容是否为邮箱地址 -1. 在表单中，有一个 `id="submit"` 的 `input` 提交按钮 -1. 当你点击 `#submit` 元素时，邮箱会被提交到一个静态页面 (使用这个模拟 URL：`https://www.freecodecamp.com/email-submit`) -1. 导航栏应该始终位于视口的顶部 -1. 你的产品登陆页面至少要有一个媒体查询 -1. 你的产品登陆页面应该至少使用一次 CSS flexbox - -完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！ - -**注意：** 请在你的 HTML 中添加 `` 以链接你的样式表并应用你的 CSS - -# --hints-- - -你应该有一个 `id` 为 `header` 的 `header` 元素。 - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -你应该有一个 `id` 为 `header-img` 的 `img` 元素。 - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -你的 `#header-img` 元素应该是 `#header` 元素的子元素。 - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -你的 `#header-img` 应该有一个 `src` 属性。 - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -你的 `#header-img` 的 `src` 值应该是一个有效的 URL（以 `http` 开头）。 - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -你应该有一个 `nav` 元素，其 `id` 为 `nav-bar`。 - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -你的 `#nav-bar` 应该是 `#header` 的后代。 - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -`#nav-bar` 中应该至少有 3 个 `.nav-link` 元素。 - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -每个 `.nav-link` 元素都应该有一个 `href` 属性。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -每个 `.nav-link` 元素都应该链接到登录页上的相应元素（有一个 `href` 值是另一个元素的 id。例如 `#footer`）。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -你应该有一个 `video` 或 `iframe` 元素，其中 `id` 为 `video`。 - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -你的 `#video` 应该有一个 `src` 属性。 - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -你应该有一个 `form` 元素，其 `id` 为 `form`。 - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -你应该有一个 `input` 元素，其中 `id` 为 `email`。 - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#email` 应该是 `#form` 的后代。 - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -你的 `#email` 应该具有带有占位符文本的 `placeholder` 属性。 - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你的 `#email` 应该通过将其 `type` 设置为 `email` 来使用 HTML5 验证。 - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -你应该有一个 `input` 元素，其中 `id` 为`submit`。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#submit` 应该是 `#form` 的后代。 - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -你的 `#submit` 应该具有 `submit` 的 `type`。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -你的 `#form` 应该具有 `action` 属性为 `https://www.freecodecamp.com/email-submit`。 - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -你的 `#email` 元素应该具有值为 `email` 的 `name` 属性。 - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -你的 `#nav-bar` 应该始终位于视口的顶部。 - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const header = document.getElementById('header'); - const headerChildren = header.children; - const navbarCandidates = [header, ...headerChildren]; - - // Return smallest top position of all navbar candidates - const getNavbarPosition = (candidates = []) => { - return candidates.reduce( - (min, candidate) => - Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)), - Infinity - ); - }; - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the viewport ' - ); - - window.scroll(0, 500); - await timeout(1); - - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the ' + - 'viewport even after scrolling ' - ); - - window.scroll(0, 0); -})(); -``` - -你的产品登陆页面至少要有一个媒体查询。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -你的产品登陆页面应该至少使用一次 CSS Flexbox。 - -```js -const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display) -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media') -const usesFlex = cssRules.find(rule => hasFlex(rule)) -const usesFlexMedia = mediaRules.find(mediaRule => { - return [...mediaRule.cssRules].find(rule => hasFlex(rule)) -}) -assert(usesFlex || usesFlexMedia) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Product Landing Page - - - -
                                                          -

                                                          - Pokemon Daycare Service -

                                                          -
                                                          -

                                                          What we offer

                                                          -
                                                          -
                                                          - -
                                                          -
                                                          Guaranteed friendly and loving staff!
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - Comfortable environment for Pokemon to explore and play! -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - Multiple membership plans to fit your lifestyle! -
                                                          -
                                                          -
                                                          -
                                                          -

                                                          Check us out!

                                                          - A sneak peek into our facility: -
                                                          - -
                                                          -
                                                          -

                                                          Membership Plans

                                                          -
                                                          -
                                                          - Basic Membership
                                                          -
                                                            -
                                                          • One Pokemon
                                                            • -
                                                          • Food and berries provided
                                                            • -
                                                          - $9.99/month -
                                                          -
                                                          - Silver Membership
                                                          -
                                                            -
                                                          • Up to Three Pokemon
                                                            • -
                                                          • Food and berries provided
                                                            • -
                                                          • Grooming and accessories included
                                                            • -
                                                          - $19.99/month -
                                                          -
                                                          - Gold Membership
                                                          -
                                                            -
                                                          • Up to six Pokemon!
                                                            • -
                                                          • Food and berries provided
                                                            • -
                                                          • Grooming and accessories included
                                                            • -
                                                          • Personal training for each Pokemon
                                                            • -
                                                          • Breeding and egg hatching
                                                            • -
                                                          - $29.99/month -
                                                          -
                                                          -
                                                          -
                                                          -

                                                          Sign up for our newsletter!

                                                          - - -
                                                          - -
                                                          - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md deleted file mode 100644 index 5471bae1a12..00000000000 --- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: 制作一个调查表格 -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**目标：** 构建一个功能类似于 https://survey-form.freecodecamp.rocks 的应用程序 - -**需求：** - -1. 你应该有一个 `id` 为 `title` 的 `h1` 元素 -1. 你应该有一个 `id` 为 `description` 的 `p` 元素 -1. 你应该有一个 `id` 为 `survey-form` 的 `form` 元素 -1. 在表单元素内，你**需要**在 `input` 字段中输入你的名字，该字段的 `id` 为 `name`，`type` 为 `text` -1. 在表单元素内，你**需要**在 `input` 字段中输入你的邮箱，该字段的 `id` 为 `email` -1. 如果你输入了格式不正确的邮箱，你将会看见 HTML5 验证错误信息 -1. 在表单中，你可以在 `input` 字段中输入一个数字，该字段的 `id` 为 `number` -1. 数字输入不应接受非数字，或是阻止你输入它们，或是显示一个 HTML5 验证错误（取决于你的浏览器）。 -1. 如果你输入的数字超出了范围（使用 `min` 和 `max` 属性定义），你将会看见 HTML5 验证错误信息 -1. 表单中的名字、邮箱和数字输入框需有对应的包含描述输入框用途的 `label` 元素，id 应分别为 `id="name-label"`、`id="email-label"` 和 `id="number-label"` -1. 在表单中的名字、邮箱和数字输入框中，你能看到各自的描述文字作为占位符 -1. 在表单元素内， 你应该有一个 `select` 下拉元素， `id` 为 `dropdown`，它至少有两个选项 -1. 在表单元素内， 你可以从至少两个单选按钮的组中选择一个选项，该选项使用 `name` 属性 -1. 在表单元素内，你可以从一系列复选框中选择几个字段，每个复选框都必须具有 `value` 属性 -1. 在表单元素内，你会有一个 `textarea` 以获取额外的评论 -1. 在表单元素内，你将收到一个按钮，其 `id` 为 `submit`，提交所有输入 - -完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！ - -**注意：** 请在你的 HTML 中添加 `` 以链接你的样式表并应用你的 CSS - -# --hints-- - -你应该有一个 `id` 为 `title` 的 `h1` 元素。 - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -你的 `#title` 元素不应为空。 - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -你应该有一个 `id` 为 `description` 的 `p` 元素。 - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -你的 `#description` 不应为空。 - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -你应该有一个 `id` 为 `survey-form` 的 `form` 元素。 - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -你应该有一个 `id` 为 `name` 的 `input` 元素。 - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#name` 元素应该具有 `type` 为 `text`。 - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -你的 `#name` 元素应该在表单中是必填项。 - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -你的 `#name` 元素应该是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -你应该有一个 `id` 为 `email` 的 `input` 元素。 - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#email` 元素应该具有 `type` 为 `email`。 - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -你的 `#email` 元素应该需要输入。 - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -你的 `#email` 元素应该是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -你应该有一个 `id` 为 `number` 的 `input` 元素。 - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -你的 `#number` 元素应该是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -你的 `#number` 元素应该具有 `type` 为 `number`。 - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -你的 `#number` 应该有一个值为数字的 `min` 属性。 - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -你的 `#number` 应该有一个值为数字的 `max` 属性。 - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -你应该有一个 `id` 为 `name-label` 的 `label` 元素。 - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -你应该有一个 `id` 为 `email-label` 的 `label` 元素。 - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -你应该有一个 `id` 为 `number-label` 的 `label` 元素。 - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -你的 `#name-label` 应包含描述输入的文本。 - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -你的 `#email-label` 应包含描述输入的文本。 - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -你的 `#number-label` 应该包含描述输入的文本。 - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -你的 `#name-label` 元素应该是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -你的 `#email-label` 元素应该是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -你的 `#number-label` 元素应该是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -你的 `#name` 元素应该有 `placeholder` 属性与占位符文本。 - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你的 `#email` 元素应该有 `placeholder` 属性与占位符文本。 - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你的 `#number` 元素应该有 `placeholder` 属性与占位符文本。 - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -你应该有一个 `id` 为 `dropdown` 的 `select` 元素。 - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -你的 `#dropdown` 应该至少有两个可选择（未禁用）`option` 元素。 - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -你的 `#dropdown` 元素应该是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -你应该有至少两个 `input` 元素，`type` 为 `radio`（单选按钮）。 - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -你至少应该有两个单选按钮，是 `#survey-form` 的子元素。 - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -你所有的单选按钮都应该有一个 `value` 属性和值。 - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -你所有的单选按钮都应该有一个 `name` 属性和值。 - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -每个单选按钮组应至少有 2 个单选按钮。 - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -你应该至少有两个 `input` 元素，`type` 为 `checkbox`（复选框），它们是 `#survey-form` 的子元素。 - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -你在 `#survey-form` 中的所有复选框都应该有 `value` 属性和值。 - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -你至少应该有一个 `textarea` 元素，它是 `#survey-form` 的子元素。 - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -你应该有一个 `id` 为 `submit` 的 `input` 或 `button` 元素。 - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -你的 `#submit` 元素应该具有 `type` 为 `submit`。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -你的 `#submit` 元素应该是 `#survey-form` 元素的子元素。 - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Survey Form - - -

                                                          Survey Form

                                                          -

                                                          The card below was built as a sample survey form for freeCodeCamp.

                                                          -
                                                          -

                                                          Join the Togepi Fan Club!

                                                          -

                                                          - Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -

                                                          -
                                                          - - - - -

                                                          Who is your favourite Pokemon?

                                                          - - - -

                                                          Which communications do you want to receive?

                                                          - - - -

                                                          Any other information you would like to share?

                                                          - -

                                                          - Please note: This form is a proof of concept. Submitting the form - will not actually transmit your data. -

                                                          - -
                                                          -
                                                          - - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md deleted file mode 100644 index 0f06e9343b1..00000000000 --- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: 制作一个技术文档页面 -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**目标：** 构建一个功能类似于 https://technical-documentation-page.freecodecamp.rocks 的应用程序 - -**需求：** - -1. 你能看见一个 `id="main-doc"` 的 `main`元素，它包含页面的主要内容（技术文档）。 -1. 在 `#main-doc` 元素内，我能看见至少 5 个 `section` 元素，每个元素都有一个 class 为 `main-section`。 应存在至少 5 个这样的元素。 -1. 每个 `.main-section` 中的第一个元素应该是 `header` 元素，其中包含描述该部分主题的文本。 -1. class 为 `main-section` 的每个 `section` 元素应该有一个与包含在其中的每个 `header` 的文本相对应的 `id`。 所有空格都应该被替换为下划线（例如，包含标题 “JavaScript and Java” 的 section 应有一个相应的 `id="JavaScript_and_Java"`）。 -1. 所有 `.main-section` 元素总计（不是每个）包含至少 10 个 `p` 元素。 -1. 所有 `.main-section` 元素总计（不是每个）包含至少 5 个 `code` 元素。 -1. 所有 `.main-section` 元素总计（不是每个）包含至少 5 个 `li` 元素。 -1. 你能看见一个 `id="navbar"` 的 `nav` 元素。 -1. navbar 元素应包含一个 `header` 元素，其中包含描述技术文档主题的文本。 -1. 此外，导航栏应包含 class 为 `nav-link` 的链接元素（`a`）。 每个 class 为 `main-section` 的元素都需要有一个。 -1. `#navbar` 中的 `header` 元素必须在任何链接 (`a`) 之前。 -1. class 为 `nav-link` 的每个元素都应该包含每个 `section` 的 `header` 文本对应的文本（例如，如果你有一个 “Hello world” 部分/标题，你的导航栏应该有一个包含文本 “Hello world” 的元素）。 -1. 当你点击一个 navbar 元素时，页面应该导航到 `#main-doc` 元素的相应部分（例如，如果你点击包含文本 “Hello world” 的 `.nav-link` 元素，页面将导航到一个带有对应 header 和 id 的 `section` 元素）。 -1. 在常规尺寸的设备上（笔记本电脑、台式机），带有 `id="navbar"` 的元素应该显示在屏幕左侧，并且始终对用户可见。 -1. 你的技术文档应该使用至少一个媒体查询。 - -完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！ - -**注意：** 请在你的 HTML 中添加 `` 以链接你的样式表并应用你的 CSS - -# --hints-- - -你应该有一个 `id` 为 `main-doc` 的 `main` 元素。 - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -你至少应该有 5 个 class 为 `main-section` 的 `section` 元素。 - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -你所有的 `.main-section` 元素都应该是 `section` 元素。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -你至少应该有 5 个 `.main-section` 元素，它们是 `#main-doc` 的子元素。 - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -每个 `.main-section` 的第一个子元素都应该是一个 `header` 元素。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -你的 `header` 元素不应为空。 - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -你所有的 `.main-section` 元素都应该有 `id`。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -每个 `.main-section` 都应该有一个与其第一个子元素的文本匹配的 `id`，把子元素的文本中的空格都替换为下划线（`_`）用于 id。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -在你的 `.main-section` 元素中总计应有至少 10 个 `p` 元素 - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -所有 `.main-section` 元素内总计应有至少 5 个 `code` 元素。 - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -所有 `.main-section` 元素内总计应有至少 5 个 `li` 元素。 - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -你应该有一个 `id` 为 `navbar` 的 `nav` 元素。 - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -你的 `#navbar` 应该只有一个 `header` 元素。 - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -你应该至少有一个 class 为 `nav-link` 的 `a` 元素。 - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -你所有的 `.nav-link` 元素都应该是锚点（`a`）元素。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -你所有的 `.nav-link` 元素都应该在 `#navbar` 中。 - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -你应该有相同数量的 `.nav-link` 和 `.main-section` 元素。 - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -`#navbar` 中的 `header` 元素必须在 `#navbar` 中的任何链接（`a`）之前。 - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -每个 `.nav-link` 应该有与其相关 `section` 的 `header` 文本相对应的文本（例如，如果你有一个 “Hello world” 部分/标题，你的 `#navbar` 应该有一个 `.nav-link` 包含文本 “Hello world”）。 - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -每个 `.nav-link` 都应该有一个 `href` 属性，该属性链接到其对应的 `.main-section`（例如，如果你单击包含文本 “Hello world” 的 `.nav-link` 元素，页面导航到具有该 id 的 `section` 元素）。 - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -你的 `#navbar` 元素应该始终位于视口的顶部。 - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -你的技术文档项目应该使用至少一个媒体查询。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Technical Documentation Page - - - -
                                                          -
                                                          -
                                                          Introduction
                                                          -

                                                          - Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -

                                                          -
                                                          -
                                                          -
                                                          Definitions
                                                          -

                                                          - To start with, let's define some of the more common terms used in - algebra: -

                                                          -
                                                            -
                                                          • - Variable: A variable is an unknown value, usually represented - by a letter. -
                                                            • -
                                                          • - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. -
                                                            • -
                                                          • - Equation: An equation is a mathematical argument in which two - expressions result in the same value. -
                                                            • -
                                                          -
                                                          -
                                                          -
                                                          Examples
                                                          -

                                                          - Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.

                                                          - x + 5 = 12

                                                          - In this above example, we have: -

                                                          -
                                                            -
                                                          • Variable: The variable in the example is "x".
                                                            • -
                                                          • - Expression: There are two expressions in this example. They - are "x+5" and "12". -
                                                            • -
                                                          • - Equation: The entire example, "x+5=12", is an equation. -
                                                            • -
                                                          -
                                                          -
                                                          -
                                                          Solving Equations
                                                          -

                                                          - The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".

                                                          - x + 5 = 12

                                                          - In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
                                                          For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.

                                                          - x + 5 - 5 = 12 - 5

                                                          - The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:

                                                          - x = 7

                                                          - We now have our solution to this equation! -

                                                          -
                                                          -
                                                          -
                                                          Solving Equations II
                                                          -

                                                          - Let us look at a slightly more challenging equation.

                                                          - 3x + 4 = 13

                                                          - Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:

                                                          - 3x = 9

                                                          - "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.

                                                          - x = 3

                                                          - And now we have our solution! -

                                                          -
                                                          -
                                                          -
                                                          Solving Equations III
                                                          -

                                                          - Now we are getting in to more complex operations. Here is another - equation for us to look at:

                                                          - x^2 - 8 = 8

                                                          - Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.

                                                          - x^2 = 16

                                                          - But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
                                                          - An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -

                                                          - x = √9

                                                          - Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:

                                                          - x = 3 -

                                                          -
                                                          -
                                                          -
                                                          System of Equations
                                                          -

                                                          - As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:

                                                          - y = 3x

                                                          - An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
                                                          - Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:

                                                          - y = 3x | y - 6 = x - A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:

                                                          - 3x - 6 = x

                                                          - Now we can solve for "x"! We start by adding 6 to each side.

                                                          - 3x = x + 6

                                                          - We still need to get "x" by itself, so we subtract "x" from both sides - and get:

                                                          - 2x = 6

                                                          - If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!

                                                          - x = 3

                                                          - However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:

                                                          - y = 3x

                                                          - We have a value for "x" now, so let's see what happens if we put that - value in.

                                                          - y = 3*3

                                                          - We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:

                                                          - x = 3 and y = 9

                                                          -

                                                          -
                                                          -
                                                          -
                                                          Try it Yourself!
                                                          -

                                                          Coming Soon!

                                                          -

                                                          Keep an eye out for new additions!

                                                          -
                                                          -
                                                          -
                                                          More Information
                                                          -

                                                          Check out the following links for more information!

                                                          - -
                                                          -
                                                          - - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md deleted file mode 100644 index 422059ca37e..00000000000 --- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: 制作一个致敬页 -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**目标：** 构建一个功能类似于 https://tribute-page.freecodecamp.rocks 的应用程序 - -**需求：** - -1. 你的致敬页应该包含一个 `id` 为 `main` 的 `main` 元素，它应该包含所有其他元素 -1. 你应该会看到一个 `id` 为 `title` 的元素，其中包含一个字符串（即文本），描述了致敬页面的主题（例如 “Dr. Norman Borlaug”) -1. 你应该有一个 `id` 为 `img-div` 的 `figure` 或 `div` 元素 -1. 在 `#img-div` 元素中，你应该看到一个 `id="image"` 的 `img` 元素 -1. 在 `#img-div` 元素内，你应该看到一个 `id="img-caption"` 的元素，其中包含对 `#img-div` 中图像的文本描述 -1. 你应该看到一个 `id="tribute-info"` 的元素，其中包含描述致敬页主题的文本内容 -1. 你应该看到一个带有相应 `id="tribute-link"` 的 `a` 元素，该元素链接到外部站点，其中包含有关致敬页面主题的附加信息。 提示：你必须为元素提供 `target` 属性，并设置其为 `_blank`，以便可以在新选项卡中打开链接。 -1. 你的 `#image` 应该使用 `max-width` 和 `height` 属性来响应式调整大小，相对于其父元素的宽度，但不超过其原始大小 -1. 你的 `img` 元素应该在其父元素内居中 - -完成需求并通过下面的所有测试来完成这个项目。 赋予它你自己的个人风格。 编程愉快！ - -**注意：** 请在你的 HTML 中添加 `` 以链接你的样式表并应用你的 CSS - -# --hints-- - -你应该有一个 `main` 元素且该元素的 `id` 为 `main`. - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -你的 `#img-div`、`#image`、`#img-caption`、`#tribute-info` 和 `#tribute-link` 应该是 `#main` 的子元素。 - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -你应该有一个 `id` 为 `title` 的元素。 - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -你的 `#title` 元素不应为空。 - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -你应该有一个 `id` 为 `img-div` 的 `figure` 或 `div` 元素。 - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -你应该有一个 `id` 为 `image` 的 `img` 元素。 - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -你的 `#image` 元素应该是 `#img-div` 元素的子元素。 - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -你应该有一个 `id` 为 `img-caption` 的 `figcaption` 元素或 `div` 元素。 - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -你的 `#img-caption` 元素应该是 `#img-div` 元素的子元素。 - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -你的 `#img-caption` 不应为空。 - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -你应该有一个 `id` 为 `tribute-info` 的元素。 - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -你的 `#tribute-info` 不应为空。 - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -你应该有一个 `id` 为 `tribute-link` 的 `a` 元素。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -你的 `#tribute-link` 应该有一个 `href` 属性和值。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -你的 `#tribute-link` 元素应该有一个值为 `_blank` 的 `target` 属性。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -你的 `img` 元素应该具有 `display` 值为 `block`。 - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -你的 `#image` 应该具有 `max-width` 值为 `100%`。 - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -你的 `#image` 应该具有 `height` 值为 `auto`。 - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -你的 `#image` 应该在其父元素内居中. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - - Tribute Page - - -

                                                          Tribute Page

                                                          -

                                                          The below card was designed as a tribute page for freeCodeCamp.

                                                          -
                                                          -
                                                          - An image of Togepi -
                                                          Togepi, happy as always.
                                                          -
                                                          -

                                                          Togepi

                                                          -
                                                          -
                                                          -

                                                          - Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -

                                                          -

                                                          - Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -

                                                          -
                                                          -

                                                          Battle Information

                                                          -
                                                            -
                                                          • Type: Fairy
                                                            • -
                                                          • Evolutions: Togepi -> Togetic -> Togekiss
                                                            • -
                                                          • Moves: Growl, Pound, Sweet Kiss, Charm
                                                            • -
                                                          • Weaknesses: Poison, Steel
                                                            • -
                                                          • Resistances: Dragon
                                                            • -
                                                          -

                                                          - Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -

                                                          -
                                                          -
                                                          - - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md deleted file mode 100644 index eb5314b4f61..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05b -title: 编写你自己的函数 -challengeType: 11 -videoId: nLDychdBwUg -bilibiliIds: - aid: 249487483 - bvid: BV1Fv411J7bS - cid: 376340281 -dashedName: build-your-own-functions ---- - -# --description-- - -更多资源 - -\- 练习 - -# --question-- - -## --text-- - -下面这个 Python 程序会打印什么？： - -```python -def fred(): - print("Zap") -def jane(): - print("ABC") - -jane() -fred() -jane() -``` - -## --answers-- - -
                                                          Zap
-ABC
-jane
-fred
-jane
                                                          - ---- - -
                                                          Zap
-ABC
-Zap
                                                          - ---- - -
                                                          ABC
-Zap
-jane
                                                          - ---- - -
                                                          ABC
-Zap
-ABC
                                                          - ---- - -
                                                          Zap
-Zap
-Zap
                                                          - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index d06cbe06bfe..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: Tuples 的比较和排序 -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -更多资源： - -\- 练习 - -# --question-- - -## --text-- - -哪个代码与示例代码完成相同的功能？ - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index a9f7858d076..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: 根据条件执行 -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -以下哪个代码缩进，能够满足当“x=0”和“y=10”的时，打印 "Yes"？ - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index 206b6ae76d8..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: '数据可视化：邮件列表' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -更多资源： - -\- 练习：Geodata - -\- 练习：Gmane 模型 - -\- 练习：Gmane Spider - -\- 练习：Gmane Viz - -\- 练习：Page Rank - -\- 练习：Page Spider - -\- 练习：Page Viz - -# --question-- - -## --text-- - -哪个是常见的 JavaScript 可视化库？ - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index 8e3392d7ea8..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: '数据可视化：页面排名' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -页面排名算法是如何工作的？ - -## --answers-- - -它决定哪些页面之间的连接程度最高。 - ---- - -它用浏览量来决定排名 - ---- - -它能判断出哪些页面包含最重要的内容。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index 84d6620d24a..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: 字典和循环 -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -更多资源： - -\- 练习 - -# --question-- - -## --text-- - -以下代码将打印什么? - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -
                                                          annie 42
-jan 100
                                                          - ---- - -
                                                          chuck 1
-annie 42
-jan 100
                                                          - ---- - -
                                                          chuck 1
                                                          - ---- - -
                                                          [Error]（错误）
                                                          - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index 406914e7465..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: '字典：常见应用' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -这段代码将打印什么? - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[将返回错误] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index e6dafddd2d3..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: 文件作为序列 -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -更多资源： - -\- 练习 - -# --question-- - -## --text-- - -“continue”这个词在循环中间起到什么作用？ - -## --answers-- - -循环后直接跳转到代码。 - ---- - -跳到代码的下一行。 - ---- - -跳到循环的下一个迭代。 - ---- - -跳过下一个代码块。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index 89074ac4b18..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: 中间表达式 -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -更多资源： - -\- 练习 1 - -\- 练习 2 - -# --question-- - -## --text-- - -这些代码运作之后会打印出什么： - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index b1988202b94..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: 中间字符串 -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -更多资料： - -\- 练习 - -# --question-- - -## --text-- - -下面的代码中 i 的值是什么？ - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True（真） - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index 7e0e7fca264..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: '导言：Python 的元素' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -以下代码将打印出什么？ - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index 503290f586a..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: '导言：硬件架构' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -当你的程序运作时，它被存储在哪里？ - -## --answers-- - -硬盘。 - ---- - -内存。 - ---- - -中央处理器。 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index 919342faf25..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: '导言：Python 这门编程语言' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -运行这两行代码后打印出什么样的内容： - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index 570669ea0bc..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: '导言：为何编程？' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -更多资源： - -\- 在 Windows 上安装 Python - -\- 在 MacOS 上安装 Python - -# --question-- - -## --text-- - -谁应该学习编程？ - -## --answers-- - -大学生。 - -### --feedback-- - -College students should learn to program, but there's a better answer. - ---- - -People who want to become software developers. - -### --feedback-- - -People who want to become software developers should learn to program, but there's a better answer. - ---- - -Everyone. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index 4de45efa0dc..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: '迭代：定义循环' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -以下代码将打印多少行？ - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index 460be230797..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: '迭代：循环成语' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -以下是一个如何在一串数值中找到最小的数值的代码。 一行代码有错误，导致整个代码无法和预期一样的运行。 那么是哪一行？ - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index b1582356001..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: '迭代：更多模式' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -更多资源： - -\- 练习 - -# --question-- - -## --text-- - -其中哪一个评估为 False（假）？ - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 54a0448bba8..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: 循环和迭代 -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -这些代码会打印出什么？ - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -
                                                          0
-1
-2
                                                          - ---- - -
                                                          0
-1
-2
-3
                                                          - ---- - -
                                                          1
-2
                                                          - ---- - -
                                                          1
-2
-3
                                                          - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index d80b40eb476..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: 建立关系数据库 -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -您将使用什么 SQL 命令来检索具有电子邮件地址 `quincy@freecodecamp.org` 的所有用户？ - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index aa147498e8c..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: 更多条件结构 -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -更多资源： - -\- 练习 1 - -\- 练习 2 - -# --question-- - -## --text-- - -给出以下代码： - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -哪一行/几行应该被 `try` 块包围？ - -## --answers-- - -1 - ---- - -3 - ---- - -3、4 - ---- - -4 - ---- - -无 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index 0463247fd96..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: 网络协议 -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -通常使用哪种类型的 HTTP 请求来访问一个网站？ - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index 3bb7e658220..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: '联网：文本处理' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -大多数网站使用哪种编码类型？ - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index 4fcc8fd8ff6..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: '网络：在 Python 中使用 urllib' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -以下代码的输出将是什么样的？ - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -只有 “romeo.txt” 的内容。 - ---- - -“romeo.txt” 的 header 和内容。 - ---- - -“romeo.txt” 的 header、footer 和内容。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index 1293e5db58f..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: '网络：使用 Python 进行 Web 爬取' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -更多资料： - -\- 练习：socket1 - -\- 练习：urllib - -\- 练习：urllinks - -# --question-- - -## --text-- - -哪个 Python 库是用于解析 HTML 文档并从中提取数据？ - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index 29f3a92edbb..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: 用 Python 联网 -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -哪个 Python 库提供对 TCP 套接字的访问？ - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index b7572744a63..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: '联网：编写一个 Web 浏览器' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -以下代码创建了什么？ - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -一个简单的 web 服务器 - ---- - -一个简单的 email 客户端 - ---- - -一个简单的待办事项列表 - ---- - -一个简单的 web 浏览器 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index 1c95cbab1a4..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: 对象的生命周期 -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -以下程序将打印什么？ - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - -
                                                          -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 2
-Quincy party count 3
-
                                                          - ---- - -
                                                          -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 1
-Quincy party count 2
-
                                                          - ---- - -
                                                          -Quincy constructed
-Quincy party count 1
-Quincy party count 2
-Miya constructed
-Miya party count 1
-
                                                          - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index 921a41bceea..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: '对象：一个示例类' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -以下程序将打印什么？ - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - -
                                                          -So far 1
-So far 2
-
                                                          - ---- - -
                                                          -0
-0
-
                                                          - ---- - -
                                                          -2
-2
-
                                                          - ---- - -
                                                          -2
-4
-
                                                          - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index 4c3d47dc620..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: '对象：继承' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -面向对象编程中的继承是指什么？ - -## --answers-- - -扩展父类时创建的新类。 - ---- - -类的构造实例。 - ---- - -通过扩展现有类来创建新类的能力。 - ---- - -在使用类构造对象时调用的方法。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index f6b6e170779..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Python 字典 -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -当这些代码运行之后，dict 等于什么？ - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index 27a7ff7caf8..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Python 函数 -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -在 Python 中，关键词 “def” 有什么作用？ - -## --answers-- - -这是一个俚语，代表“这些代码真的酷毙了”。 - ---- - -它表示一个函数的开始。 - ---- - -它表示以下的缩进代码段将被储存起来以后再用。 - ---- - -它代表一个函数的开始，然后接下来的代码会被储存到以后使用。 - ---- - -以上全都不对。 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index c69dc1d7531..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Python 列表 -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -在这些代码运行后，x 的值是什么？ - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index b728ee6d4ec..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Python 对象 -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -关于 Python 对象的说法，哪一个是不正确的？ - -## --answers-- - -对象被创建和使用 - ---- - -对象是代码和数据的一部分 - ---- - -对象隐藏细节 - ---- - -对象是五个标准数据类型之一 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index cb882ae8272..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: 阅读文件中 -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -在字符串中，用什么来代表新的一行？ - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index 2a378673ee1..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: '正则表达式：匹配和提取数据' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -该程序会打印出什么？ - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index 960a1f36e71..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: '正则表达式： 实用应用' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -在正则表达式中，怎么搜索一个 “$” 符号? - -## --answers-- - -$ - ---- - -\\dollar\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index 0d65595f037..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: 正则表达式 -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -哪一个正则表达式匹配只有一个空白字符？ - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index aa48e4165be..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: 关系数据库设计 -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -对于一个字符串数据应该被保存在一个数据库里多少次，最佳实践是什么？ - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index bf452ad9d44..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: 关系数据库和 SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -下载 SQLite -下载 DB Browser for SQLite -使用 SQLite - -# --question-- - -## --text-- - -哪一个不是数据库中的主要数据结构？ - -## --answers-- - -索引 - ---- - -表格 - ---- - -行 - ---- - -列 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index 4728d3443dc..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: '关系数据库：联接操作' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -在 SQL 语句中使用 JOIN 子句时，ON 的作用是什么？ - -## --answers-- - -它指示在哪些表上执行 JOIN。 - ---- - -它指定用于 JOIN 的字段。 - ---- - -它指示如何将两个表连接在一起。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index 47f0a68975e..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: '关系型数据库：多对多关系' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -更多资料： - -\- 练习：Email - -\- 练习：Roster - -\- 练习：Tracks - -\- 练习：Twfriends - -\- 练习：Twspider - -# --question-- - -## --text-- - -哪个是多对多关系的示例？ - -## --answers-- - -老师与学生 - ---- - -客户与订单 - ---- - -书与内页 - ---- - -城市与国家 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index 5ceff48d681..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: '关系型数据库：关系的建立' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -INSERT 命令在 SQL 中的作用是什么？ - -## --answers-- - -它定义新行，通过列出我们要包括的字段，然后列出要放入新行中的值。 - ---- - -它定义新列，通过列出要包含的行以及要放入新列中的值。 - ---- - -它定义一个新表，通过列出要包括的行和字段以及要放入表中的值。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index 4b66883874e..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: 在关系型数据库中表示关系 -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -什么是外键？ - -## --answers-- - -一个不应存在于这里的键 - ---- - -一个使用非拉丁字符的键 - ---- - -一个指向不同表中关联行的主键的数字 - ---- - -一个在“现实世界”中可能用于查找行的键 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index 5f7fd007941..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: 字符串和列表 -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -更多资源： - -\- 练习 - -# --question-- - -## --text-- - -在这个代码中，n 等于什么？ - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -邮件 - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index 2a483f32147..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Python 字符串 -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -这些代码会打印出什么？ - -```python -for n in "banana": - print(n) -``` - -## --answers-- - -
                                                          -n
-n
-
                                                          - ---- - -
                                                          -0
-1
-
                                                          - ---- - -
                                                          -0
-1
-2
-3
-4
-5
-
                                                          - ---- - -
                                                          -b
-a
-n
-a
-n
-a
-
                                                          - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index c786a74ccc7..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: 元组集合 -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -这些代码会打印出什么？ - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - -
                                                          -k i
-k i
-k i
-
                                                          - ---- - -
                                                          -quincy 0
-beau 1
-kris 2
-
                                                          - ---- - -
                                                          -quincy 1
-beau 5
-kris 9
-
                                                          - ---- - -
                                                          -1 quincy
-5 beau
-9 kris
-
                                                          - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index fadd1652a44..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: 使用网络服务 -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -通过互联网发送数据的两种最常见的方法是什么？ - -## --answers-- - -JSON 和 TXT - ---- - -JSON 和 XML - ---- - -XML 和 TXT - ---- - -XML 和 PHP - ---- - -PHP 和 TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index 6f2b93dfddd..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: '变量、表达式和语句' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -赋值语句中使用的符号是什么？ - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index 6061f804f6f..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: 使用 Python 可视化数据 -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -大多数数据在使用之前需要 \_\_\_\_\_\_ 。 - -## --answers-- - -转换为 JSON 格式 - ---- - -图形化 - ---- - -清理 - ---- - -记忆 - ---- - -转化成歌曲 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index c31c4be7f1b..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'Web 服务：API 速率限制和安全性' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -更多资料： - -\- 练习：GeoJSON - -\- 练习：JSON - -\- 练习：Twitter - -\- 练习：XML - -# --question-- - -## --text-- - -当 Twitter API 发出请求时，必须始终随请求一起发送什么信息？ - -## --answers-- - -Twitter 用户名 - ---- - -日期范围 - ---- - -搜索词 - ---- - -密钥 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index ae62469637f..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'Web 服务：API' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -API 的全称是什么？ - -## --answers-- - -应用便携式智能（Application Portable Intelligence） - ---- - -国际助理编程（Associate Programming International） - ---- - -应用程序接口（Application Program Interface） - ---- - -动作便携式接口（Action Portable Interface） - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index 6d1ff9f337c..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'Web 服务：JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -这些代码会打印出什么？ - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[Error]（错误） - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index 181f6d7372b..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'Web 服务：面向服务的方法' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -用面向服务的方法来开发网络应用，数据位于何处？ - -## --answers-- - -分布在许多通过互联网或内部网络连接的计算机系统上。 - ---- - -在主 Web 服务器上的不同服务中。 - ---- - -在单独的数据库服务器上。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index 80e5a24b7ce..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'Web 服务：XML 模式' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -什么是 XSD？ - -## --answers-- - -XML 的 W3C 模式规范。 - ---- - -来自 MOZ 的标准 JSON 模式。 - ---- - -可扩展情境驱动程序 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index 7a901acdf04..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'Web 服务：XML' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -以下 XML 有什么问题？ - -```xml - - Chuck - - +1 734 303 4456 - - -``` - -## --answers-- - -Email 标签缺少结束标签。 - ---- - -间距将导致 XML 无效。 - ---- - -Phone 标签缺少结束标签。 - ---- - -纯文本应使用 UTF-8 编码。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md deleted file mode 100644 index c8822eeb353..00000000000 --- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f065 -title: 使用列表 -challengeType: 11 -videoId: lCnHfTHkhbE -bilibiliIds: - aid: 376965958 - bvid: BV1No4y1S7oi - cid: 376387989 -dashedName: working-with-lists ---- - -# --question-- - -## --text-- - -使用下列哪种方法可以在列表末尾添加元素？ - -## --answers-- - -insert - ---- - -push - ---- - -append - ---- - -new - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md deleted file mode 100644 index 180c79479b2..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f33310c1851c6c4da013250 -title: 步骤 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -是时候添加一些菜单内容。 在现有的 `header` 元素下面添加一个 `main`元素。 它最终将包含有关咖啡馆提供的咖啡和甜点的价格信息。 - -# --hints-- - -你应该有一个 `
                                                          ` 开始标签。 - -```js -assert(code.match(/
                                                          /i)); -``` - -你应该有一个 `
                                                          ` 结束标签。 - -```js -assert(code.match(/<\/main>/i)); -``` - -你不应该改变你的 `header` 元素。 确认你没有删除结束标签。 - -```js -assert($('header').length === 1); -``` - -你的 `main` 元素应该在你的 `header` 元素之后。 - -```js -const main = document.querySelectorAll('main')[0]; -assert(main.previousElementSibling.tagName === 'HEADER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - ---fcc-editable-region-- -
                                                          -

                                                          CAMPER CAFE

                                                          -

                                                          Est. 2020

                                                          -
                                                          ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index 7b3f591ef32..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Flexbox 是一种一维 CSS 布局方法，侧重于内容的流动。 它提供了控制容器在容器中的间隔和对齐方式的能力。 - -若要将元素设置为使用 Flexbox 布局，请将 `display` 属性设置为 `flex`。 这将使元素变成一个 flex 容器。 flex 容器内的直接子元素叫做 flex 项目。 - -创建 `.gallery` 选择器并将其设置为 flex 容器。 - -# --hints-- - -应该有一个 `.gallery` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); -``` - -`.gallery` 选择器应该有一个值为 `flex` 的 `display` 属性。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
                                                          -

                                                          css flexbox photo gallery

                                                          -
                                                          -
                                                          - - - - - - - - - -
                                                          - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; -} - -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { - width: 100%; - max-width: 350px; - height: 300px; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index ac92d2ec895..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: 步骤 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -首先设置你的 HTML 结构。 添加一个 `` 声明和一个 `html` 元素，其中 `lang` 属性设置为 `en`。 在 `html` 元素中，添加一个 `head` 元素和一个 `body` 元素。 - -# --hints-- - -代码应包含 `DOCTYPE` 引用。 - -```js -assert(code.match(/` 关闭 `DOCTYPE` 声明。 - -```js -assert(code.match(/html\s*>/gi)); -``` - -`DOCTYPE` 声明应位于 HTML 的开头。 - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -`html` 元素应该有一个 `lang` 属性为 `en` 的开始标签。 - -```js -assert(code.match(//gi)); -``` - -`html` 元素应该有一个结束标签。 - -```js -assert(code.match(/<\/html\s*>/)); -``` - -应该有一个 `head` 的开始标签。 - -```js -assert(code.match(//i)); -``` - -应该有一个 `head` 的结束标签。 - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -应该有一个 `body` 开始标签。 - -```js -assert(code.match(//i)); -``` - -应该有一个 `body` 结束标签。 - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -`head` 和 `body` 元素应该是兄弟元素。 - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -`head` 元素应该在 `html` 元素内。 - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -`body` 元素应该在 `html` 元素内。 - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md deleted file mode 100644 index 025d53c7437..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: 步骤 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -在你的 `head` 元素中，添加一个 `meta` 标签，并将 `charset` 属性设置为 `utf-8`。 同时添加一个包含文本 `Picasso Painting` 的 `title` 元素。 - -# --hints-- - -应该只添加一个 `meta` 元素。 - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -`meta` 元素应该有一个 `charset` 属性。 - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -`charset` 属性应设置为 `utf-8`。 - -```js -assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -``` - -应该只添加一个 `title` 元素。 - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -`title` 元素应该包含文本 `Picasso Painting`。 请注意拼写和大小写的问题。 - -```js -assert(document.querySelector('title')?.innerText === 'Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md deleted file mode 100644 index b2a01123328..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: 步骤 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -FontAwesome 是一个 SVG 图标库，其中许多都可以免费使用。 你将在此项目中使用其中一些图标，因此你需要将外部样式表链接到你的 HTML。 - -添加一个 `link` 元素，其中 `rel` 为 `stylesheet`，`href` 为 `https://use.fontawesome.com/releases/v5.8.2/css/all.css`。 - -# --hints-- - -你应该有两个 `link` 元素。 - -```js -assert(document.querySelectorAll('link').length === 2); -``` - -`link` 元素应该具有 `stylesheet` 的 `rel`。 - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); -``` - -`link` 元素应该有一个 `href` 为 `https://use.fontawesome.com/releases/v5.8.2/css/all.css`。 - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index 16ba7124d27..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: 步骤 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -要开始绘画，请为你的 `body` 元素提供颜色为 `rgb(184, 132, 46)` 的 `background-color`。 - -# --hints-- - -应该使用 `body` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -`body` 元素应将 `background-color` 属性设置为 `rgb (184, 132, 46)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index db8023fd1d5..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: 步骤 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -在你的 body 标签中，添加一个 `div` 元素。 给它一个 `back-wall` 的 `id`。 - -# --hints-- - -应该准确添加 1 个 `div` 元素。 - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -`div` 元素应该具有 `back-wall` 的 `id` 值。 - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index 449328505ee..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: 步骤 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -使用 id 选择器为 id `back-wall` 设置 `background-color` 为 `#8B4513`。 - -# --hints-- - -应该使用 `#back-wall` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -`#back-wall` 选择器应该有一个 `#8B4513` 的 `background-color`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index 2663a9e0691..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: 步骤 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -给 `#back-wall` 元素一个 `100%` 的 `width` 和一个 `60%` 的 `height` 。 - -# --hints-- - -应该将 `#back-wall` 选择器的 `width` 设置为 `100%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -应该将 `#back-wall` 选择器的 `height` 设置为 `60%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index 21bd2fe2908..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: 步骤 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -通常，HTML 以自上而下的方式呈现。 代码顶部的元素位于页面顶部。 但是，很多时候你可能希望将元素移动到不同的位置。 你可以使用 `position` 属性来执行此操作。 - -将 `#back-wall` 元素的 `position` 属性设置为 `absolute`。 `absolute` 位置将元素从自上而下的文档流中取出，并允许你相对于其容器调整它。 - -手动定位元素时，你可以使用 `top`、`left`、`right` 和 `bottom` 移动其布局。 设置 `#back-wall` 的 `top` 值为 `0`，`left` 值为 `0`。 - - -# --hints-- - -`#back-wall` 选择器应该将 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -`#back-wall` 选择器应该将 `top` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -`#back-wall` 选择器应该将 `left` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index f3690da0727..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: 步骤 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -`z-index` 属性用于为你的 HTML 元素创建“层”。 如果你熟悉图像编辑工具，你可能以前使用过图层。 这是一个类似的概念。 - -`z-index` 值较高的元素会显示在 `z-index` 值较低的元素之上。 这可以与上一课中的定位相结合，创造出独特的效果。 - -由于 `back-wall` 元素需要出现在你将要创建的其他元素的“后面”，因此为 `back-wall` 元素提供一个 `z-index` 为 `-1` 的属性。 - -# --hints-- - -`#back-wall` 选择器应该将 `z-index` 属性设置为 `-1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index 6aec7e412d1..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: 步骤 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -在你的 `#back-wall` 元素的下方，创建一个 `div`，其包含 `class` 为 `characters`。 这是你将创建绘画角色的地方。 - -# --hints-- - -应该只添加一个新的 `div` 元素。 - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -新的 `div` 元素应该在 `#back-wall` 元素之后。 - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -新的 `div` 元素应该将 `class` 设置为 `characters`。 - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index 30c3771c4fa..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: 步骤 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -在该 `.characters` 元素中，创建另一个 `div`，其 `id` 为 `offwhite-character`。 - -# --hints-- - -应该只创建一个额外的 `div` 元素。 - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -新的 `div` 元素应该嵌套在 `.characters` 元素中。 - -```js -assert(document.querySelector('.characters div')); -``` - -新的 `div` 元素应具有 `offwhite-character` 的 `id`。 - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index 91b824c1ffa..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: 步骤 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -在 `offwhite-character` 元素内创建四个 `div` 元素。 按顺序为这些 `div` 元素提供以下 `id` 值：`white-hat`、`black-mask`、`gray-instrument`、`tan-table`。 - -# --hints-- - -应该在 `.offwhite-character` 元素中添加四个 `div` 元素。 - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -第一个新 `div` 元素应该具有 `white-hat` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -第二个新 `div` 元素应具有 `black-mask` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -第三个新 `div` 元素应该具有 `gray-instrument` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -第四个新 `div` 元素应该具有 `tan-table` 的 `id`。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index 74dae6ed16e..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: 步骤 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -这个角色需要眼睛。 在 `#black-mask` 元素中创建两个 `div` 元素。 按顺序为它们提供 `eyes left` 和 `eyes right` 类。 - -# --hints-- - -应该在 `#black-mask` 元素中创建 2 个 `div` 元素。 - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -第一个新 `div` 应该有 `eyes` 和 `left` 类。 - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -第二个新 `div` 应该有 `eyes` 和 `right` 类。 - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index 761855e07c0..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: 步骤 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -为乐器创建一些“点”。 在你的 `#gray-instrument` 元素中添加五个 `div` 元素。 将每个的 `class` 设置为 `black-dot`。 - -# --hints-- - -`#gray-instrument` 元素中应该有五个新的 `div` 元素。 - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -五个 `div` 元素都应该具有类 `black-dot`。 - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index 26589150ea1..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: 步骤 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -使用 id 选择器为 id 为 `offwhite-character` 的元素创建规则。 给它一个 `width` 为 `300px`、一个 `height` 为 `550px` 和一个 `background-color` 为 `GhostWhite`。 - -# --hints-- - -应该使用 `#offwhite-character` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -`#offwhite-character` 应该有一个 `width` 属性设置为 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -`#offwhite-character` 应该有一个 `height` 属性设置为 `550px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -`#offwhite-character` 应该有一个 `background-color` 属性设置为 `GhostWhite`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index 9784eb2015f..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: 步骤 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -将 `#offwhite-character` 移至适当位置，为此，给它一个 `absolute` 的 `position`，一个 `top` 值为 `20%`，一个 `left` 值为 `17.5%`。 - -# --hints-- - -`#offwhite-character` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -`#offwhite-character` 选择器应该有一个 `top` 属性设置为 `20%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -`#offwhite-character` 选择器应该有一个 `left` 属性设置为 `17.5%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index 835971864d3..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: 步骤 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -使用 id 选择器，为 id 为 `white-hat` 的元素设置样式。 给它一个 `width` 和 `height` 均为 `0`，以及一个 `solid` 的 `border-style`。 - -# --hints-- - -应该使用 `#white-hat` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -`#white-hat` 选择器应该将 `width` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -`#white-hat` 选择器应该将 `height` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -`#white-hat` 选择器应该有一个 `border-style` 属性设置为 `solid`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index 11624a4e676..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: 步骤 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -这看起来不太对劲。 将 `border-width` 设置为 `0 120px 140px 180px`，以便正确调整帽子的大小。 - -# --hints-- - -`#white-hat` 选择器应该有一个 `border-width` 属性设置为 `0 120px 140px 180px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index 80066560b60..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: 步骤 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -现在你有一个大盒子。 把它的 `border-top-color`、`border-right-color` 和 `border-left-color` 都设置为 `transparent`。 将 `border-bottom-color` 设置为 `GhostWhite`。 这会让它看起来更像一顶帽子。 - -# --hints-- - -`#white-hat` 选择器应该有一个 `border-top-color` 属性设置为 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -`#white-hat` 选择器应该有一个 `border-right-color` 属性设置为 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -`#white-hat` 选择器应该有一个 `border-left-color` 属性设置为 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -`#white-hat` 选择器应该有一个 `border-bottom-color` 属性设置为 `GhostWhite`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index 98280c7c227..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: 步骤 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -给帽子一个 `position` 值为 `absolute`、一个 `top` 值为 `-140px` 和一个 `left` 值为 `0`。 - -# --hints-- - -`#white-hat` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -`#white-hat` 选择器应该有一个 `top` 属性设置为 `-140px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -`#white-hat` 选择器应该有一个 `left` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index 8f1aa3ac550..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: 步骤 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -使用 id 选择器为 id 为 `black-mask` 的元素创建规则。 给它一个 `100%` 的 `width`、一个 `50px` 的 `height`，和一个 `rgb(45, 31, 19)` 的 `background-color`。 - -# --hints-- - -应该有一个 `#black-mask` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -`#black-mask` 选择器应该将 `width` 属性设置为 `100%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -`#black-mask` 选择器应该将 `height` 属性设置为 `50px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -`#black-mask` 选择器应该有一个 `background-color` 属性设置为 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index 23e70e4b7b3..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: 步骤 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -为面罩提供 `position` 值为 `absolute`，以及 `top` 和 `left` 的值均为 `0`。 - -# --hints-- - -`#black-mask` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -`#black-mask` 选择器应该有一个 `top` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -`#black-mask` 选择器应该有一个 `left` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index a90060f8887..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: 步骤 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -为确保你可以看到面罩，请将 `z-index` 设置为 `1`。 - -# --hints-- - -`#black-mask` 选择器应该有一个 `z-index` 属性设置为 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index 8377b822bf7..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: 步骤 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -使用 id 选择器，给 id 为 `gray-instrument` 的元素一个 `width` 为 `15%`，`height` 设置为 `40%` 和 `background-color` 为 `rgb(167, 162, 117)`。 - -# --hints-- - -应该有一个 `#gray-instrument` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -`#gray-instrument` 选择器应该有一个 `width` 属性设置为 `15%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -`#gray-instrument` 选择器应该将 `height` 属性设置为 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -`#gray-instrument` 选择器应将 `background-color` 属性设置为 `rgb(167, 162, 117)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index 35471954d10..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: 步骤 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -现在移动它。将 `position` 设置为 `absolute`、`top` 设置为 `50px`，以及 `left` 设置为 `125px`。 - -# --hints-- - -`#gray-instrument` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -`#gray-instrument` 选择器应该将 `top` 值设置为 `50px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -`#gray-instrument` 选择器应将 `left` 值设置为 `125px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index a29ba50f74c..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: 步骤 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -将 `z-index` 设置为 `1`。 - -# --hints-- - -`#gray-instrument` 选择器应将 `z-index` 属性设置为 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index fb79ed8469c..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: 步骤 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -使用类选择器为具有 `black-dot` 类的元素创建规则。 将 `width` 设置为 `10px`，`height` 设置为 `10px`，`background-color` 设置为 `rgb(45, 31, 19)`。 - -# --hints-- - -应该有一个 `.black-dot` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -`.black-dot` 选择器应该有一个 `width` 属性设置为 `10px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -`.black-dot` 选择器应该将 `height` 属性设置为 `10px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -`.black-dot` 选择器应该有一个 `background-color` 属性设置为 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index 845712ac553..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: 步骤 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -这些点有点太方了。 给 `black-dot` 类一个 `border-radius` 为 `50%` 来修复它。 - -# --hints-- - -`.black-dot` 选择器应该将 `border-radius` 属性设置为 `50%`。 - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index 0bf85de9a3f..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: 步骤 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -将圆点移至适当位置，为此，将 `display` 设置为 `block`、将 `margin` 设置为 `auto`，并将 `margin-top` 设置为 `65%`。 - -# --hints-- - -`.black-dot` 选择器应该有一个 `display` 属性设置为 `block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -`.black-dot` 选择器应该有一个 `margin` 属性设置为 `auto`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -`.black-dot` 选择器应该有一个 `margin-top` 属性设置为 `65%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index 112c10abc3e..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: 步骤 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -使用 id 选择器，为 id 为 `tan-table` 的元素设置样式。 给它一个 `width` 值为 `450px`、一个 `height` 值为 `140px`，和一个 `background-color` 值为 `#D2691E`。 - -# --hints-- - -应该有一个 `#tan-table` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -`#tan-table` 选择器应该有一个 `width` 属性设置为 `450px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -`#tan-table` 选择器应该将 `height` 属性设置为 `140px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -`#tan-table` 选择器应该将 `background-color` 属性设置为 `#D2691E`。 - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index 86be16a3873..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: 步骤 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -将表格移至适当位置，为此，给它一个 `position` 值为 `absolute`、一个 `top` 值为 `275px`，和一个 `left` 值为 `15px`。 - -# --hints-- - -`#tan-table` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -`#tan-table` 选择器应该有一个 `top` 属性设置为 `275px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -`#tan-table` 选择器应该有一个 `left` 属性设置为 `15px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index ca497c2b75d..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: 步骤 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -给表格一个 `z-index` 为 `1`。 - -# --hints-- - -`#tan-table` 选择器应该有一个 `z-index` 属性设置为 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index bac66745bc2..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: 步骤 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -在你的 `div#offwhite-character` 元素之后，添加一个 `div`，其 `id` 为 `black-character`。 - -# --hints-- - -应该在 `.characters` 元素中添加一个新的 `div` 元素。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -新的 `div` 元素应该将 `id` 设置为 `black-character`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index 933c76c720d..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: 步骤 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -在你的新的 `#black-character` 元素中，添加三个 `div` 元素，并按以下顺序设置 `id` 值：`black-hat`、`gray-mask`、`white-paper`。 - -# --hints-- - -`#black-character` 元素中应该有三个 `div` 元素。 - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -第一个新 `div` 元素应该将 `id` 设置为 `black-hat`。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -第二个新 `div` 元素应该将 `id` 设置为 `gray-mask`。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -第三个新 `div` 元素应该将 `id` 设置为 `white-paper`。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index 6a08338e5c6..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: 步骤 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -面具需要眼睛。 在你的 `#gray-mask` 元素中，添加两个 `div` 元素。 第一个应该将 `class` 设置为 `eyes left`，第二个应该将 `class` 设置为 `eyes right`。 - -# --hints-- - -`#gray-mask` 元素中应该有两个 `div` 元素。 - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -第一个新 `div` 元素应该将 `class` 设置为 `eyes left`。 - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -第二个新 `div` 元素应该将 `class` 设置为 `eyes right`。 - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index 3c4d9f39e40..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: 步骤 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -是时候使用一些 FontAwesome 图标了。 - -`i` 元素用于习语文本，或与“正常”文本内容分开的文本。 这可能适用于_斜体_文本，例如科学术语，也可能适用于 FontAwesome 提供的图标。 - -在你的 `#white-paper` 元素中，添加四个 `i` 元素。 给它们一个 `fas fa-music` 的 `class`。 - -这个特殊的类是 FontAwesome 如何确定要加载哪个图标。 `fas` 表示图标的类别（此处为 FontAwesome Solid 字体），而 `fa-music` 选择特定图标。 - -# --hints-- - -你的 `#white-paper` 元素中应该有四个新的 `i` 元素。 - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -你的所有 `i` 元素都应将 `class` 设置为 `fas fa-music`。 - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index 6b544094c95..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: 步骤 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -使用 id 选择器为 id 为 `black-character` 的元素创建规则。 将 `width` 设置为 `300px`，`height` 设置为 `500px`，`background-color` 设置为 `rgb(45, 31, 19)`。 - -# --hints-- - -你应该使用 `#black-character` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -你的 `#black-character` 选择器应该有一个 `width` 属性设置为 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -你的 `#black-character` 选择器应该有一个 `height` 属性设置为 `500px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -你的 `#black-character` 选择器应该有一个 `background-color` 属性设置为 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index 6460baf3fdd..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: 步骤 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -通过将 `position` 设置为 `absolute`，`top` 设置为 `30%`，`left` 设置为 `59%`，将 `#black-character` 元素移动到位。 - -# --hints-- - -你的 `#black-character` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -你的 `#black-character` 选择器应该有一个 `top` 属性设置为 `30%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -你的 `#black-character` 选择器应该有一个 `left` 属性设置为 `59%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index eb7f5d56590..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: 步骤 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -使用 id 选择器为 id 为 `black-hat` 的元素创建规则。 给它一个 `width` 值为 `0`、一个 `height` 值为 `0`，和一个 `border-style` 值为 `solid`。 - -# --hints-- - -你应该有一个 `#black-hat` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -你的 `#black-hat` 选择器应该有一个 `width` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -你的 `#black-hat` 选择器应该有一个 `height` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -你的 `#black-hat` 选择器应该有一个 `border-style` 属性设置为 `solid`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index b1925261b5b..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: 步骤 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -就像你的 `#white-hat` 一样，你应该为 `#black-hat` 元素设置边框样式。 给它添加值为 `transparent` 的 `border-top-color`、`border-right-color` 和 `border-bottom-color`。 将 `border-left-color` 设置为 `rgb(45, 31, 19)`。 - -# --hints-- - -你的 `#black-hat` 选择器应该有一个 `border-top-color` 属性设置为 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -你的 `#black-hat` 选择器应该有一个 `border-right-color` 属性设置为 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -你的 `#black-hat` 选择器应该有一个 `border-bottom-color` 属性设置为 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -你的 `#black-hat` 选择器应该有一个 `border-left-color` 属性设置为 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index 72d6f4b5960..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: 步骤 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -现在定位 `#black-hat` 元素。 给它一个 `position` 为 `absolute`，一个 `top` 为 `-150px` 和一个 `left` 为 `0`。 - -# --hints-- - -你的 `#black-hat` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -你的 `#black-hat` 选择器应该有一个 `top` 属性设置为 `-150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -你的 `#black-hat` 选择器应该有一个 `left` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index 65c9bcaa13e..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: 步骤 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -使用 id 选择器，为 id 为 `gray-mask` 的元素设置样式。 给它一个 `width` 为 `150px`、一个 `height` 为 `150px` 和一个 `background-color` 为 `rgb(167, 162, 117)`。 - -# --hints-- - -你应该有一个 `#gray-mask` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -你的 `#gray-mask` 选择器应该将 `width` 属性设置为 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -你的 `#gray-mask` 选择器应该将 `height` 属性设置为 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -你的 `#gray-mask` 选择器应将 `background-color` 属性设置为 `rgb(167, 162, 117)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index ae2a734cf2d..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: 步骤 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -通过将 `position` 设置为 `absolute`、将 `top` 设置为 `-10px`，以及将 `left` 设置为 `70px`，来定位 `#gray-mask`。 - -# --hints-- - -你的 `#gray-mask` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -你的 `#gray-mask` 选择器应该有一个 `top` 属性设置为 `-10px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -你的 `#gray-mask` 选择器应该有一个 `left` 属性设置为 `70px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index f7a9aad7e99..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: 步骤 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -使用 id 选择器，为 id 为 `white-paper` 的元素创建规则。 将 `width` 设置为 `400px`、`height` 设置为 `100px`、`background-color` 设置为 `GhostWhite`。 - -# --hints-- - -你应该有一个 `#white-paper` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -你的 `#white-paper` 选择器应该将 `width` 属性设置为 `400px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -你的 `#white-paper` 选择器应该将 `height` 属性设置为 `100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -你的 `#white-paper` 选择器应该将 `background-color` 属性设置为 `GhostWhite`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index cbcb3636a8d..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: 步骤 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -给 `#white-paper` 一个 `position` 为 `absolute`、一个 `top` 为 `250px` 和一个 `left` 为 `-150px`，将其移动到位。 - -# --hints-- - -你的 `#white-paper` 选择器应该将 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -你的 `#white-paper` 选择器应该有一个 `top` 属性设置为 `250px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -你的 `#white-paper` 选择器应该有一个 `left` 属性设置为 `-150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index d8442e225f5..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: 步骤 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -将 `#white-paper` 的 `z-index` 设置为 `1`。 - -# --hints-- - -你的 `#white-paper` 选择器应该将 `z-index` 属性设置为 `1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index b2a32978399..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: 步骤 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -FontAwesome 图标带有自己的样式来定义图标。 但是，你仍然可以自己设置样式，以更改颜色和大小等内容。 现在，使用类选择器来选中具有 `fa-music` 类的图标。 将 `display` 设置为 `inline-block`，将 `margin-top` 设置为 `8%`，并将 `margin-left` 设置为 `13%`。 - -# --hints-- - -你应该有一个 `.fa-music` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -你的 `.fa-music` 选择器应该有一个 `display` 属性设置为 `inline-block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -你的 `.fa-music` 选择器应该有一个 `margin-top` 属性设置为 `8%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -你的 `.fa-music` 选择器应该有一个 `margin-left` 属性设置为 `13%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index 5ffa6e72998..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: 步骤 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -在你的 `#black-character` 元素下方，添加两个新的 `div` 元素。 这些将是披肩。 给它们添加 `class` 为 `blue`。 然后给第一个设置 `id` 为 `blue-left`，给第二个设置 `id` 为 `blue-right`。 - -# --hints-- - -你的 `.characters` 元素中应该有两个新的 `div` 元素。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -你的两个新 `div` 元素应该将 `class` 设置为 `blue`。 - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -你的第一个新 `div` 应该具有 `blue-left` 的 `id`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -你的第二个新 `div` 应该具有 `blue-right` 的 `id`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index 34902632433..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: 步骤 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -使用类选择器来定位具有 `blue` 类的新元素。 将 `background-color` 设置为 `#1E90FF`。 - -# --hints-- - -你应该有一个 `.blue` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -你的 `.blue` 选择器应该有一个 `background-color` 属性设置为 `#1E90FF`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index 766d3ecc2e9..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: 步骤 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -使用 id 选择器选中 id 为 `blue-left` 的元素。 给它一个 `width` 为 `500px` 和一个 `height` 为 `300px`。 - -# --hints-- - -你应该有一个 `#blue-left` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -你的 `#blue-left` 选择器应该有一个 `width` 属性设置为 `500px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -你的 `#blue-left` 选择器应该有一个 `height` 属性设置为 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index 124ed23e70d..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: 步骤 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -现在将 `position` 设置为 `absolute`，将 `top` 设置为 `20%`，将 `left` 设置为 `20%`。 - -# --hints-- - -你的 `#blue-left` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -你的 `#blue-left` 选择器应该有一个 `top` 属性设置为 `20%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -你的 `#blue-left` 选择器应该有一个 `left` 属性设置为 `20%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index c4543451c6c..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: 步骤 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -接着，使用 id 选择器选中 id 为 `blue-right` 的元素。 将 `width` 设置为 `400px`，将 `height` 设置为 `300px`。 - -# --hints-- - -你应该有一个 `#blue-right` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -你的 `#blue-right` 选择器应该有一个 `width` 属性设置为 `400px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -你的 `#blue-right` 选择器应该有一个 `height` 属性设置为 `300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index 6a79048b500..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: 步骤 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -为 `#blue-right` 提供正确的定位，将 `position` 设置为 `absolute`，`top` 设置为 `50%`，`left` 设置为 `40%`。 - -# --hints-- - -你的 `#blue-right` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -你的 `#blue-right` 选择器应该有一个 `top` 属性设置为 `50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -你的 `#blue-right` 选择器应该有一个 `left` 属性设置为 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index db48a784200..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: 步骤 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -在你的 `.blue` 元素下方，添加另一个 `div`。 将它的 `id` 值设置为 `orange-character`。 - -# --hints-- - -你的 `.characters` 元素中应该有一个新的 `div` 元素。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -你的新 `div` 元素应将 `id` 设置为 `orange-character`。 - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index 169b6187f85..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: 步骤 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -在该 `#orange-character` 元素中，添加四个 `div` 元素。 按顺序给它们 `id` 值为 `black-round-hat`、`eyes-div`、`triangles` 和 `guitar`。 - -# --hints-- - -你的 `#orange-character` 元素中应该有四个新的 `div` 元素。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -你的第一个新 `div` 元素应该将 `id` 设置为 `black-round-hat`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -你的第二个新 `div` 元素应该将 `id` 设置为 `eyes-div`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -你的第三个新 `div` 元素应该将 `id` 设置为 `triangles`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -你的第四个新 `div` 元素应该将 `id` 设置为 `guitar`。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index fea57dc14d6..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: 步骤 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -`#eyes-div` 元素应该有一些眼睛。 在里面添加两个 `div` 元素。 给第一个添加 `eyes left` 的 `class`，给第二个添加 `eyes right` 的 `class`。 - -# --hints-- - -你应该有两个 `div` 元素嵌套在 `#eyes-div` 中。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -第一个新的 `div` 应该有 `class` 设置为 `eyes left`。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -第二个新的 `div` 应该有 `class` 设置为 `eyes right`。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index 8385daeb9e6..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: 步骤 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -在 `#triangles` div 中，你需要添加将成为三角形的元素。 创建三十个 `div` 元素，并为每个元素赋予 `triangle` 类。 - -# --hints-- - -你的 `#triangles` 元素中应该有 30 个 `div` 元素。 - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -所有 30 个新的 `div` 元素都应有 `class` 为 `triangle`。 - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index ce284c6801d..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: 步骤 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -在 `#guitar` 元素中，创建三个 `div` 元素。 给前两个添加 `guitar` 的 `class`。 然后给第一个添加 `id` 值为 `guitar-left`，给第二个添加 `id` 值为 `guitar-right`。 给第三个 `div` 添加 `id` 值为 `guitar-neck`。 - -第三个 `div` 不应该有 `guitar` 类。 - -# --hints-- - -你的 `#guitar` 元素中应该有三个新的 `div` 元素。 - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -你的第一个新 `div` 应该有一个 `class` 设置为 `guitar`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -你的第一个新 `div` 应该将 `id` 设置为 `guitar-left`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -你的第二个新 `div` 应该有一个 `class` 设置为 `guitar`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -你的第二个新 `div` 应该将 `id` 设置为 `guitar-right`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -你的第三个新 `div` 应该将 `id` 设置为 `guitar-neck`。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -你不应该给第三个新 `div` 一个 `guitar` 的 `class`。 - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index 54c177a5acf..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: 步骤 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -为你的 `.guitar` 使用另一个 FontAwesome 图标。 在 `#guitar-left` 和 `#guitar-right` 元素中，添加一个 `i` 元素，并给它一个 `class` 为 `fas fa-bars`。 - -# --hints-- - -在你的 `#guitar-left` 元素中，你应该添加一个 `i` 元素。 - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -在你的 `#guitar-right` 元素中，你应该添加一个 `i` 元素。 - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -你的两个新 `i` 元素应该有 `class` 为 `fas fa-bars`。 - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - --fcc-editable-region-- -
                                                          - -
                                                          -
                                                          - -
                                                          - --fcc-editable-region-- -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index 36bb6877372..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: 步骤 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -使用 id 选择器选择你的 `orange-character` 元素。 给它一个 `width` 为 `250px`、一个 `height` 为 `550px` 和一个 `background-color` 为 `rgb(240, 78, 42)`。 - -# --hints-- - -你应该有一个 `#orange-character` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -你的 `#orange-character` 选择器应该有一个 `width` 属性设置为 `250px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -你的 `#orange-character` 选择器应该将 `height` 属性设置为 `550px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -你的 `#orange-character` 选择器应该有一个 `background-color` 属性设置为 `rgb(240, 78, 42)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index 6fbfba0f938..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: 步骤 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -给 `#orange-character` 设置 `position` 为 `absolute`，`top` 为 `25%`，以及 `left` 为 `40%`。 - -# --hints-- - -你的 `#orange-character` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -你的 `#orange-character` 选择器应该有一个 `top` 属性设置为 `25%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -你的 `#orange-character` 选择器应该有一个 `left` 属性设置为 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index 437860e259e..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: 步骤 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -使用 id 选择器为 id 为 `black-round-hat` 的元素设置样式。 将`width`设置为`180px`，`height`设置为`150px`，`background-color` 设置为 `rgb(45, 31, 19)`。 - -# --hints-- - -你应该有一个 `#black-round-hat` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -你的 `#black-round-hat` 选择器应该有一个 `width` 属性设置为 `180px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -你的 `#black-round-hat` 选择器应该有一个 `height` 属性设置为 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -你的 `#black-round-hat` 选择器应该有一个 `background-color` 属性设置为 `rgb(45, 31, 19)`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index 7ebd8efced2..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: 步骤 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -`#black-round-hat` 元素应该是圆形的。 给它一个 `50%` 的 `border-radius` 来解决这个问题。 - -# --hints-- - -你的 `#black-round-hat` 选择器应该有一个 `border-radius` 属性设置为 `50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index afdac5e1a64..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: 步骤 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -移动 `#black-round-hat` 元素，使它的 `position` 为 `absolute`，`top` 为 `-100px`，以及 `left` 为 `5px`。 - -# --hints-- - -你的 `#black-round-hat` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -你的 `#black-round-hat` 选择器应该有一个 `top` 属性设置为 `-100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -你的 `#black-round-hat` 选择器应该有一个 `left` 属性设置为 `5px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index 8c80e2e345e..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: 步骤 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -将 `#black-round-hat` 元素放在正确的一层上，`z-index` 为 `-1`。 - -# --hints-- - -你的 `#black-round-hat` 选择器应该有一个 `z-index` 属性设置为 `-1`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index 9ac0f4845bb..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: 步骤 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -使用 id 选择器为 id 为 `eyes-div` 的元素创建规则。 将 `width` 设置为 `180px`，并将 `height` 设置为 `50px`。 - -# --hints-- - -你应该创建一个 `#eyes-div` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -你的 `#eyes-div` 选择器应该有一个 `width` 属性设置为 `180px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -你的 `#eyes-div` 选择器应该将 `height` 属性设置为 `50px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index a9bb2007ecc..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: 步骤 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -现在将 `#eyes-div` 元素移动到位，将 `position` 设置为 `absolute`，`top` 设置为 `-40px`，并且 `left` 设置为 `20px`。 - -# --hints-- - -你的 `#eyes-div` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -你的 `#eyes-div` 选择器应该有一个 `top` 属性设置为 `-40px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -你的 `#eyes-div` 选择器应该有一个 `left` 属性设置为 `20px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index 67b94febc7f..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: 步骤 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -将 `#eyes-div` 的 `z-index` 值设置为 `3`。 - -# --hints-- - -你的 `#eyes-div` 选择器应该有一个 `z-index` 属性设置为 `3`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index f5191d176b4..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: 步骤 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -现在使用 class 选择器来定位 `guitar`。 这将为吉他的两个“半部分”设置样式。 将 `width` 设置为 `150px`，`height` 设置为 `120px`，`background-color` 设置为 `Goldenrod`，`border-radius` 设置为 `50%`。 - -# --hints-- - -你应该创建一个 `.guitar` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -你的 `.guitar` 选择器应该有一个 `width` 属性设置为 `150px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -你的 `.guitar` 选择器应该有一个 `height` 属性设置为 `120px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -你的 `.guitar` 选择器应该有一个 `background-color` 属性设置为 `Goldenrod`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -你的 `.guitar` 选择器应该有一个 `border-radius` 属性设置为 `50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index 72aa78c00c7..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: 步骤 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -选择值为 `guitar-left` 的 `id`，将 `position` 设置为 `absolute`，`left` 设置为 `0px`。 - -# --hints-- - -你应该创建一个新的 `#guitar-left` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -你的 `#guitar-left` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index 2a0ad0bad24..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: 步骤 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -选择值为 `guitar-right` 的 `id`，将 `position` 设置为 `absolute`。 这一次，将 `left` 设置为 `100px`。 - -# --hints-- - -你应该创建一个新的 `#guitar-right` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -你的 `#guitar-right` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -你的 `#guitar-right` 选择器应该有一个 `left` 属性设置为 `100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index 790fb78a3bb..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: 步骤 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -现在你需要将条形图标移动到位。 为 `fa-bars` 类创建一个类选择器。 将 `display` 设置为 `block`，`margin-top` 设置为 `30%`，`margin-left` 设置为 `40%`。 - -# --hints-- - -您应该创建一个 `.fa-bars` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -你的 `.fa-bars` 选择器应该有一个 `display` 属性设置为 `block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -你的 `.fa-bars` 选择器应该有一个 `margin-top` 属性设置为 `30%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -你的 `.fa-bars` 选择器应该有一个 `margin-left` 属性设置为 `40%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index 1abeb247db9..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: 步骤 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -使用 id 选择器为 id `guitar-neck` 创建规则。 将 `width` 设置为 `200px`，`height` 设置为 `30px`，`background-color` 设置为 `#D2691E`。 - -# --hints-- - -你应该创建一个 `#guitar-neck` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -你的 `#guitar-neck` 选择器应该有一个 `width` 属性设置为 `200px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -你的 `#guitar-neck` 选择器应该有一个 `height` 属性设置为 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -你的 `#guitar-neck` 选择器应该有一个 `background-color` 属性设置为 `#D2691E`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index a535da82f91..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: 步骤 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -现在移动 `#guitar-neck` 元素，`position` 为 `absolute`，`top` 值为 `45px`，以及 `left` 值为 `200px`。 - -# --hints-- - -你的 `#guitar-neck` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -你的 `#guitar-neck` 选择器应该有一个 `top` 属性设置为 `45px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -你的 `#guitar-neck` 选择器应该有一个 `left` 属性设置为 `200px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index 9b026b24ec1..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: 步骤 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -给 `#guitar-neck` 元素一个 `z-index` 值为 `3`。 - -# --hints-- - -你的 `#guitar-neck` 选择器应该有一个 `z-index` 属性设置为 `3`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index b78cb087a5b..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: 步骤 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -是时候用 `eyes` 类设置元素的样式了。 使用类选择器将 `width` 设置为 `35px`，`height` 设置为 `20px`，`background-color` 设置为 `#8B4513`，`border-radius` 设置为 `20px 50%`。 - -# --hints-- - -你应该创建一个 `.eyes` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -你的 `.eyes` 选择器应该有一个 `width` 属性设置为 `35px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -你的 `.eyes` 选择器应该有一个 `height` 属性设置为 `20px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -你的 `.eyes` 选择器应该有一个 `background-color` 属性设置为 `#8B4513`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -你的 `.eyes` 选择器应该有一个 `border-radius` 属性设置为 `20px 50%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index 97952f7fa68..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: 步骤 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -以 `right` 值定位 `class`，并将 `position` 设置为 `absolute`，`top` 设置为`15px`，`right` 设置为 `30px`。 - -# --hints-- - -你应该创建一个 `.right` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -你的 `.right` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -你的 `.right` 选择器应该有一个 `top` 属性设置为 `15px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -你的 `.right` 选择器应该有一个 `right` 属性设置为 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index 00ffcc57564..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: 步骤 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -对于值为 `left` 的 `class`，创建选择器并将 `position` 设置为 `absolute`，`top` 设置为 `15px`，`left` 设置为 `30px`。 - -# --hints-- - -你应该创建一个新的 `.left` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -你的 `.left` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -你的 `.left` 选择器应该有一个 `top` 属性设置为 `15px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -你的 `.left` 选择器应该有一个 `left` 属性设置为 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index f72cb8ba747..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: 步骤 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -最后一个步骤。 FontAwesome 图标有点太小了。 使用 `fas` 类选择器定位它们，并将 `font-size` 设置为 `30px`。 - -这样，你的毕加索画就完成了！ - -# --hints-- - -你应该创建一个 `.fas` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -你的 `.fas` 选择器应该有一个 `font-size` 属性设置为 `30px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index 2d427ebb01c..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: 步骤 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -链接你的 CSS 文件，即使你还没有编写任何 CSS。 - -添加一个 `link` 元素，其中 `rel` 值为 `stylesheet`，`href` 值为 `styles.css`。 - -# --hints-- - - -你的代码应该有一个 `link` 元素。 - -```js -assert.match(code, / link')); -``` - -你的 `link` 元素应该有一个 `rel` 属性，其值为 `stylesheet`。 - -```js -const link_element = document.querySelector('link'); -const rel = link_element.getAttribute("rel"); -assert.equal(rel, "stylesheet"); -``` - -你的 `link` 元素应该有一个 `href` 属性，其值为 `styles.css`。 - -```js -const link = document.querySelector('link'); -assert.equal(link.dataset.href, "styles.css"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index 673a2276c45..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: 步骤 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -调整 `.triangle` 元素的布局，设置 `display` 为 `inline-block`。 - -# --hints-- - -你的 `.triangle` 选择器应该有一个 `display` 属性设置为 `inline-block`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index 71d2aee0456..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: 步骤 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -给你的 `.triangle` 元素正确的颜色。 将 `border-top-color`、`border-bottom-color` 和 `border-left-color` 设置为 `transparent`。 将 `border-right-color` 设置为 `Gold`。 - -# --hints-- - -你的 `.triangle` 选择器应该有一个 `border-top-color` 属性设置为 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -你的 `.triangle` 选择器应该有一个 `border-bottom-color` 属性设置为 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -你的 `.triangle` 选择器应该有一个 `border-left-color` 属性设置为 `transparent`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -你的 `.triangle` 选择器应该有一个 `border-right-color` 属性设置为 `Gold`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index 8203ccfb445..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: 步骤 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -为你的 `.triangle` 元素的边框设置样式。 将 `border-style` 设置为 `solid`，`border-width` 设置为 `42px 45px 45px 0`。 - -# --hints-- - -你的 `.triangle` 选择器应该有一个 `border-style` 属性设置为 `solid`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -你的 `.triangle` 选择器应该有一个 `border-width` 属性设置为 `42px 45px 45px 0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index 10fc9d0f7d5..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: 步骤 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -为具有 `triangle` 类的元素创建一个类选择器。 将 `width` 设置为 `0`，`height` 设置为 `0`。 - -# --hints-- - -你应该创建一个 `.triangle` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -你的 `.triangle` 选择器应该有一个 `width` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -你的 `.triangle` 选择器应该有一个 `height` 属性设置为 `0`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index c0d68eefff3..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: 步骤 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -使用 id 选择器选中 id 为 `triangles` 的元素。 将 `width` 设置为 `250px`，`height` 设置为 `550px`。 - -# --hints-- - -你应该添加一个 `#triangles` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -你的 `#triangles` 选择器应该有一个 `width` 属性设置为 `250px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -你的 `#triangles` 选择器应该将 `height` 属性设置为 `550px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index b6da04b3776..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: 步骤 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -现在为 `guitar` 使用 id 选择器。 将 `width` 设置为 `100%`，`height` 设置为 `100px`。 - -# --hints-- - -你应该创建一个 `#guitar` 选择器。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -你的 `#guitar` 选择器应该有一个 `width` 属性设置为 `100%`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -你的 `#guitar` 选择器应该有一个 `height` 属性设置为 `100px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index 3e849f178c2..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: 步骤 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -在同一个 `#guitar` 选择器中，将 `position` 设置为 `absolute`，`top` 设置为 `120px`，`left` 设置为 `0px`。 - -# --hints-- - -你的 `#guitar` 选择器应该有一个 `position` 属性设置为 `absolute`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -你的 `#guitar` 选择器应该有一个 `top` 属性设置为 `120px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -你的 `#guitar` 选择器应该有一个 `left` 属性设置为 `0px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index 3cf2b2b54a0..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: 步骤 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -为 `#guitar` 规则添加 `z-index` 为 `3`。 - -# --hints-- - -你的 `#guitar` 选择器应该有一个 `z-index` 属性设置为 `3`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - -
                                                          -
                                                          - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index a25098fe6d7..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: 步骤 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -将 `#black-hat` 的 `border-width` 设置为 `150px 0 0 300px`。 - -# --hints-- - -你的 `#black-hat` 选择器应该有一个 `border-width` 属性设置为 `150px 0 0 300px`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          -
                                                          - - - - -
                                                          -
                                                          -
                                                          - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md deleted file mode 100644 index 6ab83c983d4..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f5c1cb7575c7551ed8a40 -title: 步骤 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -数字 `230` 的较大字体导致其溢出。 将 `.calories-info h1` 的 `overflow` 属性设置为 `hidden` 以避免这种情况。 - -# --hints-- - -`.calories-info h1` 选择器应该有一个 `overflow` 属性设置为 `hidden`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                          -
                                                          -

                                                          Nutrition Facts

                                                          -
                                                          -

                                                          8 servings per container

                                                          -

                                                          Serving size 2/3 cup (55g)

                                                          -
                                                          -
                                                          -
                                                          -

                                                          Amount per serving

                                                          -

                                                          Calories 230

                                                          -
                                                          -
                                                          - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- -.calories-info h1 { - margin: -5px -2px; -} ---fcc-editable-region-- - -.calories-info span { - font-size: 1.2em; -} -``` diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md deleted file mode 100644 index d4d09ba4f78..00000000000 --- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f6a7d4ba8037bc086c2c7 -title: 步骤 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -给 `.divider` 选择器一个 `clear` 属性设置为 `right`。 这将清除 `float` 属性，将分隔线和任何后续内容推到 `float` 文本下方。 - -# --hints-- - -`.divider` 选择器应该有一个 `clear` 属性设置为 `right`。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                          -
                                                          -

                                                          Nutrition Facts

                                                          -
                                                          -

                                                          8 servings per container

                                                          -

                                                          Serving size 2/3 cup (55g)

                                                          -
                                                          -
                                                          -
                                                          -

                                                          Amount per serving

                                                          -

                                                          Calories 230

                                                          -
                                                          -
                                                          -
                                                          -

                                                          % Daily Value *

                                                          -
                                                          -
                                                          -
                                                          - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - ---fcc-editable-region-- -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} ---fcc-editable-region-- - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md deleted file mode 100644 index 2512ac46005..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 56533eb9ac21ba0edf2244e2 -title: 构建一个凯撒密码 -challengeType: 5 -forumTopicId: 16003 -dashedName: build-a-caesars-cipher ---- - -# --description-- - -凯撒密码（ Caesar cipher）是最简单且最广为人知的密码（ciphers），也被称为移位密码（shift cipher）。 在移位密码中，明文中的字母通过按照一个固定数目进行偏移后被替换成新的字母。 - -现代最常被应用到的一个变种就是 ROT13 加密，也就是明文中的字母向后移 13 位。 也就是， `A ↔ N`，`B ↔ O` 等等。 - -编写一个函数，它将把使用 ROT13 加密编码的字符串作为输入并返回解码字符串。 - -所有解码后的字母都必须为字母大写。 请不要解码非字母的字符（例如，空格、标点符号），但你需要在结果中保留它们。 - -# --hints-- - -`rot13("SERR PBQR PNZC")` 应解码为 `FREE CODE CAMP` - -```js -assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); -``` - -`rot13("SERR CVMMN!")` 应解码为 `FREE PIZZA!` - -```js -assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); -``` - -`rot13("SERR YBIR?")` 应解码为 `FREE LOVE?` - -```js -assert(rot13('SERR YBIR?') === 'FREE LOVE?'); -``` - -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` 应解码为 `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` - -```js -assert( - rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === - 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function rot13(str) { - return str; -} - -rot13("SERR PBQR PNZC"); -``` - -# --solutions-- - -```js -var lookup = { - 'A': 'N','B': 'O','C': 'P','D': 'Q', - 'E': 'R','F': 'S','G': 'T','H': 'U', - 'I': 'V','J': 'W','K': 'X','L': 'Y', - 'M': 'Z','N': 'A','O': 'B','P': 'C', - 'Q': 'D','R': 'E','S': 'F','T': 'G', - 'U': 'H','V': 'I','W': 'J','X': 'K', - 'Y': 'L','Z': 'M' -}; - -function rot13(encodedStr) { - var codeArr = encodedStr.split(""); // String to Array - var decodedArr = []; // Your Result goes here - // Only change code below this line - - decodedArr = codeArr.map(function(letter) { - if(lookup.hasOwnProperty(letter)) { - letter = lookup[letter]; - } - return letter; - }); - - // Only change code above this line - return decodedArr.join(""); // Array to String -} -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md deleted file mode 100644 index 0cffa096345..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: aa2e6f85cab2ab736c9a9b24 -title: 构建一个收银机 -challengeType: 5 -forumTopicId: 16012 -dashedName: build-a-cash-register ---- - -# --description-- - -设计一个收银机抽屉函数 `checkCashRegister()`，它接受购买价格作为第一个参数（`price`），付款作为第二个参数（`cash`），和抽屉的现金（`cid`）作为第三个参数。 - -`cid` 是包含货币面值的二维数组。 - -函数 `checkCashRegister()` 应返回含有 `status` 属性和 `change` 属性的对象。 - -如果收银机內的金额少于应找回的零钱数，或者你无法返回确切的数目时，返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 - -如果收银机內的金额恰好等于应找回的零钱数，返回 `{status: "CLOSED", change: [...]}`，其中 `change` 的属性值就是收银机內的金额。 - -否则，返回 `{status: "OPEN", change: [...]}`，其中 `change` 键值是应找回的零钱数，并将找零的面值由高到低排序。 - -
                                                          货币单位面值
                                                          Penny0.01 美元（PENNY）
                                                          Nickel0.05 美元（NICKEL）
                                                          Dime0.1 美元（DIME）
                                                          Quarter0.25 美元（QUARTER）
                                                          Dollar1 美元（ONE）
                                                          Five Dollars5 美元（FIVE）
                                                          Ten Dollars10 美元（TEN）
                                                          Twenty Dollars20 美元（TWENTY）
                                                          One-hundred Dollars100 美元（ONE HUNDRED）
                                                          - -下面的抽屉里现金数组示例： - -```js -[ - ["PENNY", 1.01], - ["NICKEL", 2.05], - ["DIME", 3.1], - ["QUARTER", 4.25], - ["ONE", 90], - ["FIVE", 55], - ["TEN", 20], - ["TWENTY", 60], - ["ONE HUNDRED", 100] -] -``` - -# --hints-- - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 应返回一个对象。 - -```js -assert.deepEqual( - Object.prototype.toString.call( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]) - ), - '[object Object]' -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 应返回 `{status: "OPEN", change: [["QUARTER", 0.5]]}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { status: 'OPEN', change: [['QUARTER', 0.5]] } -); -``` - -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 应返回 `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`。 - -```js -assert.deepEqual( - checkCashRegister(3.26, 100, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { - status: 'OPEN', - change: [ - ['TWENTY', 60], - ['TEN', 20], - ['FIVE', 15], - ['ONE', 1], - ['QUARTER', 0.5], - ['DIME', 0.2], - ['PENNY', 0.04] - ] - } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 应返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 应返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 1], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 应返回 `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`。 - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { - status: 'CLOSED', - change: [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ] - } -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function checkCashRegister(price, cash, cid) { - let change; - return change; -} - -checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); -``` - -# --solutions-- - -```js -const denom = [ - { name: "ONE HUNDRED", val: 100 }, - { name: "TWENTY", val: 20 }, - { name: "TEN", val: 10 }, - { name: "FIVE", val: 5 }, - { name: "ONE", val: 1 }, - { name: "QUARTER", val: 0.25 }, - { name: "DIME", val: 0.1 }, - { name: "NICKEL", val: 0.05 }, - { name: "PENNY", val: 0.01 }, -]; - -function checkCashRegister(price, cash, cid) { - const output = { status: null, change: [] }; - let change = cash - price; - const register = cid.reduce( - function (acc, curr) { - acc.total += curr[1]; - acc[curr[0]] = curr[1]; - return acc; - }, - { total: 0 } - ); - if (register.total === change) { - output.status = "CLOSED"; - output.change = cid; - return output; - } - if (register.total < change) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - const change_arr = denom.reduce(function (acc, curr) { - let value = 0; - while (register[curr.name] > 0 && change >= curr.val) { - change -= curr.val; - register[curr.name] -= curr.val; - value += curr.val; - change = Math.round(change * 100) / 100; - } - if (value > 0) { - acc.push([curr.name, value]); - } - return acc; - }, []); - if (change_arr.length < 1 || change > 0) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - output.status = "OPEN"; - output.change = change_arr; - return output; -} -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md deleted file mode 100644 index 41672413414..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: aaa48de84e1ecc7c742e1124 -title: 构建一个回文检测器 -challengeType: 5 -forumTopicId: 16004 -dashedName: build-a-palindrome-checker ---- - -# --description-- - -如果传入的字符串是回文字符串，则返回 `true`。 否则，返回 `false` 。 - -回文（palindrome），指在忽略标点符号、大小写和空格的前提下，正着读和反着读一模一样。 - -**注意：** 检查回文时，你需要先去除 **所有非字母数字的字符**（标点、空格和符号），并将所有字母都转换成大写或都转换成小写。 - -我们会传入具有不同格式的字符串，如 `racecar`、`RaceCar` 和 `race CAR` 等等。 - -我们也会传入一些包含特殊符号的字符串，例如 `2A3*3a2`、`2A3 3a2`、`2_A3*3#A2`。 - -# --hints-- - -`palindrome("eye")` 应返回一个布尔值。 - -```js -assert(typeof palindrome('eye') === 'boolean'); -``` - -`palindrome("eye")` 应返回 `true`。 - -```js -assert(palindrome('eye') === true); -``` - -`palindrome("_eye")` 应返回 `true`。 - -```js -assert(palindrome('_eye') === true); -``` - -`palindrome("race car")` 应返回 `true`。 - -```js -assert(palindrome('race car') === true); -``` - -`palindrome("not a palindrome")` 应返回 `false`。 - -```js -assert(palindrome('not a palindrome') === false); -``` - -`palindrome("A man, a plan, a canal. Panama")` 应返回 `true`。 - -```js -assert(palindrome('A man, a plan, a canal. Panama') === true); -``` - -`palindrome("never odd or even")` 应返回 `true`。 - -```js -assert(palindrome('never odd or even') === true); -``` - -`palindrome("nope")` 应返回 `false`。 - -```js -assert(palindrome('nope') === false); -``` - -`palindrome("almostomla")` 应返回 `false`。 - -```js -assert(palindrome('almostomla') === false); -``` - -`palindrome("My age is 0, 0 si ega ym.")` 应返回 `true`。 - -```js -assert(palindrome('My age is 0, 0 si ega ym.') === true); -``` - -`palindrome("1 eye for of 1 eye.")` 应返回 `false`。 - -```js -assert(palindrome('1 eye for of 1 eye.') === false); -``` - -`palindrome("0_0 (: /-\ :) 0-0")` 应返回 `true`。 - -```js -assert(palindrome('0_0 (: /- :) 0-0') === true); -``` - -`palindrome("five|\_/|four")` 应返回 `false`。 - -```js -assert(palindrome('five|_/|four') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function palindrome(str) { - return true; -} - -palindrome("eye"); -``` - -# --solutions-- - -```js -function palindrome(str) { - var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); - var aux = string.split(''); - if (aux.join('') === aux.reverse().join('')){ - return true; - } - - return false; -} -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md deleted file mode 100644 index 6b516bc106f..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: a7f4d8f2483413a6ce226cac -title: 构建罗马数字转换器 -challengeType: 5 -forumTopicId: 16044 -dashedName: build-a-roman-numeral-converter ---- - -# --description-- - -把传入的数字转为罗马数字。 - -| 罗马数字 | 阿拉伯数字 | -| ---- | ----- | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| C | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -所有罗马数字答案都应该大写。 - -# --hints-- - -`convertToRoman(2)` 应该返回字符串 `II`。 - -```js -assert.deepEqual(convertToRoman(2), 'II'); -``` - -`convertToRoman(3)` 应该返回字符串 `III`。 - -```js -assert.deepEqual(convertToRoman(3), 'III'); -``` - -`convertToRoman(4)` 应该返回字符串 `IV`。 - -```js -assert.deepEqual(convertToRoman(4), 'IV'); -``` - -`convertToRoman(5)` 应该返回字符串 `V`。 - -```js -assert.deepEqual(convertToRoman(5), 'V'); -``` - -`convertToRoman(9)` 应该返回字符串 `IX`。 - -```js -assert.deepEqual(convertToRoman(9), 'IX'); -``` - -`convertToRoman(12)` 应该返回字符串 `XII`。 - -```js -assert.deepEqual(convertToRoman(12), 'XII'); -``` - -`convertToRoman(16)` 应该返回字符串 `XVI`。 - -```js -assert.deepEqual(convertToRoman(16), 'XVI'); -``` - -`convertToRoman(29)` 应该返回字符串 `XXIX`。 - -```js -assert.deepEqual(convertToRoman(29), 'XXIX'); -``` - -`convertToRoman(44)` 应该返回字符串 `XLIV`. - -```js -assert.deepEqual(convertToRoman(44), 'XLIV'); -``` - -`convertToRoman(45)` 应该返回字符串 `XLV`。 - -```js -assert.deepEqual(convertToRoman(45), 'XLV'); -``` - -`convertToRoman(68)` 应该返回字符串 `LXVIII` - -```js -assert.deepEqual(convertToRoman(68), 'LXVIII'); -``` - -`convertToRoman(83)` 应该返回字符串 `LXXXIII` - -```js -assert.deepEqual(convertToRoman(83), 'LXXXIII'); -``` - -`convertToRoman(97)` 应该返回字符串 `XCVII` - -```js -assert.deepEqual(convertToRoman(97), 'XCVII'); -``` - -`convertToRoman(99)` 应该返回字符串 `XCIX` - -```js -assert.deepEqual(convertToRoman(99), 'XCIX'); -``` - -`convertToRoman(400)` 应该返回字符串 `CD` - -```js -assert.deepEqual(convertToRoman(400), 'CD'); -``` - -`convertToRoman(500)` 应该返回字符串 `D` - -```js -assert.deepEqual(convertToRoman(500), 'D'); -``` - -`convertToRoman(501)` 应该返回字符串 `DI` - -```js -assert.deepEqual(convertToRoman(501), 'DI'); -``` - -`convertToRoman(649)` 应该返回字符串 `DCXLIX` - -```js -assert.deepEqual(convertToRoman(649), 'DCXLIX'); -``` - -`convertToRoman(798)` 应该返回字符串 `DCCXCVIII` - -```js -assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); -``` - -`convertToRoman(891)` 应该返回字符串 `DCCCXCI` - -```js -assert.deepEqual(convertToRoman(891), 'DCCCXCI'); -``` - -`convertToRoman(1000)` 应该返回字符串 `M` - -```js -assert.deepEqual(convertToRoman(1000), 'M'); -``` - -`convertToRoman(1004)` 应该返回字符串 `MIV` - -```js -assert.deepEqual(convertToRoman(1004), 'MIV'); -``` - -`convertToRoman(1006)` 应该返回字符串 `MVI` - -```js -assert.deepEqual(convertToRoman(1006), 'MVI'); -``` - -`convertToRoman(1023)` 应该返回字符串 `MXXIII` - -```js -assert.deepEqual(convertToRoman(1023), 'MXXIII'); -``` - -`convertToRoman(2014)` 应该返回字符串 `MMXIV` - -```js -assert.deepEqual(convertToRoman(2014), 'MMXIV'); -``` - -`convertToRoman(3999)` 应该返回字符串 `MMMCMXCIX` - -```js -assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); -``` - -# --seed-- - -## --seed-contents-- - -```js -function convertToRoman(num) { - return num; -} - -convertToRoman(36); -``` - -# --solutions-- - -```js -function convertToRoman(num) { - var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; - var res = []; - ref.forEach(function(p) { - while (num >= p[1]) { - res.push(p[0]); - num -= p[1]; - } - }); - return res.join(''); -} -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md deleted file mode 100644 index 50cb8f587b7..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: aff0395860f5d3034dc0bfc9 -title: 构建电话号码验证器 -challengeType: 5 -forumTopicId: 16090 -dashedName: build-a-telephone-number-validator ---- - -# --description-- - -如果传入的字符串是一个有效的美国电话号码，则返回 `true`。 - -用户可以按照他们选择的方式填写表单字段，只要它是有效美国号码的格式即可。 以下是美国电话号码的有效格式示例（其他格式变化，请参考下面的测试）： - -
                                                          555-555-5555
                                                          (555)555-5555
                                                          (555) 555-5555
                                                          555 555 5555
                                                          5555555555
                                                          1 555 555 5555
                                                          - -在这个挑战中，传入的字符串可能是例如 `800-692-7753` 或者 `8oo-six427676;laskdjf` 的号码。 你的任务是根据上面不同的格式组合，判断它是否为有效的电话号码。 地区代码是必需的。 如果提供了国家/地区代码，则必须确认国家/地区代码为`1` 。 如果传入的字符串是有效的美国电话号码，则返回 `true`，否则返回 `false` 。 - -# --hints-- - -`telephoneCheck("555-555-5555")` 应返回一个布尔值。 - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` 应返回 `true`。 - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` 应返回 `true`。 - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` 应返回 `true`。 - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` 应返回 `true`。 - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` 应返回 `true`。 - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` 应返回 `true`。 - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` 应返回 `false`。 - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` 应返回 `false`。 - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` 应返回 `false`。 - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` 应返回 `true`。 - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` 应返回 `true`。 - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` 应返回 `false`。 - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` 应返回 `false`。 - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` 应返回 `false`。 - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` 应返回 `false`。 - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` 应返回 `false`。 - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` 应返回 `false`。 - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` 应返回 `false`。 - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` 应返回 `false`。 - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` 应返回 `false`。 - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` 应返回 `false`。 - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` 应返回 `false`。 - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` 应返回 `false`。 - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` 应返回 `false`。 - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` 应返回 `false`。 - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` 应返回 `false`。 - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` 应返回 `false`。 - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` 应返回 `false`。 - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index 39ab9c717d4..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: 步骤 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -你一直使用 `var` 关键字声明变量。 然而，在现代 JavaScript 中，最佳实践是使用 `let` 关键词。 这会修正几种使用 `var` 后导致代码难以调试的异常行为。 - -将你所有的 `var` 关键字更改为 `let`。 - -# --hints-- - -你的代码中不应该有任何 `var` 关键字。 - -```js -assert.notMatch(code, /var/); -``` - -你应该使用 `let` 关键字声明变量 `xp` 。 - -```js -assert.match(code, /let xp/); -``` - -你应该使用 `let` 关键字声明变量 `health` 。 - -```js -assert.match(code, /let health/); -``` - -你应该使用 `let` 关键字声明变量 `gold` 。 - -```js -assert.match(code, /let gold/); -``` - -你应该使用 `let` 关键字声明变量 `currentWeapon` 。 - -```js -assert.match(code, /let currentWeapon/); -``` - -你不应该更改你的变量的值。 - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - - -
                                                          -
                                                          - XP: 0 - Health: 100 - Gold: 50 -
                                                          -
                                                          - - - -
                                                          -
                                                          - Monster Name: - Health: -
                                                          -
                                                          - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                          -
                                                          - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js ---fcc-editable-region-- -var xp = 0; -var health = 100; -var gold = 50; -var currentWeapon = 0; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md deleted file mode 100644 index cd564871491..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 62a8f2bc37675e77d5835235 -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -JavaScript has a conditional operator called the ternary operator. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`. - -Here is an example of an `if-else` expression changed to a ternary: - -```js -if (num > 5) { - bigger() -} else { - smaller() -} - -num > 5 ? bigger() : smaller(); -``` - -Change your new `if-else` expression to a ternary. - -# --hints-- - -You should remove the `if` and `else` from your `else if` block. - -```js -const block = attack.toString().split("else if"); -assert.notMatch(block[1], /if/); -assert.notMatch(block[1], /else/); -``` - -You should check if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2/); -``` - -Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); -``` - -Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - -
                                                          -
                                                          - XP: 0 - Health: 100 - Gold: 50 -
                                                          -
                                                          - - - -
                                                          -
                                                          - Monster Name: - Health: -
                                                          -
                                                          - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                          -
                                                          - - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js -let xp = 0; -let health = 100; -let gold = 50; -let currentWeapon = 0; -let fighting; -let monsterHealth; -let inventory = ["stick"]; - -const button1 = document.querySelector('#button1'); -const button2 = document.querySelector("#button2"); -const button3 = document.querySelector("#button3"); -const text = document.querySelector("#text"); -const xpText = document.querySelector("#xpText"); -const healthText = document.querySelector("#healthText"); -const goldText = document.querySelector("#goldText"); -const monsterStats = document.querySelector("#monsterStats"); -const monsterName = document.querySelector("#monsterName"); -const monsterHealthText =document.querySelector("#monsterHealth"); -const weapons = [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]; -const monsters = [ - { - name: "slime", - level: 2, - health: 15 - }, - { - name: "fanged beast", - level: 8, - health: 60 - }, - { - name: "dragon", - level: 20, - health: 300 - } -] -const locations = [ - { - name: "town square", - "button text": ["Go to store", "Go to cave", "Fight dragon"], - "button functions": [goStore, goCave, fightDragon], - text: "You are in the town square. You see a sign that says \"Store\"." - }, - { - name: "store", - "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], - "button functions": [buyHealth, buyWeapon, goTown], - text: "You enter the store." - }, - { - name: "cave", - "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], - "button functions": [fightSlime, fightBeast, goTown], - text: "You enter the cave. You see some monsters." - }, - { - name: "fight", - "button text": ["Attack", "Dodge", "Run"], - "button functions": [attack, dodge, goTown], - text: "You are fighting a monster." - }, - { - name: "kill monster", - "button text": ["Go to town square", "Go to town square", "Go to town square"], - "button functions": [goTown, goTown, goTown], - text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' - }, - { - name: "lose", - "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], - "button functions": [restart, restart, restart], - text: "You die. ☠️" - } -]; - -// initialize buttons -button1.onclick = goStore; -button2.onclick = goCave; -button3.onclick = fightDragon; - -function update(location) { - monsterStats.style.display = "none"; - button1.innerText = location["button text"][0]; - button2.innerText = location["button text"][1]; - button3.innerText = location["button text"][2]; - button1.onclick = location["button functions"][0]; - button2.onclick = location["button functions"][1]; - button3.onclick = location["button functions"][2]; - text.innerText = location.text; -} - -function goTown() { - update(locations[0]); -} - -function goStore() { - update(locations[1]); -} - -function goCave() { - update(locations[2]); -} - -function buyHealth() { - if (gold >= 10) { - gold -= 10; - health += 10; - goldText.innerText = gold; - healthText.innerText = health; - } else { - text.innerText = "You do not have enough gold to buy health."; - } -} - -function buyWeapon() { - if (currentWeapon < weapons.length - 1) { - if (gold >= 30) { - gold -= 30; - currentWeapon++; - goldText.innerText = gold; - let newWeapon = weapons[currentWeapon].name; - text.innerText = "You now have a " + newWeapon + "."; - inventory.push(newWeapon); - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "You do not have enough gold to buy a weapon."; - } - } else { - text.innerText = "You already have the most powerful weapon!"; - button2.innerText = "Sell weapon for 15 gold"; - button2.onclick = sellWeapon; - } -} - -function sellWeapon() { - if (inventory.length > 1) { - gold += 15; - goldText.innerText = gold; - let currentWeapon = inventory.shift(); - text.innerText = "You sold a " + currentWeapon + "."; - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "Don't sell your only weapon!"; - } -} - -function fightSlime() { - fighting = 0; - goFight(); -} - -function fightBeast() { - fighting = 1; - goFight(); -} - -function fightDragon() { - fighting = 2; - goFight(); -} - -function goFight() { - update(locations[3]); - monsterHealth = monsters[fighting].health; - monsterStats.style.display = "block"; - monsterName.innerText = monsters[fighting].name; - monsterHealthText.innerText = monsterHealth; -} - ---fcc-editable-region-- -function attack() { - text.innerText = "The " + monsters[fighting].name + " attacks."; - text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; - health -= monsters[fighting].level; - monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; - healthText.innerText = health; - monsterHealthText.innerText = monsterHealth; - if (health <= 0) { - lose(); - } else if (monsterHealth <= 0) { - if (fighting === 2) { - winGame(); - } else { - defeatMonster(); - } - } -} ---fcc-editable-region-- - -function dodge() { - text.innerText = "You dodge the attack from the " + monsters[fighting].name; -} - -function defeatMonster() { - gold += Math.floor(monsters[fighting].level * 6.7); - xp += monsters[fighting].level; - goldText.innerText = gold; - xpText.innerText = xp; - update(locations[4]); -} - -function lose() { - update(locations[5]); -} - -function restart() { - xp = 0; - health = 100; - gold = 50; - currentWeapon = 0; - inventory = ["stick"]; - goldText.innerText = gold; - healthText.innerText = health; - xpText.innerText = xp; - goTown(); -} -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md new file mode 100644 index 00000000000..d178d5a5a2b --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -0,0 +1,682 @@ +--- +id: 659b0093d7db5a1a1122b7bd +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +```js +const animals = ["dog", "cat", "horse"]; +animals.indexOf("cat") // 1 +``` + +Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`. + +# --hints-- + +You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/) +``` + +You should pass in `userData.currentSong` into the `indexOf()` method. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +

                                                          freeCodeCamp

                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          + song cover art +
                                                          +
                                                          +
                                                          +

                                                          +

                                                          +
                                                          +
                                                          + + + + + +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +

                                                          Playlist

                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                          +
                                                            +
                                                            +
                                                            + + + +``` + +```css +:root { + /* colors */ + --primary-color: #dfdfe2; + --secondary-color: #ffffff; + --app-background-color: #4d4d62; + --background-color: #1b1b32; + --foreground-color: #3b3b4f; + --highlight-color: #f1be32; + + /* font sizes */ + --root-font-size: 16px; + font-size: var(--root-font-size); + + /* font-families */ + --font-headline: "Roboto Mono", monospace; + --font-family: "Lato", sans-serif; +} + +*, +*::after, +*::before { + box-sizing: border-box; +} + +body { + background-color: var(--app-background-color); + color: var(--primary-color); + font-family: var(--font-family); +} + +h1 { + font-size: 1.125rem; + line-height: 1.6; +} + +h2 { + font-size: var(--root-font-size); +} + +ul { + margin: 0; +} + +.container { + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; +} + +.player, +.playlist { + width: 450px; + background-color: var(--background-color); + border: 3px solid var(--foreground-color); +} + +.player { + height: 260px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +.player-bar, +.playlist-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + width: 100%; + height: 30px; + background-color: var(--foreground-color); +} + +.parallel-lines { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + padding: 0 5px; +} + +.parallel-lines > div { + height: 2px; + width: 100%; + min-width: 75px; + background-color: var(--highlight-color); +} + +.fcc-title, +.playlist-title { + color: var(--secondary-color); + margin: 0 10px; + font-family: var(--font-headline); +} + +.player-content { + display: flex; + background-color: var(--foreground-color); + width: 430px; + height: 200px; + column-gap: 13px; + align-items: center; + justify-content: center; +} + +#player-album-art { + background-color: var(--secondary-color); + border: 6px solid var(--background-color); +} + +#player-album-art img { + width: 150px; + display: block; +} + +.player-display { + display: flex; + flex-direction: column; + row-gap: 20px; + padding: 14px; + background-color: var(--background-color); + height: 153px; + width: 226px; +} + +.player-display-song-artist { + height: 80px; +} + +.player-buttons svg { + fill: var(--primary-color); +} + +.playing > svg { + fill: var(--highlight-color); +} + +.player-buttons { + display: flex; + justify-content: space-around; +} + +button { + background: transparent; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: var(--root-font-size); + outline-color: var(--highlight-color); + text-align: center; +} + +.playlist-song { + outline-color: var(--highlight-color); +} + +.playlist li:not(:last-child) { + border-bottom: 1px solid var(--background-color); +} + +button:focus, +.playlist-song:focus { + outline-style: dashed; + outline-width: 2px; +} + +/* Playlist */ +.playlist { + height: auto; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +#playlist-songs { + width: 430px; + height: 100%; + background-color: var(--foreground-color); + display: flex; + flex-direction: column; + row-gap: 8px; + padding: 8px 9px; + visibility: visible; + justify-content: start; + list-style: none; +} + +.playlist-song { + display: flex; + height: 55px; + justify-content: space-between; + align-items: center; + padding: 5px; +} + +[aria-current="true"] { + background-color: var(--background-color); +} + +[aria-current="true"] p { + color: var(--highlight-color); +} + +.playlist-song-info { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + column-gap: 7px; + padding: 5px 0; + font-family: var(--font-family); +} + +#player-song-title, +#player-song-artist { + margin: 0; +} + +#player-song-artist { + color: var(--highlight-color); + font-size: 0.75rem; +} + +#player-song-title { + font-size: 1.125rem; +} + +.playlist-song-title { + font-size: 0.85rem; + width: 241px; + text-align: left; +} + +.playlist-song-artist { + font-size: 0.725rem; + width: 80px; +} + +.playlist-song-duration { + font-size: 0.725rem; + margin: auto; + font-family: var(--font-headline); + width: 30px; +} + +.playlist-song-delete { + padding: 0; + width: 20px; + height: 20px; +} + +.playlist-song-delete, +.playlist-song-delete { + fill: var(--foreground-color); +} + +.playlist-song-delete:hover circle, +.playlist-song-delete:focus circle { + fill: #ff0000; +} + +@media (max-width: 700px) { + .player, + .playlist { + width: 300px; + } + + .player { + height: 340px; + } + + #playlist-songs { + height: 280px; + padding: 5px 6px; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-color: var(--background-color) var(--secondary-color); + scrollbar-width: thin; + } + + #playlist-songs::-webkit-scrollbar { + width: 5px; + } + + #playlist-songs::-webkit-scrollbar-track { + background: var(--background-color); + } + + #playlist-songs::-webkit-scrollbar-thumb { + background: var(--secondary-color); + } + + h1 { + font-size: 0.813rem; + } + + h2 { + font-size: 0.75rem; + } + + .player-bar, + .playlist-bar, + .player-content, + #playlist-songs { + width: 280px; + } + + .playlist-song { + justify-content: space-between; + } + + .playlist-song-title { + width: 140px; + } + + .playlist-song-artist { + width: 40px; + } + + .playlist-song-duration > button { + padding: 0; + } + + .player-content { + display: inline; + position: relative; + justify-items: center; + height: 100%; + } + + #player-album-art { + z-index: -100; + height: 280px; + box-shadow: none; + background: #000; + } + + #player-album-art img { + width: 100%; + opacity: 0.6; + } + + .player-display-song-artist { + padding: 0 10px; + } + + .player-display-song-artist > p { + white-space: pre-wrap; + } + + .player-display { + position: absolute; + width: 100%; + z-index: 1000; + background-color: transparent; + top: 0; + height: 280px; + justify-content: space-between; + text-align: center; + } +} +``` + +```js +const playlistSongs = document.getElementById("playlist-songs"); +const playButton = document.getElementById("play"); +const pauseButton = document.getElementById("pause"); +const nextButton = document.getElementById("next"); +const previousButton = document.getElementById("previous"); +const shuffleButton = document.getElementById("shuffle"); + +const allSongs = [ + { + id: 0, + title: "Scratching The Surface", + artist: "Quincy Larson", + duration: "4:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3", + }, + { + id: 1, + title: "Can't Stay Down", + artist: "Quincy Larson", + duration: "4:15", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3", + }, + { + id: 2, + title: "Still Learning", + artist: "Quincy Larson", + duration: "3:51", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3", + }, + { + id: 3, + title: "Cruising for a Musing", + artist: "Quincy Larson", + duration: "3:34", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3", + }, + { + id: 4, + title: "Never Not Favored", + artist: "Quincy Larson", + duration: "3:35", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3", + }, + { + id: 5, + title: "From the Ground Up", + artist: "Quincy Larson", + duration: "3:12", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3", + }, + { + id: 6, + title: "Walking on Air", + artist: "Quincy Larson", + duration: "3:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3", + }, + { + id: 7, + title: "Can't Stop Me. Can't Even Slow Me Down.", + artist: "Quincy Larson", + duration: "3:52", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3", + }, + { + id: 8, + title: "The Surest Way Out is Through", + artist: "Quincy Larson", + duration: "3:10", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3", + }, + { + id: 9, + title: "Chasing That Feeling", + artist: "Quincy Larson", + duration: "2:43", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3", + }, +]; + +const audio = new Audio(); +let userData = { + songs: [...allSongs], + currentSong: null, + songCurrentTime: 0, +}; + +const playSong = (id) => { + const song = userData?.songs.find((song) => song.id === id); + audio.src = song.src; + audio.title = song.title; + + if (userData?.currentSong === null || userData?.currentSong.id !== song.id) { + audio.currentTime = 0; + } else { + audio.currentTime = userData.songCurrentTime; + } + userData.currentSong = song; + playButton.classList.add("playing"); + + audio.play(); +}; + +const pauseSong = () => { + userData.songCurrentTime = audio.currentTime; + + playButton.classList.remove("playing"); + audio.pause(); +}; + +const renderSongs = (array) => { + const songsHTML = array + .map((song)=> { + return ` +
                                                          • + + +
                                                            • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +const getCurrentSongIndex = () => { + +} +--fcc-editable-region-- + +playButton.addEventListener("click", () => { + if (userData?.currentSong === null) { + playSong(userData?.songs[0].id); + } else { + playSong(userData?.currentSong.id); + } +}); + +pauseButton.addEventListener("click", pauseSong); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md deleted file mode 100644 index d65212aca6b..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 63ec14d1c216aa063f0be4af -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive. - -To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively. - -Since these will not change, remember to use `const` to declare them. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#products-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#dessert-card-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md deleted file mode 100644 index 98110e0bc8a..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 63ec19978a066607e23439f8 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#clear-cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md deleted file mode 100644 index b3616baccb4..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 63ec1a16f930b108b8a76806 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#total-items` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#subtotal` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#taxes` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#total` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md deleted file mode 100644 index a973654d0d6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 63ec1bbf5584390a7d08d41f -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`. - -Then, use `let` to declare a variable named `isCartShowing` and set it to `false`. - -# --hints-- - -You should use `document.getElementById()` to get the `#show-hide-cart` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should use `let` to declare a variable named `isCartShowing`. - -```js -assert.match(code, /let\s+isCartShowing/); -``` - -You should set the `isCartShowing` variable to `false`. - -```js -assert.match(code, /let\s+isCartShowing\s*=\s*false/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md deleted file mode 100644 index 172acaf6e3f..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 63ec1cb59f2a4c0be5b6dfa0 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products. - -# --hints-- - -You should declare a `products` variable with `const`. - -```js -assert.match(code, /const\s+products/); -``` - -You should set the `products` variable to an empty array. - -```js -assert.match(code, /const\s+products\s*=\s*\[\s*\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md deleted file mode 100644 index 0815e4ecb06..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 63ec20a06fff670d37befbd9 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -You now need to start adding products. Before you do that, you need to consider the structure of your product data. A product will need a unique identifier to distinguish it from other products, a price so people know how much it costs, and a name so people know what they are buying. You should also add a category to each product. - -Add an object to your `products` array. Give this object an `id` property set to the number `1`, a `name` property set to `Vanilla Cupcakes (6 Pack)`, a `price` property set to the number `12.99`, and a `category` property set to `Cupcake`. - -# --hints-- - -Your products array should have one value. - -```js -assert.equal(products.length, 1); -``` - -Your products array should have an object as its first value. - -```js -assert.isObject(products[0]); -``` - -Your products array should have an object with an `id` property set to the number `1`. - -```js -assert.equal(products[0].id, 1); -``` - -Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`. - -```js -assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your products array should have an object with a `price` property set to the number `12.99`. - -```js -assert.equal(products[0].price, 12.99); -``` - -Your products array should have an object with a `category` property set to `Cupcake`. - -```js -assert.equal(products[0].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md deleted file mode 100644 index 30754019c8c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md +++ /dev/null @@ -1,472 +0,0 @@ ---- -id: 63ec3287b182ec0efe8a3135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up. - -| `name` | `price` | `category` | -| ------------------------------ | ------- | ----------- | -| `French Macaroon` | `3.99` | `Macaroon` | -| `Pumpkin Cupcake` | `3.99` | `Cupcake` | -| `Chocolate Cupcake` | `5.99` | `Cupcake` | -| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` | -| `Strawberry Ice Cream` | `2.99` | `Ice Cream` | -| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` | -| `Strawberry Pretzel` | `4.99` | `Pretzel` | -| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` | -| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` | -| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` | -| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` | - -# --hints-- - -Your second object in the `products` array should have an `id` property set to the number `2`. - -```js -assert.equal(products[1].id, 2); -``` - -Your second object in the `products` array should have a `name` property set to `French Macaroon`. - -```js -assert.equal(products[1].name, 'French Macaroon'); -``` - -Your second object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[1].price, 3.99); -``` - -Your second object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[1].category, 'Macaroon'); -``` - -Your third object in the `products` array should have an `id` property set to the number `3`. - -```js -assert.equal(products[2].id, 3); -``` - -Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`. - -```js -assert.equal(products[2].name, 'Pumpkin Cupcake'); -``` - -Your third object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[2].price, 3.99); -``` - -Your third object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[2].category, 'Cupcake'); -``` - -Your fourth object in the `products` array should have an `id` property set to the number `4`. - -```js -assert.equal(products[3].id, 4); -``` - -Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`. - -```js -assert.equal(products[3].name, 'Chocolate Cupcake'); -``` - -Your fourth object in the `products` array should have a `price` property set to the number `5.99`. - -```js -assert.equal(products[3].price, 5.99); -``` - -Your fourth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[3].category, 'Cupcake'); -``` - -Your fifth object in the `products` array should have an `id` property set to the number `5`. - -```js -assert.equal(products[4].id, 5); -``` - -Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`. - -```js -assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)'); -``` - -Your fifth object in the `products` array should have a `price` property set to the number `10.99`. - -```js -assert.equal(products[4].price, 10.99); -``` - -Your fifth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[4].category, 'Pretzel'); -``` - -Your sixth object in the `products` array should have an `id` property set to the number `6`. - -```js -assert.equal(products[5].id, 6); -``` - -Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`. - -```js -assert.equal(products[5].name, 'Strawberry Ice Cream'); -``` - -Your sixth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[5].price, 2.99); -``` - -Your sixth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[5].category, 'Ice Cream'); -``` - -Your seventh object in the `products` array should have an `id` property set to the number `7`. - -```js -assert.equal(products[6].id, 7); -``` - -Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`. - -```js -assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)'); -``` - -Your seventh object in the `products` array should have a `price` property set to the number `9.99`. - -```js -assert.equal(products[6].price, 9.99); -``` - -Your seventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[6].category, 'Macaroon'); -``` - -Your eighth object in the `products` array should have an `id` property set to the number `8`. - -```js -assert.equal(products[7].id, 8); -``` - -Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`. - -```js -assert.equal(products[7].name, 'Strawberry Pretzel'); -``` - -Your eighth object in the `products` array should have a `price` property set to the number `4.99`. - -```js -assert.equal(products[7].price, 4.99); -``` - -Your eighth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[7].category, 'Pretzel'); -``` - -Your ninth object in the `products` array should have an `id` property set to the number `9`. - -```js -assert.equal(products[8].id, 9); -``` - -Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`. - -```js -assert.equal(products[8].name, 'Butter Pecan Ice Cream'); -``` - -Your ninth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[8].price, 2.99); -``` - -Your ninth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[8].category, 'Ice Cream'); -``` - -Your tenth object in the `products` array should have an `id` property set to the number `10`. - -```js -assert.equal(products[9].id, 10); -``` - -Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`. - -```js -assert.equal(products[9].name, 'Rocky Road Ice Cream'); -``` - -Your tenth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[9].price, 2.99); -``` - -Your tenth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[9].category, 'Ice Cream'); -``` - -Your eleventh object in the `products` array should have an `id` property set to the number `11`. - -```js -assert.equal(products[10].id, 11); -``` - -Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`. - -```js -assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)'); -``` - -Your eleventh object in the `products` array should have a `price` property set to the number `11.99`. - -```js -assert.equal(products[10].price, 11.99); -``` - -Your eleventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[10].category, 'Macaroon'); -``` - -Your twelfth object in the `products` array should have an `id` property set to the number `12`. - -```js -assert.equal(products[11].id, 12); -``` - -Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`. - -```js -assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)'); -``` - -Your twelfth object in the `products` array should have a `price` property set to the number `12.99`. - -```js -assert.equal(products[11].price, 12.99); -``` - -Your twelfth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[11].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md deleted file mode 100644 index 2a000e8614e..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 63ec3427fc3e9214c9ed2a14 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that. - -Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function. - -# --hints-- - -You should call the `.forEach` method of your `products` array. - -```js -assert.match(code, /products\.forEach\(/); -``` - -You should use arrow syntax to create an empty callback function. - -```js -assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/) -``` - -You should pass your empty callback function to the `.forEach` method. - -```js -assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md deleted file mode 100644 index e9a2c069456..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 63ec36f6133df7160be3ec66 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Remember that you can use destructuring to extract multiple values from an array or object in a single statement. - -For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in. - -# --hints-- - -You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters. - -```js -assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/); -``` - -Your destructuring should be the first parameter of the callback function. - -```js -assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - () => {} -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md deleted file mode 100644 index 4add604d105..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 63ec47b454495519739486a7 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable. - -# --hints-- - -You should use access the `innerHTML` property of the `dessertCards` variable. - -```js -assert.match(code, /dessertCards\.innerHTML/); -``` - -You should use the addition assignment operator on the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/); -``` - -You should add an empty template literal string to the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md deleted file mode 100644 index 02a59b523b4..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 63ee5d38a5d29d0696f8d820 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable. - -# --hints-- - -You should create a `div` element. - -```js -assert.isAtLeast(document.querySelectorAll('div')?.length, 12); -``` - -Your `div` element should have a class of `dessert-card`. - -```js -assert.equal(document.querySelectorAll('.dessert-card')?.length, 12); -``` - -You should create an `h2` element. - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.length, 12); -``` - -Your `h2` element should have the text of the `name` variable. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your `h2` element should be inside the `div` element. - -```js -assert.equal(document.querySelectorAll('div h2')?.length, 12); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` - - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md deleted file mode 100644 index 96485328760..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63ee5d8f9e7168076e932fe2 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -After your `h2` element, create two `p` elements. Give the first a `class` of `dessert-price`, and the text of the `price` variable with a dollar sign in front of it. Give the second a `class` of `product-category`, and the text `Category:` followed by the value of the `category` variable. - -# --hints-- - -You should create two `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card')?.children.length, 3); -assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2) -``` - -Your `p` elements should come after your `h2` element. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2'); -assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P'); -assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P'); -``` - -Your first `p` element should have a `class` of `dessert-price`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price'); -``` - -Your first `p` element should have the text of the `price` variable with a dollar sign in front of it. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99'); -``` - -Your second `p` element should have a `class` of `product-category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category'); -``` - -Your second `p` element should have the text `Category:` followed by the value of the `category` variable. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            - -
                                                            - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md deleted file mode 100644 index 6092f597046..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 63ee5e0f08e82208364c4128 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Finally, after your `p` elements, create a `button` element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `Add to cart` for the text. - -# --hints-- - -You should create a `button` element. - -```js -assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12); -``` - -Your `button` element should come after your `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P'); -assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling); -``` - -Your `button` element should have an `id` set to the value of the `id` variable. - -```js -assert.equal(document.querySelector('.dessert-card button')?.id, '1'); -``` - -Your `button` element should have a `class` of `btn add-to-cart-btn`. - -```js -assert.include(document.querySelector('.dessert-card button')?.className, 'btn'); -assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn'); -``` - -Your `button` element should have the text `Add to cart`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md deleted file mode 100644 index 44ba9af32dc..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 63ee5ea8be892e0955ab346c -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -You are already familiar with an HTML `class`, but JavaScript also has a class. In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods. - -The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class: - -```js -class Computer {}; -``` - -Declare a `ShoppingCart` class. - -# --hints-- - -You should declare a `ShoppingCart` variable. - -```js -assert.match(code, /ShoppingCart/); -``` - -You should use the `class` keyword to declare a `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*/); -``` - -Your `ShoppingCart` class should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md deleted file mode 100644 index 87839e53275..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 63ee5fc113bcb20a5db9214b -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Classes have a special `constructor` method, which is called when a new instance of the class is created. The `constructor` method is a great place to initialize properties of the class. Here is an example of a class with a `constructor` method: - -```js -class Computer { - constructor() { - } -} -``` - -Add an empty `constructor` method to the `ShoppingCart` class. - -# --hints-- - -You should add a `constructor` method to the `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/) -``` - -Your `constructor` method should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md deleted file mode 100644 index 4f7a2390687..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 63ee611d478dca0b77f6a393 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -The `this` keyword in JavaScript is used to refer to the current object. Depending on where `this` is used, what it references changes. In the case of a class, it refers to the instance of the object being constructed. You can use the `this` keyword to set the properties of the object being instantiated. Here is an example: - -```js -class Computer { - constructor() { - this.ram = 16; - } -} -``` - -In your constructor, use the `this` keyword to set the `items` property to an empty array. Also, set the `total` property to `0`, and the `taxRate` property to `8.25`. - -# --hints-- - -You should use the `this` keyword to set the `items` property of your class to an empty array. - -```js -assert.match(code, /this\.items/); -const cart = new ShoppingCart(); -assert.isArray(cart.items); -assert.isEmpty(cart.items); -``` - -You should use the `this` keyword to set the `total` property of your class to `0`. - -```js -assert.match(code, /this\.total/); -const cart = new ShoppingCart(); -assert.equal(cart.total, 0); -``` - -You should use the `this` keyword to set the `taxRate` property of your class to `8.25`. - -```js -assert.match(code, /this\.taxRate/); -const cart = new ShoppingCart(); -assert.equal(cart.taxRate, 8.25); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - - } -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md deleted file mode 100644 index 86c81b0332a..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 63ee7c664f9b65137d925c8a -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Your `ShoppingCart` class needs the ability to add items. Create an empty `addItem` method, which takes two parameters: `id` and `products`. Creating a method might look like this: - -```js -class Computer { - constructor() { - this.ram = 16; - } - - addRam(amount) { - this.ram += amount; - } -} -``` - -The first parameter, `id`, is the `id` of the product the user has added to their cart. The second parameter, `products`, is an array of product objects. By using a parameter instead of directly referencing your existing `products` array, this method will be more flexible if you wanted to add additional product lists in the future. - -# --hints-- - -Your `ShoppingCart` class should have an `addItem` method. - -```js -const cart = new ShoppingCart(); -assert.isFunction(cart.addItem); -``` - -Your `addItem` method should take two parameters: `id` and `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/); -``` - -Your `addItem` method should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md deleted file mode 100644 index 88900979e4b..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 63eea5cea403a81a68ae493c -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -You need to find the product that the user is adding to the cart. Remember that arrays have a `.find()` method. In your `addItem` function, declare a `product` variable, and assign it the value of calling the `.find()` method on the `products` array. - -For the callback to `.find()`, pass a function that takes a single parameter `item`, and returns whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -# --hints-- - -You should declare a `product` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=/); -``` - -You should call the `.find()` method on your `products` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(/); -``` - -You should pass a callback function to the `.find()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/); -``` - -The callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/); -``` - -The callback function should return whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/); -``` - -You should assign the value of the `.find()` method to the `product` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md deleted file mode 100644 index fa4bbc91e2f..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63eea817673c8e1c22927fa6 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Use `const` and destructuring to extract `name` and `price` variables from `product`. - -# --hints-- - -You should use destructuring to get the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/); -``` - -You should use `const` to declare the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/); -``` - -You should use destructuring to get the `name` and `price` variables from `product`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md deleted file mode 100644 index 21089f88380..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 63eea8e1e143ae1d098c8c9d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Now you need to push the `product` into the cart's `items` array. Remember to use the `this` keyword. - -# --hints-- - -You should call the `push` method on the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.push\(/); -``` - -Remember you need to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.push\(/); -``` - -You should `push` the `product` variable to the `items` array. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.deepEqual(cart.items, [products[0]]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md deleted file mode 100644 index f1583334ed8..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 63eeb8e86becbf1e75c2cb0d -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -You now need a total count of each product that the user has in the cart. Declare a `totalCountPerProduct` variable, and assign it an empty object. - -# --hints-- - -You should declare a `totalCountPerProduct` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/); -``` - -You should use `const` to declare `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/); -``` - -You should assign an empty object to `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md deleted file mode 100644 index af217952d82..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63eedebb0ec0231ff1cede1a -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Use the `.forEach()` method to loop through the `items` array. Pass an empty callback function that takes a single parameter `dessert`. - -# --hints-- - -You should use the `.forEach()` method on your `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.forEach\(/); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(/); -``` - -You should pass a callback function to the `.forEach()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/); -``` - -Your callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/); -``` - -Your callback function should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md deleted file mode 100644 index 24c1ac26daf..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 63efdbc22a0c56070beabed7 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -In your `forEach` callback, you need to update the `totalCountPerProduct` object. Using the `id` of the current `dessert` as your property, update the value of the property to be the current value plus one. Do not use the addition assignment operator for this. - -# --hints-- - -You should use dot notation to access the `id` property of `dessert`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /dessert\.id/); -``` - -You should use bracket notation to access the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the assignment operator to update the value of the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/); -``` - -You should update the value of `totalCountPerProduct` to be the current value plus one. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md deleted file mode 100644 index cba3963dbee..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 63efe370bbfc4a08d500118e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -You now have a small bug. When you try to access a property of an object and the property doesn't exist, you get `undefined`. This means if the dessert isn't already present in the `totalCountPerProduct` object, you end up trying to add `1` to `undefined`, which results in `NaN`. - -To fix this, you can use the `||` operator to set the value to `0` if it doesn't exist. Wrap your right-hand `totalCountPerProduct[data.id]` in parentheses, and add `|| 0` to the end of the expression. - -# --hints-- - -You should wrap your right-hand `totalCountPerProduct[data.id]` in parentheses. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the `||` operator. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/); -``` - -You should use `0` as your fallback value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/); -``` - -You should still add `1` to the value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1; - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md deleted file mode 100644 index 5e3da866f36..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 63eff02f00e69a0b2ac10b43 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Now you need to get prepared to update the display with the new product the user added. Declare a `currentProductCount` variable, and assign it the value of the `totalCountPerProduct` object's property matching the `id` of `product`. - -# --hints-- - -You should declare a `currentProductCount` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=/); -``` - -You should use `const` to declare `currentProductCount`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCount\s*=/); -``` - -You should assign the value of `totalCountPerProduct[product.id]` to `currentProductCount`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md deleted file mode 100644 index a1b63e599ad..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 63eff98ffb1d5a0d24ec79cb -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -You haven't written the code to generate the HTML yet, but if a product has already been added to the user's cart then there will be a matching element which you'll need. - -Use `.getElementById()` to get the matching element - you'll be setting the `id` value to `product-count-for-id${product.id}`, so use a template literal to query that value. - -Assign your query to a `currentProductCountSpan` variable. - -# --hints-- - -You should declare a `currentProductCountSpan` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/); -``` - -You should use `const` to declare `currentProductCountSpan`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/); -``` - -You should use `document.getElementById()` to get the matching element. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /document\.getElementById\(/); -``` - -You should use a template literal to query the `id` value. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/); -``` - -You should assign the value of `document.getElementById()` to `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md deleted file mode 100644 index 4573e021ac0..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63effe558c87a70e7072e447 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. - -# --hints-- - -You should check if `currentProductCount` is greater than `1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/); -``` - -You should use a ternary operator with your `currentProductCount > 1` condition. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/); -``` - -You should use `undefined` as the truthy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should use `undefined` as the falsy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md deleted file mode 100644 index aebdaf9a24f..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 63f0165121a9181342d5bc66 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -For your truthy expression, removing the `undefined`, you need to update the `textContent` of the `currentProductCountSpan` to be the `currentProductCount` followed by an `x`. Use a template literal to do so. - -# --hints-- - -You should remove the `undefined` from your truthy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should access the `textContent` property of `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/); -``` - -You should use template literal syntax to update the `textContent` to be `${currentProductCount}x`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 ? undefined : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md deleted file mode 100644 index b6f14c6ae69..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 63f017b4ad028a148eb713c0 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -For your falsy expression, you'll need to add new HTML to your `productsContainer`. Start by removing the `undefined`, then use the addition assignment operator and template literal syntax to add a `div` with the `class` set to `product` and the `id` set to `dessert${id}` to the `innerHTML` property of the `productsContainer`. - -# --hints-- - -You should remove the `undefined` from your falsy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /undefined/); -``` - -You should use the addition assignment operator to add HTML to the `productsContainer`. Remember that HTML goes in the `innerHTML` property. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/); -``` - -You should use template literal syntax to add HTML to the `productsContainer`. - -```js -assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/); -``` - -You should add a `div` to the `productsContainer`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.tagName, "DIV"); -``` - -Your `div` should have the `class` set to `product`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.className, "product"); -``` - -Your `div` should have the `id` set to `dessert${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.id, "dessert1"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md deleted file mode 100644 index dd3815162fa..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 63f01861f813e01564c95315 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Inside your `div`, add two `p` elements. Set the text of the second `p` element to be the value of the `price` variable. - -# --hints-- - -You should add two `p` elements inside your `div` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children.length, 2); -assert.equal(div?.children[0].tagName, 'P'); -assert.equal(div?.children[1].tagName, 'P'); -``` - -Your second `p` element should have the text of the `price` variable. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children[1].textContent, '12.99'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            - -
                                                            - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md deleted file mode 100644 index da747a73c32..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 63f018f04e487e164dc27bd9 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable. - -# --hints-- - -Your first `p` element should have a `span` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children.length, 1); -assert.equal(p.children[0].tagName, 'SPAN'); -``` - -Your `span` element should have a `class` of `product-count`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].className, 'product-count'); -``` - -Your `span` element should have an `id` of `product-count-for-id${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].id, 'product-count-for-id1'); -``` - -Your first `p` element should have the text of the `name` variable. This should be outside the span. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md deleted file mode 100644 index 852ac25d2b7..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 63f01c9791a0aa1751c73760 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -There is still more functionality that your `ShoppingCart` class needs, but first you need to be able to test the code you have currently written. You'll need to instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples: - -```js -const myComputer = new Computer(); -``` - -Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object. - -# --hints-- - -You should use `const` to declare a `cart` variable. - -```js -assert.match(code, /const\s+cart\s*=/); -``` - -You should use the `new` keyword to instantiate a new `ShoppingCart` object. - -```js -assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/); -``` - -You should assign your new `ShoppingCart` object to the `cart` variable. - -```js -assert.isTrue(cart instanceof ShoppingCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } -}; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md deleted file mode 100644 index c2590b8a8ea..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f0224ceb16dc196d2c860a -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -You need to get all of the `Add to cart` buttons that you added to the DOM earlier. Declare an `addToCartBtns` variable, and assign it the value of calling the `getElementsByClassName()` method on the `document` object, passing in the string `add-to-cart-btn`. - -# --hints-- - -You should use `const` to declare your `addToCartBtns` variable. - -```js -assert.match(code, /const\s+addToCartBtns\s*=/); -``` - -You should call the `getElementsByClassName()` method on the `document` object. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/); -``` - -You should pass the string `add-to-cart-btn` to the `getElementsByClassName()` method. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/); -``` - -You should assign the value returned by the `getElementsByClassName()` method to the `addToCartBtns` variable. - -```js -assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } -}; - -const cart = new ShoppingCart(); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md deleted file mode 100644 index fd0129e37ca..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f026d041bc6c1a3d5cba0f -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -You need to iterate through the buttons in your `addToCartBtns` variable. However, `.getElementsByClassName()` returns a Collection, which does not have a `forEach` method. - -Use the spread operator on the `addToCartBtns` variable to convert it into an array. Then, use the `forEach` method to iterate through the array. Do not pass a callback function yet. - -# --hints-- - -You should use the spread operator on the `addToCartBtns` variable. - -```js -assert.match(code, /\.\.\.addToCartBtns/); -``` - -You should spread the `addToCartBtns` variable into an array. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/); -``` - -You should use the `forEach` method on the array you created. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/); -``` - -You should not pass a callback function to the `forEach` method. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md deleted file mode 100644 index cae3ba72dbe..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0284532742c1b26c7a052 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Add your callback function to the `forEach` method. It should take a `btn` parameter. Then, in the callback, add an event listener to the `btn`. The event listener should listen for a `click` event, and should take another callback with an `event` parameter. The second callback should be empty. - -# --hints-- - -You should use arrow syntax to add a callback function to the `forEach` method which takes a `btn` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/); -``` - -You should add an event listener to the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/); -``` - -You should add an empty callback function to the event listener. Remember to give it an `event` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md deleted file mode 100644 index c27e13717f0..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0289df84a581bbdbd29b7 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -In your event listener callback, call the `.addItem()` method of your `cart` object, and pass in the `event.target.id`. Remember that the `id` here will be a string, so you need to convert it to a number. - -Pass your `products` array as the second argument. - -# --hints-- - -Your event listener callback should call the `.addItem()` method of your `cart` object. - -```js -assert.match(code, /cart\.addItem\(/); -``` - -Your `.addItem()` method should be called with the `event.target.id` as the first argument. Remember to convert the `id` to a number using `Number()`. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/); -``` - -Your `.addItem()` method should be called with the `products` array as the second argument. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - - }) - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md deleted file mode 100644 index 4b53ebc3ff1..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 63f0295e673b661ccb299e8a -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -You need a way to access the total number of items in the cart. The best way to do this is to add another method to your `ShoppingCart` class, rather than accessing the `items` array directly. - -Add a `getCounts` method to the `ShoppingCart` class. It should return the number of items in the `items` array. - -# --hints-- - -Your `ShoppingCart` class should have a `getCounts` method. - -```js -assert.isFunction(cart.getCounts); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const afterCounts = code.split('getCounts')[1]; -assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/); -``` - -Your `getCounts` method should return the number of items in the `items` array. - -```js -assert.equal(cart.getCounts(), 0); -cart.addItem(1, products); -assert.equal(cart.getCounts(), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md deleted file mode 100644 index b75a16738ae..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 63f029b96b9e9e1df93be951 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Now you can update the total number of items on the webpage. Assign the value of your `cart` object's `.getCounts()` method to the `textContent` of the `totalNumberOfItems` variable. - -# --hints-- - -You should access the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent/) -``` - -You should assign the value of your `cart` object's `.getCounts()` method to the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md deleted file mode 100644 index ff8d5d86a2e..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 63f02a4ef92d711ec1ff618c -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -You also need to update the total price of the cart when the user adds an item. Create a `calculateTotal` method in the `ShoppingCart` class. - -In that method, declare a `subTotal` variable and use the `reduce` method on the `items` array to calculate the sum of the `price` property of each item in the array. Use `total` and `item` as the parameters for your callback. - -Remember to set your initial value in the `reduce` method. - -# --hints-- - -You should create a `calculateTotal` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTotal); -``` - -Your `calculateTotal` method should have a `subTotal` variable declared with `const`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+subTotal\s*=/); -``` - -Your `calculateTotal` method should use the `reduce` method on the `items` array. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/); -``` - -Your `reduce` callback should use `total` and `item` as the first and second parameter. Remember to use arrow function syntax. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/); -``` - -Your `reduce` callback should return the sum of `total` and `item.price`. Use an implicit return. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/); -``` - -Your `reduce` call should have an initial value of `0`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md deleted file mode 100644 index 8d4036f7ea6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f02b22cce1c11fe9604381 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Part of the total cost will include the tax, so you need to calculate that as well. Create a `calculateTaxes` method in the `ShoppingCart` class. This method should take an `amount` parameter. - -# --hints-- - -You should create a `calculateTaxes` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTaxes); -``` - -Your `calculateTaxes` method should take an `amount` parameter. - -```js -assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md deleted file mode 100644 index 82d277b0ab0..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f02bdeb9b428208b97eb6b -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -For clarity, wrap the `taxRate / 100` calculation in parentheses. - -# --hints-- - -You should divide the `taxRate` by 100 in your `calculateTaxes` method. Remember to use the `this` keyword. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/); -``` - -You should wrap the `this.taxRate / 100` calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/); -``` - -You should multiply the `amount` parameter by the `taxRate` divided by 100 in your `calculateTaxes` method. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/); -``` - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -```js -console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md deleted file mode 100644 index 0954c9b4ac6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 63f02c6e18773921ba50aa53 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Because of the way computers store and work with numbers, calculations involving decimal numbers can result in some strange behavior. For example, `0.1 + 0.2` is not equal to `0.3`. This is because computers store decimal numbers as binary fractions, and some binary fractions cannot be represented exactly as decimal fractions. - -We want to clean up the number result from your calculation. Wrap your calculation in parentheses (don't include the `return` statement!) and call the `.toFixed()` method on it. Pass the `.toFixed()` method the number `2` as an argument. This will round the number to two decimal places and return a string. - -# --hints-- - -You should wrap your calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/) -``` - -You should call the `.toFixed()` method on your calculation. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/) -``` - -You should pass the `.toFixed()` method the number `2` as an argument. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return (this.taxRate / 100) * amount; - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md deleted file mode 100644 index d925dca7812..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 63f0311f5ea9382388d6124f -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -The issue with `.toFixed()` returning a string is that you want to be able to perform calculations with the tax rate. To fix this, you can pass the `.toFixed()` call (including the calculation) to the `parseFloat()` function. This will convert the fixed string back into a number, preserving the existing decimal places. - -Pass your `.toFixed()` call to `parseFloat()`. - -# --hints-- - -You should pass your entire calculation (excluding the `return` statement) to `parseFloat()`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return ((this.taxRate / 100) * amount).toFixed(2); - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md deleted file mode 100644 index b0527ca7c31..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f033fdb1fbcc254999fcc3 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Your cart currently isn't visible on the webpage. To make it visible, start by adding an event listener to the `cartBtn` variable, listening for the click event. The callback does not need any parameters. - -# --hints-- - -You should add an event listener to the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/); -``` - -You should add an empty callback function (using arrow syntax) to the event listener. Remember that it does not need any parameters. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md deleted file mode 100644 index 48e1daa6e0e..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f03446c2ed3e264be6c7fc -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Start by inverting the value of `isCartShowing`. Remember that you can use the logical not operator `!` to invert the value of a boolean. Assign the inverted value to `isCartShowing`. - -# --hints-- - -You should invert the value of `isCartShowing`. - -```js -assert.match(code, /!isCartShowing/); -``` - -You should assign the inverted value of `isCartShowing` to `isCartShowing`. - -```js -assert.match(code, /isCartShowing\s*=\s*!isCartShowing/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md deleted file mode 100644 index 1e9f9959098..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f0348a54a177272071a595 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `Hide`, otherwise set it to `Show`. - -# --hints-- - -You should use the assignment operator on the `textContent` property of the `showHideCartSpan` variable. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Hide` if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Show` if `isCartShowing` is false. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md deleted file mode 100644 index 3fcf304cca6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 63f034d012f74627ce538d3a -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `block`, otherwise set it to `none`. - -Now you should be able to see your cart and add items to it. - -# --hints-- - -You should access the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/) -``` - -You should use the assignment operator on the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `block` if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `none` if `isCartShowing` is false. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md deleted file mode 100644 index a4c481b5796..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f03686c5ea863533ec71f4 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Declare a variable `tax` and assign it the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument. - -# --hints-- - -Use `const` to declare a variable named `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+tax\s*=/); -``` - -Assign the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument, to the `tax` variable. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md deleted file mode 100644 index 936b8a7add9..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f036ec91fdf238c90665f5 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Update the `total` value to be the sum of the `subTotal` and `tax` values. - -# --hints-- - -You should update the `total` value. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total/); -``` - -You should set the `total` value to be the sum of the `subTotal` and `tax` values. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md deleted file mode 100644 index cba09f5a3e6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 63f0370b340915399d31e5eb -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -You're going to update the HTML in this method as well. Set the `textContent` of the `cartSubTotal` to be the value of `subTotal` to a fixed 2 decimal places. Use template literal syntax to add the dollar sign to the beginning of the value. - -# --hints-- - -You should access the `textContent` property of the `cartSubTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `subTotal` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartSubTotal` element to your template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md deleted file mode 100644 index 37c08222320..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 63f0374d5351223a747c301d -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Following the same pattern as your `cartSubTotal`, update the `cartTaxes` to display the `tax` value, and your `cartTotal` to display the `total` property. - -# --hints-- - -You should access the `textContent` property of the `cartTaxes` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/); -``` - -You should call the `.toFixed()` method on the `tax` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTaxes` element to `tax.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should access the `textContent` property of the `cartTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `total` variable, passing `2` as the argument. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTotal` element to your `total.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md deleted file mode 100644 index 56336e0263e..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f0378e173e3c3b7638b528 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Finally, return the value of the `total` property. Remember your `this` keyword. - -# --hints-- - -Your `calculateTotal` method should return the value of the `total` property. - -```js -assert.equal(cart.calculateTotal(), 0); -cart.addItem(1, products); -assert.approximately(cart.calculateTotal(), 14.06, 0.1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md deleted file mode 100644 index db0f9862452..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f038a0ae041d3c5b0cdf23 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Your last feature is to allow users to clear their cart. Add a `clearCart()` method to your `ShoppingCart` class. - -# --hints-- - -Your `ShoppingCart` class should have a `clearCart` method. - -```js -assert.isFunction(cart.clearCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md deleted file mode 100644 index 50339959f43..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -id: 63f038e671d3f73d5a041973 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -The first thing you should do is check if the `items` array is empty. If it is, display an `alert` to the user with the text `Your shopping cart is already empty`, then return from the function. - -Remember that `0` is a falsy value, so you can use the `!` operator to check if the array is empty. - -After displaying the alert, return from the function to stop execution. - -# --hints-- - -You should create an `if` statement that checks if the `items` array is empty, using the negation operator. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/); -``` - -Your `if` statement should display an `alert` to the user with the text `Your shopping cart is already empty`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/); -``` - -Your `if` statement should return from the function. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md deleted file mode 100644 index 23f034e9067..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 63f039dbcef7673e4e758fa3 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Browsers have a built-in `confirm()` function which displays a confirmation prompt to the user. `confirm()` accepts a string, which is the message displayed to the user. It returns `true` if the user confirms, and `false` if the user cancels. - -Declare a variable `isCartCleared` and assign it the value of calling `confirm()` with the string `"Are you sure you want to clear all items from your shopping cart?"`. - -# --hints-- - -You should use `const` to declare the `isCartCleared` variable. - -```js -const afterClearCart = code.split('clearCart()')[1]; -assert.match(afterClearCart, /const\s+isCartCleared\s*=/); -``` - -You should call the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(/); -``` - -You should pass the string `Are you sure you want to clear all items from your shopping cart?` to the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -You should assign the value of the `confirm()` function to the `isCartCleared` variable. - -```js -assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md deleted file mode 100644 index be4fde050a5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -id: 63f03a7143a6ef3f7f3344f0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -You only want to clear the cart if the user confirms the prompt. Create an `if` statement that checks if the user confirmed the prompt. - -In the `if` statement, set the `items` property back to an empty array, then set the `total` property to `0`. - -# --hints-- - -You should create an `if` statement that checks if the user confirmed the prompt. Remember that you can check the truthiness of `isCartCleared` directly. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/); -``` - -Your `if` statement should set the `items` property back to an empty array. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/); -``` - -Your `if` statement should set the `total` property to `0`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md deleted file mode 100644 index 3b6705168d8..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f03ac2b428b2404a5a7518 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -You also need to start clearing the HTML. Set the `innerHTML` property of the `productsContainer` back to an empty string. - -# --hints-- - -In your `if` statement, you should set the `innerHTML` property of the `productsContainer` back to an empty string. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md deleted file mode 100644 index 5a1e7f099f3..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 63f03af535682e4138fdb915 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Set the `textContent` of the `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal` elements all to the number `0`. - -# --hints-- - -You should set the `textContent` of the `totalNumberOfItems` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartSubTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTaxes` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTotal\.textContent\s*=\s*0/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md deleted file mode 100644 index 913c5c53bdb..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md +++ /dev/null @@ -1,744 +0,0 @@ ---- -id: 63f03b1ed5ab15420c057463 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Your final step is to make your clear button functional. Add a `click` event listener to the `clearCartBtn`. For the callback, you can pass in `cart.clearCart` directly. - -However, doing so will not work, because the context of `this` will be the `clearCartBtn` element. You need to bind the `clearCart` method to the `cart` object. - -You can do this by passing `cart.clearCart.bind(cart)` as the callback. - -And with that, your shopping cart project is complete! - -# --hints-- - -You should add an event listener to your `clearCartBtn` element. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(/); -``` - -Your event listener should listen for the `click` event. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/); -``` - -Your event listener should take `cart.clearCart.bind(cart)` as the callback. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - -clearCartBtn.addEventListener("click", cart.clearCart.bind(cart)); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md deleted file mode 100644 index c33ce088a1c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f6721d5110af243ef8f3d9 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now call your `.calculateTotal()` method inside your `forEach` loop. - -# --hints-- - -You should call `cart.calculateTotal()` inside your `forEach` loop. - -```js -const afterForEach = code.split('[...addToCartBtns].forEach(')[1]; -assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                            -

                                                            Desserts Page

                                                            -
                                                            -
                                                            - -
                                                            - -
                                                            -

                                                            Total number of items: 0

                                                            -

                                                            Subtotal: $0

                                                            -

                                                            Taxes: $0

                                                            -

                                                            Total: $0

                                                            -
                                                            -
                                                            -
                                                            - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                            -

                                                            ${name}

                                                            -

                                                            $${price}

                                                            -

                                                            Category: ${category}

                                                            - -
                                                            - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                            -

                                                            - ${name} -

                                                            -

                                                            ${price}

                                                            -
                                                            - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md deleted file mode 100644 index a2ce162457c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9a -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. - -In JavaScript, you can access the DOM by referencing the global `document` object. - -To view the DOM, log it to the console with `console.log(document)`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast
                                                            - Lunch
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md deleted file mode 100644 index aab244748d6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9b -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -In our HTML document, we have a form element with an `id` attribute: `
                                                            ` - -To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. - -The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            - -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - - -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md deleted file mode 100644 index 31afd7303fc..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9c -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. - -Forms have an `onsubmit` event that can execute a function when the form is submitted. - -For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. - -Assign a function named `calculate` to the `onsubmit` event of your form. - -You will create the `calculate` function later. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md deleted file mode 100644 index bcd3b1bc287..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9d -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. Here is an example of an empty function called `square`: - -```js -function square() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(typeof calculate === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md deleted file mode 100644 index 8a02a67b570..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9e -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -By default, `onsubmit` will pass the event object as a parameter to the function it calls. People usually call it `e`, short for event. Update the `calculate()` function to accept `e` as parameter. - -Here is an example of an empty function called `square` that takes a `number` as a parameter: - -```js -function square(number) {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md deleted file mode 100644 index 0cd5d1525fd..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9f -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. - -Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md deleted file mode 100644 index ee8e8356f0d..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da0 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. - -To access elements with a certain class name, we use the `getElementsByClassName()` method. - -Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md deleted file mode 100644 index 9b80e0f827c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da1 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md deleted file mode 100644 index c5a2856f2c3..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da2 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -To make the document objects easier to handle, let's turn them into an array. Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md deleted file mode 100644 index 40f6a846fd5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da3 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md deleted file mode 100644 index 725bff25987..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da4 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md deleted file mode 100644 index fead88a0598..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da5 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. - -The `map()` method allows us to do exactly that. - -Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .toString() - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md deleted file mode 100644 index 714497fddbb..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da6 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Now we need to provide a function to `map()` that will be performed on each item of the array. - -This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: - -```js -function(meal){} -``` - -Enter in the above function as an argument in between the parentheses of the `.map()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md deleted file mode 100644 index 7d58167b80c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da7 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. - -If you want, console log `total` to see what results you are getting. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md deleted file mode 100644 index 4a199951818..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da8 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md deleted file mode 100644 index 6058cea614a..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da9 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md deleted file mode 100644 index 46dfade8b55..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daa -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. - -Chain the `reduce()` method to the `Array.from()` expression. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md deleted file mode 100644 index 065b5dce513..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dab -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: - -```js -function(accumulator, currentValue) { /* code to run */ } -``` - -or using arrow functions: - -```js -(accumulator, currentValue) => { /* code to run */ } -``` - -Insert the above callback function as an argument in the `.reduce()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md deleted file mode 100644 index 448c7702610..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dac -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. - -Here is an example of a `reduce()` method with an empty object as its initial value: - -```js -arr.reduce((accumulator, currentValue) => { - /* code to run */ -}, {}); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md deleted file mode 100644 index 4134f0401a2..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dad -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. - -We can use the reduce function as follows: - -```js -arr.reduce((accumulator, currentValue) => { - return accumulator + currentValue; -}, 0); -``` - -At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, since `arr[0] = 1 = currentValue`. - -At `arr[1]`, the function is `(1, 3) => 1 + 3`, - -Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. - -In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md deleted file mode 100644 index c9d4f5bd8ad..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 5e302e80e003129199103c78 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` - -You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. - -When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md deleted file mode 100644 index b36ed2d97b6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5e302e8ce003129199103c79 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Now let's simplify the `reduce()` callback function by refactoring it. - -Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. - -So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. - -Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md deleted file mode 100644 index 8825fbe6dd0..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dae -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. - -Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. - -If you inspect the Female radio button you will notice its id: `` - -Create a variable named `maxCalories` and set it equal to the document element with the id of `female`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md deleted file mode 100644 index 1e19c715fcf..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daf -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` - -Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md deleted file mode 100644 index 21d83417535..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db0 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. - -For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: - -```js -if (5 - 3 === 4) { - return 'Yes'; -} else { - return 'No'; -} -``` - -`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md deleted file mode 100644 index abe960e3120..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db1 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Now that we have `total` and `maxCalories`, we need to find out the difference between them. - -Create a variable named `difference` and set it equal to `total - maxCalories` - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md deleted file mode 100644 index ad3abc0bfe5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db2 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. - -To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). - -If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. - -Use the same ternary syntax that you used to determine `maxCalories`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md deleted file mode 100644 index 2dbdd8b547b..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db3 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
                                                            `. - -We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. - -Create a variable named `output` and set it equal to this division element with the `id` of `output`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md deleted file mode 100644 index 87062f28e7f..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db4 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Now it's time to create the HTML elements that we will add inside of `output`. - -To create an element, use `createElement()`. For example: - -```js -const myHeading1 = document.createElement('h1') -``` - -Create an `h3` element and assign it to a variable named `result`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md deleted file mode 100644 index 90ad3c91cb4..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db5 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Next, we will create a text node that we will later append to the `result` element. - -JavaScript has a function called `createTextNode()` to accomplish this. For example: - -```js -const myText = document.createTextNode("Hello world!") -``` - -Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md deleted file mode 100644 index b93248efe69..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db6 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -We can now use the `difference` variable that we created above. - -Insert the `difference` variable inside the parentheses of `.createTextNode()` - -If you want to see what the text currently looks like, try `console.log(resultText)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md deleted file mode 100644 index fd08248b5f0..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db7 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Notice how if `total` is less than `maxCalories`, `difference` is a negative number. - -We want to show the absolute value of the difference so it displays "300" rather than "-300". - -Wrap the `difference` in a `Math.abs()` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md deleted file mode 100644 index f066a2b3607..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db8 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md deleted file mode 100644 index d2e8c9a31c3..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db9 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Next we want to add the text from the `surplusOrDeficit` variable that we previously created. - -Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md deleted file mode 100644 index 1311c2ac849..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dba -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. - -Some people consider this a little cumbersome and prefer to use template literals instead. - -Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. - -For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. - -Convert the data inside of `createTextNode()` to be a template literal. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md deleted file mode 100644 index 923d7d02e23..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbb -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: - -```js -result.appendChild(resultText); -``` - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md deleted file mode 100644 index 09da32b6cb5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbc -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Similarly, append the `result` to the `output` element with the `appendChild()` method. - -Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md deleted file mode 100644 index ccb8660bf13..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbd -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Next, let's create and add a horizontal rule (`hr`) element to the output. - -Create an `hr` element and assign it to a variable named `line`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md deleted file mode 100644 index e0f9bd9c47c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbe -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Add the `line` to the `output` element using the `appendChild()` method. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md deleted file mode 100644 index 4c4b069fb43..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbf -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Let's create a few more HTML elements to add to the `output`. - -Create an `h4` element and assign it to a variable named `recommended`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md deleted file mode 100644 index 0becd375fa5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc0 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Create a text node and assign it to a variable named `recommendedText`. - -This is similar to how your created the `resultText` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md deleted file mode 100644 index fd2d846ab52..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc1 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. - -Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". - -This is similar to template literal syntax previously used to create `resultText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md deleted file mode 100644 index 9e9d9c9c3f2..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc2 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Append the `recommendedText` node to the `recommended` element. - -This is similar to how the `resultText` is appended to `result` previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md deleted file mode 100644 index 9264e8ac9cf..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc3 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Append the `recommended` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md deleted file mode 100644 index 0fd8978f093..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc4 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. - -Create an `h4` element and assign it to a variable named `consumed`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md deleted file mode 100644 index 6bb2536f422..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc5 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. - -For example: - -```js -consumed.innerHTML = `Hello world`; -``` - -Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md deleted file mode 100644 index 29d043f4c6e..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc6 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Append the `consumed` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md deleted file mode 100644 index c34dcad8f68..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc7 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Now it's time to add some styling which can be added directly as attributes or classes. - -In our CSS file, we have a styling rule for any elements with the class name `green-text`. - -On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. - -Now if you submit the form again and inspect the `result` element, you will see it as `

                                                            ` and notice that the text is now green. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md deleted file mode 100644 index 7298971ffec..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc8 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. - -For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. - -Set the `class` attribute of the `output` element equal to a class named `bordered-class`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md deleted file mode 100644 index 1b0bd348910..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc9 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. - -Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. - -The `calculate()` function is now finished! - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                            -
                                                            -

                                                            Calorie Counter

                                                            -
                                                            - Sex -
                                                            - - - -
                                                            - - -
                                                            -
                                                            -
                                                            -
                                                            - Breakfast -
                                                            - Lunch -
                                                            - Dinner -
                                                            - - - -
                                                            -
                                                            -
                                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md deleted file mode 100644 index 56bbb142804..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dca -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. - -In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: - -```html - - - - -
                                                            -

                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md deleted file mode 100644 index db8f9bc95c1..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcb -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -We want a function to run every time the user clicks the "Add Entry" button. - -Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: - -```js -function() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md deleted file mode 100644 index 886f041422c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcc -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Inside the function, create an `input` document element and assign it to a variable named `foodInput`. - -This is similar to how you created the `result` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md deleted file mode 100644 index 6860d68731d..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcd -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Set the `placeholder` property of the `foodInput` equal to `'food name'`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md deleted file mode 100644 index 89e37a9f626..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dce -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. - -In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. - -Add the class name `food-control` to the `foodInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md deleted file mode 100644 index e0ab30e27b5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcf -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Notice that parent container of all of the inputs has an `id` of `entries`: `
                                  `. - -Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. - -This is similar to the other `appendChild()` methods that you have used previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md deleted file mode 100644 index ea1faf6c59c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md deleted file mode 100644 index 594af428356..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd1 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. - -This is similar to how to set the class of the `output` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md deleted file mode 100644 index 962a0309894..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd2 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -The `calorieInput` element should only accept numbers that are 0 or above. - -Set the `min` attribute of `calorieInput` to `0`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md deleted file mode 100644 index eac60b49fce..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd3 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. - -We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md deleted file mode 100644 index 7ffb7021744..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd4 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. - -To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md deleted file mode 100644 index 8e15285d2a9..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd5 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. - -The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md deleted file mode 100644 index df36314c4ae..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd6 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. - -Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md deleted file mode 100644 index 1e5b3e9b048..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd7 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. - -# --hints-- - -See description above for instructions. - -```js -assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md deleted file mode 100644 index 7a941b6559c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd8 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Create a variable named `clearOutput` and set it equal to a blank arrow function: - -```js -const clearOutput = () => {} -``` - -This is similar to `function clearOutput () {}`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearOutput === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md deleted file mode 100644 index e6a2d2c6337..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd9 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -We need to remove the contents inside of element with the `id` of `output`. - -In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md deleted file mode 100644 index f8984120835..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dda -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. - -Remove the `bordered-class` class. For example: - -```js -document.getElementById('my-div').classList.remove('my-class') -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md deleted file mode 100644 index 93a258c395b..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddb -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. - -In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/clearOutput\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md deleted file mode 100644 index 6a07e9aa83b..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddc -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearForm === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md deleted file mode 100644 index 88284a00280..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddd -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. - -Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. - -This is similar to how you declared the `total` variable previously in the `calculate` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md deleted file mode 100644 index 9cc201d5194..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dde -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. - -Add `foodInputs.forEach()`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md deleted file mode 100644 index 8044dac1e60..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddf -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -We need to provide a callback function in the parentheses of `forEach()`. - -This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. - -In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md deleted file mode 100644 index dd34b193b4c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de0 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. - -Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. - -This is similar to how you declared the `foodInputs` variable previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md deleted file mode 100644 index 652c8f99281..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de1 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md deleted file mode 100644 index b3cf00545fa..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de2 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. - -Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md deleted file mode 100644 index ead4dfe0e77..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de3 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Congratulations! Have fun playing with your completed calorie counter. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                  -
                                  -

                                  Calorie Counter

                                  -
                                  - Sex -
                                  - - - -
                                  - - -
                                  -
                                  -
                                  -
                                  - Breakfast -
                                  - Lunch -
                                  - Dinner -
                                  - - - -
                                  -
                                  -
                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md deleted file mode 100644 index 08bc2a4aa43..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 5d79253297c0ebb149ea9fed -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -In functional programming, we prefer immutable values over mutable values. - -Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. - -Start by creating an empty `infixToFunction` object using `const`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md deleted file mode 100644 index 3159f1d2410..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 5d7925323be8848dbc58a07a -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md deleted file mode 100644 index c5dbbab705c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792532f631702ae6d23e11 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now return the sum of `x` and `y` using the `return` keyword. - -# --hints-- - -See description above for instructions. - -```js -assert(add(1, 2) === 3 && add(100, 2000) === 2100); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md deleted file mode 100644 index 0a9d327d798..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5d7925329445167ecc2ac9c9 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. - -Assign `add` to a new variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md deleted file mode 100644 index 4e85d64fbe2..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792532b07918c3a5904913 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: - -```js -function(x) { - return x -} -``` - -First, remove the `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md deleted file mode 100644 index a9aa387addd..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792533cc8b18b6c133edc7 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: - -```js -const fn = function(x) { - return x; -} - -fn(); -``` - -Assign the anonymous function to the variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md deleted file mode 100644 index 68c44b16619..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 5d7925337954ed57a565a135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. - -Rewrite `addVar` using ES6's arrow syntax: - -```js -const fn = (x, y) => x; -``` - -Note that the value is returned implicitly. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md deleted file mode 100644 index 676f6c6f4ff..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d79253352e33dd59ec2f6de -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Add the key `+` to `infixToFunction` and assign it the value `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(infixToFunction['+'].toString() === addVar.toString()); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md deleted file mode 100644 index c44846417a5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792533d31e4f7fad33011d -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md deleted file mode 100644 index 2096072d738..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d792533e7707b9645d7b540 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Remove the now redundant `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof addVar === 'undefined'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md deleted file mode 100644 index 526e706eb08..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 5d79253378595ec568f70ab6 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Add similar definitions for `-`, `*` and `/` in `infixToFunction`. - -# --hints-- - -See description above for instructions. - -```js -assert( - infixToFunction['-'](10, 2) === 8 && - infixToFunction['*'](10, 10) === 100 && - infixToFunction['/'](100, 10) === 10 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md deleted file mode 100644 index 37432637ac6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5d7925330918ae4a2f282e7e -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md deleted file mode 100644 index 3d09b3967f2..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5d792533ed00e75d129e1b18 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). - -Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. - -This is how you would pass the `-` function: - -```js -str.replace(regex, infixToFunction["-"]) -``` - -# --hints-- - -See description above for instructions. - -```js -assert(infixEval('ab', /(a)b/) === 'aba'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md deleted file mode 100644 index 0926459ef14..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5d792533a5c42fb4d1a4b70d -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md deleted file mode 100644 index 23968d2e070..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5d79253358e8f646cbeb2bb0 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Change the `"+"` in the call to `infixToFunction` to `fn`. - -`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md deleted file mode 100644 index f3dd1211e6a..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5d792533bb38fab70b27f527 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". - -Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). - -# --hints-- - -See description above for instructions. - -```js -const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; -assert( - infixEval('23+35', regex) === '58' && - infixEval('100-20', regex) === '80' && - infixEval('10*10', regex) === '100' && - infixEval('120/6', regex) === '20' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md deleted file mode 100644 index e295114e777..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5d79253386060ed9eb04a070 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. - -To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. - -Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md deleted file mode 100644 index 1af15a10b8e..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d792533717672657b81aa69 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -When defining an arrow function with a single argument, the parentheses can be omitted: - -```js -const greeting = name => `Hello !`; -``` - -Define a function `highPrecedence` which takes a single argument `str` and returns it. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('a') === 'a'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md deleted file mode 100644 index 5c2d8560932..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5d7925335ab63018dcec11fe -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Arrow functions can have multiple statements: - -```js -const fn = (x, y) => { - const result = x + y; - return result; // explicit return statement required -}; -``` - -Use this syntax for the `highPrecedence` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md deleted file mode 100644 index 1ddd40ce5d8..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5d7925330f300c342315066d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md deleted file mode 100644 index 3bfba3454a9..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5d792533aa6443215c9b16bf -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md deleted file mode 100644 index 333b8bcb122..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925334c5e22586dd72962 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -The ternary operator has the following syntax: - -```js -const result = condition ? valueIfTrue : valueIfFalse; -const result = 1 === 1 ? 1 : 0; // 1 -const result = 9 > 10 ? "Yes" : "No"; // "No" -``` - -Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2') === '' && - highPrecedence('2+2') === '2+2' && - code.includes('?') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md deleted file mode 100644 index c5f666b8a05..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5d79253307ecd49e030bdcd1 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. - -Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2*2') === '8' && - highPrecedence('2*2') === '4' && - highPrecedence('2+2') === '2+2' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md deleted file mode 100644 index c837d8e94e1..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5d792534257122211d3043af -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. - -# --hints-- - -See description above for instructions. - -```js -assert(spreadsheetFunctions['']('x') === 'x'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md deleted file mode 100644 index 58109dce7a4..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925346f4f2da6df4354a6 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md deleted file mode 100644 index 313db4427d6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5d792534cac2dbe0a719ea7a -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Set `noHigh` to `highPrecedence(str)` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md deleted file mode 100644 index bc94c78c155..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d792534857332d07ccba3ad -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md deleted file mode 100644 index 7972802a8b8..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5d792534d586ef495ea9df90 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Set `str2` to `infixEval(noHigh, infix)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md deleted file mode 100644 index f957c47d628..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5d79253410532e13d13fe574 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - applyFn - .toString() - .replace(/\s/g, '') - .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md deleted file mode 100644 index 42b80301fc6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d7925342415527083bd6667 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: - -```js -"a b c".split(" "); // ["a", "b", "c"]; -``` - -Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md deleted file mode 100644 index 33e85a097cc..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d792534c3d26890ac1484d4 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: - -```js -[1, 2, 3].map(x => x + 1); // [2, 3, 4] -``` - -In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md deleted file mode 100644 index abb91060f5e..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d792534b92f3d1cd4410ce3 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md deleted file mode 100644 index bb2f8da03a5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 5d7925341193948dfe6d76b4 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md deleted file mode 100644 index f32c582d3ef..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d792534cf81365cfca58794 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md deleted file mode 100644 index a460b595da1..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d7925348ee084278ff15556 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. - -Now return `str2.replace(regex, "")` at the end of `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md deleted file mode 100644 index 45e848ecbeb..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d7925348a6a41c32f7a4e3e -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md deleted file mode 100644 index 7394c7c6472..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d792534408c5be896b0a46e -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. - -Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md deleted file mode 100644 index c86fe809104..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 5d792534f0eda837510e9192 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md deleted file mode 100644 index bfa91d4503f..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d7925346b911fce161febaf -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md deleted file mode 100644 index 24d94216931..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d79253483eada4dd69258eb -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -`range` should set `arr` to `[start]` and should then return `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constarr=[start]') && - JSON.stringify(range(1)) === '[1]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md deleted file mode 100644 index 4307ef2889a..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d7925342b2b993ef18cd45f -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md deleted file mode 100644 index 0fa8e6fe0fb..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5d7925341747ad42b12f8e68 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. - -The `concat` method returns a new array instead of modifying an existing one: - -```js -[1,2,3].concat(4); // [1, 2, 3, 4] -[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] -``` - -Use `concat` instead of `push` to return the result of adding `end` to `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(1, 2)) === '[1,2]' && - code.includes('concat') && - !code.includes('push') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md deleted file mode 100644 index 448578598f5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: 5d792535b0b3c198ee3ed6f9 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -The `concat` method can also accept arrays: - -```js -[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] -[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] -``` - -Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md deleted file mode 100644 index 6e89d44a236..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d7925357a0533eb221b005d -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('arr') && - code.replace(/\s/g, '').includes('[start].concat([end])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md deleted file mode 100644 index 0d876da26b6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d792535591db67ee15b4106 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(3, 2)) === '[]' && - JSON.stringify(range(1, 3)) === '[1,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md deleted file mode 100644 index ee94e71d4a4..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d792535f1f7adf77de5831d -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md deleted file mode 100644 index 497b63c634b..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925353d2c505eafd50cd9 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Remove the curly braces and `return` keyword from `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md deleted file mode 100644 index 862a0002f2f..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d79253539b5e944ba3e314c -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md deleted file mode 100644 index 9845839bbeb..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535a4f1cbff7a8b9a0b -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Make `charRange` return `range(start, end)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md deleted file mode 100644 index 43167394a7b..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535e3304f15a8890162 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md deleted file mode 100644 index f5bb024255e..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 5d792535a40ea5ac549d6804 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md deleted file mode 100644 index 8369854b752..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925358c220e5b2998909e -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Now, pass `x` to `String.fromCharCode` in the arrow function. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md deleted file mode 100644 index 6253e20d545..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5d7925357729e183a49498aa -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md deleted file mode 100644 index 03ceaf96068..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253555aa652afbb68086 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md deleted file mode 100644 index 27b4b66f7f2..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253582be306d339564f6 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md deleted file mode 100644 index 72223dddb2c..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d7925352047e5c54882c436 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md deleted file mode 100644 index 1870ab8b951..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 5d79253568e441c0adf9db9f -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md deleted file mode 100644 index b394d603ed4..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925356ab117923b80c9cd -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md deleted file mode 100644 index e79d2b6f857..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d792535e54a8cd729a0d708 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md deleted file mode 100644 index 3d6a5a955b7..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -id: 5d7925353b307724a462b06b -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Finally, return `fn("A")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md deleted file mode 100644 index 994e931f57f..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d792536735f71d746ee5d99 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. - -Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md deleted file mode 100644 index b06f86f5495..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d792536ad340d9dff2e4a96 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Now, remove the curly braces and return statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md deleted file mode 100644 index d1492aa5cbf..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925369614afd92d01fed5 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md deleted file mode 100644 index 8d17549a291..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d792536504e68254fe02236 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. - -Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md deleted file mode 100644 index 1c388711e2f..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536c8d2f0fdfad768fe -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -You can add more arguments by simply adding another arrow with another argument name: - -```js -const manyArguments = a => b => c => d => [a, b, c, d] -``` - -Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md deleted file mode 100644 index 45e6af501cc..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d79253639028b8ec56afcda -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md deleted file mode 100644 index 19bbc068cd3..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d792536834f2fd93e84944f -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -You call curried functions like this: - -```js -const result = add(1)(2); -``` - -Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md deleted file mode 100644 index e220cf656e5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536ddff9ea73c90a994 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. - -Change `x => elemValue(n)(x)` to `elemValue(n)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md deleted file mode 100644 index eaff17e3511..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d7925361596f84067904f7f -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('const fn') && - code.includes('varRangeExpanded') && - evalFormula('A1:J133') === '3' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md deleted file mode 100644 index 03ec1f65ba2..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dd8a4daf255488ac -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md deleted file mode 100644 index b1139d99d92..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536449c73004f265fb1 -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md deleted file mode 100644 index a481e918c67..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d79253685fc69b8fe60a0d2 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. - -This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md deleted file mode 100644 index 64e48966f02..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dc6e3ab29525de9e -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md deleted file mode 100644 index 57da365160d..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536cfd0fd893c630abb -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.includes('varRegex') && - code.includes('varExpanded') && - evalFormula('aC12bc') === 'abc' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md deleted file mode 100644 index 2dc9ec5c8ab..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 5d7925366a5ff428fb483b40 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md deleted file mode 100644 index 0516f1f77e6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5d7925365d4035eeb2e395fd -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md deleted file mode 100644 index a1022f45c6a..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 5d7925364c106e9aaf05a16f -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. - -Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(evalFormula('(2+2)*2') === '8'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md deleted file mode 100644 index 5617221e798..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: 5d792536970cd8e819cc8a96 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -You can define arrow functions without arguments: - -```js -const two = () => 2; -``` - -Define an empty arrow function without arguments and assign it to `window.onload`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('window.onload=()=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md deleted file mode 100644 index 06b401c7e8e..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5d792536e33baeaa60129e0a -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md deleted file mode 100644 index 59443f50dc9..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 5d7925379e2a488f333e2d43 -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Now define a function `createLabel` which takes an argument `name` and has an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md deleted file mode 100644 index 3a3a6f126c8..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5d7925379000785f6d8d9af3 -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Inside `createLabel`, assign `document.createElement("div")` to `label`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md deleted file mode 100644 index a9a1dcc5726..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 5d79253791391b0acddd0ac5 -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Add the following code to `createLabel`: - -```js -label.className = "label"; -label.textContent = name; -container.appendChild(label); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md deleted file mode 100644 index 780a9dab7fe..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373104ae5ae83f20a5 -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -The `forEach` method takes a function and calls it with each element of the array. - -Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md deleted file mode 100644 index ccfac003142..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373b7127cfaeb50c26 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). - -# --hints-- - -See description above for instructions. - -```js -assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md deleted file mode 100644 index 5216d89d1d9..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d792537cb3a5cd6baca5e1a -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md deleted file mode 100644 index 544000db907..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 5d79253742f3313d55db981f -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md deleted file mode 100644 index bf8bee8395a..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 5d7925379e0180a438ce7f95 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md deleted file mode 100644 index d57aa617713..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d792537c80984dfa5501b96 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Inside `letters.forEach`, assign `document.createElement("input")` to `input`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md deleted file mode 100644 index 4568ec50b24..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925377b54d8a76efb5657 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Add the following code to `letters.forEach`: - -```js -input.type = "text"; -input.id = y + x; -input.onchange = update; -container.appendChild(input); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md deleted file mode 100644 index 6543d3124fb..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925371398513549bb6395 -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md deleted file mode 100644 index 378c01975ac..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d792537ea3eaf302bf2d359 -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md deleted file mode 100644 index 93968d4e378..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 5d792537533b1c7843bfd029 -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -The `includes` method works on a string and checks if the argument is its substring. - -Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md deleted file mode 100644 index dcc989ea328..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537dc0fe84345d4f19e -title: Step 93 -challengeType: 0 -dashedName: step-93 ---- - -# --description-- - -Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md deleted file mode 100644 index ce97294c369..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537b6cadae0f4b0cda1 -title: Step 94 -challengeType: 0 -dashedName: step-94 ---- - -# --description-- - -The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. - -Use the `slice` method to log the first two letters of `value` to the console. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md deleted file mode 100644 index 1eaf868ad16..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 5d79253770083fb730c93a93 -title: Step 95 -challengeType: 0 -dashedName: step-95 ---- - -# --description-- - -You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. - -Change the call to `slice` to log all characters except the first instead. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md deleted file mode 100644 index cd6f2405a86..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d792537fef76b226b63b93b -title: Step 96 -challengeType: 0 -dashedName: step-96 ---- - -# --description-- - -Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md deleted file mode 100644 index fb91f29be96..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d79253760fca25ccbbd8990 -title: Step 97 -challengeType: 0 -dashedName: step-97 ---- - -# --description-- - -The array destructuring syntax can be used to extract values from arrays: - -```js -const [x, y] = [1, 2]; // in variables -const fn = ([x, y]) => x + y // in functions -``` - -Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && - spreadsheetFunctions['random']([1, 2]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md deleted file mode 100644 index c933b24aaac..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d7925374321824cba309875 -title: Step 98 -challengeType: 0 -dashedName: step-98 ---- - -# --description-- - -Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( - code.replace(/\s/g, '') - ) && spreadsheetFunctions['random']([1, 1]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md deleted file mode 100644 index 2a5ee766e3d..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md +++ /dev/null @@ -1,276 +0,0 @@ ---- -id: 5d7925381e8565a5c50ba7f1 -title: Step 99 -challengeType: 0 -dashedName: step-99 ---- - -# --description-- - -In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. - -You can check if this is the case by comparing a call to a function with another call (with the same arguments): - -```js -console.log(f(2) === f(2)); // always true for pure functions -``` - -Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md deleted file mode 100644 index 2f419cf2876..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925383f1b77db7f1ff59e -title: Step 100 -challengeType: 0 -dashedName: step-100 ---- - -# --description-- - -This is (probably) false, so `random` is certainly impure. - -The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. - -Call `window.onload()` in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md deleted file mode 100644 index 176257a88b5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d792538de9fa3f298bcd5f6 -title: Step 101 -challengeType: 0 -dashedName: step-101 ---- - -# --description-- - -Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md deleted file mode 100644 index ad427105522..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -id: 5d7925385b74f69642e1fea5 -title: Step 102 -challengeType: 0 -dashedName: step-102 ---- - -# --description-- - -Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. - -Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md deleted file mode 100644 index 231159b2b34..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d7925380ea76d55b2c97d7b -title: Step 103 -challengeType: 0 -dashedName: step-103 ---- - -# --description-- - -This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. - -Remove the `console.log` statement. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.includes('console.log')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md deleted file mode 100644 index 36fd2f83b90..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d792538be4fe331f1a6c008 -title: Step 104 -challengeType: 0 -dashedName: step-104 ---- - -# --description-- - -Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. - -But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. - -Change these calls to `""` - the function is now pure but doesn't work. - -# --hints-- - -See description above for instructions. - -```js -const nos = code.replace(/\s/g, ''); -assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md deleted file mode 100644 index 4b9e711aae6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 5d792538d169f33142175b95 -title: Step 105 -challengeType: 0 -dashedName: step-105 ---- - -# --description-- - -To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. - -Add an argument `cells` to `evalFormula`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md deleted file mode 100644 index 39584a049ae..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538e48b5a2c6e5bbe12 -title: Step 106 -challengeType: 0 -dashedName: step-106 ---- - -# --description-- - -When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md deleted file mode 100644 index 1ab52bf8124..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d7925387f3e9da5ec856dbe -title: Step 107 -challengeType: 0 -dashedName: step-107 ---- - -# --description-- - -Update the recursive call to `evalFormula` by passing in `cells` as the second argument. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md deleted file mode 100644 index 11e0b2d0bbc..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253824ae9b4a6e6f3108 -title: Step 108 -challengeType: 0 -dashedName: step-108 ---- - -# --description-- - -Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. - -# --hints-- - -See description above for instructions. - -```js -assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md deleted file mode 100644 index d4c961be237..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 5d7925383f122a279f4c54ad -title: Step 109 -challengeType: 0 -dashedName: step-109 ---- - -# --description-- - -The `find` method returns the first element of an array that satisfies the function passed to it. - -Chain `find` onto `cells` and pass it `cell => cell === id`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md deleted file mode 100644 index abdc6794679..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d7925387b682e962f209269 -title: Step 110 -challengeType: 0 -dashedName: step-110 ---- - -# --description-- - -In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md deleted file mode 100644 index 4baca0e6cc3..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538de774217b173288e -title: Step 111 -challengeType: 0 -dashedName: step-111 ---- - -# --description-- - -Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md deleted file mode 100644 index a2c5b9b1bef..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253891d93585323d1f3c -title: Step 112 -challengeType: 0 -dashedName: step-112 ---- - -# --description-- - -Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md deleted file mode 100644 index 637af181723..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925384e34e944ecb4612d -title: Step 113 -challengeType: 0 -dashedName: step-113 ---- - -# --description-- - -Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md deleted file mode 100644 index d12140aa462..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d792538631844ad0bdfb4c3 -title: Step 114 -challengeType: 0 -dashedName: step-114 ---- - -# --description-- - -`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. - -Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md deleted file mode 100644 index c966a9161ed..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -id: 5d792538e2a8d20cc580d481 -title: Step 115 -challengeType: 0 -dashedName: step-115 ---- - -# --description-- - -The `slice` method can also work on arrays. - -Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md deleted file mode 100644 index 5483ee8a3e9..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 5d792538f5004390d6678554 -title: Step 116 -challengeType: 0 -dashedName: step-116 ---- - -# --description-- - -You can also pass in a negative argument to `slice` to specify that index from the end: - -```js -[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] -``` - -Use a negative index to add a function `lasttwo` which returns the last two elements of an array. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md deleted file mode 100644 index 3e61d996f85..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 5d792539dd4fd4c96fd85f7e -title: Step 117 -challengeType: 0 -dashedName: step-117 ---- - -# --description-- - -The `%` operator returns the remainder: - -```js -4 % 3; // 1 -5 % 3; // 2 -6 % 3; // 0 -``` - -Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. - -# --hints-- - -See description above for instructions. - -```js -assert(isEven(20) && !isEven(31)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md deleted file mode 100644 index 8c4b6a9e314..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md +++ /dev/null @@ -1,292 +0,0 @@ ---- -id: 5d79253949802f8587c8bbd3 -title: Step 118 -challengeType: 0 -dashedName: step-118 ---- - -# --description-- - -The `filter` method keeps only the elements of an array that satisfy the function passed to it: - -```js -[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] -``` - -Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && - code.includes('filter') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md deleted file mode 100644 index c441a9459d8..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 5d7925395888767e9304c082 -title: Step 119 -challengeType: 0 -dashedName: step-119 ---- - -# --description-- - -The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. - -The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. - -For example, here's how to multiply all the value in an array: - -```js -[2, 3, 4].reduce((a, x) => a * x); // 24 -``` - -Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md deleted file mode 100644 index 787472aea1d..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 5d7925393b30099e37a34668 -title: Step 120 -challengeType: 0 -dashedName: step-120 ---- - -# --description-- - -The `includes` method checks if an element is in an array. - -Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md deleted file mode 100644 index f032db3ac16..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 5d7925398157757b23730fdd -title: Step 121 -challengeType: 0 -dashedName: step-121 ---- - -# --description-- - -The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: - -```js -[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] -// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array -// now it first tries [].concat(1) which works -``` - -Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md deleted file mode 100644 index 6b5714247b5..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d792539de4b9ac14dd40409 -title: Step 122 -challengeType: 0 -dashedName: step-122 ---- - -# --description-- - -Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === - '[1,3,5,7,9]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md deleted file mode 100644 index 8f15f9adfd4..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539534f1bf991bb987f -title: Step 123 -challengeType: 0 -dashedName: step-123 ---- - -# --description-- - -ES6 introduced a shorthand object literal syntax: - -```js -const a = 10; -const myObject = { a }; -console.log(myObject); // { a: 10 } -``` - -First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. - -# --hints-- - -See description above for instructions. - -```js -assert(sum([1, 2, 3]) === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md deleted file mode 100644 index eef96f2d471..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d7925394089b762f93ffa52 -title: Step 124 -challengeType: 0 -dashedName: step-124 ---- - -# --description-- - -Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. - -This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. - -# --hints-- - -See description above for instructions. - -```js -assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md deleted file mode 100644 index cb3b30d8c4f..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539ec758d45a6900173 -title: Step 125 -challengeType: 0 -dashedName: step-125 ---- - -# --description-- - -The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. - -As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md deleted file mode 100644 index 621e4cc4fbc..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md +++ /dev/null @@ -1,308 +0,0 @@ ---- -id: 5d7925398d525f61a9ff3a79 -title: Step 126 -challengeType: 0 -dashedName: step-126 ---- - -# --description-- - -The spread operator allow you to pass multiple arguments instead of an array: - -```js -const arr = [1, 2, 3]; -const sum3 = (a, b, c) => a + b + c; -sum3(...arr); // 6 -``` - -Use the spread operator to add `range` to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && - code.includes('...') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md deleted file mode 100644 index 8d27ee2bf76..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 5d792539a222f385c5c17d2b -title: Step 127 -challengeType: 0 -dashedName: step-127 ---- - -# --description-- - -Now define a `median` function which takes an argument `nums` (in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md deleted file mode 100644 index 08ffbd94e4a..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d7925398a7184b41b12a0e0 -title: Step 128 -challengeType: 0 -dashedName: step-128 ---- - -# --description-- - -The `sort` method sorts an array alphabetically: - -```js -["B", "C", "A"].sort(); // ["A", "B", "C"] -``` - -Assign the sorted `nums` to `sorted` in `median`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md deleted file mode 100644 index 49b025f4b1e..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d7925399afb905c34730a75 -title: Step 129 -challengeType: 0 -dashedName: step-129 ---- - -# --description-- - -But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: - -```js -[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] -``` - -If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. - -Use `sort` to sort `nums` in ascending order. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md deleted file mode 100644 index cad2f5aa466..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d792539728d1aa7788e2c9b -title: Step 130 -challengeType: 0 -dashedName: step-130 ---- - -# --description-- - -Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. - -You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md deleted file mode 100644 index df39b579f78..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d79253939434a2724c0ec41 -title: Step 131 -challengeType: 0 -dashedName: step-131 ---- - -# --description-- - -Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md deleted file mode 100644 index 1e4f1aca372..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 5d792539b9e1d3c54d8fe94a -title: Step 132 -challengeType: 0 -dashedName: step-132 ---- - -# --description-- - -Add a return statement to `median` so that it returns `isEven(length)`. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md deleted file mode 100644 index 4cf66a6dd6a..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5d792539b2e0bd8f9e8213e4 -title: Step 133 -challengeType: 0 -dashedName: step-133 ---- - -# --description-- - -Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. - -Note that the `middle` variable is close to the middle but is not actually the middle. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md deleted file mode 100644 index 2428ff3a79d..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 5d792539239148965a1a59a5 -title: Step 134 -challengeType: 0 -dashedName: step-134 ---- - -# --description-- - -Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.median([1, 20, 3]) === 3 && - spreadsheetFunctions.median([27, 7, 20, 10]) === 15 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md deleted file mode 100644 index ff91ae909fd..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d792539e1446045d0df6d28 -title: Step 135 -challengeType: 0 -dashedName: step-135 ---- - -# --description-- - -The `some` method checks if any element of the array satisfies the provided testing function. - -Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.someeven([1, 5, 4, 3]) && - !spreadsheetFunctions.someeven([3, 5, 9]) && - code.includes('.some') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md deleted file mode 100644 index ddede0016d6..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a2febbb77098730b9 -title: Step 136 -challengeType: 0 -dashedName: step-136 ---- - -# --description-- - -The `every` method checks if all elements of an array satisfy the provided testing function. - -Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && - !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && - code.includes('.every') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md deleted file mode 100644 index c475cf8ba22..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d79253a98bd9fdf7ce68d0a -title: Step 137 -challengeType: 0 -dashedName: step-137 ---- - -# --description-- - -We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. - -While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. - -Replace the body of `range` with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md deleted file mode 100644 index 52e294c3655..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 5d79253a1e9abf29de64c177 -title: Step 138 -challengeType: 0 -dashedName: step-138 ---- - -# --description-- - -The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. - -Make `range` return an array of `undefined` with size `end - start + 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md deleted file mode 100644 index ce1e1c87c73..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a8b29d78984369e4b -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -The `fill` method takes an argument and replaces all elements of the array with that argument. - -Use it on the array in `range` to replace everything with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md deleted file mode 100644 index 9630c3210b7..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 5d79253ad297a31cbe073718 -title: Step 140 -challengeType: 0 -dashedName: step-140 ---- - -# --description-- - -The function in the `map` method can actually take a second argument: the index of the element. - -This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). - -Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md deleted file mode 100644 index 7531f12a5a3..00000000000 --- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5dc10b8b93704f41d279eb5b -title: Step 141 -challengeType: 0 -dashedName: step-141 ---- - -# --description-- - -Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                  -
                                  -
                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md new file mode 100644 index 00000000000..d522cf2c5ab --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md @@ -0,0 +1,388 @@ +--- +id: 659ebe52d74b132a1d75c891 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug. + +The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function. +# --hints-- + +You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`. + +```js +assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn localStorage by Building a Todo App + + + + +
                                  +

                                  Todo App

                                  +
                                  + + + +
                                  +

                                  Discard unsaved changes?

                                  +
                                  + + +
                                  +
                                  +                                   +
                                  +
                                  +
                                  + + + + +``` + +```css +:root { + --white: #fff; + --light-grey: #f5f6f7; + --dark-grey: #0a0a23; + --yellow: #f1be32; + --golden-yellow: #feac32; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--dark-grey); +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + color: var(--light-grey); + margin: 20px 0 40px 0; +} + +.todo-app { + background-color: var(--white); + width: 300px; + height: 350px; + border: 5px solid var(--yellow); + border-radius: 8px; + padding: 15px; + position: relative; + display: flex; + flex-direction: column; + gap: 10px; +} + +.btn { + cursor: pointer; + width: 100px; + margin: 10px; + color: var(--dark-grey); + background-color: var(--golden-yellow); + background-image: linear-gradient(#fecc4c, #ffac33); + border-color: var(--golden-yellow); + border-width: 3px; +} + +.btn:hover { + background-image: linear-gradient(#ffcc4c, #f89808); +} + +.large-btn { + width: 80%; + font-size: 1.2rem; + align-self: center; + justify-self: center; +} + +.close-task-form-btn { + background: none; + border: none; + cursor: pointer; +} + +.close-icon { + width: 20px; + height: 20px; +} + +.task-form { + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--white); + border-radius: 5px; + padding: 15px; + width: 300px; + height: 350px; + flex-direction: column; + justify-content: space-between; + overflow: auto; +} + +.task-form-header { + display: flex; + justify-content: flex-end; +} + +.task-form-body { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.task-form-footer { + display: flex; + justify-content: center; +} + +.task-form-label, +#title-input, +#date-input, +#description-input { + display: block; +} + +.task-form-label { + margin-bottom: 5px; + font-size: 1.3rem; + font-weight: bold; +} + +#title-input, +#date-input, +#description-input { + width: 100%; + margin-bottom: 10px; + padding: 2px; +} + +#confirm-close-dialog { + padding: 10px; + margin: 10px auto; + border-radius: 15px; +} + +.confirm-close-dialog-btn-container { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.discard-message-text { + font-weight: bold; + font-size: 1.5rem; +} + +#tasks-container { + height: 100%; + overflow-y: auto; +} + +.task { + margin: 5px 0; +} + +.hidden { + display: none; +} + +@media (min-width: 576px) { + .todo-app, + .task-form { + width: 400px; + height: 450px; + } + + .task-form-label { + font-size: 1.5rem; + } + + #title-input, + #date-input { + height: 2rem; + } + + #title-input, + #date-input, + #description-input { + padding: 5px; + margin-bottom: 20px; + } +} +``` + +```js +const taskForm = document.getElementById("task-form"); +const confirmCloseDialog = document.getElementById("confirm-close-dialog"); +const openTaskFormBtn = document.getElementById("open-task-form-btn"); +const closeTaskFormBtn = document.getElementById("close-task-form-btn"); +const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); +const cancelBtn = document.getElementById("cancel-btn"); +const discardBtn = document.getElementById("discard-btn"); +const tasksContainer = document.getElementById("tasks-container"); +const titleInput = document.getElementById("title-input"); +const dateInput = document.getElementById("date-input"); +const descriptionInput = document.getElementById("description-input"); + +const taskData = []; +let currentTask = {}; + +const addOrUpdateTask = () => { + --fcc-editable-region-- + + --fcc-editable-region-- + const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); + const taskObj = { + id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, + title: titleInput.value, + date: dateInput.value, + description: descriptionInput.value, + }; + + if (dataArrIndex === -1) { + taskData.unshift(taskObj); + } else { + taskData[dataArrIndex] = taskObj; + } + + updateTaskContainer() + reset() +}; + +const updateTaskContainer = () => { + tasksContainer.innerHTML = ""; + + taskData.forEach( + ({ id, title, date, description }) => { + (tasksContainer.innerHTML += ` +
                                  +

                                  Title: ${title}

                                  +

                                  Date: ${date}

                                  +

                                  Description: ${description}

                                  + + +
                                  + `) + } + ); +}; + + +const deleteTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + buttonEl.parentElement.remove(); + taskData.splice(dataArrIndex, 1); +} + +const editTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + currentTask = taskData[dataArrIndex]; + + titleInput.value = currentTask.title; + dateInput.value = currentTask.date; + descriptionInput.value = currentTask.description; + + addOrUpdateTaskBtn.innerText = "Update Task"; + + taskForm.classList.toggle("hidden"); +} + +const reset = () => { + titleInput.value = ""; + dateInput.value = ""; + descriptionInput.value = ""; + taskForm.classList.toggle("hidden"); + currentTask = {}; +} + +openTaskFormBtn.addEventListener("click", () => + taskForm.classList.toggle("hidden") +); + +closeTaskFormBtn.addEventListener("click", () => { + const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; + if (formInputsContainValues) { + confirmCloseDialog.showModal(); + } else { + reset(); + } +}); + +cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); + +discardBtn.addEventListener("click", () => { + confirmCloseDialog.close(); + reset() +}); + +taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + addOrUpdateTask(); +}); +``` diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md deleted file mode 100644 index f4b05b12871..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e0e72c65bc8e73dfe1e -videoId: LGQuIIv2RVA -title: Elements and Tags Question A -challengeType: 15 -dashedName: elements-and-tags-question-a ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `

                                  `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                  `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                  ` or ``, but some can also be used without the closing forward slash such as `
                                  ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) - -## --text-- - -What are HTML tags? - -## --answers-- - -HTML tags tell the browser what content an element contains. - ---- - -HTML tags tell the browser when to load its content. - ---- - -HTML tags tell the browser what content the next element contains. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md deleted file mode 100644 index 51bf43a7014..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 637f4e1672c65bc8e73dfe1f -title: Elements and Tags Question B -challengeType: 15 -dashedName: elements-and-tags-question-b ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `

                                  `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                  `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                  ` or ``, but some can also be used without the closing forward slash such as `
                                  ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --text-- - -What are the three parts of most HTML elements? - -## --answers-- - -An opening tag, self closing tag, and content. - ---- - -An opening tag, closing tag, and content. - ---- - -An opening tag, closing tag, and attribute. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md deleted file mode 100644 index ab85844e81b..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e1c72c65bc8e73dfe20 -title: HTML Boilerplate Question A -challengeType: 15 -dashedName: html-boilerplate-question-a ---- - -# --description-- - -To demonstrate an HTML boilerplate, you first need an HTML file to work with. - -Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. - -You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. - -To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. - -It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. - -## The DOCTYPE - -Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. - -The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: - -```html - -``` - -However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. - -Open the `index.html` file created earlier in your text editor and add `` to the very first line. - -# --question-- -## --text-- - -What is the purpose of the `DOCTYPE` declaration? - -## --answers-- - -It tells the browser which version of HTML to use to render the document. - ---- - -It tells the browser that this document uses JavaScript. - ---- - -It tells the browser the title of the document. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md deleted file mode 100644 index ffd10a4b5ac..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 637f4e2872c65bc8e73dfe21 -title: HTML Boilerplate Question B -challengeType: 15 -dashedName: html-boilerplate-question-b ---- - -# --description-- - -After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. - -This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. - -Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: - -```html - - - -``` - -## What is the lang attribute? -`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. - -# --question-- - -## --text-- - -What is the `html` element? - -## --answers-- - -It is the root element in the document and tells the browser which version of HTML it should use. - ---- - -It is the root element in the document and all other elements should descend from it. - ---- - -It is the root element in the document and all other elements should come after it. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md deleted file mode 100644 index e4ddaa12c4b..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e2f72c65bc8e73dfe22 -title: HTML Boilerplate Question C -challengeType: 15 -dashedName: html-boilerplate-question-c ---- - -# --description-- - -The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. - -## The Charset Meta Element -You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. - -Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. - -## Title Element -Another element you should always include in the head of an HTML document is the `title` element: - -```html -My First Webpage -``` - -The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. - -If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. - -There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. - -Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: - - -```html - - - - - - My First Webpage - - -``` - -# --question-- - -## --text-- - -What is the purpose of the `head` element? - -## --answers-- - -The `head` element is used to display all elements that are displayed on the webpage. - ---- - -The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. - ---- - -The `head` element is used to display the header content on top of the webpage. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md deleted file mode 100644 index 302b6a95d44..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e3672c65bc8e73dfe23 -videoId: V8UAEoOvqFg -title: HTML Boilerplate Question D -challengeType: 15 -dashedName: html-boilerplate-question-d ---- - -# --description-- - -The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. - -To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. - ---- - -Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. - ---- - -Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. - -## --text-- - -What is the purpose of the `body` element? - -## --answers-- - -This is where all important information about the webpage is displayed such as the `title` and `meta` tags. - ---- - -This is where you tell the browser how to render the webpage correctly. - ---- - -This is where all content will be displayed on the page such images, text, and links. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md deleted file mode 100644 index 6c1bfb0a976..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 6374f208de18c50e48ba767b -title: Introduction To HTML and CSS Question A -challengeType: 15 -dashedName: introduction-to-html-and-css-question-a ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --assignment-- - -Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. - -## --text-- - -Which of the following statements is true? - -## --answers-- - -CSS is used to create the basic structure of a webpage, and HTML is used to add style. - ---- - -HTML is used to create the basic structure of a webpage, and CSS is used to add style. - ---- - -HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. - - -## --video-solution-- - -2 - - diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md deleted file mode 100644 index 87aff63d4ec..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 6376327e2724a688c04636e3 -title: Introduction To HTML and CSS Question B -challengeType: 15 -dashedName: introduction-to-html-and-css-question-b ---- - -# --description-- - - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to add paragraphs of text on a webpage? - -## --answers-- - -CSS - ---- - -JavaScript - ---- - -HTML - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md deleted file mode 100644 index 2ca9f2fbacb..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 637633162724a688c04636e4 -title: Introduction To HTML and CSS Question C -challengeType: 15 -dashedName: introduction-to-html-and-css-question-c ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to change the font and background color of a button? - -## --answers-- - -You should use CSS to change the background color and font of a button. - ---- - -You should use JavaScript to change the background color and font of a button. - ---- - -You should use HTML to change the background color and font of a button. - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md deleted file mode 100644 index 53e4c08471a..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 637633672724a688c04636e5 -title: Introduction To HTML and CSS Question D -challengeType: 15 -dashedName: introduction-to-html-and-css-question-d ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -What is the difference between HTML, CSS, and JavaScript? - -## --answers-- - -HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. - ---- - -CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. - ---- - -JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md deleted file mode 100644 index b4d237448f3..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f704072c65bc8e73dfe36 -videoId: tsEQgGjSmkM -title: Links and Images Question A -challengeType: 15 -dashedName: links-and-images-question-a ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- Finally, add the following `h1` to the `body`: `

                                  Homepage

                                  ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. - -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. - -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Links video above. - -## --text-- - -What HTML tag is used to create a link? - -## --answers-- - -`` - ---- - -`

                                  ` - ---- - -`

                                    ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md deleted file mode 100644 index a138268c406..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f703572c65bc8e73dfe35 -title: Links and Images Question B -challengeType: 15 -dashedName: links-and-images-question-b ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                    Homepage

                                    ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `                                    ` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- -## --text-- - -What is an attribute? -## --answers-- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. - ---- - -An HTML attribute is used to tell the browser what the element contains. - ---- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md deleted file mode 100644 index 8863b087456..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 637f703072c65bc8e73dfe34 -title: Links and Images Question C -challengeType: 15 -dashedName: links-and-images-question-c ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                    Homepage

                                    ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --text-- - -What attribute tells links where to go to? - -## --answers-- - -`src` - ---- - -`href` - ---- - -`link` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md deleted file mode 100644 index 37eebffbabf..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 637f702872c65bc8e73dfe33 -videoId: ta3Oxx7Yqbo -title: Links and Images Question D -challengeType: 15 -dashedName: links-and-images-question-d ---- - -# --description-- - - -Generally, there are two kinds of links you will create: - -- Links to pages on other websites on the internet - -- Links to pages located on your own websites - - -## Absolute Links -Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. - -You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. - -`https://www.theodinproject.com/about` - -## Relative Links -Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. - -Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. - -Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: - -```html - - - - - Odin Links and Images - - - -

                                    About Page

                                    - - -``` - -Back in the `index` page, add the following anchor element to create a link to the `about` page: - -```html - -

                                    Homepage

                                    - click me - - About - -``` - -Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. - -This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. - -But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. - -Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. - -Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. - -To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. - -```html - -

                                    Homepage

                                    - About - -``` - -Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. - -In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. - -```html - -

                                    Homepage

                                    - About - -``` - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML File Structure video above. - -## --text-- - -What is the difference between an absolute and a relative link? - -## --answers-- - -An absolute link is a link to another page on the current website. A relative link is a link to another website. - ---- - -An absolute link is a link to another website. A relative link is a link another page on the current website. - ---- - -There is no difference between absolute and relative links. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md deleted file mode 100644 index ae008078088..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 637f702372c65bc8e73dfe32 -videoId: 0xoztJCHpbQ -title: Links and Images Question E -challengeType: 15 -dashedName: links-and-images-question-e ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                    Homepage

                                    - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## `Alt` attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included: - - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Images Video above. - -## --text-- - -Which tag is used to display an image? - -## --answers-- - -`` - ---- - -`` - ---- - -`` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md deleted file mode 100644 index e1af2d6a659..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701c72c65bc8e73dfe31 -title: Links and Images Question F -challengeType: 15 -dashedName: links-and-images-question-f ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                    Homepage

                                    -                                     click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -What two attributes do images always need to have? - -## --answers-- - -`href` and `alt` - ---- - -`name` and `href` - ---- - -`alt` and `src` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md deleted file mode 100644 index 5bc84fa6c96..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701572c65bc8e73dfe30 -title: Links and Images Question G -challengeType: 15 -dashedName: links-and-images-question-g ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                    Homepage

                                    - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -How do you access a parent directory in a filepath? - -## --answers-- - -`../` - ---- - -`./` - ---- - -`.../` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md deleted file mode 100644 index 71157081ae7..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 637f700b72c65bc8e73dfe2f -title: Links and Images Question H -challengeType: 15 -dashedName: links-and-images-question-h ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                    Homepage

                                    - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --assignment-- - -Read about the four main image formats that can be used on the web. - -## --text-- - -What are the four main image formats that you can use for images on the web? - -## --answers-- - -TIFF, GIF, PNG, and SVG. - ---- - -JPG, PNG, GIF, and SVG. - ---- - -JPG, PDF, SVG, and GIF. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md deleted file mode 100644 index f4625eb7e31..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e3e72c65bc8e73dfe24 -videoId: kcHKFZBVtf4 -title: Understand Ordered and Unordered List Question A -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-a ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                      ` element, and each item within the list is created using the list item element `
                                    • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                        ` element. Each individual item in them is again created using the list item element `
                                      1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --assignment-- - -Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. - ---- - -Make an unordered shopping list of your favorite foods. - ---- - -Make an ordered list of todo’s you need to get done today. - ---- - -Make an unordered list of places you’d like to visit someday. - ---- - -Make an ordered list of your all time top 5 favorite video games or movies. - -## --text-- - -What HTML tag is used to create an unordered list? - -## --answers-- - -`
                                      2. ` - ---- - -`
                                          ` - ---- - -`
                                            ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md deleted file mode 100644 index 67e79f0ccb9..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e4672c65bc8e73dfe25 -title: Understand Ordered and Unordered List Question B -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-b ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                              ` element, and each item within the list is created using the list item element `
                                            • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                ` element. Each individual item in them is again created using the list item element `
                                              1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create an ordered list? - -## --answers-- - -`
                                                  ` - ---- - -`
                                                1. ` - ---- - -`
                                                    ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md deleted file mode 100644 index 1edd6feffbf..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e5172c65bc8e73dfe26 -title: Understand Ordered and Unordered List Question C -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-c ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                                      ` element, and each item within the list is created using the list item element `
                                                    • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                        ` element. Each individual item in them is again created using the list item element `
                                                      1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create list items within both unordered and ordered lists? - -## --answers-- - -`
                                                          ` - ---- - -`
                                                        1. ` - ---- - -`
                                                            ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md deleted file mode 100644 index 8698b62aca8..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 637f4e5872c65bc8e73dfe27 -videoId: yqcd-XkxZNM -title: Working With Text Question A -challengeType: 15 -dashedName: working-with-text-question-a ---- - -# --description-- - -What would you expect the following text to output on an HTML page? - -```html - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. - -``` - -It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below: - - - -When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line. - -If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `

                                                            ` tag. - -Changing our example from before to use paragraph elements fixes the issue: - - - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. - -## --text-- - -How do you create a paragraph in HTML? - -## --answers-- - -`

                                                            This is a paragraph

                                                            ` - ---- - -`

                                                            This is a paragraph

                                                            ` - ---- - -`This is a paragraph` - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md deleted file mode 100644 index 17d3c900359..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 637f4e5f72c65bc8e73dfe28 -title: Working With Text Question B -challengeType: 15 -dashedName: working-with-text-question-b ---- - -# --description-- - -Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. - -There are 6 different levels of headings starting from `

                                                            ` to `

                                                            `. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. - -Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `

                                                            ` tag. - - - -Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. - -# --question-- -## --text-- - -How many different levels of headings are there and what is the difference between them? - -## --answers-- - -There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. - ---- - -There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. - ---- - -There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md deleted file mode 100644 index 6ccf0e06658..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 637f4e6672c65bc8e73dfe29 -videoId: gW6cBZLUk6M -title: Working With Text Question C -challengeType: 15 -dashedName: working-with-text-question-c ---- - -# --description-- - -The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. - -You can use `strong` on its own: - - - -But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: - - - -Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Bold and Italic Text Video above. - -## --text-- - -What element should you use to make text bold and important? - -## --answers-- - -`This is an important message` - ---- - -`

                                                            This is an important message

                                                            ` - ---- - -`This is an important message` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md deleted file mode 100644 index e686b2698e0..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 637f4e6e72c65bc8e73dfe2a -title: Working With Text Question D -challengeType: 15 -dashedName: working-with-text-question-d ---- - -# --description-- - -The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. - -To use `em` on its own: - - -Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: - - - -# --question-- -## --text-- - -What element should you use to make text italicized to add emphasis? - -## --answers-- - -`This is an italic message` - ---- - -`This is an italic message` - ---- - -`This is an italic message` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md deleted file mode 100644 index a0a7ba2fda9..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e7972c65bc8e73dfe2b -title: Working With Text Question E -challengeType: 15 -dashedName: working-with-text-question-e ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the `body` element is the parent and the `p` is the child: - -```html - - - - -

                                                            Lorem ipsum dolor sit amet.

                                                            - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: - -```html - - - - -

                                                            Lorem ipsum dolor sit amet.

                                                            -

                                                            Ut enim ad minim veniam.

                                                            - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship do two elements have if they are at the same level of nesting? - -## --answers-- - -The elements are each other's parents. - ---- - -The elements are each other's children. - ---- - -The elements are siblings. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md deleted file mode 100644 index 7d440cfab25..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f4e8072c65bc8e73dfe2c -title: Working With Text Question F -challengeType: 15 -dashedName: working-with-text-question-f ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the body element is the parent and the paragraph is the child: - -```html - - - - -

                                                            Lorem ipsum dolor sit amet.

                                                            - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: - -```html - - - - -

                                                            Lorem ipsum dolor sit amet.

                                                            -

                                                            Ut enim ad minim veniam.

                                                            - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship does an element have with any nested element within it? - -## --answers-- - -The element within the other element is called the parent element. - ---- - -The element within the other element is called the child element. - ---- - -The element within the other element is called the sibling element. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md deleted file mode 100644 index 5f5d141fa46..00000000000 --- a/curriculum/challenges/chinese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e8772c65bc8e73dfe2d -title: Working With Text Question G -challengeType: 15 -dashedName: working-with-text-question-g ---- - -# --description-- - -HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. - -Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: - -```html -

                                                            View the html to see the hidden comments

                                                            - - - -

                                                            Some paragraph text

                                                            - - -``` - -# --question-- - -## --assignment-- - -To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. - -## --text-- - -How do you create HTML comments? - -## --answers-- - -`/* This is an HTML comment */` - ---- - -`` - ---- - -`<-- This is an HTML comment --!>` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md deleted file mode 100644 index 5b3f6a44858..00000000000 --- a/curriculum/challenges/chinese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5900f36e1000cf542c50fe80 -title: 'Problem 1: Multiples of 3 and 5' -challengeType: 1 -forumTopicId: 301722 -dashedName: problem-1-multiples-of-3-and-5 ---- - -# --description-- - -If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. - -Find the sum of all the multiples of 3 or 5 below the provided parameter value `number`. - -# --hints-- - -`multiplesOf3and5(10)` should return a number. - -```js -assert(typeof multiplesOf3and5(10) === 'number'); -``` - -`multiplesOf3and5(49)` should return 543. - -```js -assert.strictEqual(multiplesOf3and5(49), 543); -``` - -`multiplesOf3and5(1000)` should return 233168. - -```js -assert.strictEqual(multiplesOf3and5(1000), 233168); -``` - -`multiplesOf3and5(8456)` should return 16687353. - -```js -assert.strictEqual(multiplesOf3and5(8456), 16687353); -``` - -`multiplesOf3and5(19564)` should return 89301183. - -```js -assert.strictEqual(multiplesOf3and5(19564), 89301183); -``` - -# --seed-- - -## --seed-contents-- - -```js -function multiplesOf3and5(number) { - - return true; -} - -multiplesOf3and5(1000); -``` - -# --solutions-- - -```js -const multiplesOf3and5 = (number) => { - var total = 0; - - for(var i = 0; i < number; i++) { - if(i % 3 == 0 || i % 5 == 0) { - total += i; - } - } - return total; -}; -``` diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md deleted file mode 100644 index a8abd3ff027..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 651dd5ae6ffb500e3f2ce47c -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -```js -console.log('with code'); -``` - -*** - -Making a statement based on her assumption. - -### --feedback-- - -No, that's not correct - -*** - -Expressing a possibility. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md deleted file mode 100644 index 27f5dcb5e42..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5d86ffb500e3f2ce47d -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md deleted file mode 100644 index a79f83d6f5a..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd5f41d697d0aab7833b5 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md deleted file mode 100644 index 13028d7c28a..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 651dd3e06ffb500e3f2ce478 -title: "Dialogue: Introducing" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-introducing ---- - -# --description-- - -What the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md deleted file mode 100644 index 3d67f522c07..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543abeff5f028dba112f278 -title: "I am: I'm" -challengeType: 19 -dashedName: i-am-im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, the verb `to be` is used to talk about identities, characteristics, and more. The contraction `I'm` is a combination of `I` and `am`. Here, Tom uses it to introduce himself. - -# --question-- - -## --text-- - -Which operation correctly expands the contraction `I'm`? - -## --answers-- - -`I is` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I am` - -*** - -`I was` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I have` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md deleted file mode 100644 index a2aa6a8f717..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 6543abf5f5f028dba112f279 -title: I'm -challengeType: 22 -dashedName: im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -The word `I'm` is a contraction of `I am`. Contractions are a way to shorten common combinations of words, especially with verbs. - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, that's right! _ Tom McKenzie.` - -## --blanks-- - -`I'm` diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md deleted file mode 100644 index 3b8b7cff0bd..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 6537e6ece93e5724eeb27c54 -title: Name and Job Title -challengeType: 19 -dashedName: name-and-job-title -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, we often mention our job or role in a company by saying, `I'm [Name], the [Job title].` This lets others know our position or role. - -# --question-- - -## --text-- - -What is Maria's job role at the company? - -## --answers-- - -`Graphic Designer` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Member` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Lead` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`CEO` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md deleted file mode 100644 index 2a3c405b6ad..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 651dd5386ffb500e3f2ce47a -title: Right -challengeType: 22 -dashedName: right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, to check or confirm something people sometimes use tag questions. For example, `You are a programmer, right?` Here, `right?` is used as a tag to check or confirm the previous statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, _?` - -## --blanks-- - -`are` - -### --feedback-- - -Pay attention to the verb in the sentence. - -*** - -`right` - -### --feedback-- - -Pay attention to the verb in the sentence. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md deleted file mode 100644 index 2ae09721cbf..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 6543aa3df5f028dba112f275 -title: Team Lead -challengeType: 22 -dashedName: team-lead -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -A `team lead` is a person who leads or manages a team. In the dialogue, Maria introduces herself as the team lead, meaning she has a leadership role. - -# --fillInTheBlank-- - -## --sentence-- - -`I'm Maria, the _ _.` - -## --blanks-- - -team - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -lead - -### --feedback-- - -Focus on the term Maria used to describe herself. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md deleted file mode 100644 index 3349bcfead9..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 6543aae6f5f028dba112f277 -title: "That's Right: 2" -challengeType: 22 -dashedName: thats-right-2 -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -Placeholder Description \_\_\_ \_\_ - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, _ _! I'm Tom McKenzie. It's a pleasure to meet you.` - -## --blanks-- - -`that's` - -*** - -`right` diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md deleted file mode 100644 index e85982fd561..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543aaa9f5f028dba112f276 -title: That's Right -challengeType: 19 -dashedName: thats-right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -When someone makes a correct assumption or guess about you, you can confirm it using phrases like `that's right`. It's a way of agreeing or saying yes to what is said. - -# --question-- - -## --text-- - -Which phrase does Tom use to confirm Maria's statement about him? - -## --answers-- - -`that's wrong` - -### --feedback-- - -`That's wrong` is used to disagree. - -*** - -`that's okay` - -### --feedback-- - -`that's okay` usually shows acceptance, not confirmation. - -*** - -`that's right` - -*** - -`that's left` - -### --feedback-- - -`that's left` refers to a direction, not confirmation. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md deleted file mode 100644 index dd254987129..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 651dd5296ffb500e3f2ce479 -title: You Are -challengeType: 22 -dashedName: you-are -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, when making introductions or identifying someone, you use the verb `to be`. In this case, `You are` is used to address the person Maria is talking to and affirmatively identify their occupation. - -Maria is introducing herself and confirming Tom's job role. `Are` is used in the present affirmative to make a statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, right?` - -## --blanks-- - -are - -### --feedback-- - -The verb `to be` is an irregular verb. When conjugated with the pronoun `you`, `be` becomes `are`. For example: `You are an English learner.` diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md new file mode 100644 index 00000000000..a041fbddef7 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md @@ -0,0 +1,15 @@ +--- +id: 655c0feadb1dd77f6cda623f +title: "Dialogue 1: A Job Interview" +challengeType: 21 +videoId: nLDychdBwUg +dashedName: dialogue-1-a-job-interview +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md new file mode 100644 index 00000000000..97f3f3245d8 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md @@ -0,0 +1,54 @@ +--- +id: 657b0f0be03b2137ed88b36c +title: Task 1 +challengeType: 19 +dashedName: task-1 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `interview` is a formal meeting where someone asks questions to learn about another person's experience, skills, or opinions. In job interviews, like in the dialogue, the interviewer asks about the candidate's previous job experiences. + +# --question-- + +## --text-- + +What is the purpose of Anna's meeting with the candidate? + +## --answers-- + +To discuss a new project at Acme Tech + +### --feedback-- + +The dialogue is about an interview, not a project discussion. + +--- + +To give a presentation on web development + +### --feedback-- + +The dialogue focuses on an interview, not a presentation. + +--- + +To have a casual conversation about programming + +### --feedback-- + +This is a formal interview, not a casual conversation. + +--- + +To conduct an interview about the candidate's job experience + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md new file mode 100644 index 00000000000..301a777a900 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md @@ -0,0 +1,50 @@ +--- +id: 657b106ced8c653be6b3218f +title: Task 2 +challengeType: 22 +dashedName: task-2 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Thanks for coming in for this interview. _ you _ me about your _ job experiences?` + +## --blanks-- + +`Can` + +### --feedback-- + +This word is used to ask if someone is able to do something. + +--- + +`tell` + +### --feedback-- + +This word is used when asking someone to give information. + +--- + +`previous` + +### --feedback-- + +This word is used to describe something that happened before now. + + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md new file mode 100644 index 00000000000..ad5202d23d2 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md @@ -0,0 +1,58 @@ +--- +id: 657b108cf870283d22b21e8e +title: Task 3 +challengeType: 19 +dashedName: task-3 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the simple present tense is used to describe habitual or usual actions. However, when you are talking about past roles or experiences, like in an interview, you should use the simple past tense. + +The simple past tense often involves changing verbs. For example, `is` becomes `was` for singular subjects and `are` becomes `were` for plural subjects. + +For example, `I am a teacher` in the present becomes `I was a teacher` for past experiences. Similarly, `They are engineers` changes to `They were engineers` when speaking about the past. + +# --question-- + +## --text-- + +What was the candidate's position at Acme Tech? + +## --answers-- + +`A project manager` + +### --feedback-- + +The candidate stated they were a programmer, not a project manager. + +--- + +`A database analyst` + +### --feedback-- + +The candidate mentioned being a programmer, which is different from a database analyst. + +--- + +`A programmer` + +--- + +`A software tester` + +### --feedback-- + +The candidate specifically mentioned their role as a programmer, not a software tester. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md new file mode 100644 index 00000000000..f757d7077f1 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md @@ -0,0 +1,38 @@ +--- +id: 657b110ad8afcc3f8e586362 +title: Task 4 +challengeType: 22 +dashedName: task-4 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that have been completed in the past. It involves changing verbs to show that the action happened before now. In this challenge, you'll practice using the simple past form of verb `to be`. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ there for three years. I _ responsible for developing web applications and maintaining the company's database.` + +## --blanks-- + +`was` + +### --feedback-- + +The first `was` indicates the completion of the time period the candidate spent at their previous job. + +--- + +`was` + +### --feedback-- + +The second `was` is used to describe past responsibility, indicating what the candidate used to do in their previous job. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md new file mode 100644 index 00000000000..a2258172744 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md @@ -0,0 +1,49 @@ +--- +id: 657b115008a62d41c0d7482f +title: Task 5 +challengeType: 19 +dashedName: task-5 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the context of programming and technology, the term `web applications` refers to software programs that run on a web server and are accessed through a web browser. They are an essential part of modern technology, allowing users to perform functions or access services over the internet. + +# --question-- + +## --text-- + +What does `web applications` refer to in the context of programming? + +## --answers-- + +Mobile apps that are downloaded from app stores + +### --feedback-- + +While mobile apps are a type of application, `web applications` specifically refer to those accessed through a web browser. + +--- + +Programs that run on a web server and are accessed via a web browser + +--- + +Physical hardware used in networking + +### --feedback-- + +Web applications are software, not physical hardware. + +--- + +Websites that only provide information without user interaction + +### --feedback-- + +Web applications are interactive and functional, not just informational. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md new file mode 100644 index 00000000000..6c2c5ba78bf --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md @@ -0,0 +1,49 @@ +--- +id: 657b119f0ce64343420bb850 +title: Task 6 +challengeType: 19 +dashedName: task-6 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `database` is a structured collection of data, typically stored electronically in a computer system. It is used to organize, store, and retrieve large amounts of information efficiently. In programming, `database` is essential for managing data that applications need to function. + +# --question-- + +## --text-- + +What is a `database` in the context of programming? + +## --answers-- + +A structured collection of data stored electronically + +--- + +A tool for designing websites + +### --feedback-- + +While important in web development, a database is not a tool for designing websites, but for storing data. + +--- + +A programming language used to create applications + +### --feedback-- + +A database is not a programming language; it's a system for storing and managing data. + +--- + +A type of computer virus + +### --feedback-- + +A database is a safe and structured way to store data, not a computer virus. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md new file mode 100644 index 00000000000..03e329649a9 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md @@ -0,0 +1,40 @@ +--- +id: 657b11e082e48a44eb4bfc09 +title: Task 7 +challengeType: 22 +dashedName: task-7 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's response and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ also part of the _ update team.` + +## --blanks-- + +`was` + +### --feedback-- + +This word is a past tense verb. You use it to talk about something that happened in the past. + +--- + +`software` + +### --feedback-- + +This word refers to computer programs. It's an important term in technology and programming. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md new file mode 100644 index 00000000000..67343b31705 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -0,0 +1,57 @@ +--- +id: 657b11f87368cf463ea4fe46 +title: Task 8 +challengeType: 19 +dashedName: task-8 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. For example: + + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. + `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + +# --question-- + +## --text-- + +How does Anna ask about specific projects in the past tense? + +## --answers-- + +`Where there any specific projects you'd like to mention?` + +### --feedback-- + +`Where` is used for locations. The correct form for asking about past events is `Were`. + +--- + +`Were there any specific projects you'd like to mention?` + +--- + +`Was there any specific projects you'd like to mention?` + +### --feedback-- + +`Was` is used with singular nouns. Since `projects` is plural, `Were` is the correct choice. + +--- + +`Are there any specific projects you'd like to mention?` + +### --feedback-- + +`Are` is present tense. The question is about past projects, so `Were` is needed. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md new file mode 100644 index 00000000000..e6bc643d065 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md @@ -0,0 +1,55 @@ +--- +id: 657b1240ef768447b80817ad +title: Task 9 +challengeType: 19 +dashedName: task-9 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense, as reviewed earlier, is used for actions completed in the past. In this context, `we were involved in` combines the simple past tense (`were`) with the expression `involved in`, which means being a part of something, especially in an active or important role. For example, `They were involved in organizing the event` means they played an important role in organizing it. + +# --question-- + +## --text-- + +How does the candidate describe their role in the project? + +## --answers-- + +`We had involvement in the development of the e-commerce platform.` + +### --feedback-- + +Although this phrase communicates involvement, the more common expression in English is `were involved in`. + +--- + +`We were engaged in the development of the e-commerce platform.` + +### --feedback-- + +`engaged in` is similar but not the exact phrase used by the candidate. `Involved in` specifically indicates an active participation. + +--- + +`We were involved in the development of the e-commerce platform.` + +--- + +`We participated in the development of the e-commerce platform.` + +### --feedback-- + +While `participated in` suggests involvement, the specific phrase used here is `involved in`. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md new file mode 100644 index 00000000000..f51e04c012a --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md @@ -0,0 +1,49 @@ +--- +id: 657b12ae08dd7049b300c901 +title: Task 10 +challengeType: 19 +dashedName: task-10 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +An `e-commerce platform` refers to a software application that allows businesses to manage their online sales operations. It typically includes features for displaying products, processing orders, and handling customer transactions. This term is essential in the world of online business, as it enables companies to sell goods and services over the internet. + +# --question-- + +## --text-- + +What is an `e-commerce platform` in the context of online business? + +## --answers-- + +A platform for social media marketing + +### --feedback-- + +While e-commerce platforms may use social media for marketing, they are primarily used for online sales operations. + +--- + +A software application for managing online sales + +--- + +A tool for website design and development + +### --feedback-- + +An e-commerce platform is specifically for managing online sales, not just website design. + +--- + +A system for email communication with customers + +### --feedback-- + +Though communication might be a feature, an e-commerce platform's main function is to manage online sales. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md new file mode 100644 index 00000000000..092c2b7ff32 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md @@ -0,0 +1,41 @@ +--- +id: 657b12e7c306334b7c320221 +title: Task 11 +challengeType: 22 +dashedName: task-11 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's statement and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for the checkout process, and it _ a successful implementation.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense of `are` used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense of `is` used for singular subjects or situations. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md new file mode 100644 index 00000000000..5a555480e1c --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md @@ -0,0 +1,49 @@ +--- +id: 657b13088693ef4ce21ce0e4 +title: Task 12 +challengeType: 19 +dashedName: task-12 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `checkout process` refers to the steps involved in completing a purchase, whether in a physical store or online. In a physical store, this usually involves taking items to a cashier, paying, and receiving a receipt. In online shopping, it includes adding items to a cart, entering shipping and payment details, and finalizing the order. + +# --question-- + +## --text-- + +What does the `checkout process` typically involve? + +## --answers-- + +Signing up for a store's loyalty program + +### --feedback-- + +While loyalty programs are part of customer engagement, the checkout process is specifically about completing a transaction. + +--- + +Arranging items on shelves in a store + +### --feedback-- + +Arranging items is a part of store management, not related to the checkout process of completing a purchase. + +--- + +Conducting market research + +### --feedback-- + +Market research is important for business strategy, but it's separate from the checkout process, which is directly involved in sales transactions. + +--- + +Completing a purchase through payment and receipt of goods + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md new file mode 100644 index 00000000000..db7a9bbed14 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md @@ -0,0 +1,49 @@ +--- +id: 657b133afcef714e542b557a +title: Task 13 +challengeType: 19 +dashedName: task-13 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Implementation` in a technical or business context refers to the process of putting a plan or design into effect. In software development, for instance, implementation involves the actual coding and setup of a software application based on designed specifications. It is a critical phase where ideas or plans are turned into a functioning reality. + +# --question-- + +## --text-- + +What does `implementation` mean in a project context? + +## --answers-- + +The planning stage of a project + +### --feedback-- + +Planning is the phase where strategies are formed, not the actual execution or implementation of those plans. + +--- + +The analysis of project results + +### --feedback-- + +Analysis is about evaluating outcomes, whereas implementation is about executing or carrying out the project plans. + +--- + +The process of team formation + +### --feedback-- + +Team formation is part of project setup, but implementation specifically refers to executing the planned tasks of the project. + +--- + +The execution of a plan or design + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md new file mode 100644 index 00000000000..1fa977ff3c0 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md @@ -0,0 +1,49 @@ +--- +id: 657b135e9029fb4f8141e40c +title: Task 14 +challengeType: 22 +dashedName: task-14 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. This is a great way to practice and remember these words. + +# --fillInTheBlank-- + +## --sentence-- + +`Anna: That's excellent. _ there any specific projects you'd like to mention?` + +`Candidate: Yes, in one of my team's projects, we were _ in the development of an e-commerce platform. We were responsible for the _ process, and it was a successful implementation.` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past tense form of `are`. The first letter should be capitalized. + +--- + +`involved` + +### --feedback-- + +This word means participating actively in something. + +--- + +`checkout` + +### --feedback-- + +This term refers to the process of completing a purchase. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md new file mode 100644 index 00000000000..94904516eba --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md @@ -0,0 +1,54 @@ +--- +id: 657b138d33db9e50f116b5f0 +title: Task 15 +challengeType: 19 +dashedName: task-15 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and answer the question. + +# --question-- + +## --text-- + +How does Anna ask about the candidate's educational background in computer science? + +## --answers-- + +`Are you educated in computer science?` + +### --feedback-- + +`Are you` is present tense, but Anna's question is about the candidate's past education. + +--- + +`Do you study computer science?` + +### --feedback-- + +`Do you study` is present tense. The question is about past education. + +--- + +`Were you educated in computer science?` + +--- + +`Have you studied computer science?` + +### --feedback-- + +`Have you studied` is a different form, asking if they have ever studied it at any time. `Were you educated` specifically asks about formal education in the past. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md new file mode 100644 index 00000000000..6044644f850 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md @@ -0,0 +1,49 @@ +--- +id: 657b1431076b365555784189 +title: Task 16 +challengeType: 19 +dashedName: task-16 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `bachelor's degree` is an undergraduate academic degree awarded by colleges and universities upon completion of a course of study. In the term `bachelor's degree`, the use of the noun (`bachelor`) followed by the `'s` indicates possession or association. This form is commonly used to show that something belongs to or is related to the noun, as in `today's news` or `teacher's guide`. + +# --question-- + +## --text-- + +What does `bachelor's degree` refer to? + +## --answers-- + +An undergraduate academic degree + +--- + +A type of professional certification + +### --feedback-- + +A bachelor's degree is an academic qualification, not a professional certification. + +--- + +A high school diploma + +### --feedback-- + +A bachelor's degree is a higher education qualification, more advanced than a high school diploma. + +--- + +A master's program entry requirement + +### --feedback-- + +While a bachelor's degree may be required for a master's program, it itself refers to an undergraduate degree. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md new file mode 100644 index 00000000000..299109790e0 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md @@ -0,0 +1,56 @@ +--- +id: 657b145976723b56a97b8dda +title: Task 17 +challengeType: 19 +dashedName: task-17 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `I was introduced to` uses the simple past tense form `was` of the verb `be`, combined with the past participle `introduced`. This structure, `be` followed by a verb suffixed with `-ed`, is often used to describe actions that happened to the subject in the past. For example: + +`At college, I was introduced to many programing languages` + +# --question-- + +## --text-- + +What does the candidate mean by saying `I was introduced to various programming languages and software development principles`? + +## --answers-- + +I taught myself various programming languages and principles + +### --feedback-- + +`I was introduced to` implies being formally taught or shown by someone else, not self-teaching. + +--- + +I learned about various programming languages and principles in my studies + +--- + +I have extensive experience with various programming languages and principles + +### --feedback-- + +The phrase indicates initial exposure to these topics, not necessarily extensive experience. + +--- + +I developed various programming languages and principles + +### --feedback-- + +Being introduced to something means learning about it for the first time, not creating or developing it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md new file mode 100644 index 00000000000..2e11e13fa69 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md @@ -0,0 +1,49 @@ +--- +id: 657b149630b3ea5873269a38 +title: Task 18 +challengeType: 19 +dashedName: task-18 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `various` is an adjective used to describe a number of different types or kinds of something, emphasizing diversity or variety. It is often used to indicate that there are several distinct items or examples being referred to. For example, saying `various books` means books of different kinds or genres. + +# --question-- + +## --text-- + +What does `various` imply when talking about programming languages and software development principles? + +## --answers-- + +Different types or kinds + +--- + +A specific type or kind + +### --feedback-- + +The term `various` implies diversity, not specificity. + +--- + +Only one type + +### --feedback-- + +`Various` indicates a number of different types, not just one. + +--- + +Irrelevant or unrelated types + +### --feedback-- + +`Various` does mean different types, but these are usually relevant and related to the context. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md new file mode 100644 index 00000000000..b217384d87c --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md @@ -0,0 +1,38 @@ +--- +id: 657b14d8353d665a187fe771 +title: Task 19 +challengeType: 22 +dashedName: task-19 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this challenge, you'll practice filling in key terms from the dialogue. These terms are commonly used in job interviews and are essential for understanding the context of the discussion. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Sure, I was a programmer at Acme Tech. I was there for three years. I was responsible for developing web _ and maintaining the company's _. I was also part of the software update team.` + +## --blanks-- + +`applications` + +### --feedback-- + +These are programs designed to perform specific tasks or functions. + +--- + +`database` + +### --feedback-- + +This is a collection of information organized for easy access, management, and updating. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md new file mode 100644 index 00000000000..5d81b22a9e7 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md @@ -0,0 +1,62 @@ +--- +id: 657b153ac677705c7059530d +title: Task 20 +challengeType: 19 +dashedName: task-20 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `could you tell me` is a polite way to ask someone for information. It's commonly used in formal or professional situations, like job interviews or meetings. +In English, some verbs have irregular past forms, meaning they do not follow the regular pattern of adding `-ed` to make the past tense. `Can` is one such verb, and its irregular simple past form is `could`. + +The existence of irregular forms, like `could`, often comes from the way language has evolved over time. These forms do not follow the regular patterns and need to be memorized. + +For example: + +- Present: `I can speak English.` +- Past: `I could speak English when I was six.` + +# --question-- + +## --text-- + +What does the phrase `could you tell me` in Anna's sentence express? + +## --answers-- + +A polite request for information + +--- + +A command to do something immediately + +### --feedback-- + +The phrase `could you tell me` is used for polite requests, not direct commands. + +--- + +A suggestion for future action + +### --feedback-- + +This phrase is asking for information now, not suggesting something for the future. + +--- + +An offer to help someone + +### --feedback-- + +This phrase is more about asking for information than offering help. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md new file mode 100644 index 00000000000..ecf0d666af0 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md @@ -0,0 +1,54 @@ +--- +id: 657b15dbcafe4d5f39a5de82 +title: Task 21 +challengeType: 19 +dashedName: task-21 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `previous` is used to describe something that happened before the current time or situation. It's often used to refer to past experiences, jobs, or events. + +# --question-- + +## --text-- + +In the context of Anna's question, what does `previous` refer to? + +## --answers-- + +Past roles and responsibilities + +--- + +Future roles and responsibilities + +### --feedback-- + +`Previous` refers to something that has already happened, not something in the future. + +--- + +Current roles and responsibilities + +### --feedback-- + +`Previous` means something that happened before now, not what is happening currently. + +--- + +Unrelated roles and responsibilities + +### --feedback-- + +`Previous` specifically relates to roles and responsibilities that were held before, not those unrelated. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md new file mode 100644 index 00000000000..8497f67b9bb --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md @@ -0,0 +1,53 @@ +--- +id: 657b160d6a8662610fe6a523 +title: Task 22 +challengeType: 22 +dashedName: task-22 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that were completed in the past. Regular verbs in the past tense usually end with `-ed`, while irregular verbs have unique past forms. For example, as you learned in previous tasks, `was` and `were` are the past forms of `is` and `are`. + +Examples of simple past tense: + +- `I worked at a company.` (`work` becomes `worked`) +- `I was happy.` (`is` becomes `was`) +- `We were busy.` (`are` becomes `were`) + +# --fillInTheBlank-- + +## --sentence-- + +`Hello! Certainly. I _ at Mock Corporation for five years. I _ part of a team of software engineers, and we _ responsible for developing and maintaining various applications.` + +## --blanks-- + +`worked` + +### --feedback-- + +Think of the past tense of `work`, a regular verb that follows the usual `-ed` ending pattern. + +--- + +`was` + +### --feedback-- + +Recall the past tense form of `is`, which changes to a completely different word in its irregular past form. + +--- + +`were` + +### --feedback-- + +Consider the past tense of `are`, an irregular verb that also changes to a different word in the past. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md new file mode 100644 index 00000000000..8e1b26a3bce --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md @@ -0,0 +1,46 @@ +--- +id: 657b163c9da40e62b904be1f +title: Task 23 +challengeType: 22 +dashedName: task-23 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the past simple interrogative. In questions, the simple past tense often begins with a past tense verb, followed by the subject and the rest of the sentence. This structure is used to ask about past events or states. + +# --fillInTheBlank-- + +## --sentence-- + +`That's great to hear. _ the members of the team _ _ any specific achievements or projects?` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past form of `are` used to ask about a past state or condition. + +--- + +`involved` + +### --feedback-- + +Think of a word that means `participated in` or `engaged with`. + +--- + +`in` + +### --feedback-- + +A preposition that often follows `involved` to indicate participation or inclusion. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md new file mode 100644 index 00000000000..bc7924edcf6 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md @@ -0,0 +1,54 @@ +--- +id: 657b18e71067d6680b9ac5d3 +title: Task 24 +challengeType: 19 +dashedName: task-24 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `redesign` means to design something again or differently. It's often used in the context of improving or updating the design of an existing product, service, or structure. In software and web development, redesigning is a common practice to enhance functionality, user experience, or aesthetics. + +# --question-- + +## --text-- + +What does `redesign` imply in Candidate2's statement about the website project? + +## --answers-- + +To design for the first time + +### --feedback-- + +`Redesign` implies working on something that already exists, not creating it for the first time. + +--- + +To remove the design + +### --feedback-- + +`Redesign` means to change or improve the existing design, not to remove it. + +--- + +To change or improve an existing design + +--- + +To copy a design + +### --feedback-- + +`Redesign` involves making changes or improvements, not copying a design as it is. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md new file mode 100644 index 00000000000..ed588a90563 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md @@ -0,0 +1,54 @@ +--- +id: 657b1985ae17886b05b382b1 +title: Task 25 +challengeType: 19 +dashedName: task-25 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `performance` in a technical context often refers to how well a system or component operates, especially in terms of speed, efficiency, and reliability. For websites and software, performance can relate to how quickly pages load, the responsiveness of the application, or the stability of the system under various conditions. + +# --question-- + +## --text-- + +What does `performance` refer to in Candidate2's statement about the website? + +## --answers-- + +A live presentation + +### --feedback-- + +While `performance` can mean a presentation, in this context, it relates to the functioning of the website. + +--- + +Artistic display + +### --feedback-- + +In a technical context, `performance` refers to operational effectiveness, not an artistic aspect. + +--- + +Financial success + +### --feedback-- + +`Performance` in this context is about the website's operational aspects, not its financial success. + +--- + +How well the website operates + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md new file mode 100644 index 00000000000..98e6bda774a --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md @@ -0,0 +1,54 @@ +--- +id: 657b19bf7b32af6caf763ef7 +title: Task 26 +challengeType: 19 +dashedName: task-26 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `collaborative effort` refers to a situation where people work together as a team to achieve a common goal. This kind of teamwork is essential in many work environments, especially on projects where different skills and perspectives are needed. + +# --question-- + +## --text-- + +What does `collaborative effort` imply in the context of Candidate2's statement? + +## --answers-- + +Working independently + +### --feedback-- + +`Collaborative effort` means working together as a team, not independently. + +--- + +Teamwork to achieve a goal + +--- + +Avoiding responsibility + +### --feedback-- + +`Collaborative effort` involves taking shared responsibility, not avoiding it. + +--- + +Focusing on individual skills + +### --feedback-- + +`Collaborative effort` emphasizes teamwork over individual skills. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md new file mode 100644 index 00000000000..56a621b07c6 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md @@ -0,0 +1,38 @@ +--- +id: 657b1a03df3ec46eca276046 +title: Task 27 +challengeType: 22 +dashedName: task-27 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. + +# --fillInTheBlank-- + +## --sentence-- + +`Yes, our team _ involved in a project to _ the company's website.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`redesign` + +### --feedback-- + +This word means to design something again in a different way. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md new file mode 100644 index 00000000000..66d49e9e89f --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md @@ -0,0 +1,55 @@ +--- +id: 657b1a27dc6daf6ffd52ff1f +title: Task 28 +challengeType: 19 +dashedName: task-28 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the noun suffixed with `'s` followed by a second noun structure is used to show possession or belonging. If the first noun is singular, as in `Sarah's laptop`, it indicates that the laptop belongs to Sarah. However, if the first noun is plural, the structure changes to noun suffixed with `'`, as in `teachers' office`, indicating an office for teachers. + +# --question-- + +## --text-- + +What does `master's degree` in the context of the dialogue refer to? + +## --answers-- + +A degree for school teachers + +### --feedback-- + +`Master's degree` refers to an advanced academic degree, not specifically for teachers. + +--- + +A primary level educational degree + +### --feedback-- + +`Master's degree` is a higher education qualification, beyond the primary level. + +--- + +A degree in mastering skills + +### --feedback-- + +While it implies expertise, `master's degree` specifically refers to an academic qualification. + +--- + +An advanced academic degree + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md new file mode 100644 index 00000000000..bf63c3e8d24 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md @@ -0,0 +1,49 @@ +--- +id: 657b1a637e4dc571f8f4d3d7 +title: Task 29 +challengeType: 19 +dashedName: task-29 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `appreciate` is often used to express gratitude or to acknowledge the value or importance of something or someone's actions. It's a way of showing that you recognize and are thankful for someone's help, effort, or achievement. + +# --question-- + +## --text-- + +In a work meeting, your colleague says, `I really appreciate your help on this project.` What is your colleague expressing? + +## --answers-- + +Dissatisfaction with your work + +### --feedback-- + +`Appreciate` means to be grateful or thankful, not to show dissatisfaction. + +--- + +Indifference to your contribution + +### --feedback-- + +`Appreciate` is used to express positive recognition, not indifference. + +--- + +Gratitude for your contribution + +--- + +A need for more assistance + +### --feedback-- + +`Appreciate` here indicates satisfaction with the help received, not a request for more assistance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md new file mode 100644 index 00000000000..4fa33c1c2d0 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md @@ -0,0 +1,47 @@ +--- +id: 657b1a9581015573806e1e20 +title: Task 30 +challengeType: 22 +dashedName: task-30 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words you learned. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for implementing new features and ensuring the website's performance. It _ a _ effort, and we were able to deliver the project on time.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense form of `are`, used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`collaborative` + +### --feedback-- + +This word means working together as a team. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md new file mode 100644 index 00000000000..6013cb50f86 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md @@ -0,0 +1,39 @@ +--- +id: 657b1cc072206e7ac3db88b8 +title: Task 31 +challengeType: 22 +dashedName: task-31 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the missing words correctly. This is a great way to practice what you've learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I have a _ degree in computer science. My studies _ quite intensive, and I was introduced to many different methodologies.` + +## --blanks-- + +`master's` + +### --feedback-- + +This term, using the `noun's noun` structure, refers to an advanced academic degree. + +--- + +`were` + +### --feedback-- + +This is the past tense form of `are` used for plural subjects or things. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md new file mode 100644 index 00000000000..1c7c7b4603c --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md @@ -0,0 +1,30 @@ +--- +id: 657b1d080265ba7c4f96bf79 +title: Task 32 +challengeType: 22 +dashedName: task-32 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task helps you review the word you learned. Listen to the dialogue and complete the sentence correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`Impressive! We _ candidates with strong educational backgrounds and practical experience.` + +## --blanks-- + +`appreciate` + +### --feedback-- + +This word means to recognize the value or importance of something or someone's actions. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md new file mode 100644 index 00000000000..28e4211c290 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md @@ -0,0 +1,15 @@ +--- +id: 657b1d4ec0e2587e8bcc95f7 +title: "Dialogue 3: Two Workmates Talk About Their Backgrounds" +challengeType: 21 +dashedName: dialogue-3-two-workmates-talk-about-their-backgrounds +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md new file mode 100644 index 00000000000..df8ebc66d25 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md @@ -0,0 +1,54 @@ +--- +id: 657b1da0b27fef8117827ce5 +title: Task 33 +challengeType: 19 +dashedName: task-33 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned about the simple past tense. Now, you can explore it further. The simple past tense is often formed by adding `-ed` to a verb. But, when a verb ends with an `e`, you just add a `d`. For example, `notice` becomes `noticed`. + +# --question-- + +## --text-- + +What does `noticed` in Sarah's sentence indicate? + +## --answers-- + +Sarah observed something in the past + +--- + +Sarah is planning to observe something + +### --feedback-- + +The simple past tense `noticed` indicates a completed action in the past, not a future plan. + +--- + +Sarah continuously observes something + +### --feedback-- + +The simple past tense `noticed` is used for actions that were completed, not ongoing actions. + +--- + +Sarah never observes anything + +### --feedback-- + +`Noticed` implies that Sarah did observe something, not never observing. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md new file mode 100644 index 00000000000..5a1ba6afbfc --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md @@ -0,0 +1,30 @@ +--- +id: 657b1dfec76149836ea5c7d0 +title: Task 34 +challengeType: 22 +dashedName: task-34 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you will focus on the past simple negative. It's created by adding `not` after the auxiliary verb `was` or `were`. For example, `was` becomes `wasn't` (`was not`) and `were` becomes `weren't` (`were not`). This form is used to describe something that did not happen in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`It _ exactly tech-related, but I learned a lot about problem-solving and critical thinking.` + +## --blanks-- + +`wasn't` + +### --feedback-- + +This word is used to make a negative statement in the past tense. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md new file mode 100644 index 00000000000..da30e71e20a --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md @@ -0,0 +1,49 @@ +--- +id: 657b1e2fad2ffe84ab420a56 +title: Task 35 +challengeType: 19 +dashedName: task-35 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You're already familiar with `wasn't` and `weren't` for past simple negative. Now, let's explore `didn't`, a contraction of `did not`. It's used with the base form of verbs (the infinitive without `to`) to express that an action did not happen in the past. For example, `didn't go` means the action of going did not occur. + +# --question-- + +## --text-- + +Imagine you are reading a story about a character who planned to attend a concert but couldn't. How would you describe this situation? + +## --answers-- + +The character enjoyed the concert + +### --feedback-- + +Using `didn't` suggests the character did not go to the concert, contradicting the idea of enjoying it. + +--- + +The character didn't attend the concert + +--- + +The character always goes to concerts + +### --feedback-- + +This expression refers to a regular habit, not a specific event in the past. + +--- + +The character is looking forward to the next concert + +### --feedback-- + +This option is about future anticipation. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md new file mode 100644 index 00000000000..938a8118ce2 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md @@ -0,0 +1,54 @@ +--- +id: 657b1e66159fec86336a737b +title: Task 36 +challengeType: 19 +dashedName: task-36 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned the basics of the simple past tense. Now you can dive deeper into it. Typically, the simple past tense is formed by adding `-ed` to regular verbs. For instance, the verb `play` becomes `played` in the simple past. This tense is used to describe actions that were completed at a specific time in the past. + +# --question-- + +## --text-- + +What does `I played` in Sophie's sentence suggest about her experience with coding? + +## --answers-- + +She casually experimented with coding in the past + +--- + +She is currently playing a coding game + +### --feedback-- + +`Played` is in the past tense, indicating a past action, not something happening currently. + +--- + +She plans to start coding soon + +### --feedback-- + +`Played` implies she already has some experience with coding, not that she is planning to start. + +--- + +She never tried coding + +### --feedback-- + +Using `played` confirms she did engage in coding, contradicting the idea of never trying it. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md new file mode 100644 index 00000000000..2bd70b3d732 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md @@ -0,0 +1,49 @@ +--- +id: 657b1e9a62603587747f7f45 +title: Task 37 +challengeType: 19 +dashedName: task-37 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In English, when forming questions in the simple past tense, you often use `did`. This is followed by the subject and the base form of the verb (without `ed`). For example, `Did you enjoy` is a past simple interrogative phrase where `did` is the auxiliary verb, `you` is the subject, and `enjoy` is the base form of the verb. + +# --question-- + +## --text-- + +What does a question like `Did you enjoy the concert last night?` ask about? + +## --answers-- + +Are you going to enjoy the concert? + +### --feedback-- + +This implies a future event. The question with `did` is asking about a past experience. + +--- + +Do you enjoy concerts in general? + +### --feedback-- + +This is asking about general preferences, not a specific past event. + +--- + +Did you have a good experience at the concert last night? + +--- + +Will you enjoy future concerts? + +### --feedback-- + +The question is about a past event, not future experiences. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md new file mode 100644 index 00000000000..430fa995037 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md @@ -0,0 +1,42 @@ +--- +id: 657b1ee1de7216896b5b4361 +title: Task 38 +challengeType: 22 +dashedName: task-38 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blank correctly. This task is a review. Remember, the simple past tense is used to talk about actions or situations in the past, and the negative form is used to describe things that did not happen. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: That's interesting! So, you _ work on many programming projects during your studies?` + +`Sophie: No, not really. I _ around with coding, but most of my projects involved circuit designs and electrical systems. It was a bit different.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used here to talk about something that was not done in the past. + +--- + +`played` + +### --feedback-- + +This word suggests that Sophie casually engaged in coding for pleasure or interest. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md new file mode 100644 index 00000000000..dfcc68a881a --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md @@ -0,0 +1,40 @@ +--- +id: 657b1f0585d48f8ac0b19654 +title: Task 39 +challengeType: 22 +dashedName: task-39 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you'll focus on answering questions in the simple past tense. When responding to a past simple interrogative (a question), you can answer affirmatively with `did` or negatively with `didn't`. For example, `Did you go to the party?` can be answered with `I did` (affirmative) or `I didn't` (negative). Listen to the dialogue and fill in the blanks correctly to practice this structure. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: I see. _ you enjoy your time there, even if it wasn't entirely tech-focused? Sophie: I _.` + +## --blanks-- + +`Did` + +### --feedback-- + +This word is used to form a past simple interrogative question. The first letter should be capitalized. + +--- + +`did` + +### --feedback-- + +This response is an affirmative answer to the past simple interrogative question. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md new file mode 100644 index 00000000000..92e4b28c489 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md @@ -0,0 +1,49 @@ +--- +id: 657b1f598f63008c8bdb20b8 +title: Task 40 +challengeType: 19 +dashedName: task-40 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the simple past tense, some verbs are irregular and don't follow the regular `-ed` ending pattern. One example of this is the verb `meet`, which becomes `met` in the past tense. This is important to remember when talking about past events. + +# --question-- + +## --text-- + +During a class reunion, an old friend tells you, `We met for the first time in art class.` What is your friend referring to with `met`? + +## --answers-- + +We are meeting right now in art class + +### --feedback-- + +The use of `met` indicates a past event, not something happening currently. + +--- + +Our first encounter was in the past, specifically in art class + +--- + +We will meet for the first time soon + +### --feedback-- + +`Met` indicates a past action, not a future arrangement. + +--- + +We have never been in art class together + +### --feedback-- + +`Met` suggests a past meeting. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md new file mode 100644 index 00000000000..e3cdc339c1f --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md @@ -0,0 +1,49 @@ +--- +id: 657b1f981cd42e8dc3b282d9 +title: Task 41 +challengeType: 19 +dashedName: task-41 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn another special case in this task. It's the past tense form of `have`. Unlike regular verbs that add `-ed` for the past tense, `have` becomes `had`. This irregular form is used for both singular and plural subjects in the past tense, making it a unique and important verb to remember. + +# --question-- + +## --text-- + +What does `had` imply in a sentence like `They had a meeting yesterday?` + +## --answers-- + +They possessed or experienced something in the past + +--- + +They are having a meeting right now + +### --feedback-- + +`Had` is used for past actions, indicating the meeting occurred in the past, not at the present moment. + +--- + +They will have a meeting tomorrow + +### --feedback-- + +`Had` indicates a past action, not a future plan. + +--- + +They never have meetings + +### --feedback-- + +Using `had` confirms that the meeting took place in the past. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md new file mode 100644 index 00000000000..9f86ab82bcb --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md @@ -0,0 +1,47 @@ +--- +id: 657b1fe950c0df90346e5d12 +title: Task 42 +challengeType: 22 +dashedName: task-42 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the words `met`, `had`, and `wasn't`. You have already learned these words. Listen to the dialogue and fill in the blanks with the correct words. This exercise is a good way to practice and reinforce your understanding of these words in context. + +# --fillInTheBlank-- + +## --sentence-- + +`I did. It was challenging, but I _ some fantastic people. We _ a bunch of fun coding marathons, although I _ always a very strong programmer.` + +## --blanks-- + +`met` + +### --feedback-- + +This word is used here to describe encountering people in the past. + +--- + +`had` + +### --feedback-- + +This word is used to express possession or experiences in the past. + +--- + +`wasn't` + +### --feedback-- + +This word is the negative form in the past tense, indicating something that was not the case. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md new file mode 100644 index 00000000000..2ee4e256d2a --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md @@ -0,0 +1,39 @@ +--- +id: 657b201372864e91d4f5bb53 +title: Task 43 +challengeType: 22 +dashedName: task-43 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +When a verb ends in a consonant followed by `y`, you should change the `y` to `i` and add `ed` for the past tense. For example, `carry` becomes `carried`. Note that this rule applies when the `y` follows a consonant, not a vowel, so the simple past form of `convey` is `conveyed`. For regular verbs, you simply add `ed` to form the past tense. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ at a small college as well and _ in information technology.` + +## --blanks-- + +`studied` + +### --feedback-- + +The past simple tense of `study` is formed by changing `y` to `i` and adding `ed`. + +--- + +`majored` + +### --feedback-- + +This word follows the regular past simple tense formation by just adding `ed`. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md new file mode 100644 index 00000000000..67255d1bac6 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md @@ -0,0 +1,26 @@ +--- +id: 657b20338e0802931673c1e1 +title: Task 44 +challengeType: 22 +dashedName: task-44 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + +# --description-- + +You've learned that for verbs ending in `e`, you simply add `d` to form the simple past tense. Choose the correct form of `love` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she really _ the beach vacation.` + +## --blanks-- + +`loved` + +### --feedback-- + +To form the simple past, add `d` to the base form of the verb, `love`. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md new file mode 100644 index 00000000000..4d89a2935c0 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md @@ -0,0 +1,54 @@ +--- +id: 657b20985d315095e5c3851d +title: Task 45 +challengeType: 19 +dashedName: task-45 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this context, `got` is a special case in the simple past tense. It's the past tense of `get`. Unlike regular verbs that typically add `-ed` for the past tense, `get` changes to `got`. + +# --question-- + +## --text-- + +In the context of Sarah's statement, what does `got` imply about her experience? + +## --answers-- + +She is getting the opportunity now + +### --feedback-- + +`Got` indicates a past opportunity, not something happening currently. + +--- + +She had the opportunity in the past + +--- + +She will get the opportunity in the future + +### --feedback-- + +`Got` refers to a past experience, not a future possibility. + +--- + +She never gets such opportunities + +### --feedback-- + +`Got` in this context suggests she did have this opportunity. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md new file mode 100644 index 00000000000..ac32d364daa --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md @@ -0,0 +1,50 @@ +--- +id: 657b21e28a01039cb27b4f13 +title: Task 46 +challengeType: 19 +dashedName: task-46 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `exactly` is used to emphasize the truth or accuracy of a statement or description. It can mean `precisely` or `just`. For example, if someone says, `It's exactly what I needed`, they mean that it is precisely or perfectly what was required. `Exactly` often highlights that something is correct in every detail. + +# --question-- + +## --text-- + +What does `exactly` imply in a sentence like `This is exactly the kind of work I enjoy`? + +## --answers-- + +This is somewhat similar to the work I enjoy + +### --feedback-- + +`Exactly` indicates a perfect match, not just a similarity. + +--- + +This is the opposite of the work I enjoy + +### --feedback-- + +`Exactly` implies a perfect match, not an opposite. + +--- + +I am not sure if this is the work I enjoy + +### --feedback-- + +Using `exactly` shows certainty, not uncertainty. + +--- + +This is precisely the type of work that I find enjoyable + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md new file mode 100644 index 00000000000..36c267c651b --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md @@ -0,0 +1,35 @@ +--- +id: 657b221b2ab0ac9e18a173ef +title: Task 47 +challengeType: 22 +dashedName: task-47 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Let's look at `exactly` and `exact`. You use `exactly` to show something is just right or very true. It is an adverb. For example, `You did it exactly right!`. + +`Exact` is an adjective, and it describes something very correct or precise, like in `the exact time`. + +# --fillInTheBlank-- + +## --sentence-- + +`She knew the _ time of the meeting. She arrived _ at 3 pm.` + +## --blanks-- + +`exact` + +### --feedback-- + +This word is an adjective, describing the noun `time`. + +--- + +`exactly` + +### --feedback-- + +This word is an adverb, showing that her arrival time was very precise. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md new file mode 100644 index 00000000000..82dcdea8fbb --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -0,0 +1,39 @@ +--- +id: 657b223e41ce6b9f9a01d214 +title: Task 48 +challengeType: 22 +dashedName: task-48 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You'll review the past simple negative in this task. It's formed using `was` or `were` with `not`, like `weren't` (`were not`) or `wasn't` (`was not`). It's used to talk about things that did not happen or were not true in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`They _ _ big projects.` + +## --blanks-- + +`weren't` + +### --feedback-- + +It's the negative form of `were` in the past tense, used to say something was not true or did not happen. + +--- + +`exactly` + +### --feedback-- + +This word is used to emphasize the statement, suggesting the projects were not precisely big. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md new file mode 100644 index 00000000000..06ce8ba3d76 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md @@ -0,0 +1,15 @@ +--- +id: 657b227f7ad32ea17e2cdf28 +title: "Dialogue 4: A Developer with a Different Background" +challengeType: 21 +dashedName: dialogue-4-a-developer-with-a-different-background +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md new file mode 100644 index 00000000000..abee49452c1 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md @@ -0,0 +1,56 @@ +--- +id: 657b2310b8cd52a4f15c1818 +title: Task 49 +challengeType: 19 +dashedName: task-49 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `unconventional` is used to describe something that's not based on or conforming to what is generally done or believed. It often implies a method or approach that is different from the norm. + +# --question-- + +## --text-- + +What does `unconventional` imply about Alice's background in tech? + +## --answers-- + +Her background is different from the usual way people get into tech + +--- + +Her background is exactly the same as most people in tech + +### --feedback-- + +`Unconventional` means not following the usual conventions, which contradicts being the same as most people. + +--- + +She doesn't have any background in tech + +### --feedback-- + +`Unconventional` suggests a different approach, not the absence of a background. + +--- + +She followed a very traditional path into tech + +### --feedback-- + +`Unconventional` indicates a non-traditional path, not a very traditional one. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md new file mode 100644 index 00000000000..47917952aff --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md @@ -0,0 +1,39 @@ +--- +id: 657b2340be1593a6517fe77b +title: Task 50 +challengeType: 22 +dashedName: task-50 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple negative, `did not` (contracted to `didn't`) is followed by the base form of a verb. This structure is used to express that an action did not happen in the past. In this dialogue, Alice is describing her educational background related to technology. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ _ tech at a traditional university.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used in the past simple negative to indicate that an action was not done. + +--- + +`study` + +### --feedback-- + +The base form of the verb is used after the contraction in negative past simple sentences. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md new file mode 100644 index 00000000000..e19667245f9 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md @@ -0,0 +1,54 @@ +--- +id: 657b236aa1eb9fa7b209aa03 +title: Task 51 +challengeType: 19 +dashedName: task-51 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `mostly` is used to indicate that something is true to a large extent but not completely. It suggests that while other factors or methods may be involved, the primary aspect is what is mentioned. + +# --question-- + +## --text-- + +In Alice's statement, what does `mostly` suggest about her way of learning? + +## --answers-- + +She only learned through formal education + +### --feedback-- + +`Mostly` implies a greater emphasis on self-teaching rather than exclusive formal education. + +--- + +She didn't learn anything on her own + +### --feedback-- + +The use of `mostly` indicates a significant amount of self-learning, not an absence of it. + +--- + +She learned equally through self-teaching and formal courses + +### --feedback-- + +`Mostly` suggests a greater emphasis on one method over an equal balance. + +--- + +Her learning was primarily through her own efforts, with some formal courses + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md new file mode 100644 index 00000000000..10f6121949b --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md @@ -0,0 +1,36 @@ +--- +id: 657b23a413d28da927e087ca +title: Task 52 +challengeType: 22 +dashedName: task-52 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +This task reviews how an adverb is often formed by adding `-ly` to an adjective. + + +# --fillInTheBlank-- + +## --sentence-- + +`She completed _ of her work before lunch. The office is _ quiet in the mornings.` + +## --blanks-- + +`most` + +### --feedback-- + +This word is used as an adjective to describe the quantity of work completed. + +--- + +`mostly` + +### --feedback-- + +This word is used as an adverb to describe the general state of the office. + + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md new file mode 100644 index 00000000000..8f0a554d33f --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md @@ -0,0 +1,50 @@ +--- +id: 657b23bc0e32f9aa9c62eb82 +title: Task 53 +challengeType: 19 +dashedName: task-53 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `self-taught` refers to acquiring knowledge or skills without direct teaching from a traditional teacher or educational institution. It involves learning independently. The word `taught` is the past participle of `teach`. When someone is `self-taught`, it means they have taught themselves. + +# --question-- + +## --text-- + +What does `self-taught` imply when someone says, `I am self-taught in programming`? + +## --answers-- + +They were taught programming by a professional teacher + +### --feedback-- + +`Self-taught` indicates learning independently, not being taught by a professional teacher. + +--- + +They have no knowledge of programming + +### --feedback-- + +`Self-taught` means they have acquired knowledge or skills, not that they lack them. + +--- + +They learned programming on their own, without formal education + +--- + +They are planning to learn programming in the future + +### --feedback-- + +`Self-taught` refers to learning that has already taken place, not future plans. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md new file mode 100644 index 00000000000..daa0ed7fa3b --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md @@ -0,0 +1,27 @@ +--- +id: 657b23f03b449aac2c517089 +title: Task 54 +challengeType: 22 +dashedName: task-54 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `took` is a special case in the simple past tense. It's the past tense of `take`. Unlike regular verbs that follow the standard `-ed` ending for the past tense, `take` changes to `took`. This irregular form is important to know because it's commonly used to talk about actions that happened in the past. Choose the correct past tense form of `take` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she _ a photography class.` + +## --blanks-- + +`took` + +### --feedback-- + +This word is the past tense form of `take`. It's used to talk about actions that happened in the past. + + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md new file mode 100644 index 00000000000..aa093ae629c --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md @@ -0,0 +1,49 @@ +--- +id: 657b242d06512dadaea55056 +title: Task 55 +challengeType: 19 +dashedName: task-55 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The verb `attend` means to be present at an event or place. It's often used regarding schools, colleges, meetings, or events. It implies regular participation or presence at a specific place or event. + +# --question-- + +## --text-- + +If a friend tells you, `I'm going to attend the new art workshop downtown`, what are they planning to do? + +## --answers-- + +They are planning to teach at the art workshop + +### --feedback-- + +`Attend` suggests participating as a learner or member, not as a teacher. + +--- + +They might visit the workshop once + +### --feedback-- + +`Attend` implies regular or scheduled participation, not a one-time visit. + +--- + +They are not interested in art workshops + +### --feedback-- + +Saying they will `attend` indicates interest and intent to participate, not a lack of interest. + +--- + +They plan to regularly participate in the art workshop + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md new file mode 100644 index 00000000000..4dd651ea958 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md @@ -0,0 +1,39 @@ +--- +id: 657b24542024c8af092cd6c4 +title: Task 56 +challengeType: 22 +dashedName: task-56 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple, negative sentences are formed using `did not`, contracted to `didn't`, followed by the base form of the main verb. Listen to the dialogue and fill in the blanks with these words. + +# --fillInTheBlank-- + +## --sentence-- + +`So, you _ _ a regular college or anything like that?` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used to form a negative statement in the past tense. + +--- + +`attend` + +### --feedback-- + +The word means being present at an event or place. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md new file mode 100644 index 00000000000..15b9abab580 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md @@ -0,0 +1,48 @@ +--- +id: 657b24774d8cdab052ffe2a6 +title: Task 57 +challengeType: 22 +dashedName: task-57 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and fill in the blanks correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ study tech at a traditional university. I'm _, and I _ a lot of online courses.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used to form a negative statement in the past tense. + +--- + +`self-taught` + +### --feedback-- + +This word describes acquiring knowledge or skills independently. + +--- + +`took` + +### --feedback-- + +This word is the past tense form of a verb meaning to have completed an action. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md new file mode 100644 index 00000000000..b7c7a773588 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md @@ -0,0 +1,40 @@ +--- +id: 657b24a500800cb1c6945da9 +title: Task 58 +challengeType: 22 +dashedName: task-58 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`No, not at all. I _ at a different job, but I got really interested in programming and tech, so I _ learning in my free time.` + +## --blanks-- + +`was` + +### --feedback-- + +Use `to be` in the past tense. + +--- + +`started` + +### --feedback-- + +Use the verb `start`in the past tense. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md new file mode 100644 index 00000000000..14bccd55f81 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md @@ -0,0 +1,41 @@ +--- +id: 657b2be1b19500c63fc1a467 +title: Task 59 +challengeType: 22 +dashedName: task-59 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`That's impressive! _ you _ learning on your own?` + +## --blanks-- + +`Did` + +### --feedback-- + +Auxiliary verb for questions. This word should be capitalized. + +--- + +`enjoy` + +### --feedback-- + +A verb used to describe you are having fun. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md new file mode 100644 index 00000000000..f55f7908a4f --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md @@ -0,0 +1,38 @@ +--- +id: 657b2c040bb5f6c77fa5df80 +title: Task 60 +challengeType: 22 +dashedName: task-60 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You'll be filling in blanks with words you're already familiar with. + +# --fillInTheBlank-- + +## --sentence-- + +`Absolutely. It _ challenging, but I _ it.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of the verb `to be`, used for singular subjects. + +--- + +`loved` + +### --feedback-- + +This is the past tense form of a verb expressing a strong liking or enjoyment. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md new file mode 100644 index 00000000000..dc14016d020 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md @@ -0,0 +1,38 @@ +--- +id: 657b2d618b8851cc5baf9490 +title: Task 61 +challengeType: 22 +dashedName: task-61 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Listen to the audio and complete the sentence. + + +# --fillInTheBlank-- + +Fill in the blank with correct words. + + +## --sentence-- + +`Yes, I did. I built a few small web applications, just to practice. It _ a great way to apply what I _.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `to be`, used here for a singular subject. + +--- + +`learned` + +### --feedback-- + +This is the past tense form of `learn`, indicating the acquisition of knowledge or skills in the past. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md new file mode 100644 index 00000000000..b2433b84777 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md @@ -0,0 +1,54 @@ +--- +id: 657b2d9cb974dace59024964 +title: Task 62 +challengeType: 19 +dashedName: task-62 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `got` in this context is a versatile term and can have several meanings. In its simplest form, it's the past tense of `get`, which can mean to receive, arrive, become, or reach, depending on the context. In Tom's statement, `got` refers to the progress or level Alice reached through self-study. + +# --question-- + +## --text-- + +What does `got` imply in Tom's statement about Alice's progress? + +## --answers-- + +She received something while studying + +### --feedback-- + +While `got` can mean receiving, in this context it refers to the extent or level of progress. + +--- + +She achieved or reached a significant level in her studies + +--- + +She needs to get more resources for studying + +### --feedback-- + +`Got` here refers to past progress, not a current need for more resources. + +--- + +She didn't make any progress in her studies + +### --feedback-- + +`Got` in this sentence clearly indicates significant progress, not a lack of it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md new file mode 100644 index 00000000000..3ea0498bbbe --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md @@ -0,0 +1,15 @@ +--- +id: 657b2dd7745fdcd03e5160f4 +title: "Dialogue 5: Anna Talks About her Experience" +challengeType: 21 +dashedName: dialogue-5-anna-talks-about-her-experience +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md new file mode 100644 index 00000000000..8a3ff270f80 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -0,0 +1,54 @@ +--- +id: 657b2e0666d4a9d1b851f90e +title: Task 63 +challengeType: 19 +dashedName: task-63 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `tech recruiter` refers to a professional role focused on recruiting candidates for technology-related positions. This role involves understanding the tech industry, identifying qualified candidates, and matching them with suitable tech job openings. + +# --question-- + +## --text-- + +What is Tom asking about when he mentions `Tech recruiter` in his question? + +## --answers-- + +The technical skills needed to be a recruiter + +### --feedback-- + +`Tech recruiter` here refers to the job role, not the specific skills required for the job. + +--- + +The technology used by recruiters + +### --feedback-- + +While technology is involved, `Tech recruiter` refers to the profession itself, not the tools used. + +--- + +The person's career path in becoming a technology recruitment specialist + +--- + +Recruiting people to learn technology + +### --feedback-- + +`Tech recruiter` is about hiring for tech roles, not recruiting people to learn technology. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md new file mode 100644 index 00000000000..340203d5990 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md @@ -0,0 +1,49 @@ +--- +id: 657b2ec6c054efd71e503a27 +title: Task 64 +challengeType: 19 +dashedName: task-64 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `actually` is often used to express a fact or reality, sometimes contrasting with what was thought, believed, or said before. It adds emphasis to a statement to clarify a truth or correct a previous assumption or statement. + +# --question-- + +## --text-- + +What does `actually` imply in a sentence like `I actually prefer working remotely`? + +## --answers-- + +The truth is contrary to what might have been assumed or stated before + +--- + +I never work remotely + +### --feedback-- + +`Actually` in this context is used to express a real preference. + +--- + +I always work in an office setting + +### --feedback-- + +Using `actually` here is meant to reveal a preference for remote work, not office work. + +--- + +I don't have any work preferences + +### --feedback-- + +`Actually` suggests a specific preference, contradicting the idea of having none. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md new file mode 100644 index 00000000000..51c4c579915 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md @@ -0,0 +1,33 @@ +--- +id: 657b2eeb31e435d89ecce6f3 +title: Task 65 +challengeType: 22 +dashedName: task-65 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn about `actual` in this task. It's a describing word (adjective). It means what something is really like. For example, `the actual color` means the real color. You often add `-ly` to an adjective to form an adverb. This rule helps change many describing words into words that tell people how something is said or done. Here, you add `-ly` to `actual` and it's the adverb `actually`. + +# --fillInTheBlank-- + +## --sentence-- + +`The _ size of the room was quite small. She _ likes small cozy spaces.` + +## --blanks-- + +`actual` + +### --feedback-- + +This word describes the real size of the room. + +--- + +`actually` + +### --feedback-- + +This word is used to say she really likes small spaces. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md new file mode 100644 index 00000000000..101e280ee29 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md @@ -0,0 +1,54 @@ +--- +id: 657b2f0b3bcfe7d9f4151854 +title: Task 66 +challengeType: 19 +dashedName: task-66 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The terms `therapist` and `counselor` refer to professionals who provide guidance and support to people dealing with emotional, psychological, or mental health issues. Both play a vital role in helping individuals work through personal challenges. In Anna's statement, these terms describe the career paths she was considering. + +# --question-- + +## --text-- + +In Anna's statement, what does `therapist or counselor` refer to? + +## --answers-- + +Jobs in the technology industry + +### --feedback-- + +`Therapist or counselor` refers to mental health and emotional support roles, not technology-related jobs. + +--- + +Career paths in mental health and emotional support + +--- + +Educational courses she wanted to take + +### --feedback-- + +While these roles require education, the terms directly refer to the job roles, not the courses. + +--- + +Hobbies that she was interested in + +### --feedback-- + +`Therapist or counselor` are professional career paths, not hobbies. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md new file mode 100644 index 00000000000..40c9c66ce5e --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md @@ -0,0 +1,49 @@ +--- +id: 657b2f3bf7a2cbdb58d959d5 +title: Task 67 +challengeType: 19 +dashedName: task-67 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `last` is used to refer to the most recent past occurrence of a period or event. For example, `last year` means the year before this one, `last month` refers to the month before the current one, and `last week` points to the week before this week. Understanding time expressions like `last year`, `last month`, `last week`, or `last day` helps in talking about events that happened in the recent past. + +# --question-- + +## --text-- + +When someone mentions in a discussion about changes, `I switched careers last year.` What does `last year` indicate about the timing of their career change? + +## --answers-- + +They are planning to switch careers in the near future + +### --feedback-- + +This suggests a future action, but `last year` indicates the change already occurred in the past. + +--- + +They have been considering a career change for a long time + +### --feedback-- + +Though they might have considered it for a long time, `last year` specifically identifies when the change took place. + +--- + +The career change is happening currently + +### --feedback-- + +`Last year` refers to a completed action in the past, not something happening in the present. + +--- + +The career switch happened in the previous year + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md new file mode 100644 index 00000000000..796bb1e6c39 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md @@ -0,0 +1,49 @@ +--- +id: 657b2f6cb66826dcbac08094 +title: Task 68 +challengeType: 19 +dashedName: task-68 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Organizational psychology` is a field of psychology that studies how people interact within groups, particularly in workplace settings. It focuses on understanding workplace dynamics, employee behavior, and organizational structure to improve the work environment and increase productivity. + +# --question-- + +## --text-- + +What does `organizational psychology` typically involve? + +## --answers-- + +It deals with organizing office spaces + +### --feedback-- + +While organization is a part of the field, `organizational psychology` primarily focuses on people and behavior, not physical space. + +--- + +It's about the psychology of organizing events + +### --feedback-- + +`Organizational psychology` is not specifically about event planning but rather about behavior in workplace groups. + +--- + +It's the study of how people behave and interact in workplace groups + +--- + +It focuses on individual psychological treatment + +### --feedback-- + +`Organizational psychology` looks at group dynamics in workplaces, not individual therapy. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md new file mode 100644 index 00000000000..e185bc5a457 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md @@ -0,0 +1,38 @@ +--- +id: 657b2fa89ddc20de629ca21f +title: Task 69 +challengeType: 22 +dashedName: task-69 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will fill in the blanks with words you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ studied psychology in college. My plan was to become a _ or counselor.` + +## --blanks-- + +`actually` + +### --feedback-- + +This word is used to emphasize the accuracy or truth of a statement. + +--- + +`therapist` + +### --feedback-- + +This word refers to a professional role focused on mental health and emotional support. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md new file mode 100644 index 00000000000..ecc1ceb6792 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md @@ -0,0 +1,46 @@ +--- +id: 657b2fc9c0f96bdfddfce4d9 +title: Task 70 +challengeType: 22 +dashedName: task-70 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this exercise, you will explore the phrase `pique one's interest`. This phrase means to stimulate or arouse someone's curiosity or interest in something. It's often used when something catches your attention and makes you want to learn more about it. Alongside this phrase, you will fill in the blanks with familiar words that you've already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ a course in organizational _, and it _ my interest in the workplace and employee dynamics.` + +## --blanks-- + +`took` + +### --feedback-- + +This word refers to the action of participating in or completing a course. + +--- + +`psychology` + +### --feedback-- + +This word describes the study of the mind and behavior, particularly in a workplace setting in this context. + +--- + +`piqued` + +### --feedback-- + +This word means to arouse or stimulate interest or curiosity. You should correctly use its simple past tense. diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md new file mode 100644 index 00000000000..acc29551124 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md @@ -0,0 +1,49 @@ +--- +id: 657b2fea728c2be14a8a98c4 +title: Task 71 +challengeType: 19 +dashedName: task-71 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Employee dynamics` refers to the way employees interact and work together in a workplace. It's an example of using one noun (`employee`) to describe another noun (`dynamics`). This type of descriptive noun helps give more specific information about the subject. Other examples include `race car`, where `race` describes the type of car, and `garden hose`, where `garden` describes the type of hose. + +# --question-- + +## --text-- + +What does `employee dynamics` refer to in a workplace context? + +## --answers-- + +The dynamics of machines used by employees + +### --feedback-- + +`Employee dynamics` specifically refers to interactions and relationships among employees, not machinery. + +--- + +The interactions and relationships among employees + +--- + +The employment status of workers + +### --feedback-- + +`Employee dynamics` is about how employees work together, not their employment status. + +--- + +The dynamics of hiring new employees + +### --feedback-- + +`Employee dynamics` refers to existing employee interactions, not the hiring process. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md new file mode 100644 index 00000000000..bcbb031c907 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md @@ -0,0 +1,54 @@ +--- +id: 657b3026ff79fbe2dda6cb39 +title: Task 72 +challengeType: 19 +dashedName: task-72 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `That's a cool twist` is often used to express that something is interestingly unexpected or surprisingly different. The word `twist` here refers to a change or development in a situation or story that is unusual or unexpected. `Cool` in this context means it's positively received. + +# --question-- + +## --text-- + +What is Tom expressing when he says `That's a cool twist`? + +## --answers-- + +He finds the unexpected change or development interesting + +--- + +He thinks the situation is confusing + +### --feedback-- + +While a `twist` can be surprising, Tom's use of `cool` suggests he finds it interesting rather than confusing. + +--- + +He is unhappy with the new development + +### --feedback-- + +`Cool twist` usually indicates a positive reaction, not dissatisfaction. + +--- + +He expected the development all along + +### --feedback-- + +The term `twist` implies that the development was unexpected. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md new file mode 100644 index 00000000000..6a30241c1a2 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md @@ -0,0 +1,55 @@ +--- +id: 657b306fe94f29e4b4aa9105 +title: Task 73 +challengeType: 19 +dashedName: task-73 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `not right away` is used to indicate that something didn't happen immediately or at the earliest opportunity. It suggests that there was a delay or a period before the action or change took place. This phrase helps to set the timeline of events or actions. + +# --question-- + +## --text-- + +What does Anna mean when she says `not right away`? + +## --answers-- + +She immediately started working in HR at a tech company + +### --feedback-- + +`Not right away` indicates a delay or period before taking action, not immediate action. + +--- + +She started working in a different role before moving to HR at a tech company + +--- + +She has never worked in HR + +### --feedback-- + +The statement implies she did work in HR, just not immediately. + +--- + +She was always focused on training and development + +### --feedback-- + +`Not right away` suggests a progression or change over time, not a constant focus. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md new file mode 100644 index 00000000000..b21bdf5b3e6 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md @@ -0,0 +1,49 @@ +--- +id: 657b30ac03b523e6640deaf1 +title: Task 74 +challengeType: 22 +dashedName: task-74 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will practice filling in the blanks with words that you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`Tom: That's a cool _. _ you immediately start working as a tech recruiter after college? Anna: Not right away. I _ in a general HR role at a non-tech company first, focusing on training and development.` + + +## --blanks-- + +`twist` + +### --feedback-- + +It refers to an interesting or unexpected change in a situation. + +--- + +`Did` + +### --feedback-- + +The auxiliary verb used to form a question in the past simple tense. The first letter should be capitalized. + +--- + +`worked` + +### --feedback-- + +Past tense form of `work`, indicating an action completed in the past. + diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md new file mode 100644 index 00000000000..f843ccf34aa --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md @@ -0,0 +1,54 @@ +--- +id: 657b30e1b9f035e7e656fd01 +title: Task 75 +challengeType: 19 +dashedName: task-75 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `employee` is someone who works for a company or a person. When you talk about `employees' well-being`, you are talking about the health and happiness of all the people who work there. The `'s` after `employees` means that the well-being belongs to the employees. It's like `the cat's toy` (one cat) and `the cats' toy` (more than one cat). + +# --question-- + +## --text-- + +What does Anna mean by saying `employees' well-being.` + +## --answers-- + +It's about the health of the company + +### --feedback-- + +`Employees'` means the people who work, not the company. + +--- + +One worker's health and happiness + +### --feedback-- + +`Employees'` with an `'s` shows it's about all workers, not just one. + +--- + +Where the employees work + +### --feedback-- + +`Well-being` is about health and happiness, not a place. + +--- + +The health and happiness of all the workers + +## --video-solution-- + +4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md new file mode 100644 index 00000000000..8e17e595d98 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md @@ -0,0 +1,54 @@ +--- +id: 657b315533e4edeba65111b8 +title: Task 76 +challengeType: 19 +dashedName: task-76 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +A `psychologist` is a professional who studies the human mind and behavior. They often help people understand and manage their emotions, behaviors, and mental processes. In Anna's statement, she refers to becoming a psychologist, indicating her professional choice related to studying and working with psychology. + +# --question-- + +## --text-- + +What does `psychologist` mean in Anna's statement? + +## --answers-- + +It means someone who studies physics + +### --feedback-- + +`Psychologist` refers to a person who studies the mind and behavior, not physics. + +--- + +It's a type of medical doctor + +### --feedback-- + +While related to health, a psychologist is different from a medical doctor and focuses on mental processes. + +--- + +A professional who studies and works with the human mind and behavior + +--- + +A teacher at a school + +### --feedback-- + +A psychologist may teach, but their primary role is studying and working with the mind and behavior, not general teaching. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md new file mode 100644 index 00000000000..40eee7185d9 --- /dev/null +++ b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md @@ -0,0 +1,15 @@ +--- +id: 657b46c9be150f577f5a1086 +title: "Dialogue 2: Another Job Interview" +challengeType: 21 +dashedName: dialogue-2-another-job-interview +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md deleted file mode 100644 index 0a0f3472141..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0feadb1dd77f6cda623f -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md deleted file mode 100644 index e1563f9b06b..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0f39ee87517d584d81f9 -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md deleted file mode 100644 index 7aa1e30008d..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5a46ffb500e3f2ce47b -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -*** - -Giving a job description. - -*** - -Making a statement based on her assumption. - -*** - -Expressing a possibility. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md deleted file mode 100644 index 2ee50fe5647..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5e46ffb500e3f2ce47e -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md b/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md deleted file mode 100644 index adc4b41f091..00000000000 --- a/curriculum/challenges/chinese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd6071d697d0aab7833b6 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md deleted file mode 100644 index 9aa55d3cfb9..00000000000 --- a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: bd7158d8c242eddfaeb5bd13 -title: Construye una página portafolio personal -challengeType: 14 -forumTopicId: 301143 -dashedName: build-a-personal-portfolio-webpage ---- - -# --description-- - -**Objetivo:** Crea una aplicación que sea funcionalmente similar a https://personal-portfolio.freecodecamp.rocks - -**Historias de Usuario:** - -1. Tu portafolio debe tener una sección de bienvenida con un `id` de `welcome-section` -1. La sección de bienvenida debe tener un elemento `h1` que contenga texto -1. Tu portafolio debe tener una sección de proyectos con un `id` de `projects` -1. La sección de proyectos debe tener al menos un elemento con una `class` llamada `project-tile` para mantener el proyecto -1. La sección de proyectos debe contener al menos un enlace que redirija a un proyecto -1. Tu portafolio debe tener una barra de navegación con un id de `navbar` -1. La barra de navegación debe contener al menos un enlace en donde puedas hacer clic para navegar a diferentes secciones de la página -1. Tu portafolio debe tener un enlace con un id de `profile-link`, el cual abre tu GitHub o el perfil de freeCodeCamp en una pestaña nueva -1. Tu portafolio debe tener al menos una consulta de medios -1. La altura de la sección de bienvenida debe ser igual al viewport -1. La barra de navegación debe siempre estar en la parte superior del viewport - -Completa las historias de usuario y pase todas las pruebas que están a continuación para completar este proyecto. Dale tu propio estilo personal. ¡Feliz día programando! - -**Nota:** Asegúrate de agregar `` en tu HTML para enlazar tu hoja de estilos y aplicar tu CSS - -# --hints-- - -Tu portafolio debe tener una sección "Bienvenida" con un `id` de `welcome-section`. - -```js -const el = document.getElementById('welcome-section') -assert(!!el); -``` - -Tu elemento `#welcome-section` debe contener un elemento `h1`. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1').length, - 0, - 'Welcome section should contain an h1 element ' -); -``` - -No debes tener ningún elemento `h1` vacío dentro del elemento `#welcome-section`. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, - 0, - 'h1 element in welcome section should contain your name or camper ' + - 'name ' -); -``` - -Debes tener una sección "Proyectos" con un `id` de `projects`. - -```js -const el = document.getElementById('projects') -assert(!!el); -``` - -Tu portafolio debe contener al menos un elemento con una clase de `project-tile`. - -```js -assert.isAbove( - document.querySelectorAll('#projects .project-tile').length, - 0 -); -``` - -Tu elemento `#projects` debe contener al menos un elemento `a`. - -```js -assert.isAbove(document.querySelectorAll('#projects a').length, 0); -``` - -Tu portafolio debe tener una barra de navegación con un `id` de `navbar`. - -```js -const el = document.getElementById('navbar'); -assert(!!el); -``` - -Tu elemento `#navbar` debe contener al menos un elemento `a` cuyo atributo `href` comience con `#`. - -```js -const links = [...document.querySelectorAll('#navbar a')].filter( - (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#' -); - -assert.isAbove( - links.length, - 0, - 'Navbar should contain an anchor link ' -); -``` - -Tu portafolio debe tener un elemento `a` con un `id` de `profile-link`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.tagName === 'A') -``` - -Tu elemento `#profile-link` debe tener un atributo `target` de `_blank`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.target === '_blank') -``` - -Tu portafolio debe usar al menos una consulta de medios. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -Tu elemento `#navbar` debe estar siempre en la parte superior del viewport. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const navbar = document.getElementById('navbar'); - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - "Navbar's parent should be body and it should be at the top of " + - 'the viewport ' - ); - - window.scroll(0, 500); - - await timeout(1); - - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - 'Navbar should be at the top of the viewport even after ' + - 'scrolling ' - ); - window.scroll(0, 0); -})(); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Personal Portfolio - - - - - -
                                                            -
                                                            -
                                                            -

                                                            It's me!

                                                            - -

                                                            Naomi Carrigan

                                                            -

                                                            Welcome to my portfolio page!

                                                            -
                                                            -
                                                            -

                                                            Projects

                                                            -

                                                            Here's what I've worked on!

                                                            -

                                                            - - - - -

                                                            -
                                                            -

                                                            Contact me!

                                                            -

                                                            Use the links below to get in touch.

                                                            -

                                                            FreeCodeCamp.org | GitHub | Facebook | LinkedIn -

                                                            - - - -``` - -```css -nav{ - position: fixed; - width: 100%; - text-align: right; - font-size: 24pt; - top: 0%; - right: 5px; - background-color: #000000; - color: #ffffff; -} -@media (max-width: 500px){ - nav{ - display: none; - } -} -a{ - color: #ffffff; -} -main{ - text-align: center; - background-color: black; - font-family:Pacifico -} -h1{ - font-size: 48pt; -} -h2{ - font-size: 24pt; -} -p{ - font-size: 12pt; -} -#welcome-section{ - background-color:#251a4a; - color: #FFFFFF; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#projects{ - background-color: #060a9c; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#contact{ - background-color: #03300b; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -``` diff --git a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md deleted file mode 100644 index 62d82a53a24..00000000000 --- a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: Construye una página de inicio de producto -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**Objetivo:** Crea una aplicación que su funcionamiento sea similar a https://product-landing-page.freecodecamp.rocks - -**Historias de usuario:** - -1. Tu página de inicio del producto debe tener un elemento `header` con el correspondiente `id="header"` -1. Puedes ver una imagen dentro del elemento `header` con el correspondiente `id="header-img"` (Un logotipo sería una buena imagen aquí) -1. Dentro del elemento `#header` puedes ver un elemento `nav` con el correspondiente `id="nav-bar"` -1. Puedes ver al menos tres elementos que se puede hacer clic dentro del elemento `nav`, cada uno con la clase `nav-link` -1. Cuando haces clic en un botón `.nav-link` en el elemento `nav` se te llevará a la sección correspondiente de la página de inicio -1. Puedes ver un vídeo de producto incrustado con `id="video"` -1. Tu página de inicio tiene un elemento `form` con un `id="form"` correspondiente -1. Dentro del formulario, hay un campo `input` con `id="email"`, donde puedes ingresar tu correo electrónico -1. El campo de entrada `#email` debe tener un marcador de texto para que los usuarios sepan para qué sirve este campo -1. El campo de entrada `#email` usa validación HTML5 para confirmar que el texto ingresado sea una dirección de email -1. Dentro del formulario, hay un `input` de tipo submit (enviar) con su correspondiente `id="submit"` -1. Cuando haces clic en el elemento `#submit`, el email es enviado a una página web (Utiliza esta URL de pruebas: `https://www.freecodecamp.com/email-submit`) -1. La barra de navegación siempre debe estar en la parte superior del viewport -1. Tu página de inicio de producto debe tener al menos una consulta de medios -1. Tu página de inicio de producto debe utillizar el flexbox CSS al menos una vez - -Completa las historias de usuario y pasa todas las pruebas a continuación para completar este proyecto. Dale tu propio estilo personal. ¡Feliz día programando! - -**Nota:** Asegúrate de agregar `` en tu HTML para enlazar tu hoja de estilos y aplicar tu CSS - -# --hints-- - -Debes tener un elemento `header` con un `id` de `header`. - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -Debes tener un elemento `img` con un `id` de `header-img`. - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -Tu `#header-img` debe ser descendiente de `#header`. - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -Tu `#header-img` debe tener un atributo `src`. - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -El valor de `src` de `#header-img` debe ser una URL válida(inicia con `http`). - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -Debes tener un elemento `nav` con un `id` de `nav-bar`. - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -Tu `#nav-bar` debe ser descendiente de `#header`. - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -Debes tener al menos 3 elementos `.nav-link` dentro del `#nav-bar`. - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -Cada elemento `.nav-link` debe tener un atributo `href`. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -Cada elemento `.nav-link` debe estar enlazado a su elemento correspondiente en la página de inicio (el valor que tiene el `href` es el id de otro elemento, por ejemplo, `#footer`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -Debes tener un elemento `video` o `iframe` con un `id` de `video`. - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -Tu `#video` debe tener un atributo `src`. - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -Debes tener un elemento `form` con un `id` de `form`. - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -Debes tener un elemento `input` con un `id` de `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Tu `#email` debe ser descendiente de `#form`. - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -Tu `#email` debe tener el atributo `placeholder` con un texto marcador de posición. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Tu `#email` debe usar la validación HTML5 estableciendo su `type` a `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -Debes tener un elemento `input` con un `id` de `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -Tu `#submit` debe ser descendiente de `#form`. - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -Tu `#submit` debe tener un `type` de `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Tu `#form` debe tener un atributo `action` de `https://www.freecodecamp.com/email-submit`. - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -Tu `#email` debe tener un atributo `name` de `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -Tu `#nav-bar` siempre debe estar en la parte superior del viewport. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const header = document.getElementById('header'); - const headerChildren = header.children; - const navbarCandidates = [header, ...headerChildren]; - - // Return smallest top position of all navbar candidates - const getNavbarPosition = (candidates = []) => { - return candidates.reduce( - (min, candidate) => - Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)), - Infinity - ); - }; - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the viewport ' - ); - - window.scroll(0, 500); - await timeout(1); - - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the ' + - 'viewport even after scrolling ' - ); - - window.scroll(0, 0); -})(); -``` - -Tu página de inicio de producto debe usar por lo menos una consulta de medios. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -Tu página de inicio de producto debe usar CSS Flexbox por lo menos una vez. - -```js -const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display) -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media') -const usesFlex = cssRules.find(rule => hasFlex(rule)) -const usesFlexMedia = mediaRules.find(mediaRule => { - return [...mediaRule.cssRules].find(rule => hasFlex(rule)) -}) -assert(usesFlex || usesFlexMedia) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Product Landing Page - - - -
                                                            -

                                                            - Pokemon Daycare Service -

                                                            -
                                                            -

                                                            What we offer

                                                            -
                                                            -
                                                            - -
                                                            -
                                                            Guaranteed friendly and loving staff!
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - Comfortable environment for Pokemon to explore and play! -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - Multiple membership plans to fit your lifestyle! -
                                                            -
                                                            -
                                                            -
                                                            -

                                                            Check us out!

                                                            - A sneak peek into our facility: -
                                                            - -
                                                            -
                                                            -

                                                            Membership Plans

                                                            -
                                                            -
                                                            - Basic Membership
                                                            -
                                                              -
                                                            • One Pokemon
                                                              • -
                                                            • Food and berries provided
                                                              • -
                                                            - $9.99/month -
                                                            -
                                                            - Silver Membership
                                                            -
                                                              -
                                                            • Up to Three Pokemon
                                                              • -
                                                            • Food and berries provided
                                                              • -
                                                            • Grooming and accessories included
                                                              • -
                                                            - $19.99/month -
                                                            -
                                                            - Gold Membership
                                                            -
                                                              -
                                                            • Up to six Pokemon!
                                                              • -
                                                            • Food and berries provided
                                                              • -
                                                            • Grooming and accessories included
                                                              • -
                                                            • Personal training for each Pokemon
                                                              • -
                                                            • Breeding and egg hatching
                                                              • -
                                                            - $29.99/month -
                                                            -
                                                            -
                                                            -
                                                            -

                                                            Sign up for our newsletter!

                                                            - - -
                                                            - -
                                                            - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md deleted file mode 100644 index e100a6b17b7..00000000000 --- a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: Crea un formulario de encuesta -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**Objetivo:** Crea una aplicación que sea funcionalmente similar a https://survey-form.freecodecamp.rocks - -**Historias de usuario:** - -1. Debes tener un título de página en un elemento `h1` con un `id` de `title` -1. Debes tener una pequeña explicación en un elemento `p` con un `id` de `description` -1. Debes tener un elemento `form` con un `id` de `survey-form` -1. Dentro del elemento form, debes ser **obligatorio** (required) ingresar tu nombre en un campo de `input` que tenga un `id` de `name` y un `type` de `text` -1. Dentro del elemento form debe ser **obligatorio** (required) ingresar tu nombre en un campo de `input` que tenga un `id` de `email` -1. Si introduces un correo electrónico que no tiene el formato correcto, tú debes ver una alerta de validación en THML5 -1. Dentro de tu form, tu puedes introducir un número en un campo `input` que tenga un `id` de `number` -1. Las entradas de números no deben aceptar caracteres no numéricos, ya sea impidiendo escribirlos o mostrando un error de validación HTML5 (dependiendo del navegador). -1. Si introduces un número fuera del rango de la entrada de números, los cuales están definidos por los atributos `min` y `max`, debes ver una alerta de validación en HTML5 -1. Para los campos de entrada de nombre, correo electrónico y número, podrás ver los correspondientes elementos `label` en el formulario, que describen el propósito de cada campo con los siguientes ids: `id="name-label"`, `id="email-label"`, y `id="number-label"` -1. Para los campos de entrada de nombre, correo electrónico y número, podrás ver un texto provisional que da una descripción o instrucciones para cada campo -1. Dentro del elemento de formulario, debes tener un elemento desplegable `select` con un `id` de `dropdown` con al menos dos opciones para elegir -1. Dentro del elemento de formulario, puedes seleccionar una opción de un grupo de al menos dos botones de radio que son agrupados utilizando el atributo `name` -1. Dentro del elemento de formulario, puedes seleccionar varios campos en una serie de casillas de verificación, cada una debe tener un atributo `value` -1. Dentro del elemento de formulario, se te presenta un `textarea` para comentarios adicionales -1. Dentro del elemento form, se te presenta un botón con un `id` de `submit` para enviar todas las entradas - -Completa las historias de usuario y pasa todas las pruebas a continuación para completar este proyecto. Dale tu propio estilo personal. ¡Que tengas una feliz programación! - -**Nota:** Asegúrate de agregar `` en tu HTML para enlazar tu hoja de estilos y aplicar tu CSS - -# --hints-- - -Debes tener un elemento `h1` con un `id` de `title`. - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -Tu `#title` no debe estar vacío. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -Debes tener un elemento `p` con un `id` de `description`. - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -Tu `#description` no debe estar vacío. - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -Debes tener un elemento `form` con un `id` de `survey-form`. - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -Debes tener un elemento `input` con un `id` de `name`. - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -Tu `#name` debe tener un `type` de `text`. - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -Tu `#name` debe requerir una entrada. - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -Tu `#name` debe ser descendiente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -Debes tener un elemento `input` con un `id` de `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Tu `#email` debe tener un `type` de `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -Tu `#email` debe requerir una entrada. - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -Tu `#email` debe ser descendiente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -Debes tener un elemento `input` con un `id` de `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -Tu `#number` debe ser descendiente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -Tu `#number` debe tener un `type` de `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -Tu `#number` debe tener un atributo `min` con un valor numérico. - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -Tu `#number` debe tener un atributo `max` con un valor numérico. - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -Deber tener un elemento `label` con un `id` de `name-label`. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Debes tener un elemento `label` con un `id` de `email-label`. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Debes tener un elemento `label` con un `id` de `number-label`. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Tu `#name-label` debe contener texto que describa la entrada. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -Tu `#email-label` debe contener texto que describa la entrada. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -Tu `#number-label` debe contener texto que describa la entrada. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -Tu `#name-label` debe ser descendiente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -Tu `#email-label` debe ser descendiente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -Tu `#number-label` debe ser descendiente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -Tu `#name` deber tener un atributo `placeholder` y un valor. - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Tu `#email` debe tener un atributo `placeholder` y un valor. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Tu `#number` debe tener un atributo `placeholder` y un valor. - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Debes tener un campo `select` con un `id` de `dropdown`. - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -Tu `#dropdown` debe tener al menos dos elementos seleccionables (no deshabilitados)`option`. - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -Tu `#dropdown` debe ser descendiente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -Deber tener al menos dos elementos `input` con un `type` de `radio` (botones de radio). - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -Debe tener al menos dos botones de radio que sean descendientes de `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -Todos los botones de radio deben tener un atributo `value` y un valor. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -Todos los botones de radio deben tener un atributo `name` y un valor. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -Cada grupo de botones de radio deben tener al menos 2 botones de radio. - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -Debes tener al menos dos elementos `input` con un `type` de `checkbox` (casilla de verificación) que sean descendientes de `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -Todos tus casillas de verificación dentro de `#survey-form` deben tener un atributo `value` y un valor. - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -Debes tener al menos un elemento de `textarea` que sea descendiente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -Debes tener un elemento `input` o `button` con un `id` de `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -Tu `#submit` debe tener un `type` de `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Tu `#submit` debe ser descendiente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Survey Form - - -

                                                            Survey Form

                                                            -

                                                            The card below was built as a sample survey form for freeCodeCamp.

                                                            -
                                                            -

                                                            Join the Togepi Fan Club!

                                                            -

                                                            - Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -

                                                            -
                                                            - - - - -

                                                            Who is your favourite Pokemon?

                                                            - - - -

                                                            Which communications do you want to receive?

                                                            - - - -

                                                            Any other information you would like to share?

                                                            - -

                                                            - Please note: This form is a proof of concept. Submitting the form - will not actually transmit your data. -

                                                            - -
                                                            -
                                                            - - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md deleted file mode 100644 index 83a96e8d2e3..00000000000 --- a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: Construye una página de documentación técnica -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**Objetivo:** Crea una aplicación que funcione similar a https://technical-documentation-page.freecodecamp.rocks - -**Historias de usuario:** - -1. Puedes ver un elemento `main` con un `id="main-doc"` correspondiente, que contiene el contenido principal de la página (documentación técnica) -1. Dentro del elemento `#main-doc`, puedes ver varios elementos de `section`, cada uno con una clase de `main-section`. Debe haber un mínimo de cinco -1. El primer elemento dentro de cada `.main-section` debe ser un elemento `header`, que contiene texto que describe el tema de esa sección. -1. Cada elemento `section` con la clase de `main-section` también debe tener un `id` que corresponda con el texto de cada `header` contenido en él. Cualquier espacio debe ser reemplazado por guiones bajos (p.ej. La sección que contiene el encabezado "JavaScript y Java" debe tener un `id="JavaScript_and_Java"`) correspondiente -1. Los elementos `.main-section` deben contener al menos diez elementos `p` en total (no cada uno) -1. Los elementos `.main-section` deben contener al menos cinco elementos `code` en total (no cada uno) -1. Los elementos `.main-section` deben contener al menos cinco elementos `li` en total (no cada uno) -1. Puedes ver un elemento `nav` con un correspondiente `id="navbar"` -1. El elemento de la barra de navegación debe contener un elemento de `header` que contiene texto que describe el tema de la documentación técnica -1. Además, la barra de navegación debe contener elementos de enlace (`a`) con la clase de `nav-link`. Debe haber uno para cada elemento con la clase `main-section` -1. El elemento `header` en la `#navbar` debe venir antes de cualquier enlace (`a`) en la barra de navegación -1. Cada elemento con la clase de `nav-link` debe contener texto que corresponda al texto `header` dentro de cada `section` (p.ej. Si tienes una sección/encabezado "Hola mundo", tu barra de navegación debe tener un elemento que contenga el texto "Hola mundo") -1. Al hacer clic en un elemento de tu barra de navegación, la página debe dirigirse a la sección correspondiente del elemento `#main-doc` (Ejemplo: Si haces clic en el elemento `.nav-link` que contiene el texto "Hello world", la página debe dirigirse al elemento `section` que tenga ese id y contenga el header correspondiente) -1. En dispositivos de tamaño normal (portátiles, escritorios), el elemento con `id="navbar"` debe mostrarse en el lado izquierdo de la pantalla y siempre debe ser visible para el usuario -1. Tu documentación técnica debe usar al menos una consulta de medios - -Completa las historias de usuario y pasa todas las pruebas a continuación para completar este proyecto. Dale tu propio estilo personal. ¡Feliz día programando! - -**Nota:** Asegúrate de agregar `` en tu HTML para enlazar tu hoja de estilos y aplicar tu CSS - -# --hints-- - -Debes tener un elemento `main` con un `id` de `main-doc`. - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -Debes tener al menos cinco elementos `section` con la clase `main-section`. - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -Todos tus elementos `.main-section` deben ser elementos `section`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -Debes tener al menos cinco elementos `.main-section` que sean descendientes de `#main-doc`. - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -El primer hijo de cada `.main-section` debe ser un elemento `header`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -Ninguno de tus elementos `header` debe estar vacío. - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -Todos tus elementos `.main-section` deben tener un `id`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -Cada `.main-section` debe tener un `id` que coincida con el texto de su primer hijo, reemplazando los espacios en el texto del hijo con guiones bajos (`_`) para los id. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -Debes tener al menos 10 elementos (en total) `p` dentro de tus elementos `.main-section`. - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -Debes tener al menos cinco elementos `code` que sean descendientes de los elementos `.main-section`. - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -Debes tener al menos cinco elementos `li` que sean descendientes de los elementos `.main-section`. - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -Debes tener un elemento `nav` con un `id` de `navbar`. - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -Tu `#navbar` debe tener exactamente un elemento `header` dentro de él. - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -Debes tener al menos un elemento `a` con la clase `nav-link`. - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -Todos tus elementos `.nav-link` deben ser elementos ancla (`a`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -Todos tus elementos `.nav-link` deben estar en el `#navbar`. - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -Debes tener el mismo número de elementos `.nav-link` y `.main-section`. - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -El elemento `header` en el `#navbar` debe estar antes de cualquiera de los elementos enlace (`a`) también en la `#navbar`. - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -Cada `.nav-link` debe tener un texto que corresponda con el texto del `header` de su `section` relacionado (por ejemplo, si tienes un section/header "Hello world", tu `#navbar` debe tener un `.nav-link` que tenga el texto "Hello world"). - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -Cada `.nav-link` debe tener un atributo `href` que enlace a su correspondiente `.main-section` (por ejemplo, si haces clic en un elemento `.nav-link` que contenga el texto "Hello world", la página navega al elemento `section` con ese id). - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -Tu `#navbar` siempre debe estar en el borde izquierdo de la ventana. - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -Tu proyecto de documentación técnica debe usar al menos una consulta de medios. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Technical Documentation Page - - - -
                                                            -
                                                            -
                                                            Introduction
                                                            -

                                                            - Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -

                                                            -
                                                            -
                                                            -
                                                            Definitions
                                                            -

                                                            - To start with, let's define some of the more common terms used in - algebra: -

                                                            -
                                                              -
                                                            • - Variable: A variable is an unknown value, usually represented - by a letter. -
                                                              • -
                                                            • - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. -
                                                              • -
                                                            • - Equation: An equation is a mathematical argument in which two - expressions result in the same value. -
                                                              • -
                                                            -
                                                            -
                                                            -
                                                            Examples
                                                            -

                                                            - Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.

                                                            - x + 5 = 12

                                                            - In this above example, we have: -

                                                            -
                                                              -
                                                            • Variable: The variable in the example is "x".
                                                              • -
                                                            • - Expression: There are two expressions in this example. They - are "x+5" and "12". -
                                                              • -
                                                            • - Equation: The entire example, "x+5=12", is an equation. -
                                                              • -
                                                            -
                                                            -
                                                            -
                                                            Solving Equations
                                                            -

                                                            - The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".

                                                            - x + 5 = 12

                                                            - In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
                                                            For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.

                                                            - x + 5 - 5 = 12 - 5

                                                            - The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:

                                                            - x = 7

                                                            - We now have our solution to this equation! -

                                                            -
                                                            -
                                                            -
                                                            Solving Equations II
                                                            -

                                                            - Let us look at a slightly more challenging equation.

                                                            - 3x + 4 = 13

                                                            - Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:

                                                            - 3x = 9

                                                            - "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.

                                                            - x = 3

                                                            - And now we have our solution! -

                                                            -
                                                            -
                                                            -
                                                            Solving Equations III
                                                            -

                                                            - Now we are getting in to more complex operations. Here is another - equation for us to look at:

                                                            - x^2 - 8 = 8

                                                            - Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.

                                                            - x^2 = 16

                                                            - But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
                                                            - An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -

                                                            - x = √9

                                                            - Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:

                                                            - x = 3 -

                                                            -
                                                            -
                                                            -
                                                            System of Equations
                                                            -

                                                            - As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:

                                                            - y = 3x

                                                            - An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
                                                            - Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:

                                                            - y = 3x | y - 6 = x - A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:

                                                            - 3x - 6 = x

                                                            - Now we can solve for "x"! We start by adding 6 to each side.

                                                            - 3x = x + 6

                                                            - We still need to get "x" by itself, so we subtract "x" from both sides - and get:

                                                            - 2x = 6

                                                            - If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!

                                                            - x = 3

                                                            - However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:

                                                            - y = 3x

                                                            - We have a value for "x" now, so let's see what happens if we put that - value in.

                                                            - y = 3*3

                                                            - We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:

                                                            - x = 3 and y = 9

                                                            -

                                                            -
                                                            -
                                                            -
                                                            Try it Yourself!
                                                            -

                                                            Coming Soon!

                                                            -

                                                            Keep an eye out for new additions!

                                                            -
                                                            -
                                                            -
                                                            More Information
                                                            -

                                                            Check out the following links for more information!

                                                            - -
                                                            -
                                                            - - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md deleted file mode 100644 index af72d97ee05..00000000000 --- a/curriculum/challenges/espanol/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: Construye una página tributo -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**Objetivo:** Crea una aplicación que sea funcionalmente similar a https://tribute-page.freecodecamp.rocks - -**Historias de usuario:** - -1. Tu página de tributo debe tener un elemento `main` con su correspondiente `id` de `main`, que contiene todos los otros elementos -1. Debes ver un elemento con un `id` de `title` que contiene una cadena (por ejemplo, texto), que describa el tema de la página de tributo (por ejemplo, "Dr. Norman Borlaug") -1. Debes ver ya sea un elemento `figure` o un elemento `div` con un `id` de `img-div` -1. Dentro del elemento `#img-div` debes ver un elemento `img` con su correspondiente `id="image"` -1. Dentro del elemento `#img-div`, debes ver un elemento con un `id="img-caption"` correspondiente que contiene contenido textual describiendo la imagen mostrada en `#img-div` -1. Debes ver un elemento con un correspondiente `id="tribute-info"`, que contiene contenido textual que describe el tema de la página de tributo -1. Debes ver un elemento `a` con su `id="tribute-link"` correspondiente, que enlaza con un sitio externo, que contiene información adicional sobre el tema de la página de tributo. CONSEJO: Debes dar a tu elemento un atributo de `target` y establecerlo a `_blank` para que tu enlace se abra en una nueva pestaña -1. Tu `#image` debe usar las propiedades `max-width` y `height` para redimensionar, de forma adaptable, relativo al ancho de su elemento padre, sin exceder su tamaño original -1. Tu elemento `img` debe estar centrado dentro de su elemento padre - -Completa las historias de usuario y pasa todas las pruebas a continuación para completar este proyecto. Dale tu propio estilo personal. ¡Feliz día programando! - -**Nota:** Asegúrate de agregar `` en tu HTML para enlazar tu hoja de estilos y aplicar tu CSS - -# --hints-- - -Debes tener un elemento `main` con un `id` de `main`. - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -Tu `#img-div`, `#image`, `#img-caption`, `#tribute-info`, y `#tribute-link` deben ser descendientes de `#main`. - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -Debes tener un elemento con un `id` de `title`. - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -Tu `#title` no debe estar vacío. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -Debes tener un elemento `figure` o `div` con un `id` de `img-div`. - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -Debes tener un elemento `img` con un `id` de `image`. - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -Tu `#image` debe ser descendiente de `#img-div`. - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -Debes tener un elemento `figcaption` o `div` con un `id` de `img-caption`. - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -Tu `#img-caption` debe ser descendiente de `#img-div`. - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -Tu `#img-caption` no debe estar vacío. - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -Debes tener un elemento con un `id` de `tribute-info`. - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -Tu `#tribute-info` no debe estar vacío. - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -Debes tener un elemento `a` con un `id` de `tribute-link`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -Tu `#tribute-link` debe tener un atributo `href` y un valor. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -Tu `#tribute-link` debe tener un atributo `target` establecido en `_blank`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -Tu elemento `img` debe tener un `display` de `block`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -Tu `#image` debe tener un `max-width` de `100%`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -Tu `#image` debe tener un `height` de `auto`. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -Tu `#image` debe estar centrado dentro de su padre. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - - Tribute Page - - -

                                                            Tribute Page

                                                            -

                                                            The below card was designed as a tribute page for freeCodeCamp.

                                                            -
                                                            -
                                                            - An image of Togepi -
                                                            Togepi, happy as always.
                                                            -
                                                            -

                                                            Togepi

                                                            -
                                                            -
                                                            -

                                                            - Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -

                                                            -

                                                            - Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -

                                                            -
                                                            -

                                                            Battle Information

                                                            -
                                                              -
                                                            • Type: Fairy
                                                              • -
                                                            • Evolutions: Togepi -> Togetic -> Togekiss
                                                              • -
                                                            • Moves: Growl, Pound, Sweet Kiss, Charm
                                                              • -
                                                            • Weaknesses: Poison, Steel
                                                              • -
                                                            • Resistances: Dragon
                                                              • -
                                                            -

                                                            - Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -

                                                            -
                                                            -
                                                            - - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md deleted file mode 100644 index fd00ff51f4e..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05b -title: Construye tus propias funciones -challengeType: 11 -videoId: nLDychdBwUg -bilibiliIds: - aid: 249487483 - bvid: BV1Fv411J7bS - cid: 376340281 -dashedName: build-your-own-functions ---- - -# --description-- - -Más recursos: - -\- Ejercicio - -# --question-- - -## --text-- - -¿Qué imprimirá el siguiente programa de Python?: - -```python -def fred(): - print("Zap") -def jane(): - print("ABC") - -jane() -fred() -jane() -``` - -## --answers-- - -
                                                            Zap
-ABC
-jane
-fred
-jane
                                                            - ---- - -
                                                            Zap
-ABC
-Zap
                                                            - ---- - -
                                                            ABC
-Zap
-jane
                                                            - ---- - -
                                                            ABC
-Zap
-ABC
                                                            - ---- - -
                                                            Zap
-Zap
-Zap
                                                            - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index 00a839c6149..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: Compara y ordena tuplas -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -Más recursos: - -\- Ejercicio - -# --question-- - -## --text-- - -¿Qué opción hace lo mismo que el siguiente código?: - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index 12c8b13c8ca..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: Ejecución de condicionales -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -¿Qué código está destinado a imprimir correctamente "Yes" si x = 0 y y = 10? - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index 5c70543a492..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: 'Visualización de datos: Listas de correos' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -Más recursos: - -\- Ejercicio: Geodatos - -\-Ejercicio: Modelo Gmane - -\-Ejercicio: Araña Gmane - -\- Ejercicio: Gmane Viz - -\- Ejercicio: Rango de la página - -\-Ejercicio: Araña de página - -\-Ejercicio: Página Viz - -# --question-- - -## --text-- - -¿Cuál es una librería de visualización de JavaScript común? - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index f332a5a7ee2..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: 'Visualización de datos: Page Rank' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -¿Cómo funciona el algoritmo PageRank? - -## --answers-- - -Determina qué páginas están más conectadas. - ---- - -Clasifica las páginas en función del número de visitas. - ---- - -Averigua qué páginas contienen el contenido más importante. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index 4afcd95639b..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: Diccionarios y bucles -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -Más recursos: - -\- Ejercicio - -# --question-- - -## --text-- - -¿Qué imprimirá el siguiente código?: - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -
                                                            annie 42
-jan 100
                                                            - ---- - -
                                                            chuck 1
-annie 42
-jan 100
                                                            - ---- - -
                                                            chuck 1
                                                            - ---- - -
                                                            [Error]
                                                            - -## --video-solution-- - -1 diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index 2ce231b3ae3..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: 'Diccionarios: Aplicaciones comunes' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -¿Qué imprimirá el siguiente código? - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[devolverá un error] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index dcf783a5542..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: Archivos como secuencia -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -Más recursos: - -\- Ejercicio - -# --question-- - -## --text-- - -¿Qué hace la palabra "continue" en medio de un bucle? - -## --answers-- - -Salta directamente al código después del bucle. - ---- - -Salta a la siguiente línea en el código. - ---- - -Salta a la siguiente iteración del bucle. - ---- - -Salta el próximo bloque de código. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index cb47f24b90e..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: Expresiones intermedias -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -Más recursos: - -\- Ejercicio 1 - -\- Ejercicio 2 - -# --question-- - -## --text-- - -Qué se imprimirá después de ejecutar este código: - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index 152c61806ae..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: Cadenas intermedias -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -Más recursos: - -\- Ejercicio - -# --question-- - -## --text-- - -¿Cuál es el valor de i en el siguiente código? - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index 078fa3979bf..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: 'Introducción: Elementos de Python' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -Qué imprimirá el siguiente programa: - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index aa73bb82f67..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: 'Introducción: Arquitectura de hardware' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -¿Dónde se almacenan tus programas mientras se están ejecutando? - -## --answers-- - -Disco duro. - ---- - -Memoria. - ---- - -Unidad central de procesamiento. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index 265f71c0347..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: 'Introducción: Python como lenguaje' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -Qué se imprimirá después de ejecutar estas dos líneas de código: - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index ab134982526..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: 'Introducción: ¿Por qué programar?' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -Más recursos: - -\- Instalar Python en Windows - -\- Instalar Python en MacOS - -# --question-- - -## --text-- - -¿Quién debe de aprender a programar? - -## --answers-- - -Estudiantes universitarios. - -### --feedback-- - -College students should learn to program, but there's a better answer. - ---- - -People who want to become software developers. - -### --feedback-- - -People who want to become software developers should learn to program, but there's a better answer. - ---- - -Everyone. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index c36f07b7734..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: 'Iteraciones: Bucles definidos' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -¿Cuántas líneas imprimirá el siguiente código?: - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index 53d97fa5f5c..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: 'Iteraciones: Expresiones de bucle' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -A continuación se muestra el código para encontrar el valor más pequeño de una lista de valores. Una línea tiene un error que causará que el código no funcione como se esperaba. ¿Qué línea es?: - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index 8e3b1d7b9d9..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: 'Iteraciones: Más patrones' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -Más recursos: - -\- Ejercicio - -# --question-- - -## --text-- - -¿Cuál de estos se evalúa en False? - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 9b9bef323b1..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: Bucles e iteraciones -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -¿Qué imprimirá el siguiente código?: - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -
                                                            0
-1
-2
                                                            - ---- - -
                                                            0
-1
-2
-3
                                                            - ---- - -
                                                            1
-2
                                                            - ---- - -
                                                            1
-2
-3
                                                            - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index c7ab6928bfa..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: Crea una base de datos relacional -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -¿Qué comando SQL usarías para recuperar a todos los usuarios que tienen la dirección de correo electrónico `quincy@freecodecamp.org`? - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index 6cdb5ea5913..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: Más estructuras condicionales -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -Más recursos: - -\- Ejercicio 1 - -\- Ejercicio 2 - -# --question-- - -## --text-- - -Dado el siguiente código: - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -¿Qué línea/líneas deben estar rodeadas por el bloque `try`? - -## --answers-- - -1 - ---- - -3 - ---- - -3,4 - ---- - -4 - ---- - -Ninguna - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index 5824cd4043b..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: Protocolo de redes -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -¿Qué tipo de petición HTTP se usa generalmente para acceder a un sitio web? - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index 39da5a87fd1..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: 'Redes: Procesamiento de texto' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -¿Qué tipo de codificación usan la mayoría de los sitios web? - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index 95b1c153ff9..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: 'Redes: Usando urllib en Python' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -¿Cómo será la salida del siguiente código?: - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -Sólo el contenido de "romeo.txt". - ---- - -Un encabezado y el contenido de "romeo.txt". - ---- - -Un encabezado, un pie de página y el contenido de "romeo.txt". - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index bd149103424..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: 'Redes: Web Scraping con Python' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -Más recursos: - -\- Ejercicio: socket1 - -\- Ejercicio: urllib - -\- Ejercicio: urllinks - -# --question-- - -## --text-- - -¿Qué librería de Python se usa para analizar documentos HTML y extraer datos de ellos? - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index 4f088aa496f..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: Redes con Python -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -¿Qué librería de Python da acceso a Sockets TCP? - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index b64dcc3b8a2..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: 'Redes: Escribe un navegador web' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -¿Qué crea el siguiente código?: - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -Un servidor web simple. - ---- - -Un cliente de correo simple. - ---- - -Una lista simple de tareas. - ---- - -Un navegador web simple. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index 36ddbb84b81..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: Ciclo de vida de un objeto -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -¿Qué imprimirá el siguiente programa?: - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - -
                                                            -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 2
-Quincy party count 3
-
                                                            - ---- - -
                                                            -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 1
-Quincy party count 2
-
                                                            - ---- - -
                                                            -Quincy constructed
-Quincy party count 1
-Quincy party count 2
-Miya constructed
-Miya party count 1
-
                                                            - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index 406e4e5bfab..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: 'Objetos: Un ejemplo de clase' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -¿Qué imprimirá el siguiente programa?: - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - -
                                                            -So far 1
-So far 2
-
                                                            - ---- - -
                                                            -0
-0
-
                                                            - ---- - -
                                                            -2
-2
-
                                                            - ---- - -
                                                            -2
-4
-
                                                            - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index f8877f2e16d..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: 'Objetos: Herencia' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -¿Qué es la herencia en la programación orientada a objetos? - -## --answers-- - -Una nueva clase creada cuando se extiende una clase padre. - ---- - -Una instancia construida de una clase. - ---- - -La habilidad de crear una nueva clase extendiendo una clase ya existente. - ---- - -Un método que se llama en el momento en que se utiliza una clase para construir un objeto. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index b2e81bbfb84..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Diccionarios en Python -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -¿A qué equivale dict después de ejecutar este código?: - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index e0d29c21517..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Funciones en Python -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -¿Cuál es el propósito de la palabra clave "def" en Python? - -## --answers-- - -Es un slang que significa "El siguiente código es muy cool." - ---- - -Indica el inicio de una función. - ---- - -Indica que la siguiente identación de código va a ser almacenada para mas adelante. - ---- - -Indica el inicio de una función, y la siguiente identación de código va a ser almacenada para más adelante. - ---- - -Ninguna de las anteriores. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index 1ed08a8c411..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Listas en Python -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -Cuál es el valor de x después de iniciar el código: - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index a1e0cc1fdd0..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Objetos en Python -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -¿Qué NO es cierto sobre los objetos de Python? - -## --answers-- - -Los objetos son creados y usados. - ---- - -Los objetos son fragmentos de código y datos. - ---- - -Los objetos pueden esconder detalles. - ---- - -Los objetos son uno de los cinco tipos estándar de datos. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index 93b39dfacdb..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: Lectura de archivos -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -¿Qué se utiliza para indicar una nueva línea en una cadena? - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index 91fe9fa1dc8..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: 'Expresiones regulares: Búsqueda y extracción de datos' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -¿Qué imprimirá el siguiente código?: - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index 43fa749af69..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: 'Expresiones regulares: Aplicaciones practicas' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -¿Qué buscará un "$" en una expresión regular? - -## --answers-- - -$ - ---- - -\\dollar\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index 1586a8d9652..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: Expresiones regulares -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -¿Qué expresiones regulares coincide solo con un carácter de espacio en blanco? - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index e974ce8cc85..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: Diseño de base de datos relacionales -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -¿Cuál es la mejor práctica para saber cuántas veces debe almacenarse una cadena de datos en una base de datos? - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index cc16191528d..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: Base de datos relacionales y SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -Descargar SQLite -Descargar el navegador DB para SQLite -uso de SQLite - -# --question-- - -## --text-- - -¿Cuál NO es una estructura de datos primaria en una base de datos? - -## --answers-- - -índice - ---- - -tabla - ---- - -fila - ---- - -columna - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index 74d4113fd04..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: 'Base de datos relacional: Operación Join' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -Cuando se usa una clausula Join en una sentencia SQL, ¿Qué hace ON? - -## --answers-- - -Indica en que tablas realizar el JOIN. - ---- - -Especifica los campos a usar para JOIN. - ---- - -Indica como se van a unir las 2 tablas. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index 8fafc9876ce..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: 'Base de datos relacionales: relaciones de muchos-a-muchos' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -Mas recursos: - -\- Ejercicio: Correo electrónico - -\- Ejercicio: Lista - -\- Ejercicio: Pistas - -\- Ejercicio: Twfriends - -\- Ejercicio: Twspider - -# --question-- - -## --text-- - -¿Cuál es un ejemplo de una relación de muchos-a-muchos? - -## --answers-- - -maestro a estudiante - ---- - -cliente a pedido - ---- - -libro a paginas - ---- - -ciudad a pais - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index 10368482fe7..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: 'Base de datos relacionales: Construcción de relaciones' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -¿Qué hace el comando INSERT en SQL? - -## --answers-- - -Define una nueva fila listando los campos que queremos que incluya seguido de los valores que queremos colocar en la nueva fila. - ---- - -Define una nueva columna listando las filas que queremos que incluya seguido de los valores que queremos que incluya en la nueva columna. - ---- - -Define una nueva tabla listando las filas y campos que queremos que incluya seguido por los valores que queremos colocar en la tabla. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index 404a9c80616..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: Representando relaciones en una base de datos relacional -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -¿Qué es una clave foránea? - -## --answers-- - -Una llave que no debería de estar ahí. - ---- - -Una clave que usa caracteres no latinos. - ---- - -Un número que apunta a la clave primaria de una fila asociada en una tabla diferente. - ---- - -Una clave que el "mundo real" podría usar para buscar una fila. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index c4ea48313f5..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: Cadenas y listas -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -Mas recursos: - -\- Ejercicio - -# --question-- - -## --text-- - -¿Cuál es el valor de n en este código? - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -mail - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index 46c1e2ddb69..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Cadenas en Python -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -¿Qué imprimirá el siguiente código?: - -```python -for n in "banana": - print(n) -``` - -## --answers-- - -
                                                            -n
-n
-
                                                            - ---- - -
                                                            -0
-1
-
                                                            - ---- - -
                                                            -0
-1
-2
-3
-4
-5
-
                                                            - ---- - -
                                                            -b
-a
-n
-a
-n
-a
-
                                                            - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index e5470c97d39..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: La colección de tuplas -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -¿Qué imprimirá el siguiente código?: - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - -
                                                            -k i
-k i
-k i
-
                                                            - ---- - -
                                                            -quincy 0
-beau 1
-kris 2
-
                                                            - ---- - -
                                                            -quincy 1
-beau 5
-kris 9
-
                                                            - ---- - -
                                                            -1 quincy
-5 beau
-9 kris
-
                                                            - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index 080faf34e97..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: Usando Servicios Web -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -¿Cuáles son las dos formas más comunes para enviar datos a través de internet? - -## --answers-- - -JSON y TXT - ---- - -JSON y XML - ---- - -XML y TXT - ---- - -XML y PHP - ---- - -PHP y TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index 4a2fb075083..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: 'Variables, expresiones y sentencias' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -¿Cuál es el símbolo usado en una declaración de asignación? - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index e6a18370016..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: Visualizando datos con Python -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -La mayoría de datos deben ser \_\_\_\_\_\_ antes de usarlos. - -## --answers-- - -convertidos a formato JSON - ---- - -graficados - ---- - -limpiados - ---- - -memorizados - ---- - -convertido en canción - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index 1a4fc2a98a7..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'Servicios Web: Limitación y seguridad de API' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -Mas recursos: - -\- Ejercicio: GeoJSON - -\- Ejercicio: JSON - -\- Ejercicio: Twitter - -\- Ejercicio: XML - -# --question-- - -## --text-- - -Cuando haces una solicitud a la API de Twitter, ¿Qué información siempre debe enviarse con la solicitud? - -## --answers-- - -Usuario de Twitter - ---- - -rango de fecha - ---- - -término de búsqueda - ---- - -llave - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index 61e97245318..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'Servicios Web: APIs' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -¿Qué significa API? - -## --answers-- - -Inteligencia portable de la aplicación - ---- - -Programación internacional asociada - ---- - -Interfaz de programación de aplicaciones - ---- - -Interfaz portable de acción - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index a58f8daf94e..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'Servicios Web: JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -¿Qué imprimirá el siguiente código?: - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[Error] - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index a20093ce2f6..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'Servicios Web: Enfoque orientado al servicio' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -Con un enfoque orientado a servicios para desarrollar aplicaciones web, ¿Dónde están ubicados los datos? - -## --answers-- - -Se distribuye a través de muchos sistemas informáticos conectados a través de Internet o una red interna. - ---- - -Dentro de diferentes servicios en el servidor web principal. - ---- - -En un servidor de base de datos separado. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index b114347b8fb..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'Servicios Web: Esquema XML' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -¿Qué es XSD? - -## --answers-- - -La especificación del esquema del W3C para XML. - ---- - -El esquema estándar JSON de MOZ. - ---- - -Controlador de situación extensible - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index 359ac624e29..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'Servicios Web: XML' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -¿Qué está mal con el siguiente XML?: - -```xml - - Chuck - - +1 734 303 4456 - - -``` - -## --answers-- - -Falta la etiqueta de cierre de la etiqueta de correo electrónico. - ---- - -El espaciado hará que XML no sea válido. - ---- - -Falta la etiqueta de cierre de la etiqueta del teléfono. - ---- - -El texto simple debe ser codificado usando UTF-8. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md deleted file mode 100644 index 4bc62bfd14c..00000000000 --- a/curriculum/challenges/espanol/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f065 -title: Trabajando con listas -challengeType: 11 -videoId: lCnHfTHkhbE -bilibiliIds: - aid: 376965958 - bvid: BV1No4y1S7oi - cid: 376387989 -dashedName: working-with-lists ---- - -# --question-- - -## --text-- - -¿Qué método se utiliza para añadir un elemento al final de una lista? - -## --answers-- - -insert - ---- - -push - ---- - -append - ---- - -new - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md deleted file mode 100644 index 17fcabd6af4..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f33310c1851c6c4da013250 -title: Paso 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Es hora de añadir contenido al menú. Añade un elemento `main` debajo del elemento `header` existente. Eventualmente, contendrá información sobre los precios del café y postres ofrecidos por la cafetería. - -# --hints-- - -Debes tener una etiqueta `
                                                            ` de apertura. - -```js -assert(code.match(/
                                                            /i)); -``` - -Debes tener una etiqueta `
                                                            ` de cierre. - -```js -assert(code.match(/<\/main>/i)); -``` - -No debes modificar el elemento `header`. Asegúrate de no eliminar accidentalmente tu etiqueta de cierre. - -```js -assert($('header').length === 1); -``` - -Tu etiqueta `main` debe estar después de la etiqueta `header`. - -```js -const main = document.querySelectorAll('main')[0]; -assert(main.previousElementSibling.tagName === 'HEADER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - ---fcc-editable-region-- -
                                                            -

                                                            CAMPER CAFE

                                                            -

                                                            Est. 2020

                                                            -
                                                            ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index 99067cc3a11..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Flexbox es un diseño CSS unidimensional que puede controlar la forma en que los elementos se espacian y alinean dentro de un contenedor. - -Para utilizarlo, dale a un elemento una propiedad `display` con el valor `flex`. Esto hará que el elemento sea un flex container (contenedor flexible). Todos los hijos directos de un contenedor flex se llaman flex items (elementos flex). - -Crea un selector `.gallery` y conviértelo en un contenedor flex. - -# --hints-- - -Debes tener un selector `.gallery`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); -``` - -Tu selector `.gallery` debe tener una propiedad `display` establecida en `flex`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
                                                            -

                                                            css flexbox photo gallery

                                                            -
                                                            -
                                                            - - - - - - - - - -
                                                            - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; -} - -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { - width: 100%; - max-width: 350px; - height: 300px; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index f8f40397ea1..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: Paso 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Comience configurando su estructura HTML. Agregue una declaración`` y un elemento `html` con un atributo `lang` establecido en `en`. Dentro del elemento `html`, agregue un elemento `head` y un elemento `body`. - -# --hints-- - -Su código debe contener la referencia `DOCTYPE`. - -```js -assert(code.match(/` después del tipo. - -```js -assert(code.match(/html\s*>/gi)); -``` - -Su declaración `DOCTYPE` debe estar al comienzo de su HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -Su elemento `html` debe tener una etiqueta de apertura con un atributo `lang` de `en` - -```js -assert(code.match(//gi)); -``` - -Su elemento `html` debe tener una etiqueta de cierre. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Debe tener una etiqueta de apertura `head`. - -```js -assert(code.match(//i)); -``` - -Debe tener una etiqueta de cierre `head`. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -Debe tener una etiqueta de apertura `body`. - -```js -assert(code.match(//i)); -``` - -Debe tener una etiqueta de cierre `body`. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -Los elementos `head` y `body` deben ser hermanos. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -El elemento `head` debe estar dentro del elemento `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -El elemento `body` debe estar dentro del elemento `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md deleted file mode 100644 index 8032e27a2e7..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: Paso 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Dentro de su elemento `head`, agregue una etiqueta `meta` con el atributo `charset` establecido en `utf-8`. Añade también un elemento `title` con el texto `Picasso Painting`. - -# --hints-- - -Debe agregar exactamente un elemento `meta`. - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -Su elemento `meta` debe tener un atributo `charset`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -Su atributo `charset` debe establecerse en `utf-8`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -``` - -Debe agregar exactamente un elemento `title`. - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -Tu elemento `title` debe tener el texto `Picasso Painting`. Tenga en cuenta que la ortografía y las mayúsculas son importantes. - -```js -assert(document.querySelector('title')?.innerText === 'Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md deleted file mode 100644 index fb646a0f2b9..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: Paso 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -FontAwesome es una biblioteca de iconos basados ​​en SVG, muchos de los cuales están disponibles para su uso de forma gratuita. Utilizará algunos de estos íconos en este proyecto, por lo que deberá vincular la hoja de estilo externa a su HTML. - -Agregue un elemento `link` con un `rel` de `stylesheet` y un `href` de `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -# --hints-- - -Debes tener dos elementos `link`. - -```js -assert(document.querySelectorAll('link').length === 2); -``` - -Su elemento `link` debe tener un `rel` de `stylesheet`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); -``` - -Su elemento `link` debe tener un `href` de `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index f570b8b84b7..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: Paso 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Para comenzar a pintar, asigne a su elemento `body` un `background-color` de `rgb(184, 132, 46)`. - -# --hints-- - -Debes usar el selector `body`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -Su elemento `body` debe tener la propiedad `background-color` establecida en `rgb (184, 132, 46)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index 04f4918665a..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: Paso 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Dentro de su etiqueta de cuerpo, agregue un elemento `div`. Dale un `id` de `back-wall`. - -# --hints-- - -Debe agregar exactamente 1 elemento `div`. - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -Su elemento `div` debe tener el valor `id` de `back-wall`. - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index 4609fe58e7e..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: Paso 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Usa un selector de id para darle al elemento con el id `back-wall` un `background-color` de `#8B4513`. - -# --hints-- - -Debe usar un selector `#back-wall`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -Su selector `#back-wall` debe tener un `background-color` de `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index 0a223910b0d..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: Paso 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Asigne al elemento `#back-wall` un `width` de `100%` y un `height` de `60%`. - -# --hints-- - -Debe establecer el selector `width` del selector `#back-wall` en `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -Debe establecer el `height` del selector `#back-wall` en `60%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index 0240ddbc1b3..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: Paso 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Normalmente, HTML se representa de arriba hacia abajo. Los elementos en la parte superior del código se colocan en la parte superior de la página. Sin embargo, muchas veces es posible que desee mover los elementos a diferentes posiciones. Puede hacerlo con la propiedad `position`. - -Establezca la propiedad `position` para el elemento `#back-wall` en `absolute`. Una posición `absolute` elimina el elemento de ese flujo de documento descendente y le permite ajustarlo en relación con su contenedor. - -Cuando un elemento se coloca manualmente, puede cambiar su diseño con `top`, `left`, `right` y `bottom`. Establezca el elemento `#back-wall` para que tenga un valor `top` de `0` y un valor `left` de `0`. - - -# --hints-- - -El selector `#back-wall` debe tener la propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -El selector `#back-wall` debe tener la propiedad `top` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -El selector `#back-wall` debe tener la propiedad `left` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index 38c7b8f58c5..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: Paso 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -La propiedad `z-index` se usa para crear "capas" para sus elementos HTML. Si está familiarizado con las herramientas de edición de imágenes, es posible que haya trabajado con capas antes. Este es un concepto similar. - -Los elementos con un valor de `z-index` más alto aparecerán superpuestos a los elementos con un valor de `z-index` más bajo. Esto se puede combinar con el posicionamiento de la lección anterior para crear efectos únicos. - -Dado que el elemento `back-wall` deberá aparecer "detrás" de los otros elementos que creará, asigne al elemento `back-wall` un `z-index` de `-1`. - -# --hints-- - -El selector `#back-wall` debe tener la propiedad `z-index` establecida en `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index aa8bdb24c1d..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: Paso 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Debajo del elemento `#back-wall`, cree un `div` con un `class` de `characters`. Aquí es donde crearás los personajes de tu pintura. - -# --hints-- - -Solo debe agregar un nuevo elemento `div`. - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -Su nuevo elemento `div` debe venir después de su elemento `#back-wall`. - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -El nuevo elemento `div` debe tener el `class` establecido en `characters`. - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index 5e9c71b4207..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: Paso 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Dentro de ese elemento `.characters`, cree otro `div` con un `id` de `offwhite-character`. - -# --hints-- - -Solo debe crear 1 elemento adicional `div`. - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -El nuevo elemento `div` debe estar anidado en el elemento `.characters`. - -```js -assert(document.querySelector('.characters div')); -``` - -El nuevo elemento `div` debe tener un `id` de `offwhite-character`. - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index 8a1637d216c..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: Paso 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Cree cuatro elementos `div` dentro del elemento `offwhite-character`. Asigne a esos elementos `div` los siguientes valores `id`, en orden: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. - -# --hints-- - -Debe agregar cuatro elementos `div` dentro de su elemento `.offwhite-character`. - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -El primer elemento nuevo `div` debe tener el `id` de `white-hat`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -El segundo elemento nuevo `div` debe tener el `id` de `black-mask`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -El tercer elemento nuevo `div` debe tener el `id` de `gray-instrument`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -El cuarto elemento nuevo `div` debe tener el `id` de `tan-table`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index 12644053577..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: Paso 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Este personaje necesita ojos. Cree dos elementos `div` en el elemento `#black-mask`. Dales las clases `eyes left` y `eyes right`, en ese orden. - -# --hints-- - -Debe crear 2 elementos `div` dentro de su elemento `#black-mask`. - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -Su primer `div` nuevo debe tener las clases `eyes` y `left`. - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -Su segundo nuevo `div` debe tener las clases `eyes` y `right`. - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index a452e67ee09..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: Paso 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Crea algunos "puntos" para el instrumento. Agregue cinco elementos `div` dentro de su elemento `#gray-instrument`. Establezca el `class` de cada uno en `black-dot`. - -# --hints-- - -Debe tener cinco nuevos elementos `div` dentro de su elemento `#gray-instrument`. - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -Sus cinco elementos `div` deben tener la clase `black-dot`. - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index c0d4fa8e6ab..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: Paso 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Con un selector de id, cree una regla para el elemento con el id `offwhite-character`. Dale un `width` de `300px`, un `height` de `550px` y un `background-color` de `GhostWhite`. - -# --hints-- - -Debe utilizar el selector `#offwhite-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -Su `#offwhite-character` debe tener una propiedad `width` establecida en `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -Su `#offwhite-character` debe tener una propiedad `height` establecida en `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -Su `#offwhite-character` debe tener una propiedad `background-color` establecida en `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index 94060cb4dce..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: Paso 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Mueve el `#offwhite-character` a su lugar dándole una `position` de `absolute`, un valor `top` de `20%` y un valor `left` de `17.5%`. - -# --hints-- - -Su selector `#offwhite-character` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -Su selector `#offwhite-character` debe tener una propiedad `top` establecida en `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -Su selector `#offwhite-character` debe tener una propiedad `left` establecida en `17.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index e32c9fed498..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: Paso 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Usando un selector de id, diseñe el elemento con el id `white-hat`. Dale un `width` y `height` de `0`, y un `border-style` de `solid`. - -# --hints-- - -Debe usar un selector `#white-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -Su selector `#white-hat` debe tener una propiedad `width` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -Su selector `#white-hat` debe tener una propiedad `height` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -Su selector `#white-hat` debe tener una propiedad `border-style` establecida en `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index 52307ff3235..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: Paso 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Eso no se ve muy bien. Establezca un `border-width` de `0 120px 140px 180px` para dimensionar el sombrero correctamente. - -# --hints-- - -Su selector `#white-hat` debe tener una propiedad `border-width` establecida en `0 120px 140px 180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index bbefb80c2bc..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: Paso 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Ahora tienes una caja grande. Dale un `border-top-color`, `border-right-color` y `border-left-color` de `transparent`. Establezca el `border-bottom-color` en `GhostWhite`. Esto hará que se vea más como un sombrero. - -# --hints-- - -El selector `#white-hat` debe tener una propiedad `border-top-color` establecida en `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -El selector `#white-hat` debe tener una propiedad `border-right-color` establecida en `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -El selector `#white-hat` debe tener una propiedad `border-left-color` establecida en `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -El selector `#white-hat` debe tener una propiedad `border-bottom-color` establecida en `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index 6d0b42289ed..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: Paso 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Dale al sombrero una `position` de `absolute`, un valor `top` de `-140px` y `left` valor de `0`. - -# --hints-- - -Su selector `#white-hat` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -Su selector `#white-hat` debe tener una propiedad `top` establecida en `-140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -Su selector `#white-hat` debe tener una propiedad `left` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index 1d1ac59aa63..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: Paso 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Usando un selector de id, cree una regla para el elemento con el id `black-mask`. Dale un `width` de `100%`, un `height` de `50px` y un `background-color` de `rgb(45, 31, 19)`. - -# --hints-- - -Debe tener un selector `#black-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -El selector `#black-mask` debe tener una propiedad `width` establecida en `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -El selector `#black-mask` debe tener una propiedad `height` establecida en `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -El selector `#black-mask` debe tener una propiedad `background-color` establecida en `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index 94c5f228097..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: Paso 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Asigne a la máscara una `position` de `absolute` y un valor `top` y `left` de `0`. - -# --hints-- - -Su selector `#black-mask` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -Su selector `#black-mask` debe tener una propiedad `top` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -Su selector `#black-mask` debe tener una propiedad `left` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index 1036b3a72b5..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: Paso 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Para asegurarse de que puede ver la máscara, asígnele un `z-index` de `1`. - -# --hints-- - -Su selector `#black-mask` debe tener una propiedad `z-index` establecida en `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index 124b638183d..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: Paso 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Usando un selector de id, proporcione al elemento id `gray-instrument` un `width` de `15%`, un `height` de `40%` y un `background-color` de `rgb(167, 162, 117)`. - -# --hints-- - -Debe tener un selector `#gray-instrument`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -El selector `#gray-instrument` debe tener una propiedad `width` establecida en `15%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -El selector `#gray-instrument` debe tener una propiedad `height` establecida en `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -El selector `#gray-instrument` debe tener una propiedad `background-color` establecida en `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index 1bf6871edd5..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: Paso 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Ahora muévalo a su lugar con un `position` de `absolute`, un valor `top` de `50px` y un valor `left` de `125px`. - -# --hints-- - -El selector `#gray-instrument` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -El selector `#gray-instrument` debe tener un valor `top` establecido en `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -El selector `#gray-instrument` debe tener un valor `left` establecido en `125px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index 07dc2596f64..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: Paso 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Establezca el `z-index` en `1`. - -# --hints-- - -El selector `#gray-instrument` debe tener una propiedad `z-index` establecida en `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index c68dec11a2f..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: Paso 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Utilice un selector de clase para crear una regla para los elementos con la clase `black-dot`. Establezca el `width` en `10px`, el `height` en `10px` y el `background-color` en `rgb(45, 31, 19)`. - -# --hints-- - -Debe tener un selector `.black-dot`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -El selector `.black-dot` debe tener una propiedad `width` establecida en `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -El selector `.black-dot` debe tener una propiedad `height` establecida en `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -El selector `.black-dot` debe tener una propiedad `background-color` establecida en `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index 7dffdaa74f0..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: Paso 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Estos puntos son demasiado cuadrados. Asigne a la clase `black-dot` un `border-radius` de `50%` para solucionarlo. - -# --hints-- - -El selector `.black-dot` debe tener una propiedad `border-radius` establecida en `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index ff578e32ad5..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: Paso 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Mueva los puntos en su lugar estableciendo el `display` en `block`, el `margin` en `auto` y el `margin-top` en `65%`. - -# --hints-- - -El selector `.black-dot` debe tener una propiedad `display` establecida en `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -El selector `.black-dot` debe tener una propiedad `margin` establecida en `auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -El selector `.black-dot` debe tener una propiedad `margin-top` establecida en `65%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index 9cb16fd839d..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: Paso 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Utilice un selector de id para aplicar estilo al elemento con el id `tan-table`. Dale un `width` de `450px`, un `height` de `140px` y un `background-color` de `#D2691E`. - -# --hints-- - -Debe tener un selector `#tan-table`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -El selector `#tan-table` debe tener una propiedad `width` establecida en `450px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -El selector `#tan-table` debe tener una propiedad `height` establecida en `140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -El selector `#tan-table` debe tener una propiedad `background-color` establecida en `#D2691E`. - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index ae4e5910d04..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: Paso 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Mueva la tabla a su lugar dándole un `position` de `absolute`, un valor `top` de `275px` y un valor `left` de `15px`. - -# --hints-- - -El selector `#tan-table` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -El selector `#tan-table` debe tener una propiedad `top` establecida en `275px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -El selector `#tan-table` debe tener una propiedad `left` establecida en `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index a2a28f9ed96..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: Paso 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Asigne a la tabla un `z-index` de `1`. - -# --hints-- - -Su selector `#tan-table` debe tener una propiedad `z-index` establecida en `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index 2707e0f8ea4..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: Paso 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Después de su elemento `div#offwhite-character`, agregue un `div` con el `id` de `black-character`. - -# --hints-- - -Debe agregar un nuevo elemento `div` dentro del elemento `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -Su nuevo elemento `div` debe tener el `id` establecido en `black-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index 0ff36b48d51..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: Paso 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Dentro de su nuevo elemento `#black-character`, agregue tres elementos `div` con los siguientes valores `id`, en orden: `black-hat`, `gray-mask`, `white-paper`. - -# --hints-- - -Debe tener tres elementos `div` dentro de su elemento `#black-character`. - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -El primer elemento `div` nuevo debe tener el `id` establecido en `black-hat`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -El segundo elemento nuevo `div` debe tener el `id` establecido en `gray-mask`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -El tercer elemento nuevo `div` debe tener el `id` establecido en `white-paper`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index 1eb58f5230e..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: Paso 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -La máscara necesita ojos. Dentro del elemento `#gray-mask`, agregue dos elementos `div`. El primero debe tener el `class` establecido en `eyes left`, y el segundo debe tener el `class` establecido en `eyes right`. - -# --hints-- - -Debe tener dos elementos `div` dentro de su elemento `#gray-mask`. - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -El primer elemento `div` nuevo debe tener el `class` establecido en `eyes left`. - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -El segundo elemento nuevo `div` debe tener el `class` establecido en `eyes right`. - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index 513e40d37e1..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: Paso 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Es hora de usar algunos iconos de FontAwesome. - -El elemento `i` se utiliza para texto idiomático o texto independiente del contenido de texto "normal". Esto podría ser para _italic_ texto, como términos científicos, o para iconos como los proporcionados por FontAwesome. - -Dentro del elemento `#white-paper`, agregue cuatro elementos `i`. Dales a todos un valor `class` de `fas fa-music`. - -Esta clase especial es la forma en que FontAwesome determina qué icono cargar. `fas` indica la categoría de iconos (FontAwesome Solid, aquí), mientras que `fa-music` selecciona el icono específico. - -# --hints-- - -Debe tener cuatro nuevos elementos `i` dentro de su elemento `#white-paper`. - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -Todos los elementos `i` deben tener el `class` establecido en `fas fa-music`. - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index 8987649d4d8..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: Paso 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Utilice un selector de id para crear una regla para el elemento con el id `black-character`. Establezca el `width` en `300px`, el `height` en `500px` y el `background-color` en `rgb(45, 31, 19)`. - -# --hints-- - -Debe usar un selector `#black-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -Su selector `#black-character` debe tener una propiedad `width` establecida en `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -Su selector `#black-character` debe tener una propiedad `height` establecida en `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -Su selector `#black-character` debe tener una propiedad `background-color` establecida en `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index 9cb75da48a2..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: Paso 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Mueva el elemento `#black-character` a su lugar configurando `position` a `absolute`, `top` a `30%`, y la `left` al `59%`. - -# --hints-- - -Su selector `#black-character` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -Su selector `#black-character` debe tener una propiedad `top` establecida en `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -Su selector `#black-character` debe tener una propiedad `left` establecida en `59%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index c8127b1f38c..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: Paso 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Utilice un selector de id para crear una regla para el elemento con el id `black-hat`. Dale un `width` de `0`, un `height` de `0` y un `border-style` de `solid`. - -# --hints-- - -Debe tener un selector `#black-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -El selector `#black-hat` debe tener una propiedad `width` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -El selector `#black-hat` debe tener una propiedad `height` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -El selector `#black-hat` debe tener una propiedad `border-style` establecida en `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index cc3fc797f9f..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: Paso 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Al igual que con su `#white-hat`, debe aplicar estilo al borde para el elemento `#black-hat`. Dale un `border-top-color`, `border-right-color` y `border-bottom-color` de `transparent`. Establezca el `border-left-color` en `rgb(45, 31, 19)`. - -# --hints-- - -El selector `#black-hat` debe tener una propiedad `border-top-color` establecida en `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -El selector `#black-hat` debe tener una propiedad `border-right-color` establecida en `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -El selector `#black-hat` debe tener una propiedad `border-bottom-color` establecida en `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -El selector `#black-hat` debe tener una propiedad `border-left-color` establecida en `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index aa55394a540..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: Paso 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Ahora coloque el elemento `#black-hat`. Dale una propiedad `position` con valor de `absolute`, un `top` de `-150px` y un `left` de `0`. - -# --hints-- - -Tu selector `#black-hat` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -Tu selector `#black-hat` debe tener una propiedad `top` establecida en `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -Tu selector `#black-hat` debe tener una propiedad `left` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index cf0e3c718cd..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: Paso 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Usando un selector de id, diseñe el elemento con el id `gray-mask`. Dale un `width` de `150px`, un `height` de `150px` y un `background-color` de `rgb(167, 162, 117)`. - -# --hints-- - -Debe tener un selector `#gray-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -El selector `#gray-mask` debe tener una propiedad `width` establecida en `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -El selector `#gray-mask` debe tener una propiedad `height` establecida en `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -El selector `#gray-mask` debe tener una propiedad `background-color` establecida en `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index 659d87feea8..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: Paso 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Coloque el elemento `#gray-mask` estableciendo `position` en `absolute`, el `top` en `-10px` y el `left` en `70px`. - -# --hints-- - -El selector `#gray-mask` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -El selector `#gray-mask` debe tener una propiedad `top` establecida en `-10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -El selector `#gray-mask` debe tener una propiedad `left` establecida en `70px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index 53fc798eeb7..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: Paso 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Con un selector de id, cree una regla para el id `white-paper`. Establezca el `width` en `400px`, el `height` en `100px` y el `background-color` en `GhostWhite`. - -# --hints-- - -Debe tener un selector `#white-paper`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -El selector `#white-paper` debe tener una propiedad `width` establecida en `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -El selector `#white-paper` debe tener una propiedad `height` establecida en `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -El selector `#white-paper` debe tener una propiedad `background-color` establecida en `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index b4200895850..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: Paso 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Dale al `#white-paper` una `position` de `absolute`, una `top` de `250px` y un `left` de `-150px` para moverlo a su lugar. - -# --hints-- - -Su selector `#white-paper` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -Su selector `#white-paper` debe tener una propiedad `top` establecida en `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -Su selector `#white-paper` debe tener una propiedad `left` establecida en `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index 06e0b01134b..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: Paso 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Establezca el `z-index` del elemento `#white-paper` en `1`. - -# --hints-- - -Su selector `#white-paper` debe tener una propiedad `z-index` establecida en `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index 15732c76ca6..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: Paso 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Los íconos de FontAwesome vienen con su propio estilo para definir el ícono. Sin embargo, también puede configurar el estilo usted mismo, para cambiar cosas como el color y el tamaño. Por ahora, use un selector de clase para apuntar a los íconos con la clase `fa-music`. Establezca la `display` en `inline-block`, el `margin-top` en `8%` y el `margin-left` a `13%`. - -# --hints-- - -Deberías tener un selector `.fa-music`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -Su selector `.fa-music` debe tener una propiedad `display` establecida en `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -Su selector `.fa-music` debe tener una propiedad `margin-top` establecida en `8%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -Su selector `.fa-music` debe tener una propiedad `margin-left` establecida en `13%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index b4ca6dc0f88..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: Paso 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Debajo de su elemento `#black-character`, agregue dos nuevos elementos `div`. Estos serán el mantón. Dale a ambos una `class` de `blue`. Luego dale al primero un `id` de `blue-left`, y al segundo un `id` de `blue-right`. - -# --hints-- - -Debería tener dos nuevos elementos `div` dentro de su elemento `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -Tus dos nuevos elementos `div` deberían tener la `class` establecida en `blue`. - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -Tu primer `div` nuevo debe tener un `id` de `blue-left`. - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -Su segundo nuevo `div` debe tener un `id` de `blue-right`. - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index 3b96ff9d42c..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: Paso 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Use un selector de clase para apuntar a los nuevos elementos con la clase `blue`. Establezca el `background-color` en `#1E90FF`. - -# --hints-- - -Deberías tener un selector `.blue`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -Su selector `.blue` debe tener una propiedad `background-color` establecida en `#1E90FF`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index 497bf005957..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: Paso 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Selecciona el elemento con el id `blue-left` usando un selector de id. Dale un `width` de `500px` y un `height` de `300px`. - -# --hints-- - -Debe tener un selector `#blue-left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -El selector `#blue-left` debe tener una propiedad `width` establecida en `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -El selector `#blue-left` debe tener una propiedad `height` establecida en `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index 867b19ab9b1..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: Paso 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Ahora establezca el `position` en `absolute`, el `top` en `20%` y el `left` en `20%`. - -# --hints-- - -El selector `#blue-left` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -Su selector `#blue-left` debe tener una propiedad `top` establecida en `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -Su selector `#blue-left` debe tener una propiedad `left` establecida en `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index 53f5ba0a3c8..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: Paso 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -A continuación, apunte al elemento con el id `blue-right` usando un selector de id. Establece el `width` en `400px` y el `height` en `300px`. - -# --hints-- - -Debe tener un selector `#blue-right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -Su selector `#blue-right` debe tener una propiedad `width` establecida en `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -Su selector `#blue-right` debe tener una propiedad `height` establecida en `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index d5198351a6a..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: Paso 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Asigne al elemento `#blue-right` la posición correcta con `position` establecido en `absolute`, `top` establecido en `50%` y `left` establecido en `40%`. - -# --hints-- - -Su selector `#blue-right` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -Su selector `#blue-right` debe tener una propiedad `top` establecida en `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -Su selector `#blue-right` debe tener una propiedad `left` establecida en `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index 5558e1e6d54..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: Paso 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Debajo de sus elementos `.blue`, agregue otro `div`. Dale el valor `id` de `orange-character`. - -# --hints-- - -Debería tener un nuevo elemento `div` dentro de su elemento `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -Su nuevo elemento `div` debe tener el `id` establecido en `orange-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index adc35ed0794..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: Paso 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Dentro de ese elemento `#orange-character`, agregue cuatro elementos `div`. Dales los valores de `id` de `black-round-hat`, `eyes-div`, `triangles` y `guitar`, en orden. - -# --hints-- - -Deberías tener cuatro nuevos elementos `div` dentro de tu elemento `#orange-character`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -Su primer elemento nuevo `div` debe tener un `id` establecido en `black-round-hat`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -Su segundo elemento nuevo `div` debe tener un `id` establecido en `eyes-div`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -Su tercer elemento nuevo `div` debe tener un `id` establecido en `triangles`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -Tu cuarto elemento nuevo `div` debe tener un `id` establecido en `guitar`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index 0ce419268e2..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: Paso 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -El elemento `#eyes-div` debería tener algunos ojos. Agregue dos elementos `div` dentro. Dale al primero una `class` de `eyes left`, y al segundo una `class` de `eyes right`. - -# --hints-- - -Debe tener dos elementos `div` anidados en su elemento `#eyes-div`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -El primer `div` nuevo debe tener la `class` establecida en `eyes left`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -El segundo `div` nuevo debe tener la `class` establecida en `eyes right`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index d7b34b49b78..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: Paso 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Dentro del div `#triangles`, deberá agregar los elementos que se convertirán en sus triángulos. Crea treinta elementos `div` y dale a cada uno de ellos la clase `triangle`. - -# --hints-- - -Debe tener 30 elementos `div` dentro de su elemento `#triangles`. - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -Los 30 elementos `div` nuevos deben tener la `class` establecida en `triangle`. - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index ace9564e5be..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: Paso 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Dentro del elemento `#guitar`, crea tres elementos `div`. Asigne a los dos primeros un valor `class` de `guitar`. Luego dale al primero un `id` de `guitar-left`, y al segundo un `id` de `guitar-right`. Agregue un `id` al tercer `div` con el valor `guitar-neck`. - -El tercer `div` no debería tener la clase `guitar`. - -# --hints-- - -Deberías tener tres nuevos elementos `div` dentro de tu elemento `#guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -Su primer `div` nuevo debe tener una `class` establecida en `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -Tu primer `div` nuevo debe tener un `id` establecido en `guitar-left`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -Tu segundo nuevo `div` debería tener una `class` establecida en `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -Su segundo nuevo `div` debe tener un `id` establecido en `guitar-right`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -Tu tercer `div` nuevo debe tener un `id` establecido en `guitar-neck`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -No deberías darle al tercer `div` nuevo una `class` de `guitar`. - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index 07af2d3ce08..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: Paso 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Usa otro ícono de FontAwesome para tu `.guitar`. Dentro de los elementos `#guitar-left` y `#guitar-right`, agrega un elemento `i` y dale una `class` de `fas fa-bars`. - -# --hints-- - -Dentro de su elemento `#guitar-left`, debe agregar un elemento `i`. - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -Dentro de su elemento `#guitar-right`, debe agregar un elemento `i`. - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -Sus dos nuevos elementos `i` deben tener la `class` establecida en `fas fa-bars`. - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - --fcc-editable-region-- -
                                                            - -
                                                            -
                                                            - -
                                                            - --fcc-editable-region-- -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index bcc993895c7..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: Paso 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Seleccione su elemento `orange-character` con un selector de id. Dale un `width` de `250px`, un `height` de `550px` y un `background-color` de `rgb(240, 78, 42)`. - -# --hints-- - -Debe tener un selector `#orange-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -Su selector `#orange-character` debe tener una propiedad `width` establecida en `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -Su selector `#orange-character` debe tener una propiedad `height` establecida en `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -Su selector `#orange-character` debe tener una propiedad `background-color` establecida en `rgb(240, 78, 42)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index 154e06cb356..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: Paso 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Dale al elemento `#orange-character` una `position` de `absolute`, una `top` de `25%`, y una `left` de `40%`. - -# --hints-- - -Su selector `#orange-character` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -Su selector `#orange-character` debe tener una propiedad `top` establecida en `25%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -Su selector `#orange-character` debe tener una propiedad `left` establecida en `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index 73a45cc50ad..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: Paso 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Dale estilo al elemento con el id `black-round-hat` usando un selector de id. Establezca el `width` en `180px`, el `height` en `150px` y el `background-color` a `rgb(45, 31, 19)`. - -# --hints-- - -Debe tener un selector `#black-round-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -Su selector `#black-round-hat` debe tener una propiedad `width` establecida en `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -Su selector `#black-round-hat` debe tener una propiedad `height` establecida en `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -Su selector `#black-round-hat` debe tener una propiedad `background-color` establecida en `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index 59e7a7814a8..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: Paso 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -El elemento `#black-round-hat` probablemente debería ser redondo. Dale un `border-radius` de `50%` para arreglar esto. - -# --hints-- - -Su selector `#black-round-hat` debe tener una propiedad `border-radius` establecida en `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index e13f4ba87d2..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: Paso 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Mueve el elemento `#black-round-hat` a su lugar con una `position` de `absolute`, una `top` de `-100px`, y una `left` de `5px`. - -# --hints-- - -Su selector `#black-round-hat` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -Su selector `#black-round-hat` debe tener una propiedad `top` establecida en `-100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -Su selector `#black-round-hat` debe tener una propiedad `left` establecida en `5px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index 5b9e22869dd..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: Paso 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Coloque el elemento `#black-round-hat` en la capa correcta con un `z-index` de `-1`. - -# --hints-- - -Su selector `#black-round-hat` debe tener una propiedad `z-index` establecida en `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index 19bc008797f..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: Paso 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -Utilice un selector de id para crear una regla para el elemento con el id `eyes-div`. Establezca el `width` en `180px` y el `height` en `50px`. - -# --hints-- - -Debe crear un selector `#eyes-div`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -Su selector `#eyes-div` debe tener una propiedad `width` establecida en `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -Su selector `#eyes-div` debe tener una propiedad `height` establecida en `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index e0e182c5bc3..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: Paso 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Ahora mueva el elemento `#eyes-div` a su posición con `position` establecido en `absolute`, `top` establecido en `-40px`, y `left` establecido en `20px`. - -# --hints-- - -Su selector `#eyes-div` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -Su selector `#eyes-div` debe tener una propiedad `top` establecida en `-40px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -Su selector `#eyes-div` debe tener una propiedad `left` establecida en `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index 13e9fe13bdc..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: Paso 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Dale al elemento `#eyes-div` un `z-index` de `3`. - -# --hints-- - -Su selector `#eyes-div` debe tener una propiedad `z-index` establecida en `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index a94d6e5f8a7..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: Paso 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -Ahora usa un selector de clase para apuntar a `guitar`. Esto le dará estilo a las dos "mitades" de tu guitarra. Establezca el `width` en `150px`, el `height` en `120px`, el `background-color` a `Goldenrod`, y el `border-radius` a `50%`. - -# --hints-- - -Deberías crear un selector `.guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -Su selector `.guitar` debe tener una propiedad `width` establecida en `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -Su selector `.guitar` debe tener una propiedad `height` establecida en `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -Su selector `.guitar` debe tener una propiedad `background-color` establecida en `Goldenrod`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -Su selector `.guitar` debe tener una propiedad `border-radius` establecida en `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index 3b6b1938fe6..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: Paso 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Seleccione el `id` con el valor `guitar-left`, y establezca la `position` en `absolute` y la `left` a `0px`. - -# --hints-- - -Debes crear un nuevo selector `#guitar-left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -Su selector `#guitar-left` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index 2bd3a020fcf..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: Paso 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Selecciona el `id` con el valor `guitar-right`, y también establece `position` en `absolute`. Esta vez, establezca `left` en `100px`. - -# --hints-- - -Debes crear un nuevo selector `#guitar-right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -Su selector `#guitar-right` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -Su selector `#guitar-right` debe tener una propiedad `left` establecida en `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index 06d0a7b03b3..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: Paso 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Ahora necesita mover los íconos de la barra a su lugar. Crea un selector de clase para las `fa-bars`. Configure `display` en `block`, `margin-top` en `30%` y `margin-left` a `40%`. - -# --hints-- - -Debe crear un selector `.fa-bars`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -Su selector `.fa-bars` debe tener una propiedad `display` establecida en `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -Su selector `.fa-bars` debe tener una propiedad `margin-top` establecida en `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -Su selector `.fa-bars` debe tener una propiedad `margin-left` establecida en `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index 3018997a2a0..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: Paso 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -Use un selector de Id para crear una regla para el Id `guitar-neck`. Establezca el `width` en `200px`, el `height` en `30px` y el `background-color` a `#D2691E`. - -# --hints-- - -Deberías crear un selector `#guitar-neck`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -Su selector `#guitar-neck` debe tener una propiedad `width` establecida en `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -Su selector `#guitar-neck` debe tener una propiedad `height` establecida en `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -Su selector `#guitar-neck` debe tener una propiedad `background-color` establecida en `#D2691E`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index be4e4142eb1..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: Paso 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Ahora mueva el elemento `#guitar-neck` con una `position` de `absolute`, un valor `top` de `45px`, y un valor `left` de `200px`. - -# --hints-- - -Su selector `#guitar-neck` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -Su selector `#guitar-neck` debe tener una propiedad `top` establecida en `45px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -Su selector `#guitar-neck` debe tener una propiedad `left` establecida en `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index 368c913452c..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: Paso 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Dale al elemento `#guitar-neck` un `z-index` de `3`. - -# --hints-- - -Su selector `#guitar-neck` debe tener una propiedad `z-index` establecida en `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index c0ea9504303..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: Paso 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Es hora de diseñar los elementos con la clase `eyes`. Use un selector de clase para establecer el `width` en `35px`, el `height` en `20px`, el `background-color` a `#8B4513`, y `border-radius` a `20px 50%`. - -# --hints-- - -Debe crear un selector `.eyes`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -Su selector `.eyes` debe tener una propiedad `width` establecida en `35px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -Su selector `.eyes` debe tener una propiedad `height` establecida en `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -Su selector `.eyes` debe tener una propiedad `background-color` establecida en `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -Su selector `.eyes` debe tener una propiedad `border-radius` establecida en `20px 50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index 371d190c622..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: Paso 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Apunte a la `class` con el valor `right` y establezca la `position` en `absolute`, `top` en `15px`, y `right` a `30px`. - -# --hints-- - -Debe crear un selector `.right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -Su selector `.right` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -Su selector `.right` debe tener una propiedad `top` establecida en `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -Su selector `.right` debe tener una propiedad `right` establecida en `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index d113c0c4998..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: Paso 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Para la `class` con valor `left`, cree el selector y establezca la `position` en `absolute`, la `top` a `15px`, y la `left` a `30px`. - -# --hints-- - -Debes crear un nuevo selector `.left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -Tu selector `.left` debe tener una propiedad `position` con el valor `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -Tu selector `.left` debe tener una propiedad `top` con el valor `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -Tu selector `.left` debe tener una propiedad `left` con el valor `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index f376b306ff7..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: Paso 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Un último paso. Los íconos de FontAwesome son demasiado pequeños. Apunte a todos ellos con un selector de clase para `fas` y establezca el `font-size` en `30px`. - -¡Con eso, tu pintura de Picasso está completa! - -# --hints-- - -Debe crear un selector `.fas`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -Su selector `.fas` debe tener una propiedad `font-size` establecida en `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index 4ee2c628d73..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: Paso 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Continúe y vincule su archivo CSS ahora, aunque aún no haya escrito ningún CSS. - -Agregue un elemento `link` con un `rel` de `stylesheet` y un `href` de `styles.css`. - -# --hints-- - - -El código debe tener un elemento `link`. - -```js -assert.match(code, / link')); -``` - -El elemento `link` debe tener un atributo `rel` con el valor `stylesheet`. - -```js -const link_element = document.querySelector('link'); -const rel = link_element.getAttribute("rel"); -assert.equal(rel, "stylesheet"); -``` - -El elemento `link` debe tener un atributo `href` con el valor `styles.css`. - -```js -const link = document.querySelector('link'); -assert.equal(link.dataset.href, "styles.css"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index 6715a700818..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: Paso 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Ajuste el diseño de los elementos `.triangle` con una `display` de `inline-block`. - -# --hints-- - -Su selector `.triangle` debe tener una propiedad `display` establecida en `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index 2a731724044..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: Paso 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Dale a tus elementos `.triangle` el color correcto. Establezca `border-top-color`, `border-bottom-color` y `border-left-color` en `transparent`. Establezca el `border-right-color` en `Gold`. - -# --hints-- - -Su selector `.triangle` debe tener una propiedad `border-top-color` establecida en `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -Su selector `.triangle` debe tener una propiedad `border-bottom-color` establecida en `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -Su selector `.triangle` debe tener una propiedad `border-left-color` establecida en `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -Su selector `.triangle` debe tener una propiedad `border-right-color` establecida en `Gold`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index de751cf7a40..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: Paso 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -Aplique estilo al borde de los elementos `.triangle`. Establezca el `border-style` en `solid` y el `border-width` en `42px 45px 45px 0`. - -# --hints-- - -El selector `.triangle` debe tener una propiedad `border-style` establecida en `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -Nuestro selector `.triangle` debe tener una propiedad `border-width` establecida en `42px 45px 45px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index b5ff9a7fd79..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: Paso 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Cree un selector de clase para los elementos con la clase `triangle`. Establezca `width` en `0` y `height` en `0`. - -# --hints-- - -Debe crear un selector `.triangle`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -Su selector `.triangle` debe tener una propiedad `width` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -Su selector `.triangle` debe tener una propiedad `height` establecida en `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index 61afed2efe3..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: Paso 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Apunte al elemento con el id `triangles` utilizando un selector de id. Establezca el `width` en `250px` y el `height` en `550px`. - -# --hints-- - -Debe agregar un selector `#triangles`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -Su selector `#triangles` debe tener una propiedad `width` establecida en `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -Su selector `#triangles` debe tener una propiedad `height` establecida en `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index 61b36f11589..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: Paso 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Ahora usa un selector de id para `guitar`. Establezca el `width` en `100%` y el `height` en `100px`. - -# --hints-- - -Debes crear un selector `#guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -Su selector `#guitar` debe tener una propiedad `width` establecida en `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -Su selector `#guitar` debe tener una propiedad `height` establecida en `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index c794e899878..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: Paso 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -En el mismo selector `#guitar`, establece la `position` en `absolute`, la `top` en `120px`, y el `left` a `0px`. - -# --hints-- - -Su selector `#guitar` debe tener una propiedad `position` establecida en `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -Su selector `#guitar` debe tener una propiedad `top` establecida en `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -Su selector `#guitar` debe tener una propiedad `left` establecida en `0px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index 6e043b333bb..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: Paso 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -Asigne a la regla `#guitar` un `z-index` de `3`. - -# --hints-- - -Su selector `#guitar` debe tener una propiedad `z-index` establecida en `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - -
                                                            -
                                                            - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index 11a69e1f857..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: Paso 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Establezca el `border-width` del `#black-hat` en `150px 0 0 300px`. - -# --hints-- - -Su selector `#black-hat` debe tener una propiedad `border-width` establecida en `150px 0 0 300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            -
                                                            - - - - -
                                                            -
                                                            -
                                                            - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md deleted file mode 100644 index f583e93c4a4..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f5c1cb7575c7551ed8a40 -title: Paso 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -El tamaño de fuente más grande del número `230` hace que se desborde. Dale a `.calories-info h1` una propiedad `overflow` establecida en `hidden` para evitar esto. - -# --hints-- - -Su selector `.calories-info h1` debe tener una propiedad `overflow` establecida en `hidden`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                            -
                                                            -

                                                            Nutrition Facts

                                                            -
                                                            -

                                                            8 servings per container

                                                            -

                                                            Serving size 2/3 cup (55g)

                                                            -
                                                            -
                                                            -
                                                            -

                                                            Amount per serving

                                                            -

                                                            Calories 230

                                                            -
                                                            -
                                                            - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- -.calories-info h1 { - margin: -5px -2px; -} ---fcc-editable-region-- - -.calories-info span { - font-size: 1.2em; -} -``` diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md deleted file mode 100644 index 4471723c152..00000000000 --- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f6a7d4ba8037bc086c2c7 -title: Paso 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Asigne al selector `.divider` una propiedad `clear` establecida en `right`. Esto borrará la propiedad `float`, empujando el divisor y cualquier contenido siguiente debajo del texto `float`. - -# --hints-- - -El selector `.divider` debe tener una propiedad `clear` establecida en `right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                            -
                                                            -

                                                            Nutrition Facts

                                                            -
                                                            -

                                                            8 servings per container

                                                            -

                                                            Serving size 2/3 cup (55g)

                                                            -
                                                            -
                                                            -
                                                            -

                                                            Amount per serving

                                                            -

                                                            Calories 230

                                                            -
                                                            -
                                                            -
                                                            -

                                                            % Daily Value *

                                                            -
                                                            -
                                                            -
                                                            - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - ---fcc-editable-region-- -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} ---fcc-editable-region-- - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md deleted file mode 100644 index f89be515412..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 56533eb9ac21ba0edf2244e2 -title: Construye un cifrado César -challengeType: 5 -forumTopicId: 16003 -dashedName: build-a-caesars-cipher ---- - -# --description-- - -Uno de los cifrados más simples y conocidos es el cifrado César, también conocido como cifrado por desplazamiento. En un cifrado por desplazamiento los significados de las letras se desplazan por una cantidad determinada de letras. - -Un uso moderno común es el cifrado ROT13, donde los valores de las letras son desplazados por 13 lugares. Así `A ↔ N`, `B ↔ O` y así sucesivamente. - -Escriba una función que reciba una cadena codificada en ROT13 como entrada y devuelva una cadena decodificada. - -Todas las letras estarán en mayúsculas. No transforme ningún carácter no alfabético (espacios, puntuación, por ejemplo), pero si aplíquele el desplazamiento. - -# --hints-- - -`rot13("SERR PBQR PNZC")` debe decodificarse en la cadena `FREE CODE CAMP` - -```js -assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); -``` - -`rot13("SERR CVMMN!")` debe decodificarse en la cadena `FREE PIZZA!` - -```js -assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); -``` - -`rot13("SERR YBIR?")` debe decodificarse en la cadena `FREE LOVE?` - -```js -assert(rot13('SERR YBIR?') === 'FREE LOVE?'); -``` - -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` debe decodificarse en la cadena `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` - -```js -assert( - rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === - 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function rot13(str) { - return str; -} - -rot13("SERR PBQR PNZC"); -``` - -# --solutions-- - -```js -var lookup = { - 'A': 'N','B': 'O','C': 'P','D': 'Q', - 'E': 'R','F': 'S','G': 'T','H': 'U', - 'I': 'V','J': 'W','K': 'X','L': 'Y', - 'M': 'Z','N': 'A','O': 'B','P': 'C', - 'Q': 'D','R': 'E','S': 'F','T': 'G', - 'U': 'H','V': 'I','W': 'J','X': 'K', - 'Y': 'L','Z': 'M' -}; - -function rot13(encodedStr) { - var codeArr = encodedStr.split(""); // String to Array - var decodedArr = []; // Your Result goes here - // Only change code below this line - - decodedArr = codeArr.map(function(letter) { - if(lookup.hasOwnProperty(letter)) { - letter = lookup[letter]; - } - return letter; - }); - - // Only change code above this line - return decodedArr.join(""); // Array to String -} -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md deleted file mode 100644 index aaa5afe113e..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: aa2e6f85cab2ab736c9a9b24 -title: Construye una caja registradora -challengeType: 5 -forumTopicId: 16012 -dashedName: build-a-cash-register ---- - -# --description-- - -Diseña una función `checkCashRegister()` que acepte el precio de compra como primer argumento (`price`), la cantidad pagada como segundo argumento (`cash`), y el dinero en efectivo que tiene la caja (`cid`) como tercer argumento. - -`cid` es un arreglo 2D que enumera las monedas disponibles. - -La función `checkCashRegister()` siempre debe devolver un objeto con una clave `status` y una clave `change`. - -Devuelve `{status: "INSUFFICIENT_FUNDS", change: []}` si el efectivo en caja es menor que el cambio necesario, o si no puedes devolver el cambio exacto. - -Devuelve `{status: "CLOSED", change: [...]}` si el efectivo en caja como valor de la clave `change` es igual al cambio que se debe entregar. - -En cualquier otro caso, devuelve `{status: "OPEN", change: [...]}`, con el cambio a entregar en monedas y billetes, ordenados de mayor a menor, como valor de la clave `change`. - -
                                                            Unidad MonetariaImporte
                                                            Centavo$0.01 (CENTAVO)
                                                            Níquel$0.05 (NÍQUEL)
                                                            Díez Centavos$0.1 (DÍEZ CENTAVOS)
                                                            25 centavos$0.25 (QUARTER)
                                                            Dólar$1 (UNO)
                                                            Cinco dólares$5 (CINCO)
                                                            Diez dólares$10 (DÍEZ)
                                                            Veinte dólares$20 (VEINTE)
                                                            Cien dólares$100 (CIEN)
                                                            - -Vea a continuación un ejemplo de un arreglo de efectivo en caja: - -```js -[ - ["PENNY", 1.01], - ["NICKEL", 2.05], - ["DIME", 3.1], - ["QUARTER", 4.25], - ["ONE", 90], - ["FIVE", 55], - ["TEN", 20], - ["TWENTY", 60], - ["ONE HUNDRED", 100] -] -``` - -# --hints-- - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` debe devolver un objeto. - -```js -assert.deepEqual( - Object.prototype.toString.call( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]) - ), - '[object Object]' -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` debe devolver `{status: "OPEN", change: [["QUARTER", 0.5]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { status: 'OPEN', change: [['QUARTER', 0.5]] } -); -``` - -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` debe devolver `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. - -```js -assert.deepEqual( - checkCashRegister(3.26, 100, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { - status: 'OPEN', - change: [ - ['TWENTY', 60], - ['TEN', 20], - ['FIVE', 15], - ['ONE', 1], - ['QUARTER', 0.5], - ['DIME', 0.2], - ['PENNY', 0.04] - ] - } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` debe devolver `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` debe devolver `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 1], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` debe devolver `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { - status: 'CLOSED', - change: [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ] - } -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function checkCashRegister(price, cash, cid) { - let change; - return change; -} - -checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); -``` - -# --solutions-- - -```js -const denom = [ - { name: "ONE HUNDRED", val: 100 }, - { name: "TWENTY", val: 20 }, - { name: "TEN", val: 10 }, - { name: "FIVE", val: 5 }, - { name: "ONE", val: 1 }, - { name: "QUARTER", val: 0.25 }, - { name: "DIME", val: 0.1 }, - { name: "NICKEL", val: 0.05 }, - { name: "PENNY", val: 0.01 }, -]; - -function checkCashRegister(price, cash, cid) { - const output = { status: null, change: [] }; - let change = cash - price; - const register = cid.reduce( - function (acc, curr) { - acc.total += curr[1]; - acc[curr[0]] = curr[1]; - return acc; - }, - { total: 0 } - ); - if (register.total === change) { - output.status = "CLOSED"; - output.change = cid; - return output; - } - if (register.total < change) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - const change_arr = denom.reduce(function (acc, curr) { - let value = 0; - while (register[curr.name] > 0 && change >= curr.val) { - change -= curr.val; - register[curr.name] -= curr.val; - value += curr.val; - change = Math.round(change * 100) / 100; - } - if (value > 0) { - acc.push([curr.name, value]); - } - return acc; - }, []); - if (change_arr.length < 1 || change > 0) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - output.status = "OPEN"; - output.change = change_arr; - return output; -} -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md deleted file mode 100644 index d28e91621ed..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: aaa48de84e1ecc7c742e1124 -title: Construye un proyecto de comprobación de palíndromos -challengeType: 5 -forumTopicId: 16004 -dashedName: build-a-palindrome-checker ---- - -# --description-- - -Devuelve `true` si la cadena proporcionada es un palíndromo. De lo contrario, devuelve `false`. - -Un palíndromo es una palabra o frase que se escribe de la misma manera hacia adelante y hacia atrás, ignorando la puntuación, mayúsculas, minúsculas y espaciado. - -**Nota:** Tendrás que eliminar **todos los caracteres no alfanuméricos** (puntuación, espacios y símbolos) y convertir todo en mayúsculas o minúsculas para comprobar si hay palíndromos. - -Pasaremos cadenas con formatos variables, como `racecar`, `RaceCar` y `race CAR` entre otros. - -También pasaremos cadenas con símbolos especiales, como `2A3*3a2`, `2A3 3a2` y `2_A3*3#A2`. - -# --hints-- - -`palindrome("eye")` debe devolver un booleano. - -```js -assert(typeof palindrome('eye') === 'boolean'); -``` - -`palindrome("eye")` debe devolver `true`. - -```js -assert(palindrome('eye') === true); -``` - -`palindrome("_eye")` debe devolver `true`. - -```js -assert(palindrome('_eye') === true); -``` - -`palindrome("race car")` debe devolver `true`. - -```js -assert(palindrome('race car') === true); -``` - -`palindrome("not a palindrome")` debe devolver `false`. - -```js -assert(palindrome('not a palindrome') === false); -``` - -`palindrome("A man, a plan, a canal. Panama")` debe devolver `true`. - -```js -assert(palindrome('A man, a plan, a canal. Panama') === true); -``` - -`palindrome("never odd or even")` debe devolver `true`. - -```js -assert(palindrome('never odd or even') === true); -``` - -`palindrome("nope")` debe devolver `false`. - -```js -assert(palindrome('nope') === false); -``` - -`palindrome("almostomla")` debe devolver `false`. - -```js -assert(palindrome('almostomla') === false); -``` - -`palindrome("My age is 0, 0 si ega ym.")` debe devolver `true`. - -```js -assert(palindrome('My age is 0, 0 si ega ym.') === true); -``` - -`palindrome("1 eye for of 1 eye.")` debe devolver `false`. - -```js -assert(palindrome('1 eye for of 1 eye.') === false); -``` - -`palindrome("0_0 (: /-\ :) 0-0")` debe devolver `true`. - -```js -assert(palindrome('0_0 (: /- :) 0-0') === true); -``` - -`palindrome("five|\_/|four")` debe devolver `false`. - -```js -assert(palindrome('five|_/|four') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function palindrome(str) { - return true; -} - -palindrome("eye"); -``` - -# --solutions-- - -```js -function palindrome(str) { - var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); - var aux = string.split(''); - if (aux.join('') === aux.reverse().join('')){ - return true; - } - - return false; -} -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md deleted file mode 100644 index 61fde50ea64..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: a7f4d8f2483413a6ce226cac -title: Construya un convertidor de números romanos -challengeType: 5 -forumTopicId: 16044 -dashedName: build-a-roman-numeral-converter ---- - -# --description-- - -Convierte el número dado en un número romano. - -| Números romanos | Números arábigos | -| --------------- | ---------------- | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| C | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -Todas las respuestas de los números romanos deben ser proporcionadas en mayúsculas. - -# --hints-- - -`convertToRoman(2)` debe devolver la cadena `II`. - -```js -assert.deepEqual(convertToRoman(2), 'II'); -``` - -`convertToRoman(3)` debe devolver la cadena `III`. - -```js -assert.deepEqual(convertToRoman(3), 'III'); -``` - -`convertToRoman(4)` debe devolver la cadena `IV`. - -```js -assert.deepEqual(convertToRoman(4), 'IV'); -``` - -`convertToRoman(5)` debe devolver la cadena `V`. - -```js -assert.deepEqual(convertToRoman(5), 'V'); -``` - -`convertToRoman(9)` debe devolver la cadena `IX`. - -```js -assert.deepEqual(convertToRoman(9), 'IX'); -``` - -`convertToRoman(12)` debe devolver la cadena `XII`. - -```js -assert.deepEqual(convertToRoman(12), 'XII'); -``` - -`convertToRoman(16)` debe devolver la cadena `XVI`. - -```js -assert.deepEqual(convertToRoman(16), 'XVI'); -``` - -`convertToRoman(29)` debe devolver la cadena `XXIX`. - -```js -assert.deepEqual(convertToRoman(29), 'XXIX'); -``` - -`convertToRoman(44)` debe devolver la cadena `XLIV`. - -```js -assert.deepEqual(convertToRoman(44), 'XLIV'); -``` - -`convertToRoman(45)` debe devolver la cadena `XLV`. - -```js -assert.deepEqual(convertToRoman(45), 'XLV'); -``` - -`convertToRoman(68)` debe devolver la cadena `LXVIII` - -```js -assert.deepEqual(convertToRoman(68), 'LXVIII'); -``` - -`convertToRoman(83)` debe devolver la cadena `LXXXIII` - -```js -assert.deepEqual(convertToRoman(83), 'LXXXIII'); -``` - -`convertToRoman(97)` debe devolver la cadena `XCVII` - -```js -assert.deepEqual(convertToRoman(97), 'XCVII'); -``` - -`convertToRoman(99)` debe devolver la cadena `XCIX` - -```js -assert.deepEqual(convertToRoman(99), 'XCIX'); -``` - -`convertToRoman(400)` debe devolver la cadena `CD` - -```js -assert.deepEqual(convertToRoman(400), 'CD'); -``` - -`convertToRoman(500)` debe devolver la cadena `D` - -```js -assert.deepEqual(convertToRoman(500), 'D'); -``` - -`convertToRoman(501)` debe devolver la cadena `DI` - -```js -assert.deepEqual(convertToRoman(501), 'DI'); -``` - -`convertToRoman(649)` debe devolver la cadena `DCXLIX` - -```js -assert.deepEqual(convertToRoman(649), 'DCXLIX'); -``` - -`convertToRoman(798)` debe devolver la cadena `DCCXCVIII` - -```js -assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); -``` - -`convertToRoman(891)` debe devolver la cadena `DCCCXCI` - -```js -assert.deepEqual(convertToRoman(891), 'DCCCXCI'); -``` - -`convertToRoman(1000)` debe devolver la cadena `M` - -```js -assert.deepEqual(convertToRoman(1000), 'M'); -``` - -`convertToRoman(1004)` debe devolver la cadena `MIV` - -```js -assert.deepEqual(convertToRoman(1004), 'MIV'); -``` - -`convertToRoman(1006)` debe devolver la cadena `MVI` - -```js -assert.deepEqual(convertToRoman(1006), 'MVI'); -``` - -`convertToRoman(1023)` debe devolver la cadena `MXXIII` - -```js -assert.deepEqual(convertToRoman(1023), 'MXXIII'); -``` - -`convertToRoman(2014)` debe devolver la cadena `MMXIV` - -```js -assert.deepEqual(convertToRoman(2014), 'MMXIV'); -``` - -`convertToRoman(3999)` debe devolver la cadena `MMMCMXCIX` - -```js -assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); -``` - -# --seed-- - -## --seed-contents-- - -```js -function convertToRoman(num) { - return num; -} - -convertToRoman(36); -``` - -# --solutions-- - -```js -function convertToRoman(num) { - var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; - var res = []; - ref.forEach(function(p) { - while (num >= p[1]) { - res.push(p[0]); - num -= p[1]; - } - }); - return res.join(''); -} -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md deleted file mode 100644 index 66d1de9e59b..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: aff0395860f5d3034dc0bfc9 -title: Crear un validador de números de teléfono -challengeType: 5 -forumTopicId: 16090 -dashedName: build-a-telephone-number-validator ---- - -# --description-- - -Devuelve `true` si la cadena pasada concuerda con un número de teléfono válido en Estados Unidos. - -El usuario puede completar el campo del formulario de la forma de números de teléfono que elija, siempre que tenga el formato de un número válido de EE. UU. Los siguientes son ejemplos de formatos válidos para números de EE. UU. (consulte las pruebas a continuación para conocer otras variantes): - -
                                                            555-555-5555
                                                            (555)555-5555
                                                            (555) 555-5555
                                                            555 555 5555
                                                            5555555555
                                                            1 555 555 5555
                                                            - -Para este desafío, se le presentará una cadena como: `800-692-7753` o `8oo-six427676;laskdjf`. Tu trabajo serávalidar o rechazar el número de teléfono de EE. UU. en función de cualquier combinación de los formatos proporcionados anteriormente. El código de área es requerido. Si se proporciona el código de país, debe confirmar que el código de país es `1`. Devolverá `true` (verdadero) si la cadena es un número de teléfono de EE. UU. válido; de lo contrario, devolverá `false` (falso). - -# --hints-- - -`telephoneCheck("555-555-5555")` debería devolver un booleano. - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` debería devolver `true`. - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` debería devolver `true`. - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` debería devolver `true`. - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` debería devolver `true`. - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` debería devolver `true`. - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` debería devolver `true`. - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` debería devolver `false`. - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` debería devolver `false`. - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` debería devolver `false`. - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` debería devolver `true`. - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` debería devolver `true`. - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` debería devolver `false`. - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` debería devolver `false`. - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` debería devolver `false`. - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` debería devolver `false`. - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` debería devolver `false`. - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` debería devolver `false`. - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` debería devolver `false`. - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` debería devolver `false`. - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` debería devolver `false`. - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` debería devolver `false`. - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` debería devolver `false`. - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` debería devolver `false`. - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` debería devolver `false`. - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` debería devolver `false`. - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` debería devolver `false`. - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` debería devolver `false`. - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` debería devolver `false`. - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index 24d438eb594..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: Paso 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -You have been declaring your variables with the `var` keyword. However, in modern JavaScript it is best practice to use the `let` keyword instead. This fixes several unusual behaviors with `var` that can make your code difficult to debug. - -Change all of your `var` keywords to `let`. - -# --hints-- - -You should not have any `var` keywords in your code. - -```js -assert.notMatch(code, /var/); -``` - -You should use the `let` keyword to declare your `xp` variable. - -```js -assert.match(code, /let xp/); -``` - -You should use the `let` keyword to declare your `health` variable. - -```js -assert.match(code, /let health/); -``` - -You should use the `let` keyword to declare your `gold` variable. - -```js -assert.match(code, /let gold/); -``` - -You should use the `let` keyword to declare your `currentWeapon` variable. - -```js -assert.match(code, /let currentWeapon/); -``` - -You should not change the values of your variables. - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - - -
                                                            -
                                                            - XP: 0 - Health: 100 - Gold: 50 -
                                                            -
                                                            - - - -
                                                            -
                                                            - Monster Name: - Health: -
                                                            -
                                                            - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                            -
                                                            - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js ---fcc-editable-region-- -var xp = 0; -var health = 100; -var gold = 50; -var currentWeapon = 0; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md deleted file mode 100644 index 47ab742b944..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 62a8f2bc37675e77d5835235 -title: Paso 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -JavaScript has a conditional operator called the ternary operator. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`. - -Here is an example of an `if-else` expression changed to a ternary: - -```js -if (num > 5) { - bigger() -} else { - smaller() -} - -num > 5 ? bigger() : smaller(); -``` - -Change your new `if-else` expression to a ternary. - -# --hints-- - -You should remove the `if` and `else` from your `else if` block. - -```js -const block = attack.toString().split("else if"); -assert.notMatch(block[1], /if/); -assert.notMatch(block[1], /else/); -``` - -You should check if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2/); -``` - -Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); -``` - -Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - -
                                                            -
                                                            - XP: 0 - Health: 100 - Gold: 50 -
                                                            -
                                                            - - - -
                                                            -
                                                            - Monster Name: - Health: -
                                                            -
                                                            - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                            -
                                                            - - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js -let xp = 0; -let health = 100; -let gold = 50; -let currentWeapon = 0; -let fighting; -let monsterHealth; -let inventory = ["stick"]; - -const button1 = document.querySelector('#button1'); -const button2 = document.querySelector("#button2"); -const button3 = document.querySelector("#button3"); -const text = document.querySelector("#text"); -const xpText = document.querySelector("#xpText"); -const healthText = document.querySelector("#healthText"); -const goldText = document.querySelector("#goldText"); -const monsterStats = document.querySelector("#monsterStats"); -const monsterName = document.querySelector("#monsterName"); -const monsterHealthText =document.querySelector("#monsterHealth"); -const weapons = [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]; -const monsters = [ - { - name: "slime", - level: 2, - health: 15 - }, - { - name: "fanged beast", - level: 8, - health: 60 - }, - { - name: "dragon", - level: 20, - health: 300 - } -] -const locations = [ - { - name: "town square", - "button text": ["Go to store", "Go to cave", "Fight dragon"], - "button functions": [goStore, goCave, fightDragon], - text: "You are in the town square. You see a sign that says \"Store\"." - }, - { - name: "store", - "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], - "button functions": [buyHealth, buyWeapon, goTown], - text: "You enter the store." - }, - { - name: "cave", - "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], - "button functions": [fightSlime, fightBeast, goTown], - text: "You enter the cave. You see some monsters." - }, - { - name: "fight", - "button text": ["Attack", "Dodge", "Run"], - "button functions": [attack, dodge, goTown], - text: "You are fighting a monster." - }, - { - name: "kill monster", - "button text": ["Go to town square", "Go to town square", "Go to town square"], - "button functions": [goTown, goTown, goTown], - text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' - }, - { - name: "lose", - "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], - "button functions": [restart, restart, restart], - text: "You die. ☠️" - } -]; - -// initialize buttons -button1.onclick = goStore; -button2.onclick = goCave; -button3.onclick = fightDragon; - -function update(location) { - monsterStats.style.display = "none"; - button1.innerText = location["button text"][0]; - button2.innerText = location["button text"][1]; - button3.innerText = location["button text"][2]; - button1.onclick = location["button functions"][0]; - button2.onclick = location["button functions"][1]; - button3.onclick = location["button functions"][2]; - text.innerText = location.text; -} - -function goTown() { - update(locations[0]); -} - -function goStore() { - update(locations[1]); -} - -function goCave() { - update(locations[2]); -} - -function buyHealth() { - if (gold >= 10) { - gold -= 10; - health += 10; - goldText.innerText = gold; - healthText.innerText = health; - } else { - text.innerText = "You do not have enough gold to buy health."; - } -} - -function buyWeapon() { - if (currentWeapon < weapons.length - 1) { - if (gold >= 30) { - gold -= 30; - currentWeapon++; - goldText.innerText = gold; - let newWeapon = weapons[currentWeapon].name; - text.innerText = "You now have a " + newWeapon + "."; - inventory.push(newWeapon); - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "You do not have enough gold to buy a weapon."; - } - } else { - text.innerText = "You already have the most powerful weapon!"; - button2.innerText = "Sell weapon for 15 gold"; - button2.onclick = sellWeapon; - } -} - -function sellWeapon() { - if (inventory.length > 1) { - gold += 15; - goldText.innerText = gold; - let currentWeapon = inventory.shift(); - text.innerText = "You sold a " + currentWeapon + "."; - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "Don't sell your only weapon!"; - } -} - -function fightSlime() { - fighting = 0; - goFight(); -} - -function fightBeast() { - fighting = 1; - goFight(); -} - -function fightDragon() { - fighting = 2; - goFight(); -} - -function goFight() { - update(locations[3]); - monsterHealth = monsters[fighting].health; - monsterStats.style.display = "block"; - monsterName.innerText = monsters[fighting].name; - monsterHealthText.innerText = monsterHealth; -} - ---fcc-editable-region-- -function attack() { - text.innerText = "The " + monsters[fighting].name + " attacks."; - text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; - health -= monsters[fighting].level; - monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; - healthText.innerText = health; - monsterHealthText.innerText = monsterHealth; - if (health <= 0) { - lose(); - } else if (monsterHealth <= 0) { - if (fighting === 2) { - winGame(); - } else { - defeatMonster(); - } - } -} ---fcc-editable-region-- - -function dodge() { - text.innerText = "You dodge the attack from the " + monsters[fighting].name; -} - -function defeatMonster() { - gold += Math.floor(monsters[fighting].level * 6.7); - xp += monsters[fighting].level; - goldText.innerText = gold; - xpText.innerText = xp; - update(locations[4]); -} - -function lose() { - update(locations[5]); -} - -function restart() { - xp = 0; - health = 100; - gold = 50; - currentWeapon = 0; - inventory = ["stick"]; - goldText.innerText = gold; - healthText.innerText = health; - xpText.innerText = xp; - goTown(); -} -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md new file mode 100644 index 00000000000..d178d5a5a2b --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -0,0 +1,682 @@ +--- +id: 659b0093d7db5a1a1122b7bd +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +```js +const animals = ["dog", "cat", "horse"]; +animals.indexOf("cat") // 1 +``` + +Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`. + +# --hints-- + +You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/) +``` + +You should pass in `userData.currentSong` into the `indexOf()` method. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +

                                                            freeCodeCamp

                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            + song cover art +
                                                            +
                                                            +
                                                            +

                                                            +

                                                            +
                                                            +
                                                            + + + + + +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +

                                                            Playlist

                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                            +
                                                              +
                                                              +
                                                              + + + +``` + +```css +:root { + /* colors */ + --primary-color: #dfdfe2; + --secondary-color: #ffffff; + --app-background-color: #4d4d62; + --background-color: #1b1b32; + --foreground-color: #3b3b4f; + --highlight-color: #f1be32; + + /* font sizes */ + --root-font-size: 16px; + font-size: var(--root-font-size); + + /* font-families */ + --font-headline: "Roboto Mono", monospace; + --font-family: "Lato", sans-serif; +} + +*, +*::after, +*::before { + box-sizing: border-box; +} + +body { + background-color: var(--app-background-color); + color: var(--primary-color); + font-family: var(--font-family); +} + +h1 { + font-size: 1.125rem; + line-height: 1.6; +} + +h2 { + font-size: var(--root-font-size); +} + +ul { + margin: 0; +} + +.container { + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; +} + +.player, +.playlist { + width: 450px; + background-color: var(--background-color); + border: 3px solid var(--foreground-color); +} + +.player { + height: 260px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +.player-bar, +.playlist-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + width: 100%; + height: 30px; + background-color: var(--foreground-color); +} + +.parallel-lines { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + padding: 0 5px; +} + +.parallel-lines > div { + height: 2px; + width: 100%; + min-width: 75px; + background-color: var(--highlight-color); +} + +.fcc-title, +.playlist-title { + color: var(--secondary-color); + margin: 0 10px; + font-family: var(--font-headline); +} + +.player-content { + display: flex; + background-color: var(--foreground-color); + width: 430px; + height: 200px; + column-gap: 13px; + align-items: center; + justify-content: center; +} + +#player-album-art { + background-color: var(--secondary-color); + border: 6px solid var(--background-color); +} + +#player-album-art img { + width: 150px; + display: block; +} + +.player-display { + display: flex; + flex-direction: column; + row-gap: 20px; + padding: 14px; + background-color: var(--background-color); + height: 153px; + width: 226px; +} + +.player-display-song-artist { + height: 80px; +} + +.player-buttons svg { + fill: var(--primary-color); +} + +.playing > svg { + fill: var(--highlight-color); +} + +.player-buttons { + display: flex; + justify-content: space-around; +} + +button { + background: transparent; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: var(--root-font-size); + outline-color: var(--highlight-color); + text-align: center; +} + +.playlist-song { + outline-color: var(--highlight-color); +} + +.playlist li:not(:last-child) { + border-bottom: 1px solid var(--background-color); +} + +button:focus, +.playlist-song:focus { + outline-style: dashed; + outline-width: 2px; +} + +/* Playlist */ +.playlist { + height: auto; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +#playlist-songs { + width: 430px; + height: 100%; + background-color: var(--foreground-color); + display: flex; + flex-direction: column; + row-gap: 8px; + padding: 8px 9px; + visibility: visible; + justify-content: start; + list-style: none; +} + +.playlist-song { + display: flex; + height: 55px; + justify-content: space-between; + align-items: center; + padding: 5px; +} + +[aria-current="true"] { + background-color: var(--background-color); +} + +[aria-current="true"] p { + color: var(--highlight-color); +} + +.playlist-song-info { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + column-gap: 7px; + padding: 5px 0; + font-family: var(--font-family); +} + +#player-song-title, +#player-song-artist { + margin: 0; +} + +#player-song-artist { + color: var(--highlight-color); + font-size: 0.75rem; +} + +#player-song-title { + font-size: 1.125rem; +} + +.playlist-song-title { + font-size: 0.85rem; + width: 241px; + text-align: left; +} + +.playlist-song-artist { + font-size: 0.725rem; + width: 80px; +} + +.playlist-song-duration { + font-size: 0.725rem; + margin: auto; + font-family: var(--font-headline); + width: 30px; +} + +.playlist-song-delete { + padding: 0; + width: 20px; + height: 20px; +} + +.playlist-song-delete, +.playlist-song-delete { + fill: var(--foreground-color); +} + +.playlist-song-delete:hover circle, +.playlist-song-delete:focus circle { + fill: #ff0000; +} + +@media (max-width: 700px) { + .player, + .playlist { + width: 300px; + } + + .player { + height: 340px; + } + + #playlist-songs { + height: 280px; + padding: 5px 6px; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-color: var(--background-color) var(--secondary-color); + scrollbar-width: thin; + } + + #playlist-songs::-webkit-scrollbar { + width: 5px; + } + + #playlist-songs::-webkit-scrollbar-track { + background: var(--background-color); + } + + #playlist-songs::-webkit-scrollbar-thumb { + background: var(--secondary-color); + } + + h1 { + font-size: 0.813rem; + } + + h2 { + font-size: 0.75rem; + } + + .player-bar, + .playlist-bar, + .player-content, + #playlist-songs { + width: 280px; + } + + .playlist-song { + justify-content: space-between; + } + + .playlist-song-title { + width: 140px; + } + + .playlist-song-artist { + width: 40px; + } + + .playlist-song-duration > button { + padding: 0; + } + + .player-content { + display: inline; + position: relative; + justify-items: center; + height: 100%; + } + + #player-album-art { + z-index: -100; + height: 280px; + box-shadow: none; + background: #000; + } + + #player-album-art img { + width: 100%; + opacity: 0.6; + } + + .player-display-song-artist { + padding: 0 10px; + } + + .player-display-song-artist > p { + white-space: pre-wrap; + } + + .player-display { + position: absolute; + width: 100%; + z-index: 1000; + background-color: transparent; + top: 0; + height: 280px; + justify-content: space-between; + text-align: center; + } +} +``` + +```js +const playlistSongs = document.getElementById("playlist-songs"); +const playButton = document.getElementById("play"); +const pauseButton = document.getElementById("pause"); +const nextButton = document.getElementById("next"); +const previousButton = document.getElementById("previous"); +const shuffleButton = document.getElementById("shuffle"); + +const allSongs = [ + { + id: 0, + title: "Scratching The Surface", + artist: "Quincy Larson", + duration: "4:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3", + }, + { + id: 1, + title: "Can't Stay Down", + artist: "Quincy Larson", + duration: "4:15", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3", + }, + { + id: 2, + title: "Still Learning", + artist: "Quincy Larson", + duration: "3:51", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3", + }, + { + id: 3, + title: "Cruising for a Musing", + artist: "Quincy Larson", + duration: "3:34", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3", + }, + { + id: 4, + title: "Never Not Favored", + artist: "Quincy Larson", + duration: "3:35", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3", + }, + { + id: 5, + title: "From the Ground Up", + artist: "Quincy Larson", + duration: "3:12", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3", + }, + { + id: 6, + title: "Walking on Air", + artist: "Quincy Larson", + duration: "3:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3", + }, + { + id: 7, + title: "Can't Stop Me. Can't Even Slow Me Down.", + artist: "Quincy Larson", + duration: "3:52", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3", + }, + { + id: 8, + title: "The Surest Way Out is Through", + artist: "Quincy Larson", + duration: "3:10", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3", + }, + { + id: 9, + title: "Chasing That Feeling", + artist: "Quincy Larson", + duration: "2:43", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3", + }, +]; + +const audio = new Audio(); +let userData = { + songs: [...allSongs], + currentSong: null, + songCurrentTime: 0, +}; + +const playSong = (id) => { + const song = userData?.songs.find((song) => song.id === id); + audio.src = song.src; + audio.title = song.title; + + if (userData?.currentSong === null || userData?.currentSong.id !== song.id) { + audio.currentTime = 0; + } else { + audio.currentTime = userData.songCurrentTime; + } + userData.currentSong = song; + playButton.classList.add("playing"); + + audio.play(); +}; + +const pauseSong = () => { + userData.songCurrentTime = audio.currentTime; + + playButton.classList.remove("playing"); + audio.pause(); +}; + +const renderSongs = (array) => { + const songsHTML = array + .map((song)=> { + return ` +
                                                            • + + +
                                                              • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +const getCurrentSongIndex = () => { + +} +--fcc-editable-region-- + +playButton.addEventListener("click", () => { + if (userData?.currentSong === null) { + playSong(userData?.songs[0].id); + } else { + playSong(userData?.currentSong.id); + } +}); + +pauseButton.addEventListener("click", pauseSong); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md deleted file mode 100644 index d65212aca6b..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 63ec14d1c216aa063f0be4af -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive. - -To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively. - -Since these will not change, remember to use `const` to declare them. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#products-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#dessert-card-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md deleted file mode 100644 index 98110e0bc8a..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 63ec19978a066607e23439f8 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#clear-cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md deleted file mode 100644 index b3616baccb4..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 63ec1a16f930b108b8a76806 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#total-items` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#subtotal` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#taxes` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#total` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md deleted file mode 100644 index a973654d0d6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 63ec1bbf5584390a7d08d41f -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`. - -Then, use `let` to declare a variable named `isCartShowing` and set it to `false`. - -# --hints-- - -You should use `document.getElementById()` to get the `#show-hide-cart` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should use `let` to declare a variable named `isCartShowing`. - -```js -assert.match(code, /let\s+isCartShowing/); -``` - -You should set the `isCartShowing` variable to `false`. - -```js -assert.match(code, /let\s+isCartShowing\s*=\s*false/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md deleted file mode 100644 index 172acaf6e3f..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 63ec1cb59f2a4c0be5b6dfa0 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products. - -# --hints-- - -You should declare a `products` variable with `const`. - -```js -assert.match(code, /const\s+products/); -``` - -You should set the `products` variable to an empty array. - -```js -assert.match(code, /const\s+products\s*=\s*\[\s*\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md deleted file mode 100644 index 0815e4ecb06..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 63ec20a06fff670d37befbd9 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -You now need to start adding products. Before you do that, you need to consider the structure of your product data. A product will need a unique identifier to distinguish it from other products, a price so people know how much it costs, and a name so people know what they are buying. You should also add a category to each product. - -Add an object to your `products` array. Give this object an `id` property set to the number `1`, a `name` property set to `Vanilla Cupcakes (6 Pack)`, a `price` property set to the number `12.99`, and a `category` property set to `Cupcake`. - -# --hints-- - -Your products array should have one value. - -```js -assert.equal(products.length, 1); -``` - -Your products array should have an object as its first value. - -```js -assert.isObject(products[0]); -``` - -Your products array should have an object with an `id` property set to the number `1`. - -```js -assert.equal(products[0].id, 1); -``` - -Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`. - -```js -assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your products array should have an object with a `price` property set to the number `12.99`. - -```js -assert.equal(products[0].price, 12.99); -``` - -Your products array should have an object with a `category` property set to `Cupcake`. - -```js -assert.equal(products[0].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md deleted file mode 100644 index 30754019c8c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md +++ /dev/null @@ -1,472 +0,0 @@ ---- -id: 63ec3287b182ec0efe8a3135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up. - -| `name` | `price` | `category` | -| ------------------------------ | ------- | ----------- | -| `French Macaroon` | `3.99` | `Macaroon` | -| `Pumpkin Cupcake` | `3.99` | `Cupcake` | -| `Chocolate Cupcake` | `5.99` | `Cupcake` | -| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` | -| `Strawberry Ice Cream` | `2.99` | `Ice Cream` | -| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` | -| `Strawberry Pretzel` | `4.99` | `Pretzel` | -| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` | -| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` | -| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` | -| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` | - -# --hints-- - -Your second object in the `products` array should have an `id` property set to the number `2`. - -```js -assert.equal(products[1].id, 2); -``` - -Your second object in the `products` array should have a `name` property set to `French Macaroon`. - -```js -assert.equal(products[1].name, 'French Macaroon'); -``` - -Your second object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[1].price, 3.99); -``` - -Your second object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[1].category, 'Macaroon'); -``` - -Your third object in the `products` array should have an `id` property set to the number `3`. - -```js -assert.equal(products[2].id, 3); -``` - -Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`. - -```js -assert.equal(products[2].name, 'Pumpkin Cupcake'); -``` - -Your third object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[2].price, 3.99); -``` - -Your third object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[2].category, 'Cupcake'); -``` - -Your fourth object in the `products` array should have an `id` property set to the number `4`. - -```js -assert.equal(products[3].id, 4); -``` - -Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`. - -```js -assert.equal(products[3].name, 'Chocolate Cupcake'); -``` - -Your fourth object in the `products` array should have a `price` property set to the number `5.99`. - -```js -assert.equal(products[3].price, 5.99); -``` - -Your fourth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[3].category, 'Cupcake'); -``` - -Your fifth object in the `products` array should have an `id` property set to the number `5`. - -```js -assert.equal(products[4].id, 5); -``` - -Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`. - -```js -assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)'); -``` - -Your fifth object in the `products` array should have a `price` property set to the number `10.99`. - -```js -assert.equal(products[4].price, 10.99); -``` - -Your fifth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[4].category, 'Pretzel'); -``` - -Your sixth object in the `products` array should have an `id` property set to the number `6`. - -```js -assert.equal(products[5].id, 6); -``` - -Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`. - -```js -assert.equal(products[5].name, 'Strawberry Ice Cream'); -``` - -Your sixth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[5].price, 2.99); -``` - -Your sixth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[5].category, 'Ice Cream'); -``` - -Your seventh object in the `products` array should have an `id` property set to the number `7`. - -```js -assert.equal(products[6].id, 7); -``` - -Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`. - -```js -assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)'); -``` - -Your seventh object in the `products` array should have a `price` property set to the number `9.99`. - -```js -assert.equal(products[6].price, 9.99); -``` - -Your seventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[6].category, 'Macaroon'); -``` - -Your eighth object in the `products` array should have an `id` property set to the number `8`. - -```js -assert.equal(products[7].id, 8); -``` - -Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`. - -```js -assert.equal(products[7].name, 'Strawberry Pretzel'); -``` - -Your eighth object in the `products` array should have a `price` property set to the number `4.99`. - -```js -assert.equal(products[7].price, 4.99); -``` - -Your eighth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[7].category, 'Pretzel'); -``` - -Your ninth object in the `products` array should have an `id` property set to the number `9`. - -```js -assert.equal(products[8].id, 9); -``` - -Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`. - -```js -assert.equal(products[8].name, 'Butter Pecan Ice Cream'); -``` - -Your ninth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[8].price, 2.99); -``` - -Your ninth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[8].category, 'Ice Cream'); -``` - -Your tenth object in the `products` array should have an `id` property set to the number `10`. - -```js -assert.equal(products[9].id, 10); -``` - -Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`. - -```js -assert.equal(products[9].name, 'Rocky Road Ice Cream'); -``` - -Your tenth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[9].price, 2.99); -``` - -Your tenth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[9].category, 'Ice Cream'); -``` - -Your eleventh object in the `products` array should have an `id` property set to the number `11`. - -```js -assert.equal(products[10].id, 11); -``` - -Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`. - -```js -assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)'); -``` - -Your eleventh object in the `products` array should have a `price` property set to the number `11.99`. - -```js -assert.equal(products[10].price, 11.99); -``` - -Your eleventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[10].category, 'Macaroon'); -``` - -Your twelfth object in the `products` array should have an `id` property set to the number `12`. - -```js -assert.equal(products[11].id, 12); -``` - -Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`. - -```js -assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)'); -``` - -Your twelfth object in the `products` array should have a `price` property set to the number `12.99`. - -```js -assert.equal(products[11].price, 12.99); -``` - -Your twelfth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[11].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md deleted file mode 100644 index 2a000e8614e..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 63ec3427fc3e9214c9ed2a14 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that. - -Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function. - -# --hints-- - -You should call the `.forEach` method of your `products` array. - -```js -assert.match(code, /products\.forEach\(/); -``` - -You should use arrow syntax to create an empty callback function. - -```js -assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/) -``` - -You should pass your empty callback function to the `.forEach` method. - -```js -assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md deleted file mode 100644 index e9a2c069456..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 63ec36f6133df7160be3ec66 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Remember that you can use destructuring to extract multiple values from an array or object in a single statement. - -For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in. - -# --hints-- - -You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters. - -```js -assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/); -``` - -Your destructuring should be the first parameter of the callback function. - -```js -assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - () => {} -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md deleted file mode 100644 index 4add604d105..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 63ec47b454495519739486a7 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable. - -# --hints-- - -You should use access the `innerHTML` property of the `dessertCards` variable. - -```js -assert.match(code, /dessertCards\.innerHTML/); -``` - -You should use the addition assignment operator on the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/); -``` - -You should add an empty template literal string to the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md deleted file mode 100644 index 02a59b523b4..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 63ee5d38a5d29d0696f8d820 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable. - -# --hints-- - -You should create a `div` element. - -```js -assert.isAtLeast(document.querySelectorAll('div')?.length, 12); -``` - -Your `div` element should have a class of `dessert-card`. - -```js -assert.equal(document.querySelectorAll('.dessert-card')?.length, 12); -``` - -You should create an `h2` element. - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.length, 12); -``` - -Your `h2` element should have the text of the `name` variable. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your `h2` element should be inside the `div` element. - -```js -assert.equal(document.querySelectorAll('div h2')?.length, 12); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` - - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md deleted file mode 100644 index 96485328760..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63ee5d8f9e7168076e932fe2 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -After your `h2` element, create two `p` elements. Give the first a `class` of `dessert-price`, and the text of the `price` variable with a dollar sign in front of it. Give the second a `class` of `product-category`, and the text `Category:` followed by the value of the `category` variable. - -# --hints-- - -You should create two `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card')?.children.length, 3); -assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2) -``` - -Your `p` elements should come after your `h2` element. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2'); -assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P'); -assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P'); -``` - -Your first `p` element should have a `class` of `dessert-price`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price'); -``` - -Your first `p` element should have the text of the `price` variable with a dollar sign in front of it. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99'); -``` - -Your second `p` element should have a `class` of `product-category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category'); -``` - -Your second `p` element should have the text `Category:` followed by the value of the `category` variable. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              - -
                                                              - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md deleted file mode 100644 index 6092f597046..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 63ee5e0f08e82208364c4128 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Finally, after your `p` elements, create a `button` element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `Add to cart` for the text. - -# --hints-- - -You should create a `button` element. - -```js -assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12); -``` - -Your `button` element should come after your `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P'); -assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling); -``` - -Your `button` element should have an `id` set to the value of the `id` variable. - -```js -assert.equal(document.querySelector('.dessert-card button')?.id, '1'); -``` - -Your `button` element should have a `class` of `btn add-to-cart-btn`. - -```js -assert.include(document.querySelector('.dessert-card button')?.className, 'btn'); -assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn'); -``` - -Your `button` element should have the text `Add to cart`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md deleted file mode 100644 index 44ba9af32dc..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 63ee5ea8be892e0955ab346c -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -You are already familiar with an HTML `class`, but JavaScript also has a class. In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods. - -The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class: - -```js -class Computer {}; -``` - -Declare a `ShoppingCart` class. - -# --hints-- - -You should declare a `ShoppingCart` variable. - -```js -assert.match(code, /ShoppingCart/); -``` - -You should use the `class` keyword to declare a `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*/); -``` - -Your `ShoppingCart` class should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md deleted file mode 100644 index 87839e53275..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 63ee5fc113bcb20a5db9214b -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Classes have a special `constructor` method, which is called when a new instance of the class is created. The `constructor` method is a great place to initialize properties of the class. Here is an example of a class with a `constructor` method: - -```js -class Computer { - constructor() { - } -} -``` - -Add an empty `constructor` method to the `ShoppingCart` class. - -# --hints-- - -You should add a `constructor` method to the `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/) -``` - -Your `constructor` method should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md deleted file mode 100644 index 4f7a2390687..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 63ee611d478dca0b77f6a393 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -The `this` keyword in JavaScript is used to refer to the current object. Depending on where `this` is used, what it references changes. In the case of a class, it refers to the instance of the object being constructed. You can use the `this` keyword to set the properties of the object being instantiated. Here is an example: - -```js -class Computer { - constructor() { - this.ram = 16; - } -} -``` - -In your constructor, use the `this` keyword to set the `items` property to an empty array. Also, set the `total` property to `0`, and the `taxRate` property to `8.25`. - -# --hints-- - -You should use the `this` keyword to set the `items` property of your class to an empty array. - -```js -assert.match(code, /this\.items/); -const cart = new ShoppingCart(); -assert.isArray(cart.items); -assert.isEmpty(cart.items); -``` - -You should use the `this` keyword to set the `total` property of your class to `0`. - -```js -assert.match(code, /this\.total/); -const cart = new ShoppingCart(); -assert.equal(cart.total, 0); -``` - -You should use the `this` keyword to set the `taxRate` property of your class to `8.25`. - -```js -assert.match(code, /this\.taxRate/); -const cart = new ShoppingCart(); -assert.equal(cart.taxRate, 8.25); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - - } -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md deleted file mode 100644 index 86c81b0332a..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 63ee7c664f9b65137d925c8a -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Your `ShoppingCart` class needs the ability to add items. Create an empty `addItem` method, which takes two parameters: `id` and `products`. Creating a method might look like this: - -```js -class Computer { - constructor() { - this.ram = 16; - } - - addRam(amount) { - this.ram += amount; - } -} -``` - -The first parameter, `id`, is the `id` of the product the user has added to their cart. The second parameter, `products`, is an array of product objects. By using a parameter instead of directly referencing your existing `products` array, this method will be more flexible if you wanted to add additional product lists in the future. - -# --hints-- - -Your `ShoppingCart` class should have an `addItem` method. - -```js -const cart = new ShoppingCart(); -assert.isFunction(cart.addItem); -``` - -Your `addItem` method should take two parameters: `id` and `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/); -``` - -Your `addItem` method should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md deleted file mode 100644 index 88900979e4b..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 63eea5cea403a81a68ae493c -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -You need to find the product that the user is adding to the cart. Remember that arrays have a `.find()` method. In your `addItem` function, declare a `product` variable, and assign it the value of calling the `.find()` method on the `products` array. - -For the callback to `.find()`, pass a function that takes a single parameter `item`, and returns whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -# --hints-- - -You should declare a `product` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=/); -``` - -You should call the `.find()` method on your `products` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(/); -``` - -You should pass a callback function to the `.find()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/); -``` - -The callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/); -``` - -The callback function should return whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/); -``` - -You should assign the value of the `.find()` method to the `product` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md deleted file mode 100644 index fa4bbc91e2f..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63eea817673c8e1c22927fa6 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Use `const` and destructuring to extract `name` and `price` variables from `product`. - -# --hints-- - -You should use destructuring to get the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/); -``` - -You should use `const` to declare the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/); -``` - -You should use destructuring to get the `name` and `price` variables from `product`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md deleted file mode 100644 index 21089f88380..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 63eea8e1e143ae1d098c8c9d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Now you need to push the `product` into the cart's `items` array. Remember to use the `this` keyword. - -# --hints-- - -You should call the `push` method on the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.push\(/); -``` - -Remember you need to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.push\(/); -``` - -You should `push` the `product` variable to the `items` array. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.deepEqual(cart.items, [products[0]]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md deleted file mode 100644 index f1583334ed8..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 63eeb8e86becbf1e75c2cb0d -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -You now need a total count of each product that the user has in the cart. Declare a `totalCountPerProduct` variable, and assign it an empty object. - -# --hints-- - -You should declare a `totalCountPerProduct` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/); -``` - -You should use `const` to declare `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/); -``` - -You should assign an empty object to `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md deleted file mode 100644 index af217952d82..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63eedebb0ec0231ff1cede1a -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Use the `.forEach()` method to loop through the `items` array. Pass an empty callback function that takes a single parameter `dessert`. - -# --hints-- - -You should use the `.forEach()` method on your `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.forEach\(/); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(/); -``` - -You should pass a callback function to the `.forEach()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/); -``` - -Your callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/); -``` - -Your callback function should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md deleted file mode 100644 index 24c1ac26daf..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 63efdbc22a0c56070beabed7 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -In your `forEach` callback, you need to update the `totalCountPerProduct` object. Using the `id` of the current `dessert` as your property, update the value of the property to be the current value plus one. Do not use the addition assignment operator for this. - -# --hints-- - -You should use dot notation to access the `id` property of `dessert`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /dessert\.id/); -``` - -You should use bracket notation to access the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the assignment operator to update the value of the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/); -``` - -You should update the value of `totalCountPerProduct` to be the current value plus one. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md deleted file mode 100644 index cba3963dbee..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 63efe370bbfc4a08d500118e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -You now have a small bug. When you try to access a property of an object and the property doesn't exist, you get `undefined`. This means if the dessert isn't already present in the `totalCountPerProduct` object, you end up trying to add `1` to `undefined`, which results in `NaN`. - -To fix this, you can use the `||` operator to set the value to `0` if it doesn't exist. Wrap your right-hand `totalCountPerProduct[data.id]` in parentheses, and add `|| 0` to the end of the expression. - -# --hints-- - -You should wrap your right-hand `totalCountPerProduct[data.id]` in parentheses. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the `||` operator. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/); -``` - -You should use `0` as your fallback value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/); -``` - -You should still add `1` to the value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1; - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md deleted file mode 100644 index 5e3da866f36..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 63eff02f00e69a0b2ac10b43 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Now you need to get prepared to update the display with the new product the user added. Declare a `currentProductCount` variable, and assign it the value of the `totalCountPerProduct` object's property matching the `id` of `product`. - -# --hints-- - -You should declare a `currentProductCount` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=/); -``` - -You should use `const` to declare `currentProductCount`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCount\s*=/); -``` - -You should assign the value of `totalCountPerProduct[product.id]` to `currentProductCount`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md deleted file mode 100644 index a1b63e599ad..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 63eff98ffb1d5a0d24ec79cb -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -You haven't written the code to generate the HTML yet, but if a product has already been added to the user's cart then there will be a matching element which you'll need. - -Use `.getElementById()` to get the matching element - you'll be setting the `id` value to `product-count-for-id${product.id}`, so use a template literal to query that value. - -Assign your query to a `currentProductCountSpan` variable. - -# --hints-- - -You should declare a `currentProductCountSpan` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/); -``` - -You should use `const` to declare `currentProductCountSpan`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/); -``` - -You should use `document.getElementById()` to get the matching element. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /document\.getElementById\(/); -``` - -You should use a template literal to query the `id` value. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/); -``` - -You should assign the value of `document.getElementById()` to `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md deleted file mode 100644 index 4573e021ac0..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63effe558c87a70e7072e447 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. - -# --hints-- - -You should check if `currentProductCount` is greater than `1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/); -``` - -You should use a ternary operator with your `currentProductCount > 1` condition. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/); -``` - -You should use `undefined` as the truthy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should use `undefined` as the falsy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md deleted file mode 100644 index aebdaf9a24f..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 63f0165121a9181342d5bc66 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -For your truthy expression, removing the `undefined`, you need to update the `textContent` of the `currentProductCountSpan` to be the `currentProductCount` followed by an `x`. Use a template literal to do so. - -# --hints-- - -You should remove the `undefined` from your truthy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should access the `textContent` property of `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/); -``` - -You should use template literal syntax to update the `textContent` to be `${currentProductCount}x`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 ? undefined : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md deleted file mode 100644 index b6f14c6ae69..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 63f017b4ad028a148eb713c0 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -For your falsy expression, you'll need to add new HTML to your `productsContainer`. Start by removing the `undefined`, then use the addition assignment operator and template literal syntax to add a `div` with the `class` set to `product` and the `id` set to `dessert${id}` to the `innerHTML` property of the `productsContainer`. - -# --hints-- - -You should remove the `undefined` from your falsy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /undefined/); -``` - -You should use the addition assignment operator to add HTML to the `productsContainer`. Remember that HTML goes in the `innerHTML` property. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/); -``` - -You should use template literal syntax to add HTML to the `productsContainer`. - -```js -assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/); -``` - -You should add a `div` to the `productsContainer`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.tagName, "DIV"); -``` - -Your `div` should have the `class` set to `product`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.className, "product"); -``` - -Your `div` should have the `id` set to `dessert${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.id, "dessert1"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md deleted file mode 100644 index dd3815162fa..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 63f01861f813e01564c95315 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Inside your `div`, add two `p` elements. Set the text of the second `p` element to be the value of the `price` variable. - -# --hints-- - -You should add two `p` elements inside your `div` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children.length, 2); -assert.equal(div?.children[0].tagName, 'P'); -assert.equal(div?.children[1].tagName, 'P'); -``` - -Your second `p` element should have the text of the `price` variable. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children[1].textContent, '12.99'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              - -
                                                              - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md deleted file mode 100644 index da747a73c32..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 63f018f04e487e164dc27bd9 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable. - -# --hints-- - -Your first `p` element should have a `span` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children.length, 1); -assert.equal(p.children[0].tagName, 'SPAN'); -``` - -Your `span` element should have a `class` of `product-count`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].className, 'product-count'); -``` - -Your `span` element should have an `id` of `product-count-for-id${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].id, 'product-count-for-id1'); -``` - -Your first `p` element should have the text of the `name` variable. This should be outside the span. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md deleted file mode 100644 index 852ac25d2b7..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 63f01c9791a0aa1751c73760 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -There is still more functionality that your `ShoppingCart` class needs, but first you need to be able to test the code you have currently written. You'll need to instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples: - -```js -const myComputer = new Computer(); -``` - -Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object. - -# --hints-- - -You should use `const` to declare a `cart` variable. - -```js -assert.match(code, /const\s+cart\s*=/); -``` - -You should use the `new` keyword to instantiate a new `ShoppingCart` object. - -```js -assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/); -``` - -You should assign your new `ShoppingCart` object to the `cart` variable. - -```js -assert.isTrue(cart instanceof ShoppingCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } -}; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md deleted file mode 100644 index c2590b8a8ea..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f0224ceb16dc196d2c860a -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -You need to get all of the `Add to cart` buttons that you added to the DOM earlier. Declare an `addToCartBtns` variable, and assign it the value of calling the `getElementsByClassName()` method on the `document` object, passing in the string `add-to-cart-btn`. - -# --hints-- - -You should use `const` to declare your `addToCartBtns` variable. - -```js -assert.match(code, /const\s+addToCartBtns\s*=/); -``` - -You should call the `getElementsByClassName()` method on the `document` object. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/); -``` - -You should pass the string `add-to-cart-btn` to the `getElementsByClassName()` method. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/); -``` - -You should assign the value returned by the `getElementsByClassName()` method to the `addToCartBtns` variable. - -```js -assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } -}; - -const cart = new ShoppingCart(); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md deleted file mode 100644 index fd0129e37ca..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f026d041bc6c1a3d5cba0f -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -You need to iterate through the buttons in your `addToCartBtns` variable. However, `.getElementsByClassName()` returns a Collection, which does not have a `forEach` method. - -Use the spread operator on the `addToCartBtns` variable to convert it into an array. Then, use the `forEach` method to iterate through the array. Do not pass a callback function yet. - -# --hints-- - -You should use the spread operator on the `addToCartBtns` variable. - -```js -assert.match(code, /\.\.\.addToCartBtns/); -``` - -You should spread the `addToCartBtns` variable into an array. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/); -``` - -You should use the `forEach` method on the array you created. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/); -``` - -You should not pass a callback function to the `forEach` method. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md deleted file mode 100644 index cae3ba72dbe..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0284532742c1b26c7a052 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Add your callback function to the `forEach` method. It should take a `btn` parameter. Then, in the callback, add an event listener to the `btn`. The event listener should listen for a `click` event, and should take another callback with an `event` parameter. The second callback should be empty. - -# --hints-- - -You should use arrow syntax to add a callback function to the `forEach` method which takes a `btn` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/); -``` - -You should add an event listener to the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/); -``` - -You should add an empty callback function to the event listener. Remember to give it an `event` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md deleted file mode 100644 index c27e13717f0..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0289df84a581bbdbd29b7 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -In your event listener callback, call the `.addItem()` method of your `cart` object, and pass in the `event.target.id`. Remember that the `id` here will be a string, so you need to convert it to a number. - -Pass your `products` array as the second argument. - -# --hints-- - -Your event listener callback should call the `.addItem()` method of your `cart` object. - -```js -assert.match(code, /cart\.addItem\(/); -``` - -Your `.addItem()` method should be called with the `event.target.id` as the first argument. Remember to convert the `id` to a number using `Number()`. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/); -``` - -Your `.addItem()` method should be called with the `products` array as the second argument. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - - }) - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md deleted file mode 100644 index 4b53ebc3ff1..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 63f0295e673b661ccb299e8a -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -You need a way to access the total number of items in the cart. The best way to do this is to add another method to your `ShoppingCart` class, rather than accessing the `items` array directly. - -Add a `getCounts` method to the `ShoppingCart` class. It should return the number of items in the `items` array. - -# --hints-- - -Your `ShoppingCart` class should have a `getCounts` method. - -```js -assert.isFunction(cart.getCounts); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const afterCounts = code.split('getCounts')[1]; -assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/); -``` - -Your `getCounts` method should return the number of items in the `items` array. - -```js -assert.equal(cart.getCounts(), 0); -cart.addItem(1, products); -assert.equal(cart.getCounts(), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md deleted file mode 100644 index b75a16738ae..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 63f029b96b9e9e1df93be951 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Now you can update the total number of items on the webpage. Assign the value of your `cart` object's `.getCounts()` method to the `textContent` of the `totalNumberOfItems` variable. - -# --hints-- - -You should access the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent/) -``` - -You should assign the value of your `cart` object's `.getCounts()` method to the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md deleted file mode 100644 index ff8d5d86a2e..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 63f02a4ef92d711ec1ff618c -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -You also need to update the total price of the cart when the user adds an item. Create a `calculateTotal` method in the `ShoppingCart` class. - -In that method, declare a `subTotal` variable and use the `reduce` method on the `items` array to calculate the sum of the `price` property of each item in the array. Use `total` and `item` as the parameters for your callback. - -Remember to set your initial value in the `reduce` method. - -# --hints-- - -You should create a `calculateTotal` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTotal); -``` - -Your `calculateTotal` method should have a `subTotal` variable declared with `const`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+subTotal\s*=/); -``` - -Your `calculateTotal` method should use the `reduce` method on the `items` array. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/); -``` - -Your `reduce` callback should use `total` and `item` as the first and second parameter. Remember to use arrow function syntax. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/); -``` - -Your `reduce` callback should return the sum of `total` and `item.price`. Use an implicit return. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/); -``` - -Your `reduce` call should have an initial value of `0`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md deleted file mode 100644 index 8d4036f7ea6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f02b22cce1c11fe9604381 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Part of the total cost will include the tax, so you need to calculate that as well. Create a `calculateTaxes` method in the `ShoppingCart` class. This method should take an `amount` parameter. - -# --hints-- - -You should create a `calculateTaxes` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTaxes); -``` - -Your `calculateTaxes` method should take an `amount` parameter. - -```js -assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md deleted file mode 100644 index 82d277b0ab0..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f02bdeb9b428208b97eb6b -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -For clarity, wrap the `taxRate / 100` calculation in parentheses. - -# --hints-- - -You should divide the `taxRate` by 100 in your `calculateTaxes` method. Remember to use the `this` keyword. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/); -``` - -You should wrap the `this.taxRate / 100` calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/); -``` - -You should multiply the `amount` parameter by the `taxRate` divided by 100 in your `calculateTaxes` method. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/); -``` - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -```js -console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md deleted file mode 100644 index 0954c9b4ac6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 63f02c6e18773921ba50aa53 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Because of the way computers store and work with numbers, calculations involving decimal numbers can result in some strange behavior. For example, `0.1 + 0.2` is not equal to `0.3`. This is because computers store decimal numbers as binary fractions, and some binary fractions cannot be represented exactly as decimal fractions. - -We want to clean up the number result from your calculation. Wrap your calculation in parentheses (don't include the `return` statement!) and call the `.toFixed()` method on it. Pass the `.toFixed()` method the number `2` as an argument. This will round the number to two decimal places and return a string. - -# --hints-- - -You should wrap your calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/) -``` - -You should call the `.toFixed()` method on your calculation. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/) -``` - -You should pass the `.toFixed()` method the number `2` as an argument. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return (this.taxRate / 100) * amount; - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md deleted file mode 100644 index d925dca7812..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 63f0311f5ea9382388d6124f -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -The issue with `.toFixed()` returning a string is that you want to be able to perform calculations with the tax rate. To fix this, you can pass the `.toFixed()` call (including the calculation) to the `parseFloat()` function. This will convert the fixed string back into a number, preserving the existing decimal places. - -Pass your `.toFixed()` call to `parseFloat()`. - -# --hints-- - -You should pass your entire calculation (excluding the `return` statement) to `parseFloat()`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return ((this.taxRate / 100) * amount).toFixed(2); - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md deleted file mode 100644 index b0527ca7c31..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f033fdb1fbcc254999fcc3 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Your cart currently isn't visible on the webpage. To make it visible, start by adding an event listener to the `cartBtn` variable, listening for the click event. The callback does not need any parameters. - -# --hints-- - -You should add an event listener to the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/); -``` - -You should add an empty callback function (using arrow syntax) to the event listener. Remember that it does not need any parameters. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md deleted file mode 100644 index 48e1daa6e0e..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f03446c2ed3e264be6c7fc -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Start by inverting the value of `isCartShowing`. Remember that you can use the logical not operator `!` to invert the value of a boolean. Assign the inverted value to `isCartShowing`. - -# --hints-- - -You should invert the value of `isCartShowing`. - -```js -assert.match(code, /!isCartShowing/); -``` - -You should assign the inverted value of `isCartShowing` to `isCartShowing`. - -```js -assert.match(code, /isCartShowing\s*=\s*!isCartShowing/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md deleted file mode 100644 index 1e9f9959098..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f0348a54a177272071a595 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `Hide`, otherwise set it to `Show`. - -# --hints-- - -You should use the assignment operator on the `textContent` property of the `showHideCartSpan` variable. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Hide` if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Show` if `isCartShowing` is false. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md deleted file mode 100644 index 3fcf304cca6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 63f034d012f74627ce538d3a -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `block`, otherwise set it to `none`. - -Now you should be able to see your cart and add items to it. - -# --hints-- - -You should access the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/) -``` - -You should use the assignment operator on the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `block` if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `none` if `isCartShowing` is false. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md deleted file mode 100644 index a4c481b5796..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f03686c5ea863533ec71f4 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Declare a variable `tax` and assign it the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument. - -# --hints-- - -Use `const` to declare a variable named `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+tax\s*=/); -``` - -Assign the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument, to the `tax` variable. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md deleted file mode 100644 index 936b8a7add9..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f036ec91fdf238c90665f5 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Update the `total` value to be the sum of the `subTotal` and `tax` values. - -# --hints-- - -You should update the `total` value. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total/); -``` - -You should set the `total` value to be the sum of the `subTotal` and `tax` values. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md deleted file mode 100644 index cba09f5a3e6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 63f0370b340915399d31e5eb -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -You're going to update the HTML in this method as well. Set the `textContent` of the `cartSubTotal` to be the value of `subTotal` to a fixed 2 decimal places. Use template literal syntax to add the dollar sign to the beginning of the value. - -# --hints-- - -You should access the `textContent` property of the `cartSubTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `subTotal` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartSubTotal` element to your template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md deleted file mode 100644 index 37c08222320..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 63f0374d5351223a747c301d -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Following the same pattern as your `cartSubTotal`, update the `cartTaxes` to display the `tax` value, and your `cartTotal` to display the `total` property. - -# --hints-- - -You should access the `textContent` property of the `cartTaxes` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/); -``` - -You should call the `.toFixed()` method on the `tax` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTaxes` element to `tax.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should access the `textContent` property of the `cartTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `total` variable, passing `2` as the argument. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTotal` element to your `total.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md deleted file mode 100644 index 56336e0263e..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f0378e173e3c3b7638b528 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Finally, return the value of the `total` property. Remember your `this` keyword. - -# --hints-- - -Your `calculateTotal` method should return the value of the `total` property. - -```js -assert.equal(cart.calculateTotal(), 0); -cart.addItem(1, products); -assert.approximately(cart.calculateTotal(), 14.06, 0.1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md deleted file mode 100644 index db0f9862452..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f038a0ae041d3c5b0cdf23 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Your last feature is to allow users to clear their cart. Add a `clearCart()` method to your `ShoppingCart` class. - -# --hints-- - -Your `ShoppingCart` class should have a `clearCart` method. - -```js -assert.isFunction(cart.clearCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md deleted file mode 100644 index 50339959f43..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -id: 63f038e671d3f73d5a041973 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -The first thing you should do is check if the `items` array is empty. If it is, display an `alert` to the user with the text `Your shopping cart is already empty`, then return from the function. - -Remember that `0` is a falsy value, so you can use the `!` operator to check if the array is empty. - -After displaying the alert, return from the function to stop execution. - -# --hints-- - -You should create an `if` statement that checks if the `items` array is empty, using the negation operator. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/); -``` - -Your `if` statement should display an `alert` to the user with the text `Your shopping cart is already empty`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/); -``` - -Your `if` statement should return from the function. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md deleted file mode 100644 index 23f034e9067..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 63f039dbcef7673e4e758fa3 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Browsers have a built-in `confirm()` function which displays a confirmation prompt to the user. `confirm()` accepts a string, which is the message displayed to the user. It returns `true` if the user confirms, and `false` if the user cancels. - -Declare a variable `isCartCleared` and assign it the value of calling `confirm()` with the string `"Are you sure you want to clear all items from your shopping cart?"`. - -# --hints-- - -You should use `const` to declare the `isCartCleared` variable. - -```js -const afterClearCart = code.split('clearCart()')[1]; -assert.match(afterClearCart, /const\s+isCartCleared\s*=/); -``` - -You should call the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(/); -``` - -You should pass the string `Are you sure you want to clear all items from your shopping cart?` to the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -You should assign the value of the `confirm()` function to the `isCartCleared` variable. - -```js -assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md deleted file mode 100644 index be4fde050a5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -id: 63f03a7143a6ef3f7f3344f0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -You only want to clear the cart if the user confirms the prompt. Create an `if` statement that checks if the user confirmed the prompt. - -In the `if` statement, set the `items` property back to an empty array, then set the `total` property to `0`. - -# --hints-- - -You should create an `if` statement that checks if the user confirmed the prompt. Remember that you can check the truthiness of `isCartCleared` directly. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/); -``` - -Your `if` statement should set the `items` property back to an empty array. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/); -``` - -Your `if` statement should set the `total` property to `0`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md deleted file mode 100644 index 3b6705168d8..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f03ac2b428b2404a5a7518 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -You also need to start clearing the HTML. Set the `innerHTML` property of the `productsContainer` back to an empty string. - -# --hints-- - -In your `if` statement, you should set the `innerHTML` property of the `productsContainer` back to an empty string. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md deleted file mode 100644 index 5a1e7f099f3..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 63f03af535682e4138fdb915 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Set the `textContent` of the `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal` elements all to the number `0`. - -# --hints-- - -You should set the `textContent` of the `totalNumberOfItems` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartSubTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTaxes` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTotal\.textContent\s*=\s*0/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md deleted file mode 100644 index 913c5c53bdb..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md +++ /dev/null @@ -1,744 +0,0 @@ ---- -id: 63f03b1ed5ab15420c057463 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Your final step is to make your clear button functional. Add a `click` event listener to the `clearCartBtn`. For the callback, you can pass in `cart.clearCart` directly. - -However, doing so will not work, because the context of `this` will be the `clearCartBtn` element. You need to bind the `clearCart` method to the `cart` object. - -You can do this by passing `cart.clearCart.bind(cart)` as the callback. - -And with that, your shopping cart project is complete! - -# --hints-- - -You should add an event listener to your `clearCartBtn` element. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(/); -``` - -Your event listener should listen for the `click` event. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/); -``` - -Your event listener should take `cart.clearCart.bind(cart)` as the callback. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - -clearCartBtn.addEventListener("click", cart.clearCart.bind(cart)); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md deleted file mode 100644 index c33ce088a1c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f6721d5110af243ef8f3d9 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now call your `.calculateTotal()` method inside your `forEach` loop. - -# --hints-- - -You should call `cart.calculateTotal()` inside your `forEach` loop. - -```js -const afterForEach = code.split('[...addToCartBtns].forEach(')[1]; -assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                              -

                                                              Desserts Page

                                                              -
                                                              -
                                                              - -
                                                              - -
                                                              -

                                                              Total number of items: 0

                                                              -

                                                              Subtotal: $0

                                                              -

                                                              Taxes: $0

                                                              -

                                                              Total: $0

                                                              -
                                                              -
                                                              -
                                                              - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                              -

                                                              ${name}

                                                              -

                                                              $${price}

                                                              -

                                                              Category: ${category}

                                                              - -
                                                              - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                              -

                                                              - ${name} -

                                                              -

                                                              ${price}

                                                              -
                                                              - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md deleted file mode 100644 index a2ce162457c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9a -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. - -In JavaScript, you can access the DOM by referencing the global `document` object. - -To view the DOM, log it to the console with `console.log(document)`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast
                                                              - Lunch
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md deleted file mode 100644 index aab244748d6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9b -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -In our HTML document, we have a form element with an `id` attribute: `
                                                              ` - -To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. - -The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              - -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - - -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md deleted file mode 100644 index 31afd7303fc..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9c -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. - -Forms have an `onsubmit` event that can execute a function when the form is submitted. - -For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. - -Assign a function named `calculate` to the `onsubmit` event of your form. - -You will create the `calculate` function later. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md deleted file mode 100644 index bcd3b1bc287..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9d -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. Here is an example of an empty function called `square`: - -```js -function square() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(typeof calculate === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md deleted file mode 100644 index 8a02a67b570..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9e -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -By default, `onsubmit` will pass the event object as a parameter to the function it calls. People usually call it `e`, short for event. Update the `calculate()` function to accept `e` as parameter. - -Here is an example of an empty function called `square` that takes a `number` as a parameter: - -```js -function square(number) {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md deleted file mode 100644 index 0cd5d1525fd..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9f -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. - -Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md deleted file mode 100644 index ee8e8356f0d..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da0 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. - -To access elements with a certain class name, we use the `getElementsByClassName()` method. - -Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md deleted file mode 100644 index 9b80e0f827c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da1 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md deleted file mode 100644 index c5a2856f2c3..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da2 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -To make the document objects easier to handle, let's turn them into an array. Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md deleted file mode 100644 index 40f6a846fd5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da3 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md deleted file mode 100644 index 725bff25987..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da4 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md deleted file mode 100644 index fead88a0598..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da5 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. - -The `map()` method allows us to do exactly that. - -Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .toString() - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md deleted file mode 100644 index 714497fddbb..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da6 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Now we need to provide a function to `map()` that will be performed on each item of the array. - -This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: - -```js -function(meal){} -``` - -Enter in the above function as an argument in between the parentheses of the `.map()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md deleted file mode 100644 index 7d58167b80c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da7 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. - -If you want, console log `total` to see what results you are getting. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md deleted file mode 100644 index 4a199951818..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da8 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md deleted file mode 100644 index 6058cea614a..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da9 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md deleted file mode 100644 index 46dfade8b55..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daa -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. - -Chain the `reduce()` method to the `Array.from()` expression. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md deleted file mode 100644 index 065b5dce513..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dab -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: - -```js -function(accumulator, currentValue) { /* code to run */ } -``` - -or using arrow functions: - -```js -(accumulator, currentValue) => { /* code to run */ } -``` - -Insert the above callback function as an argument in the `.reduce()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md deleted file mode 100644 index 448c7702610..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dac -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. - -Here is an example of a `reduce()` method with an empty object as its initial value: - -```js -arr.reduce((accumulator, currentValue) => { - /* code to run */ -}, {}); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md deleted file mode 100644 index 4134f0401a2..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dad -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. - -We can use the reduce function as follows: - -```js -arr.reduce((accumulator, currentValue) => { - return accumulator + currentValue; -}, 0); -``` - -At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, since `arr[0] = 1 = currentValue`. - -At `arr[1]`, the function is `(1, 3) => 1 + 3`, - -Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. - -In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md deleted file mode 100644 index c9d4f5bd8ad..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 5e302e80e003129199103c78 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` - -You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. - -When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md deleted file mode 100644 index b36ed2d97b6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5e302e8ce003129199103c79 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Now let's simplify the `reduce()` callback function by refactoring it. - -Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. - -So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. - -Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md deleted file mode 100644 index 8825fbe6dd0..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dae -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. - -Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. - -If you inspect the Female radio button you will notice its id: `` - -Create a variable named `maxCalories` and set it equal to the document element with the id of `female`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md deleted file mode 100644 index 1e19c715fcf..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daf -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` - -Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md deleted file mode 100644 index 21d83417535..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db0 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. - -For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: - -```js -if (5 - 3 === 4) { - return 'Yes'; -} else { - return 'No'; -} -``` - -`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md deleted file mode 100644 index abe960e3120..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db1 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Now that we have `total` and `maxCalories`, we need to find out the difference between them. - -Create a variable named `difference` and set it equal to `total - maxCalories` - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md deleted file mode 100644 index ad3abc0bfe5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db2 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. - -To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). - -If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. - -Use the same ternary syntax that you used to determine `maxCalories`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md deleted file mode 100644 index 2dbdd8b547b..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db3 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
                                                              `. - -We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. - -Create a variable named `output` and set it equal to this division element with the `id` of `output`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md deleted file mode 100644 index 87062f28e7f..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db4 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Now it's time to create the HTML elements that we will add inside of `output`. - -To create an element, use `createElement()`. For example: - -```js -const myHeading1 = document.createElement('h1') -``` - -Create an `h3` element and assign it to a variable named `result`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md deleted file mode 100644 index 90ad3c91cb4..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db5 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Next, we will create a text node that we will later append to the `result` element. - -JavaScript has a function called `createTextNode()` to accomplish this. For example: - -```js -const myText = document.createTextNode("Hello world!") -``` - -Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md deleted file mode 100644 index b93248efe69..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db6 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -We can now use the `difference` variable that we created above. - -Insert the `difference` variable inside the parentheses of `.createTextNode()` - -If you want to see what the text currently looks like, try `console.log(resultText)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md deleted file mode 100644 index fd08248b5f0..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db7 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Notice how if `total` is less than `maxCalories`, `difference` is a negative number. - -We want to show the absolute value of the difference so it displays "300" rather than "-300". - -Wrap the `difference` in a `Math.abs()` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md deleted file mode 100644 index f066a2b3607..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db8 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md deleted file mode 100644 index d2e8c9a31c3..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db9 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Next we want to add the text from the `surplusOrDeficit` variable that we previously created. - -Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md deleted file mode 100644 index 1311c2ac849..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dba -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. - -Some people consider this a little cumbersome and prefer to use template literals instead. - -Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. - -For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. - -Convert the data inside of `createTextNode()` to be a template literal. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md deleted file mode 100644 index 923d7d02e23..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbb -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: - -```js -result.appendChild(resultText); -``` - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md deleted file mode 100644 index 09da32b6cb5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbc -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Similarly, append the `result` to the `output` element with the `appendChild()` method. - -Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md deleted file mode 100644 index ccb8660bf13..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbd -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Next, let's create and add a horizontal rule (`hr`) element to the output. - -Create an `hr` element and assign it to a variable named `line`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md deleted file mode 100644 index e0f9bd9c47c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbe -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Add the `line` to the `output` element using the `appendChild()` method. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md deleted file mode 100644 index 4c4b069fb43..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbf -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Let's create a few more HTML elements to add to the `output`. - -Create an `h4` element and assign it to a variable named `recommended`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md deleted file mode 100644 index 0becd375fa5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc0 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Create a text node and assign it to a variable named `recommendedText`. - -This is similar to how your created the `resultText` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md deleted file mode 100644 index fd2d846ab52..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc1 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. - -Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". - -This is similar to template literal syntax previously used to create `resultText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md deleted file mode 100644 index 9e9d9c9c3f2..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc2 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Append the `recommendedText` node to the `recommended` element. - -This is similar to how the `resultText` is appended to `result` previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md deleted file mode 100644 index 9264e8ac9cf..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc3 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Append the `recommended` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md deleted file mode 100644 index 0fd8978f093..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc4 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. - -Create an `h4` element and assign it to a variable named `consumed`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md deleted file mode 100644 index 6bb2536f422..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc5 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. - -For example: - -```js -consumed.innerHTML = `Hello world`; -``` - -Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md deleted file mode 100644 index 29d043f4c6e..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc6 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Append the `consumed` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md deleted file mode 100644 index c34dcad8f68..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc7 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Now it's time to add some styling which can be added directly as attributes or classes. - -In our CSS file, we have a styling rule for any elements with the class name `green-text`. - -On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. - -Now if you submit the form again and inspect the `result` element, you will see it as `

                                                              ` and notice that the text is now green. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md deleted file mode 100644 index 7298971ffec..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc8 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. - -For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. - -Set the `class` attribute of the `output` element equal to a class named `bordered-class`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md deleted file mode 100644 index 1b0bd348910..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc9 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. - -Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. - -The `calculate()` function is now finished! - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                              -
                                                              -

                                                              Calorie Counter

                                                              -
                                                              - Sex -
                                                              - - - -
                                                              - - -
                                                              -
                                                              -
                                                              -
                                                              - Breakfast -
                                                              - Lunch -
                                                              - Dinner -
                                                              - - - -
                                                              -
                                                              -
                                                              - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md deleted file mode 100644 index 56bbb142804..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dca -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. - -In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: - -```html - - - - -
                                                              -

                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md deleted file mode 100644 index db8f9bc95c1..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcb -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -We want a function to run every time the user clicks the "Add Entry" button. - -Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: - -```js -function() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md deleted file mode 100644 index 886f041422c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcc -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Inside the function, create an `input` document element and assign it to a variable named `foodInput`. - -This is similar to how you created the `result` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md deleted file mode 100644 index 6860d68731d..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcd -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Set the `placeholder` property of the `foodInput` equal to `'food name'`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md deleted file mode 100644 index 89e37a9f626..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dce -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. - -In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. - -Add the class name `food-control` to the `foodInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md deleted file mode 100644 index e0ab30e27b5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcf -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Notice that parent container of all of the inputs has an `id` of `entries`: `
                                    `. - -Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. - -This is similar to the other `appendChild()` methods that you have used previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md deleted file mode 100644 index ea1faf6c59c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md deleted file mode 100644 index 594af428356..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd1 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. - -This is similar to how to set the class of the `output` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md deleted file mode 100644 index 962a0309894..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd2 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -The `calorieInput` element should only accept numbers that are 0 or above. - -Set the `min` attribute of `calorieInput` to `0`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md deleted file mode 100644 index eac60b49fce..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd3 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. - -We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md deleted file mode 100644 index 7ffb7021744..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd4 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. - -To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md deleted file mode 100644 index 8e15285d2a9..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd5 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. - -The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md deleted file mode 100644 index df36314c4ae..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd6 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. - -Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md deleted file mode 100644 index 1e5b3e9b048..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd7 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. - -# --hints-- - -See description above for instructions. - -```js -assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md deleted file mode 100644 index 7a941b6559c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd8 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Create a variable named `clearOutput` and set it equal to a blank arrow function: - -```js -const clearOutput = () => {} -``` - -This is similar to `function clearOutput () {}`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearOutput === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md deleted file mode 100644 index e6a2d2c6337..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd9 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -We need to remove the contents inside of element with the `id` of `output`. - -In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md deleted file mode 100644 index f8984120835..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dda -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. - -Remove the `bordered-class` class. For example: - -```js -document.getElementById('my-div').classList.remove('my-class') -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md deleted file mode 100644 index 93a258c395b..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddb -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. - -In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/clearOutput\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md deleted file mode 100644 index 6a07e9aa83b..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddc -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearForm === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md deleted file mode 100644 index 88284a00280..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddd -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. - -Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. - -This is similar to how you declared the `total` variable previously in the `calculate` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md deleted file mode 100644 index 9cc201d5194..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dde -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. - -Add `foodInputs.forEach()`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md deleted file mode 100644 index 8044dac1e60..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddf -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -We need to provide a callback function in the parentheses of `forEach()`. - -This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. - -In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md deleted file mode 100644 index dd34b193b4c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de0 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. - -Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. - -This is similar to how you declared the `foodInputs` variable previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md deleted file mode 100644 index 652c8f99281..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de1 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md deleted file mode 100644 index b3cf00545fa..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de2 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. - -Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md deleted file mode 100644 index ead4dfe0e77..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de3 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Congratulations! Have fun playing with your completed calorie counter. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                    -
                                    -

                                    Calorie Counter

                                    -
                                    - Sex -
                                    - - - -
                                    - - -
                                    -
                                    -
                                    -
                                    - Breakfast -
                                    - Lunch -
                                    - Dinner -
                                    - - - -
                                    -
                                    -
                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md deleted file mode 100644 index 08bc2a4aa43..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 5d79253297c0ebb149ea9fed -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -In functional programming, we prefer immutable values over mutable values. - -Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. - -Start by creating an empty `infixToFunction` object using `const`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md deleted file mode 100644 index 3159f1d2410..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 5d7925323be8848dbc58a07a -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md deleted file mode 100644 index c5dbbab705c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792532f631702ae6d23e11 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now return the sum of `x` and `y` using the `return` keyword. - -# --hints-- - -See description above for instructions. - -```js -assert(add(1, 2) === 3 && add(100, 2000) === 2100); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md deleted file mode 100644 index 0a9d327d798..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5d7925329445167ecc2ac9c9 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. - -Assign `add` to a new variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md deleted file mode 100644 index 4e85d64fbe2..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792532b07918c3a5904913 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: - -```js -function(x) { - return x -} -``` - -First, remove the `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md deleted file mode 100644 index a9aa387addd..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792533cc8b18b6c133edc7 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: - -```js -const fn = function(x) { - return x; -} - -fn(); -``` - -Assign the anonymous function to the variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md deleted file mode 100644 index 68c44b16619..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 5d7925337954ed57a565a135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. - -Rewrite `addVar` using ES6's arrow syntax: - -```js -const fn = (x, y) => x; -``` - -Note that the value is returned implicitly. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md deleted file mode 100644 index 676f6c6f4ff..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d79253352e33dd59ec2f6de -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Add the key `+` to `infixToFunction` and assign it the value `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(infixToFunction['+'].toString() === addVar.toString()); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md deleted file mode 100644 index c44846417a5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792533d31e4f7fad33011d -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md deleted file mode 100644 index 2096072d738..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d792533e7707b9645d7b540 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Remove the now redundant `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof addVar === 'undefined'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md deleted file mode 100644 index 526e706eb08..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 5d79253378595ec568f70ab6 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Add similar definitions for `-`, `*` and `/` in `infixToFunction`. - -# --hints-- - -See description above for instructions. - -```js -assert( - infixToFunction['-'](10, 2) === 8 && - infixToFunction['*'](10, 10) === 100 && - infixToFunction['/'](100, 10) === 10 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md deleted file mode 100644 index 37432637ac6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5d7925330918ae4a2f282e7e -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md deleted file mode 100644 index 3d09b3967f2..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5d792533ed00e75d129e1b18 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). - -Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. - -This is how you would pass the `-` function: - -```js -str.replace(regex, infixToFunction["-"]) -``` - -# --hints-- - -See description above for instructions. - -```js -assert(infixEval('ab', /(a)b/) === 'aba'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md deleted file mode 100644 index 0926459ef14..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5d792533a5c42fb4d1a4b70d -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md deleted file mode 100644 index 23968d2e070..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5d79253358e8f646cbeb2bb0 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Change the `"+"` in the call to `infixToFunction` to `fn`. - -`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md deleted file mode 100644 index f3dd1211e6a..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5d792533bb38fab70b27f527 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". - -Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). - -# --hints-- - -See description above for instructions. - -```js -const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; -assert( - infixEval('23+35', regex) === '58' && - infixEval('100-20', regex) === '80' && - infixEval('10*10', regex) === '100' && - infixEval('120/6', regex) === '20' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md deleted file mode 100644 index e295114e777..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5d79253386060ed9eb04a070 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. - -To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. - -Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md deleted file mode 100644 index 1af15a10b8e..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d792533717672657b81aa69 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -When defining an arrow function with a single argument, the parentheses can be omitted: - -```js -const greeting = name => `Hello !`; -``` - -Define a function `highPrecedence` which takes a single argument `str` and returns it. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('a') === 'a'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md deleted file mode 100644 index 5c2d8560932..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5d7925335ab63018dcec11fe -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Arrow functions can have multiple statements: - -```js -const fn = (x, y) => { - const result = x + y; - return result; // explicit return statement required -}; -``` - -Use this syntax for the `highPrecedence` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md deleted file mode 100644 index 1ddd40ce5d8..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5d7925330f300c342315066d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md deleted file mode 100644 index 3bfba3454a9..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5d792533aa6443215c9b16bf -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md deleted file mode 100644 index 333b8bcb122..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925334c5e22586dd72962 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -The ternary operator has the following syntax: - -```js -const result = condition ? valueIfTrue : valueIfFalse; -const result = 1 === 1 ? 1 : 0; // 1 -const result = 9 > 10 ? "Yes" : "No"; // "No" -``` - -Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2') === '' && - highPrecedence('2+2') === '2+2' && - code.includes('?') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md deleted file mode 100644 index c5f666b8a05..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5d79253307ecd49e030bdcd1 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. - -Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2*2') === '8' && - highPrecedence('2*2') === '4' && - highPrecedence('2+2') === '2+2' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md deleted file mode 100644 index c837d8e94e1..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5d792534257122211d3043af -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. - -# --hints-- - -See description above for instructions. - -```js -assert(spreadsheetFunctions['']('x') === 'x'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md deleted file mode 100644 index 58109dce7a4..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925346f4f2da6df4354a6 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md deleted file mode 100644 index 313db4427d6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5d792534cac2dbe0a719ea7a -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Set `noHigh` to `highPrecedence(str)` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md deleted file mode 100644 index bc94c78c155..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d792534857332d07ccba3ad -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md deleted file mode 100644 index 7972802a8b8..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5d792534d586ef495ea9df90 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Set `str2` to `infixEval(noHigh, infix)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md deleted file mode 100644 index f957c47d628..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5d79253410532e13d13fe574 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - applyFn - .toString() - .replace(/\s/g, '') - .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md deleted file mode 100644 index 42b80301fc6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d7925342415527083bd6667 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: - -```js -"a b c".split(" "); // ["a", "b", "c"]; -``` - -Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md deleted file mode 100644 index 33e85a097cc..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d792534c3d26890ac1484d4 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: - -```js -[1, 2, 3].map(x => x + 1); // [2, 3, 4] -``` - -In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md deleted file mode 100644 index abb91060f5e..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d792534b92f3d1cd4410ce3 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md deleted file mode 100644 index bb2f8da03a5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 5d7925341193948dfe6d76b4 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md deleted file mode 100644 index f32c582d3ef..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d792534cf81365cfca58794 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md deleted file mode 100644 index a460b595da1..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d7925348ee084278ff15556 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. - -Now return `str2.replace(regex, "")` at the end of `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md deleted file mode 100644 index 45e848ecbeb..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d7925348a6a41c32f7a4e3e -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md deleted file mode 100644 index 7394c7c6472..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d792534408c5be896b0a46e -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. - -Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md deleted file mode 100644 index c86fe809104..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 5d792534f0eda837510e9192 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md deleted file mode 100644 index bfa91d4503f..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d7925346b911fce161febaf -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md deleted file mode 100644 index 24d94216931..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d79253483eada4dd69258eb -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -`range` should set `arr` to `[start]` and should then return `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constarr=[start]') && - JSON.stringify(range(1)) === '[1]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md deleted file mode 100644 index 4307ef2889a..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d7925342b2b993ef18cd45f -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md deleted file mode 100644 index 0fa8e6fe0fb..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5d7925341747ad42b12f8e68 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. - -The `concat` method returns a new array instead of modifying an existing one: - -```js -[1,2,3].concat(4); // [1, 2, 3, 4] -[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] -``` - -Use `concat` instead of `push` to return the result of adding `end` to `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(1, 2)) === '[1,2]' && - code.includes('concat') && - !code.includes('push') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md deleted file mode 100644 index 448578598f5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: 5d792535b0b3c198ee3ed6f9 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -The `concat` method can also accept arrays: - -```js -[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] -[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] -``` - -Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md deleted file mode 100644 index 6e89d44a236..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d7925357a0533eb221b005d -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('arr') && - code.replace(/\s/g, '').includes('[start].concat([end])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md deleted file mode 100644 index 0d876da26b6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d792535591db67ee15b4106 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(3, 2)) === '[]' && - JSON.stringify(range(1, 3)) === '[1,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md deleted file mode 100644 index ee94e71d4a4..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d792535f1f7adf77de5831d -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md deleted file mode 100644 index 497b63c634b..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925353d2c505eafd50cd9 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Remove the curly braces and `return` keyword from `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md deleted file mode 100644 index 862a0002f2f..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d79253539b5e944ba3e314c -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md deleted file mode 100644 index 9845839bbeb..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535a4f1cbff7a8b9a0b -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Make `charRange` return `range(start, end)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md deleted file mode 100644 index 43167394a7b..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535e3304f15a8890162 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md deleted file mode 100644 index f5bb024255e..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 5d792535a40ea5ac549d6804 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md deleted file mode 100644 index 8369854b752..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925358c220e5b2998909e -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Now, pass `x` to `String.fromCharCode` in the arrow function. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md deleted file mode 100644 index 6253e20d545..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5d7925357729e183a49498aa -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md deleted file mode 100644 index 03ceaf96068..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253555aa652afbb68086 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md deleted file mode 100644 index 27b4b66f7f2..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253582be306d339564f6 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md deleted file mode 100644 index 72223dddb2c..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d7925352047e5c54882c436 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md deleted file mode 100644 index 1870ab8b951..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 5d79253568e441c0adf9db9f -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md deleted file mode 100644 index b394d603ed4..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925356ab117923b80c9cd -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md deleted file mode 100644 index e79d2b6f857..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d792535e54a8cd729a0d708 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md deleted file mode 100644 index 3d6a5a955b7..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -id: 5d7925353b307724a462b06b -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Finally, return `fn("A")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md deleted file mode 100644 index 994e931f57f..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d792536735f71d746ee5d99 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. - -Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md deleted file mode 100644 index b06f86f5495..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d792536ad340d9dff2e4a96 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Now, remove the curly braces and return statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md deleted file mode 100644 index d1492aa5cbf..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925369614afd92d01fed5 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md deleted file mode 100644 index 8d17549a291..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d792536504e68254fe02236 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. - -Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md deleted file mode 100644 index 1c388711e2f..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536c8d2f0fdfad768fe -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -You can add more arguments by simply adding another arrow with another argument name: - -```js -const manyArguments = a => b => c => d => [a, b, c, d] -``` - -Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md deleted file mode 100644 index 45e6af501cc..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d79253639028b8ec56afcda -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md deleted file mode 100644 index 19bbc068cd3..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d792536834f2fd93e84944f -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -You call curried functions like this: - -```js -const result = add(1)(2); -``` - -Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md deleted file mode 100644 index e220cf656e5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536ddff9ea73c90a994 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. - -Change `x => elemValue(n)(x)` to `elemValue(n)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md deleted file mode 100644 index eaff17e3511..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d7925361596f84067904f7f -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('const fn') && - code.includes('varRangeExpanded') && - evalFormula('A1:J133') === '3' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md deleted file mode 100644 index 03ec1f65ba2..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dd8a4daf255488ac -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md deleted file mode 100644 index b1139d99d92..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536449c73004f265fb1 -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md deleted file mode 100644 index a481e918c67..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d79253685fc69b8fe60a0d2 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. - -This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md deleted file mode 100644 index 64e48966f02..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dc6e3ab29525de9e -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md deleted file mode 100644 index 57da365160d..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536cfd0fd893c630abb -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.includes('varRegex') && - code.includes('varExpanded') && - evalFormula('aC12bc') === 'abc' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md deleted file mode 100644 index 2dc9ec5c8ab..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 5d7925366a5ff428fb483b40 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md deleted file mode 100644 index 0516f1f77e6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5d7925365d4035eeb2e395fd -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md deleted file mode 100644 index a1022f45c6a..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 5d7925364c106e9aaf05a16f -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. - -Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(evalFormula('(2+2)*2') === '8'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md deleted file mode 100644 index 5617221e798..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: 5d792536970cd8e819cc8a96 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -You can define arrow functions without arguments: - -```js -const two = () => 2; -``` - -Define an empty arrow function without arguments and assign it to `window.onload`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('window.onload=()=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md deleted file mode 100644 index 06b401c7e8e..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5d792536e33baeaa60129e0a -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md deleted file mode 100644 index 59443f50dc9..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 5d7925379e2a488f333e2d43 -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Now define a function `createLabel` which takes an argument `name` and has an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md deleted file mode 100644 index 3a3a6f126c8..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5d7925379000785f6d8d9af3 -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Inside `createLabel`, assign `document.createElement("div")` to `label`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md deleted file mode 100644 index a9a1dcc5726..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 5d79253791391b0acddd0ac5 -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Add the following code to `createLabel`: - -```js -label.className = "label"; -label.textContent = name; -container.appendChild(label); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md deleted file mode 100644 index 780a9dab7fe..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373104ae5ae83f20a5 -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -The `forEach` method takes a function and calls it with each element of the array. - -Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md deleted file mode 100644 index ccfac003142..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373b7127cfaeb50c26 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). - -# --hints-- - -See description above for instructions. - -```js -assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md deleted file mode 100644 index 5216d89d1d9..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d792537cb3a5cd6baca5e1a -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md deleted file mode 100644 index 544000db907..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 5d79253742f3313d55db981f -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md deleted file mode 100644 index bf8bee8395a..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 5d7925379e0180a438ce7f95 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md deleted file mode 100644 index d57aa617713..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d792537c80984dfa5501b96 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Inside `letters.forEach`, assign `document.createElement("input")` to `input`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md deleted file mode 100644 index 4568ec50b24..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925377b54d8a76efb5657 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Add the following code to `letters.forEach`: - -```js -input.type = "text"; -input.id = y + x; -input.onchange = update; -container.appendChild(input); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md deleted file mode 100644 index 6543d3124fb..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925371398513549bb6395 -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md deleted file mode 100644 index 378c01975ac..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d792537ea3eaf302bf2d359 -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md deleted file mode 100644 index 93968d4e378..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 5d792537533b1c7843bfd029 -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -The `includes` method works on a string and checks if the argument is its substring. - -Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md deleted file mode 100644 index dcc989ea328..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537dc0fe84345d4f19e -title: Step 93 -challengeType: 0 -dashedName: step-93 ---- - -# --description-- - -Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md deleted file mode 100644 index ce97294c369..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537b6cadae0f4b0cda1 -title: Step 94 -challengeType: 0 -dashedName: step-94 ---- - -# --description-- - -The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. - -Use the `slice` method to log the first two letters of `value` to the console. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md deleted file mode 100644 index 1eaf868ad16..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 5d79253770083fb730c93a93 -title: Step 95 -challengeType: 0 -dashedName: step-95 ---- - -# --description-- - -You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. - -Change the call to `slice` to log all characters except the first instead. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md deleted file mode 100644 index cd6f2405a86..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d792537fef76b226b63b93b -title: Step 96 -challengeType: 0 -dashedName: step-96 ---- - -# --description-- - -Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md deleted file mode 100644 index fb91f29be96..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d79253760fca25ccbbd8990 -title: Step 97 -challengeType: 0 -dashedName: step-97 ---- - -# --description-- - -The array destructuring syntax can be used to extract values from arrays: - -```js -const [x, y] = [1, 2]; // in variables -const fn = ([x, y]) => x + y // in functions -``` - -Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && - spreadsheetFunctions['random']([1, 2]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md deleted file mode 100644 index c933b24aaac..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d7925374321824cba309875 -title: Step 98 -challengeType: 0 -dashedName: step-98 ---- - -# --description-- - -Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( - code.replace(/\s/g, '') - ) && spreadsheetFunctions['random']([1, 1]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md deleted file mode 100644 index 2a5ee766e3d..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md +++ /dev/null @@ -1,276 +0,0 @@ ---- -id: 5d7925381e8565a5c50ba7f1 -title: Step 99 -challengeType: 0 -dashedName: step-99 ---- - -# --description-- - -In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. - -You can check if this is the case by comparing a call to a function with another call (with the same arguments): - -```js -console.log(f(2) === f(2)); // always true for pure functions -``` - -Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md deleted file mode 100644 index 2f419cf2876..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925383f1b77db7f1ff59e -title: Step 100 -challengeType: 0 -dashedName: step-100 ---- - -# --description-- - -This is (probably) false, so `random` is certainly impure. - -The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. - -Call `window.onload()` in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md deleted file mode 100644 index 176257a88b5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d792538de9fa3f298bcd5f6 -title: Step 101 -challengeType: 0 -dashedName: step-101 ---- - -# --description-- - -Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md deleted file mode 100644 index ad427105522..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -id: 5d7925385b74f69642e1fea5 -title: Step 102 -challengeType: 0 -dashedName: step-102 ---- - -# --description-- - -Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. - -Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md deleted file mode 100644 index 231159b2b34..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d7925380ea76d55b2c97d7b -title: Step 103 -challengeType: 0 -dashedName: step-103 ---- - -# --description-- - -This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. - -Remove the `console.log` statement. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.includes('console.log')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md deleted file mode 100644 index 36fd2f83b90..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d792538be4fe331f1a6c008 -title: Step 104 -challengeType: 0 -dashedName: step-104 ---- - -# --description-- - -Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. - -But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. - -Change these calls to `""` - the function is now pure but doesn't work. - -# --hints-- - -See description above for instructions. - -```js -const nos = code.replace(/\s/g, ''); -assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md deleted file mode 100644 index 4b9e711aae6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 5d792538d169f33142175b95 -title: Step 105 -challengeType: 0 -dashedName: step-105 ---- - -# --description-- - -To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. - -Add an argument `cells` to `evalFormula`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md deleted file mode 100644 index 39584a049ae..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538e48b5a2c6e5bbe12 -title: Step 106 -challengeType: 0 -dashedName: step-106 ---- - -# --description-- - -When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md deleted file mode 100644 index 1ab52bf8124..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d7925387f3e9da5ec856dbe -title: Step 107 -challengeType: 0 -dashedName: step-107 ---- - -# --description-- - -Update the recursive call to `evalFormula` by passing in `cells` as the second argument. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md deleted file mode 100644 index 11e0b2d0bbc..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253824ae9b4a6e6f3108 -title: Step 108 -challengeType: 0 -dashedName: step-108 ---- - -# --description-- - -Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. - -# --hints-- - -See description above for instructions. - -```js -assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md deleted file mode 100644 index d4c961be237..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 5d7925383f122a279f4c54ad -title: Step 109 -challengeType: 0 -dashedName: step-109 ---- - -# --description-- - -The `find` method returns the first element of an array that satisfies the function passed to it. - -Chain `find` onto `cells` and pass it `cell => cell === id`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md deleted file mode 100644 index abdc6794679..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d7925387b682e962f209269 -title: Step 110 -challengeType: 0 -dashedName: step-110 ---- - -# --description-- - -In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md deleted file mode 100644 index 4baca0e6cc3..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538de774217b173288e -title: Step 111 -challengeType: 0 -dashedName: step-111 ---- - -# --description-- - -Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md deleted file mode 100644 index a2c5b9b1bef..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253891d93585323d1f3c -title: Step 112 -challengeType: 0 -dashedName: step-112 ---- - -# --description-- - -Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md deleted file mode 100644 index 637af181723..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925384e34e944ecb4612d -title: Step 113 -challengeType: 0 -dashedName: step-113 ---- - -# --description-- - -Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md deleted file mode 100644 index d12140aa462..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d792538631844ad0bdfb4c3 -title: Step 114 -challengeType: 0 -dashedName: step-114 ---- - -# --description-- - -`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. - -Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md deleted file mode 100644 index c966a9161ed..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -id: 5d792538e2a8d20cc580d481 -title: Step 115 -challengeType: 0 -dashedName: step-115 ---- - -# --description-- - -The `slice` method can also work on arrays. - -Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md deleted file mode 100644 index 5483ee8a3e9..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 5d792538f5004390d6678554 -title: Step 116 -challengeType: 0 -dashedName: step-116 ---- - -# --description-- - -You can also pass in a negative argument to `slice` to specify that index from the end: - -```js -[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] -``` - -Use a negative index to add a function `lasttwo` which returns the last two elements of an array. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md deleted file mode 100644 index 3e61d996f85..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 5d792539dd4fd4c96fd85f7e -title: Step 117 -challengeType: 0 -dashedName: step-117 ---- - -# --description-- - -The `%` operator returns the remainder: - -```js -4 % 3; // 1 -5 % 3; // 2 -6 % 3; // 0 -``` - -Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. - -# --hints-- - -See description above for instructions. - -```js -assert(isEven(20) && !isEven(31)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md deleted file mode 100644 index 8c4b6a9e314..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md +++ /dev/null @@ -1,292 +0,0 @@ ---- -id: 5d79253949802f8587c8bbd3 -title: Step 118 -challengeType: 0 -dashedName: step-118 ---- - -# --description-- - -The `filter` method keeps only the elements of an array that satisfy the function passed to it: - -```js -[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] -``` - -Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && - code.includes('filter') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md deleted file mode 100644 index c441a9459d8..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 5d7925395888767e9304c082 -title: Step 119 -challengeType: 0 -dashedName: step-119 ---- - -# --description-- - -The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. - -The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. - -For example, here's how to multiply all the value in an array: - -```js -[2, 3, 4].reduce((a, x) => a * x); // 24 -``` - -Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md deleted file mode 100644 index 787472aea1d..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 5d7925393b30099e37a34668 -title: Step 120 -challengeType: 0 -dashedName: step-120 ---- - -# --description-- - -The `includes` method checks if an element is in an array. - -Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md deleted file mode 100644 index f032db3ac16..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 5d7925398157757b23730fdd -title: Step 121 -challengeType: 0 -dashedName: step-121 ---- - -# --description-- - -The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: - -```js -[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] -// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array -// now it first tries [].concat(1) which works -``` - -Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md deleted file mode 100644 index 6b5714247b5..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d792539de4b9ac14dd40409 -title: Step 122 -challengeType: 0 -dashedName: step-122 ---- - -# --description-- - -Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === - '[1,3,5,7,9]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md deleted file mode 100644 index 8f15f9adfd4..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539534f1bf991bb987f -title: Step 123 -challengeType: 0 -dashedName: step-123 ---- - -# --description-- - -ES6 introduced a shorthand object literal syntax: - -```js -const a = 10; -const myObject = { a }; -console.log(myObject); // { a: 10 } -``` - -First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. - -# --hints-- - -See description above for instructions. - -```js -assert(sum([1, 2, 3]) === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md deleted file mode 100644 index eef96f2d471..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d7925394089b762f93ffa52 -title: Step 124 -challengeType: 0 -dashedName: step-124 ---- - -# --description-- - -Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. - -This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. - -# --hints-- - -See description above for instructions. - -```js -assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md deleted file mode 100644 index cb3b30d8c4f..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539ec758d45a6900173 -title: Step 125 -challengeType: 0 -dashedName: step-125 ---- - -# --description-- - -The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. - -As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md deleted file mode 100644 index 621e4cc4fbc..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md +++ /dev/null @@ -1,308 +0,0 @@ ---- -id: 5d7925398d525f61a9ff3a79 -title: Step 126 -challengeType: 0 -dashedName: step-126 ---- - -# --description-- - -The spread operator allow you to pass multiple arguments instead of an array: - -```js -const arr = [1, 2, 3]; -const sum3 = (a, b, c) => a + b + c; -sum3(...arr); // 6 -``` - -Use the spread operator to add `range` to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && - code.includes('...') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md deleted file mode 100644 index 8d27ee2bf76..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 5d792539a222f385c5c17d2b -title: Step 127 -challengeType: 0 -dashedName: step-127 ---- - -# --description-- - -Now define a `median` function which takes an argument `nums` (in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md deleted file mode 100644 index 08ffbd94e4a..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d7925398a7184b41b12a0e0 -title: Step 128 -challengeType: 0 -dashedName: step-128 ---- - -# --description-- - -The `sort` method sorts an array alphabetically: - -```js -["B", "C", "A"].sort(); // ["A", "B", "C"] -``` - -Assign the sorted `nums` to `sorted` in `median`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md deleted file mode 100644 index 49b025f4b1e..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d7925399afb905c34730a75 -title: Step 129 -challengeType: 0 -dashedName: step-129 ---- - -# --description-- - -But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: - -```js -[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] -``` - -If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. - -Use `sort` to sort `nums` in ascending order. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md deleted file mode 100644 index cad2f5aa466..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d792539728d1aa7788e2c9b -title: Step 130 -challengeType: 0 -dashedName: step-130 ---- - -# --description-- - -Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. - -You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md deleted file mode 100644 index df39b579f78..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d79253939434a2724c0ec41 -title: Step 131 -challengeType: 0 -dashedName: step-131 ---- - -# --description-- - -Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md deleted file mode 100644 index 1e4f1aca372..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 5d792539b9e1d3c54d8fe94a -title: Step 132 -challengeType: 0 -dashedName: step-132 ---- - -# --description-- - -Add a return statement to `median` so that it returns `isEven(length)`. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md deleted file mode 100644 index 4cf66a6dd6a..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5d792539b2e0bd8f9e8213e4 -title: Step 133 -challengeType: 0 -dashedName: step-133 ---- - -# --description-- - -Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. - -Note that the `middle` variable is close to the middle but is not actually the middle. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md deleted file mode 100644 index 2428ff3a79d..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 5d792539239148965a1a59a5 -title: Step 134 -challengeType: 0 -dashedName: step-134 ---- - -# --description-- - -Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.median([1, 20, 3]) === 3 && - spreadsheetFunctions.median([27, 7, 20, 10]) === 15 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md deleted file mode 100644 index ff91ae909fd..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d792539e1446045d0df6d28 -title: Step 135 -challengeType: 0 -dashedName: step-135 ---- - -# --description-- - -The `some` method checks if any element of the array satisfies the provided testing function. - -Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.someeven([1, 5, 4, 3]) && - !spreadsheetFunctions.someeven([3, 5, 9]) && - code.includes('.some') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md deleted file mode 100644 index ddede0016d6..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a2febbb77098730b9 -title: Step 136 -challengeType: 0 -dashedName: step-136 ---- - -# --description-- - -The `every` method checks if all elements of an array satisfy the provided testing function. - -Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && - !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && - code.includes('.every') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md deleted file mode 100644 index c475cf8ba22..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d79253a98bd9fdf7ce68d0a -title: Step 137 -challengeType: 0 -dashedName: step-137 ---- - -# --description-- - -We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. - -While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. - -Replace the body of `range` with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md deleted file mode 100644 index 52e294c3655..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 5d79253a1e9abf29de64c177 -title: Step 138 -challengeType: 0 -dashedName: step-138 ---- - -# --description-- - -The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. - -Make `range` return an array of `undefined` with size `end - start + 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md deleted file mode 100644 index ce1e1c87c73..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a8b29d78984369e4b -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -The `fill` method takes an argument and replaces all elements of the array with that argument. - -Use it on the array in `range` to replace everything with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md deleted file mode 100644 index 9630c3210b7..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 5d79253ad297a31cbe073718 -title: Step 140 -challengeType: 0 -dashedName: step-140 ---- - -# --description-- - -The function in the `map` method can actually take a second argument: the index of the element. - -This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). - -Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md deleted file mode 100644 index 7531f12a5a3..00000000000 --- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5dc10b8b93704f41d279eb5b -title: Step 141 -challengeType: 0 -dashedName: step-141 ---- - -# --description-- - -Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                    -
                                    -
                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md new file mode 100644 index 00000000000..d522cf2c5ab --- /dev/null +++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md @@ -0,0 +1,388 @@ +--- +id: 659ebe52d74b132a1d75c891 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug. + +The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function. +# --hints-- + +You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`. + +```js +assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn localStorage by Building a Todo App + + + + +
                                    +

                                    Todo App

                                    +
                                    + + + +
                                    +

                                    Discard unsaved changes?

                                    +
                                    + + +
                                    +
                                    +                                     +
                                    +
                                    +
                                    + + + + +``` + +```css +:root { + --white: #fff; + --light-grey: #f5f6f7; + --dark-grey: #0a0a23; + --yellow: #f1be32; + --golden-yellow: #feac32; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--dark-grey); +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + color: var(--light-grey); + margin: 20px 0 40px 0; +} + +.todo-app { + background-color: var(--white); + width: 300px; + height: 350px; + border: 5px solid var(--yellow); + border-radius: 8px; + padding: 15px; + position: relative; + display: flex; + flex-direction: column; + gap: 10px; +} + +.btn { + cursor: pointer; + width: 100px; + margin: 10px; + color: var(--dark-grey); + background-color: var(--golden-yellow); + background-image: linear-gradient(#fecc4c, #ffac33); + border-color: var(--golden-yellow); + border-width: 3px; +} + +.btn:hover { + background-image: linear-gradient(#ffcc4c, #f89808); +} + +.large-btn { + width: 80%; + font-size: 1.2rem; + align-self: center; + justify-self: center; +} + +.close-task-form-btn { + background: none; + border: none; + cursor: pointer; +} + +.close-icon { + width: 20px; + height: 20px; +} + +.task-form { + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--white); + border-radius: 5px; + padding: 15px; + width: 300px; + height: 350px; + flex-direction: column; + justify-content: space-between; + overflow: auto; +} + +.task-form-header { + display: flex; + justify-content: flex-end; +} + +.task-form-body { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.task-form-footer { + display: flex; + justify-content: center; +} + +.task-form-label, +#title-input, +#date-input, +#description-input { + display: block; +} + +.task-form-label { + margin-bottom: 5px; + font-size: 1.3rem; + font-weight: bold; +} + +#title-input, +#date-input, +#description-input { + width: 100%; + margin-bottom: 10px; + padding: 2px; +} + +#confirm-close-dialog { + padding: 10px; + margin: 10px auto; + border-radius: 15px; +} + +.confirm-close-dialog-btn-container { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.discard-message-text { + font-weight: bold; + font-size: 1.5rem; +} + +#tasks-container { + height: 100%; + overflow-y: auto; +} + +.task { + margin: 5px 0; +} + +.hidden { + display: none; +} + +@media (min-width: 576px) { + .todo-app, + .task-form { + width: 400px; + height: 450px; + } + + .task-form-label { + font-size: 1.5rem; + } + + #title-input, + #date-input { + height: 2rem; + } + + #title-input, + #date-input, + #description-input { + padding: 5px; + margin-bottom: 20px; + } +} +``` + +```js +const taskForm = document.getElementById("task-form"); +const confirmCloseDialog = document.getElementById("confirm-close-dialog"); +const openTaskFormBtn = document.getElementById("open-task-form-btn"); +const closeTaskFormBtn = document.getElementById("close-task-form-btn"); +const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); +const cancelBtn = document.getElementById("cancel-btn"); +const discardBtn = document.getElementById("discard-btn"); +const tasksContainer = document.getElementById("tasks-container"); +const titleInput = document.getElementById("title-input"); +const dateInput = document.getElementById("date-input"); +const descriptionInput = document.getElementById("description-input"); + +const taskData = []; +let currentTask = {}; + +const addOrUpdateTask = () => { + --fcc-editable-region-- + + --fcc-editable-region-- + const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); + const taskObj = { + id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, + title: titleInput.value, + date: dateInput.value, + description: descriptionInput.value, + }; + + if (dataArrIndex === -1) { + taskData.unshift(taskObj); + } else { + taskData[dataArrIndex] = taskObj; + } + + updateTaskContainer() + reset() +}; + +const updateTaskContainer = () => { + tasksContainer.innerHTML = ""; + + taskData.forEach( + ({ id, title, date, description }) => { + (tasksContainer.innerHTML += ` +
                                    +

                                    Title: ${title}

                                    +

                                    Date: ${date}

                                    +

                                    Description: ${description}

                                    + + +
                                    + `) + } + ); +}; + + +const deleteTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + buttonEl.parentElement.remove(); + taskData.splice(dataArrIndex, 1); +} + +const editTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + currentTask = taskData[dataArrIndex]; + + titleInput.value = currentTask.title; + dateInput.value = currentTask.date; + descriptionInput.value = currentTask.description; + + addOrUpdateTaskBtn.innerText = "Update Task"; + + taskForm.classList.toggle("hidden"); +} + +const reset = () => { + titleInput.value = ""; + dateInput.value = ""; + descriptionInput.value = ""; + taskForm.classList.toggle("hidden"); + currentTask = {}; +} + +openTaskFormBtn.addEventListener("click", () => + taskForm.classList.toggle("hidden") +); + +closeTaskFormBtn.addEventListener("click", () => { + const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; + if (formInputsContainValues) { + confirmCloseDialog.showModal(); + } else { + reset(); + } +}); + +cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); + +discardBtn.addEventListener("click", () => { + confirmCloseDialog.close(); + reset() +}); + +taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + addOrUpdateTask(); +}); +``` diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md deleted file mode 100644 index f4b05b12871..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e0e72c65bc8e73dfe1e -videoId: LGQuIIv2RVA -title: Elements and Tags Question A -challengeType: 15 -dashedName: elements-and-tags-question-a ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `

                                    `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                    `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                    ` or ``, but some can also be used without the closing forward slash such as `
                                    ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) - -## --text-- - -What are HTML tags? - -## --answers-- - -HTML tags tell the browser what content an element contains. - ---- - -HTML tags tell the browser when to load its content. - ---- - -HTML tags tell the browser what content the next element contains. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md deleted file mode 100644 index 51bf43a7014..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 637f4e1672c65bc8e73dfe1f -title: Elements and Tags Question B -challengeType: 15 -dashedName: elements-and-tags-question-b ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `

                                    `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                    `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                    ` or ``, but some can also be used without the closing forward slash such as `
                                    ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --text-- - -What are the three parts of most HTML elements? - -## --answers-- - -An opening tag, self closing tag, and content. - ---- - -An opening tag, closing tag, and content. - ---- - -An opening tag, closing tag, and attribute. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md deleted file mode 100644 index ab85844e81b..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e1c72c65bc8e73dfe20 -title: HTML Boilerplate Question A -challengeType: 15 -dashedName: html-boilerplate-question-a ---- - -# --description-- - -To demonstrate an HTML boilerplate, you first need an HTML file to work with. - -Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. - -You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. - -To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. - -It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. - -## The DOCTYPE - -Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. - -The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: - -```html - -``` - -However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. - -Open the `index.html` file created earlier in your text editor and add `` to the very first line. - -# --question-- -## --text-- - -What is the purpose of the `DOCTYPE` declaration? - -## --answers-- - -It tells the browser which version of HTML to use to render the document. - ---- - -It tells the browser that this document uses JavaScript. - ---- - -It tells the browser the title of the document. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md deleted file mode 100644 index ffd10a4b5ac..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 637f4e2872c65bc8e73dfe21 -title: HTML Boilerplate Question B -challengeType: 15 -dashedName: html-boilerplate-question-b ---- - -# --description-- - -After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. - -This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. - -Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: - -```html - - - -``` - -## What is the lang attribute? -`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. - -# --question-- - -## --text-- - -What is the `html` element? - -## --answers-- - -It is the root element in the document and tells the browser which version of HTML it should use. - ---- - -It is the root element in the document and all other elements should descend from it. - ---- - -It is the root element in the document and all other elements should come after it. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md deleted file mode 100644 index e4ddaa12c4b..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e2f72c65bc8e73dfe22 -title: HTML Boilerplate Question C -challengeType: 15 -dashedName: html-boilerplate-question-c ---- - -# --description-- - -The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. - -## The Charset Meta Element -You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. - -Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. - -## Title Element -Another element you should always include in the head of an HTML document is the `title` element: - -```html -My First Webpage -``` - -The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. - -If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. - -There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. - -Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: - - -```html - - - - - - My First Webpage - - -``` - -# --question-- - -## --text-- - -What is the purpose of the `head` element? - -## --answers-- - -The `head` element is used to display all elements that are displayed on the webpage. - ---- - -The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. - ---- - -The `head` element is used to display the header content on top of the webpage. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md deleted file mode 100644 index 302b6a95d44..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e3672c65bc8e73dfe23 -videoId: V8UAEoOvqFg -title: HTML Boilerplate Question D -challengeType: 15 -dashedName: html-boilerplate-question-d ---- - -# --description-- - -The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. - -To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. - ---- - -Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. - ---- - -Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. - -## --text-- - -What is the purpose of the `body` element? - -## --answers-- - -This is where all important information about the webpage is displayed such as the `title` and `meta` tags. - ---- - -This is where you tell the browser how to render the webpage correctly. - ---- - -This is where all content will be displayed on the page such images, text, and links. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md deleted file mode 100644 index 6c1bfb0a976..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 6374f208de18c50e48ba767b -title: Introduction To HTML and CSS Question A -challengeType: 15 -dashedName: introduction-to-html-and-css-question-a ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --assignment-- - -Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. - -## --text-- - -Which of the following statements is true? - -## --answers-- - -CSS is used to create the basic structure of a webpage, and HTML is used to add style. - ---- - -HTML is used to create the basic structure of a webpage, and CSS is used to add style. - ---- - -HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. - - -## --video-solution-- - -2 - - diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md deleted file mode 100644 index 87aff63d4ec..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 6376327e2724a688c04636e3 -title: Introduction To HTML and CSS Question B -challengeType: 15 -dashedName: introduction-to-html-and-css-question-b ---- - -# --description-- - - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to add paragraphs of text on a webpage? - -## --answers-- - -CSS - ---- - -JavaScript - ---- - -HTML - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md deleted file mode 100644 index 2ca9f2fbacb..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 637633162724a688c04636e4 -title: Introduction To HTML and CSS Question C -challengeType: 15 -dashedName: introduction-to-html-and-css-question-c ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to change the font and background color of a button? - -## --answers-- - -You should use CSS to change the background color and font of a button. - ---- - -You should use JavaScript to change the background color and font of a button. - ---- - -You should use HTML to change the background color and font of a button. - -## --video-solution-- - -1 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md deleted file mode 100644 index 53e4c08471a..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 637633672724a688c04636e5 -title: Introduction To HTML and CSS Question D -challengeType: 15 -dashedName: introduction-to-html-and-css-question-d ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -What is the difference between HTML, CSS, and JavaScript? - -## --answers-- - -HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. - ---- - -CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. - ---- - -JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md deleted file mode 100644 index b4d237448f3..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f704072c65bc8e73dfe36 -videoId: tsEQgGjSmkM -title: Links and Images Question A -challengeType: 15 -dashedName: links-and-images-question-a ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- Finally, add the following `h1` to the `body`: `

                                    Homepage

                                    ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. - -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. - -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Links video above. - -## --text-- - -What HTML tag is used to create a link? - -## --answers-- - -`` - ---- - -`

                                    ` - ---- - -`

                                      ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md deleted file mode 100644 index a138268c406..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f703572c65bc8e73dfe35 -title: Links and Images Question B -challengeType: 15 -dashedName: links-and-images-question-b ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                      Homepage

                                      ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `                                      ` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- -## --text-- - -What is an attribute? -## --answers-- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. - ---- - -An HTML attribute is used to tell the browser what the element contains. - ---- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md deleted file mode 100644 index 8863b087456..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 637f703072c65bc8e73dfe34 -title: Links and Images Question C -challengeType: 15 -dashedName: links-and-images-question-c ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                      Homepage

                                      ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --text-- - -What attribute tells links where to go to? - -## --answers-- - -`src` - ---- - -`href` - ---- - -`link` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md deleted file mode 100644 index 37eebffbabf..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 637f702872c65bc8e73dfe33 -videoId: ta3Oxx7Yqbo -title: Links and Images Question D -challengeType: 15 -dashedName: links-and-images-question-d ---- - -# --description-- - - -Generally, there are two kinds of links you will create: - -- Links to pages on other websites on the internet - -- Links to pages located on your own websites - - -## Absolute Links -Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. - -You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. - -`https://www.theodinproject.com/about` - -## Relative Links -Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. - -Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. - -Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: - -```html - - - - - Odin Links and Images - - - -

                                      About Page

                                      - - -``` - -Back in the `index` page, add the following anchor element to create a link to the `about` page: - -```html - -

                                      Homepage

                                      - click me - - About - -``` - -Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. - -This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. - -But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. - -Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. - -Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. - -To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. - -```html - -

                                      Homepage

                                      - About - -``` - -Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. - -In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. - -```html - -

                                      Homepage

                                      - About - -``` - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML File Structure video above. - -## --text-- - -What is the difference between an absolute and a relative link? - -## --answers-- - -An absolute link is a link to another page on the current website. A relative link is a link to another website. - ---- - -An absolute link is a link to another website. A relative link is a link another page on the current website. - ---- - -There is no difference between absolute and relative links. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md deleted file mode 100644 index ae008078088..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 637f702372c65bc8e73dfe32 -videoId: 0xoztJCHpbQ -title: Links and Images Question E -challengeType: 15 -dashedName: links-and-images-question-e ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                      Homepage

                                      - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## `Alt` attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included: - - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Images Video above. - -## --text-- - -Which tag is used to display an image? - -## --answers-- - -`` - ---- - -`` - ---- - -`` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md deleted file mode 100644 index e1af2d6a659..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701c72c65bc8e73dfe31 -title: Links and Images Question F -challengeType: 15 -dashedName: links-and-images-question-f ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                      Homepage

                                      -                                       click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -What two attributes do images always need to have? - -## --answers-- - -`href` and `alt` - ---- - -`name` and `href` - ---- - -`alt` and `src` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md deleted file mode 100644 index 5bc84fa6c96..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701572c65bc8e73dfe30 -title: Links and Images Question G -challengeType: 15 -dashedName: links-and-images-question-g ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                      Homepage

                                      - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -How do you access a parent directory in a filepath? - -## --answers-- - -`../` - ---- - -`./` - ---- - -`.../` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md deleted file mode 100644 index 71157081ae7..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 637f700b72c65bc8e73dfe2f -title: Links and Images Question H -challengeType: 15 -dashedName: links-and-images-question-h ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                      Homepage

                                      - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --assignment-- - -Read about the four main image formats that can be used on the web. - -## --text-- - -What are the four main image formats that you can use for images on the web? - -## --answers-- - -TIFF, GIF, PNG, and SVG. - ---- - -JPG, PNG, GIF, and SVG. - ---- - -JPG, PDF, SVG, and GIF. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md deleted file mode 100644 index f4625eb7e31..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e3e72c65bc8e73dfe24 -videoId: kcHKFZBVtf4 -title: Understand Ordered and Unordered List Question A -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-a ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                        ` element, and each item within the list is created using the list item element `
                                      • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                          ` element. Each individual item in them is again created using the list item element `
                                        1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --assignment-- - -Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. - ---- - -Make an unordered shopping list of your favorite foods. - ---- - -Make an ordered list of todo’s you need to get done today. - ---- - -Make an unordered list of places you’d like to visit someday. - ---- - -Make an ordered list of your all time top 5 favorite video games or movies. - -## --text-- - -What HTML tag is used to create an unordered list? - -## --answers-- - -`
                                        2. ` - ---- - -`
                                            ` - ---- - -`
                                              ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md deleted file mode 100644 index 67e79f0ccb9..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e4672c65bc8e73dfe25 -title: Understand Ordered and Unordered List Question B -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-b ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                                ` element, and each item within the list is created using the list item element `
                                              • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                  ` element. Each individual item in them is again created using the list item element `
                                                1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create an ordered list? - -## --answers-- - -`
                                                    ` - ---- - -`
                                                  1. ` - ---- - -`
                                                      ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md deleted file mode 100644 index 1edd6feffbf..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e5172c65bc8e73dfe26 -title: Understand Ordered and Unordered List Question C -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-c ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                                        ` element, and each item within the list is created using the list item element `
                                                      • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                          ` element. Each individual item in them is again created using the list item element `
                                                        1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create list items within both unordered and ordered lists? - -## --answers-- - -`
                                                            ` - ---- - -`
                                                          1. ` - ---- - -`
                                                              ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md deleted file mode 100644 index 8698b62aca8..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 637f4e5872c65bc8e73dfe27 -videoId: yqcd-XkxZNM -title: Working With Text Question A -challengeType: 15 -dashedName: working-with-text-question-a ---- - -# --description-- - -What would you expect the following text to output on an HTML page? - -```html - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. - -``` - -It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below: - - - -When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line. - -If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `

                                                              ` tag. - -Changing our example from before to use paragraph elements fixes the issue: - - - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. - -## --text-- - -How do you create a paragraph in HTML? - -## --answers-- - -`

                                                              This is a paragraph

                                                              ` - ---- - -`

                                                              This is a paragraph

                                                              ` - ---- - -`This is a paragraph` - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md deleted file mode 100644 index 17d3c900359..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 637f4e5f72c65bc8e73dfe28 -title: Working With Text Question B -challengeType: 15 -dashedName: working-with-text-question-b ---- - -# --description-- - -Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. - -There are 6 different levels of headings starting from `

                                                              ` to `

                                                              `. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. - -Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `

                                                              ` tag. - - - -Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. - -# --question-- -## --text-- - -How many different levels of headings are there and what is the difference between them? - -## --answers-- - -There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. - ---- - -There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. - ---- - -There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md deleted file mode 100644 index 6ccf0e06658..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 637f4e6672c65bc8e73dfe29 -videoId: gW6cBZLUk6M -title: Working With Text Question C -challengeType: 15 -dashedName: working-with-text-question-c ---- - -# --description-- - -The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. - -You can use `strong` on its own: - - - -But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: - - - -Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Bold and Italic Text Video above. - -## --text-- - -What element should you use to make text bold and important? - -## --answers-- - -`This is an important message` - ---- - -`

                                                              This is an important message

                                                              ` - ---- - -`This is an important message` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md deleted file mode 100644 index e686b2698e0..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 637f4e6e72c65bc8e73dfe2a -title: Working With Text Question D -challengeType: 15 -dashedName: working-with-text-question-d ---- - -# --description-- - -The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. - -To use `em` on its own: - - -Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: - - - -# --question-- -## --text-- - -What element should you use to make text italicized to add emphasis? - -## --answers-- - -`This is an italic message` - ---- - -`This is an italic message` - ---- - -`This is an italic message` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md deleted file mode 100644 index a0a7ba2fda9..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e7972c65bc8e73dfe2b -title: Working With Text Question E -challengeType: 15 -dashedName: working-with-text-question-e ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the `body` element is the parent and the `p` is the child: - -```html - - - - -

                                                              Lorem ipsum dolor sit amet.

                                                              - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: - -```html - - - - -

                                                              Lorem ipsum dolor sit amet.

                                                              -

                                                              Ut enim ad minim veniam.

                                                              - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship do two elements have if they are at the same level of nesting? - -## --answers-- - -The elements are each other's parents. - ---- - -The elements are each other's children. - ---- - -The elements are siblings. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md deleted file mode 100644 index 7d440cfab25..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f4e8072c65bc8e73dfe2c -title: Working With Text Question F -challengeType: 15 -dashedName: working-with-text-question-f ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the body element is the parent and the paragraph is the child: - -```html - - - - -

                                                              Lorem ipsum dolor sit amet.

                                                              - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: - -```html - - - - -

                                                              Lorem ipsum dolor sit amet.

                                                              -

                                                              Ut enim ad minim veniam.

                                                              - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship does an element have with any nested element within it? - -## --answers-- - -The element within the other element is called the parent element. - ---- - -The element within the other element is called the child element. - ---- - -The element within the other element is called the sibling element. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md deleted file mode 100644 index 5f5d141fa46..00000000000 --- a/curriculum/challenges/espanol/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e8772c65bc8e73dfe2d -title: Working With Text Question G -challengeType: 15 -dashedName: working-with-text-question-g ---- - -# --description-- - -HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. - -Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: - -```html -

                                                              View the html to see the hidden comments

                                                              - - - -

                                                              Some paragraph text

                                                              - - -``` - -# --question-- - -## --assignment-- - -To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. - -## --text-- - -How do you create HTML comments? - -## --answers-- - -`/* This is an HTML comment */` - ---- - -`` - ---- - -`<-- This is an HTML comment --!>` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md deleted file mode 100644 index 5b3f6a44858..00000000000 --- a/curriculum/challenges/espanol/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5900f36e1000cf542c50fe80 -title: 'Problem 1: Multiples of 3 and 5' -challengeType: 1 -forumTopicId: 301722 -dashedName: problem-1-multiples-of-3-and-5 ---- - -# --description-- - -If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. - -Find the sum of all the multiples of 3 or 5 below the provided parameter value `number`. - -# --hints-- - -`multiplesOf3and5(10)` should return a number. - -```js -assert(typeof multiplesOf3and5(10) === 'number'); -``` - -`multiplesOf3and5(49)` should return 543. - -```js -assert.strictEqual(multiplesOf3and5(49), 543); -``` - -`multiplesOf3and5(1000)` should return 233168. - -```js -assert.strictEqual(multiplesOf3and5(1000), 233168); -``` - -`multiplesOf3and5(8456)` should return 16687353. - -```js -assert.strictEqual(multiplesOf3and5(8456), 16687353); -``` - -`multiplesOf3and5(19564)` should return 89301183. - -```js -assert.strictEqual(multiplesOf3and5(19564), 89301183); -``` - -# --seed-- - -## --seed-contents-- - -```js -function multiplesOf3and5(number) { - - return true; -} - -multiplesOf3and5(1000); -``` - -# --solutions-- - -```js -const multiplesOf3and5 = (number) => { - var total = 0; - - for(var i = 0; i < number; i++) { - if(i % 3 == 0 || i % 5 == 0) { - total += i; - } - } - return total; -}; -``` diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md deleted file mode 100644 index a8abd3ff027..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 651dd5ae6ffb500e3f2ce47c -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -```js -console.log('with code'); -``` - -*** - -Making a statement based on her assumption. - -### --feedback-- - -No, that's not correct - -*** - -Expressing a possibility. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md deleted file mode 100644 index 27f5dcb5e42..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5d86ffb500e3f2ce47d -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md deleted file mode 100644 index a79f83d6f5a..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd5f41d697d0aab7833b5 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md deleted file mode 100644 index 13028d7c28a..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 651dd3e06ffb500e3f2ce478 -title: "Dialogue: Introducing" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-introducing ---- - -# --description-- - -What the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md deleted file mode 100644 index 3d67f522c07..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543abeff5f028dba112f278 -title: "I am: I'm" -challengeType: 19 -dashedName: i-am-im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, the verb `to be` is used to talk about identities, characteristics, and more. The contraction `I'm` is a combination of `I` and `am`. Here, Tom uses it to introduce himself. - -# --question-- - -## --text-- - -Which operation correctly expands the contraction `I'm`? - -## --answers-- - -`I is` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I am` - -*** - -`I was` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I have` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md deleted file mode 100644 index a2aa6a8f717..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 6543abf5f5f028dba112f279 -title: I'm -challengeType: 22 -dashedName: im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -The word `I'm` is a contraction of `I am`. Contractions are a way to shorten common combinations of words, especially with verbs. - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, that's right! _ Tom McKenzie.` - -## --blanks-- - -`I'm` diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md deleted file mode 100644 index 3b8b7cff0bd..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 6537e6ece93e5724eeb27c54 -title: Name and Job Title -challengeType: 19 -dashedName: name-and-job-title -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, we often mention our job or role in a company by saying, `I'm [Name], the [Job title].` This lets others know our position or role. - -# --question-- - -## --text-- - -What is Maria's job role at the company? - -## --answers-- - -`Graphic Designer` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Member` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Lead` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`CEO` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md deleted file mode 100644 index 2a3c405b6ad..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 651dd5386ffb500e3f2ce47a -title: Right -challengeType: 22 -dashedName: right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, to check or confirm something people sometimes use tag questions. For example, `You are a programmer, right?` Here, `right?` is used as a tag to check or confirm the previous statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, _?` - -## --blanks-- - -`are` - -### --feedback-- - -Pay attention to the verb in the sentence. - -*** - -`right` - -### --feedback-- - -Pay attention to the verb in the sentence. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md deleted file mode 100644 index 2ae09721cbf..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 6543aa3df5f028dba112f275 -title: Team Lead -challengeType: 22 -dashedName: team-lead -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -A `team lead` is a person who leads or manages a team. In the dialogue, Maria introduces herself as the team lead, meaning she has a leadership role. - -# --fillInTheBlank-- - -## --sentence-- - -`I'm Maria, the _ _.` - -## --blanks-- - -team - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -lead - -### --feedback-- - -Focus on the term Maria used to describe herself. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md deleted file mode 100644 index 3349bcfead9..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 6543aae6f5f028dba112f277 -title: "That's Right: 2" -challengeType: 22 -dashedName: thats-right-2 -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -Placeholder Description \_\_\_ \_\_ - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, _ _! I'm Tom McKenzie. It's a pleasure to meet you.` - -## --blanks-- - -`that's` - -*** - -`right` diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md deleted file mode 100644 index e85982fd561..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543aaa9f5f028dba112f276 -title: That's Right -challengeType: 19 -dashedName: thats-right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -When someone makes a correct assumption or guess about you, you can confirm it using phrases like `that's right`. It's a way of agreeing or saying yes to what is said. - -# --question-- - -## --text-- - -Which phrase does Tom use to confirm Maria's statement about him? - -## --answers-- - -`that's wrong` - -### --feedback-- - -`That's wrong` is used to disagree. - -*** - -`that's okay` - -### --feedback-- - -`that's okay` usually shows acceptance, not confirmation. - -*** - -`that's right` - -*** - -`that's left` - -### --feedback-- - -`that's left` refers to a direction, not confirmation. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md deleted file mode 100644 index dd254987129..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 651dd5296ffb500e3f2ce479 -title: You Are -challengeType: 22 -dashedName: you-are -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, when making introductions or identifying someone, you use the verb `to be`. In this case, `You are` is used to address the person Maria is talking to and affirmatively identify their occupation. - -Maria is introducing herself and confirming Tom's job role. `Are` is used in the present affirmative to make a statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, right?` - -## --blanks-- - -are - -### --feedback-- - -The verb `to be` is an irregular verb. When conjugated with the pronoun `you`, `be` becomes `are`. For example: `You are an English learner.` diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md new file mode 100644 index 00000000000..a041fbddef7 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md @@ -0,0 +1,15 @@ +--- +id: 655c0feadb1dd77f6cda623f +title: "Dialogue 1: A Job Interview" +challengeType: 21 +videoId: nLDychdBwUg +dashedName: dialogue-1-a-job-interview +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md new file mode 100644 index 00000000000..97f3f3245d8 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md @@ -0,0 +1,54 @@ +--- +id: 657b0f0be03b2137ed88b36c +title: Task 1 +challengeType: 19 +dashedName: task-1 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `interview` is a formal meeting where someone asks questions to learn about another person's experience, skills, or opinions. In job interviews, like in the dialogue, the interviewer asks about the candidate's previous job experiences. + +# --question-- + +## --text-- + +What is the purpose of Anna's meeting with the candidate? + +## --answers-- + +To discuss a new project at Acme Tech + +### --feedback-- + +The dialogue is about an interview, not a project discussion. + +--- + +To give a presentation on web development + +### --feedback-- + +The dialogue focuses on an interview, not a presentation. + +--- + +To have a casual conversation about programming + +### --feedback-- + +This is a formal interview, not a casual conversation. + +--- + +To conduct an interview about the candidate's job experience + +## --video-solution-- + +4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md new file mode 100644 index 00000000000..301a777a900 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md @@ -0,0 +1,50 @@ +--- +id: 657b106ced8c653be6b3218f +title: Task 2 +challengeType: 22 +dashedName: task-2 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Thanks for coming in for this interview. _ you _ me about your _ job experiences?` + +## --blanks-- + +`Can` + +### --feedback-- + +This word is used to ask if someone is able to do something. + +--- + +`tell` + +### --feedback-- + +This word is used when asking someone to give information. + +--- + +`previous` + +### --feedback-- + +This word is used to describe something that happened before now. + + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md new file mode 100644 index 00000000000..ad5202d23d2 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md @@ -0,0 +1,58 @@ +--- +id: 657b108cf870283d22b21e8e +title: Task 3 +challengeType: 19 +dashedName: task-3 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the simple present tense is used to describe habitual or usual actions. However, when you are talking about past roles or experiences, like in an interview, you should use the simple past tense. + +The simple past tense often involves changing verbs. For example, `is` becomes `was` for singular subjects and `are` becomes `were` for plural subjects. + +For example, `I am a teacher` in the present becomes `I was a teacher` for past experiences. Similarly, `They are engineers` changes to `They were engineers` when speaking about the past. + +# --question-- + +## --text-- + +What was the candidate's position at Acme Tech? + +## --answers-- + +`A project manager` + +### --feedback-- + +The candidate stated they were a programmer, not a project manager. + +--- + +`A database analyst` + +### --feedback-- + +The candidate mentioned being a programmer, which is different from a database analyst. + +--- + +`A programmer` + +--- + +`A software tester` + +### --feedback-- + +The candidate specifically mentioned their role as a programmer, not a software tester. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md new file mode 100644 index 00000000000..f757d7077f1 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md @@ -0,0 +1,38 @@ +--- +id: 657b110ad8afcc3f8e586362 +title: Task 4 +challengeType: 22 +dashedName: task-4 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that have been completed in the past. It involves changing verbs to show that the action happened before now. In this challenge, you'll practice using the simple past form of verb `to be`. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ there for three years. I _ responsible for developing web applications and maintaining the company's database.` + +## --blanks-- + +`was` + +### --feedback-- + +The first `was` indicates the completion of the time period the candidate spent at their previous job. + +--- + +`was` + +### --feedback-- + +The second `was` is used to describe past responsibility, indicating what the candidate used to do in their previous job. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md new file mode 100644 index 00000000000..a2258172744 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md @@ -0,0 +1,49 @@ +--- +id: 657b115008a62d41c0d7482f +title: Task 5 +challengeType: 19 +dashedName: task-5 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the context of programming and technology, the term `web applications` refers to software programs that run on a web server and are accessed through a web browser. They are an essential part of modern technology, allowing users to perform functions or access services over the internet. + +# --question-- + +## --text-- + +What does `web applications` refer to in the context of programming? + +## --answers-- + +Mobile apps that are downloaded from app stores + +### --feedback-- + +While mobile apps are a type of application, `web applications` specifically refer to those accessed through a web browser. + +--- + +Programs that run on a web server and are accessed via a web browser + +--- + +Physical hardware used in networking + +### --feedback-- + +Web applications are software, not physical hardware. + +--- + +Websites that only provide information without user interaction + +### --feedback-- + +Web applications are interactive and functional, not just informational. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md new file mode 100644 index 00000000000..6c2c5ba78bf --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md @@ -0,0 +1,49 @@ +--- +id: 657b119f0ce64343420bb850 +title: Task 6 +challengeType: 19 +dashedName: task-6 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `database` is a structured collection of data, typically stored electronically in a computer system. It is used to organize, store, and retrieve large amounts of information efficiently. In programming, `database` is essential for managing data that applications need to function. + +# --question-- + +## --text-- + +What is a `database` in the context of programming? + +## --answers-- + +A structured collection of data stored electronically + +--- + +A tool for designing websites + +### --feedback-- + +While important in web development, a database is not a tool for designing websites, but for storing data. + +--- + +A programming language used to create applications + +### --feedback-- + +A database is not a programming language; it's a system for storing and managing data. + +--- + +A type of computer virus + +### --feedback-- + +A database is a safe and structured way to store data, not a computer virus. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md new file mode 100644 index 00000000000..03e329649a9 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md @@ -0,0 +1,40 @@ +--- +id: 657b11e082e48a44eb4bfc09 +title: Task 7 +challengeType: 22 +dashedName: task-7 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's response and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ also part of the _ update team.` + +## --blanks-- + +`was` + +### --feedback-- + +This word is a past tense verb. You use it to talk about something that happened in the past. + +--- + +`software` + +### --feedback-- + +This word refers to computer programs. It's an important term in technology and programming. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md new file mode 100644 index 00000000000..67343b31705 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -0,0 +1,57 @@ +--- +id: 657b11f87368cf463ea4fe46 +title: Task 8 +challengeType: 19 +dashedName: task-8 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. For example: + + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. + `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + +# --question-- + +## --text-- + +How does Anna ask about specific projects in the past tense? + +## --answers-- + +`Where there any specific projects you'd like to mention?` + +### --feedback-- + +`Where` is used for locations. The correct form for asking about past events is `Were`. + +--- + +`Were there any specific projects you'd like to mention?` + +--- + +`Was there any specific projects you'd like to mention?` + +### --feedback-- + +`Was` is used with singular nouns. Since `projects` is plural, `Were` is the correct choice. + +--- + +`Are there any specific projects you'd like to mention?` + +### --feedback-- + +`Are` is present tense. The question is about past projects, so `Were` is needed. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md new file mode 100644 index 00000000000..e6bc643d065 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md @@ -0,0 +1,55 @@ +--- +id: 657b1240ef768447b80817ad +title: Task 9 +challengeType: 19 +dashedName: task-9 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense, as reviewed earlier, is used for actions completed in the past. In this context, `we were involved in` combines the simple past tense (`were`) with the expression `involved in`, which means being a part of something, especially in an active or important role. For example, `They were involved in organizing the event` means they played an important role in organizing it. + +# --question-- + +## --text-- + +How does the candidate describe their role in the project? + +## --answers-- + +`We had involvement in the development of the e-commerce platform.` + +### --feedback-- + +Although this phrase communicates involvement, the more common expression in English is `were involved in`. + +--- + +`We were engaged in the development of the e-commerce platform.` + +### --feedback-- + +`engaged in` is similar but not the exact phrase used by the candidate. `Involved in` specifically indicates an active participation. + +--- + +`We were involved in the development of the e-commerce platform.` + +--- + +`We participated in the development of the e-commerce platform.` + +### --feedback-- + +While `participated in` suggests involvement, the specific phrase used here is `involved in`. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md new file mode 100644 index 00000000000..f51e04c012a --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md @@ -0,0 +1,49 @@ +--- +id: 657b12ae08dd7049b300c901 +title: Task 10 +challengeType: 19 +dashedName: task-10 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +An `e-commerce platform` refers to a software application that allows businesses to manage their online sales operations. It typically includes features for displaying products, processing orders, and handling customer transactions. This term is essential in the world of online business, as it enables companies to sell goods and services over the internet. + +# --question-- + +## --text-- + +What is an `e-commerce platform` in the context of online business? + +## --answers-- + +A platform for social media marketing + +### --feedback-- + +While e-commerce platforms may use social media for marketing, they are primarily used for online sales operations. + +--- + +A software application for managing online sales + +--- + +A tool for website design and development + +### --feedback-- + +An e-commerce platform is specifically for managing online sales, not just website design. + +--- + +A system for email communication with customers + +### --feedback-- + +Though communication might be a feature, an e-commerce platform's main function is to manage online sales. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md new file mode 100644 index 00000000000..092c2b7ff32 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md @@ -0,0 +1,41 @@ +--- +id: 657b12e7c306334b7c320221 +title: Task 11 +challengeType: 22 +dashedName: task-11 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's statement and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for the checkout process, and it _ a successful implementation.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense of `are` used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense of `is` used for singular subjects or situations. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md new file mode 100644 index 00000000000..5a555480e1c --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md @@ -0,0 +1,49 @@ +--- +id: 657b13088693ef4ce21ce0e4 +title: Task 12 +challengeType: 19 +dashedName: task-12 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `checkout process` refers to the steps involved in completing a purchase, whether in a physical store or online. In a physical store, this usually involves taking items to a cashier, paying, and receiving a receipt. In online shopping, it includes adding items to a cart, entering shipping and payment details, and finalizing the order. + +# --question-- + +## --text-- + +What does the `checkout process` typically involve? + +## --answers-- + +Signing up for a store's loyalty program + +### --feedback-- + +While loyalty programs are part of customer engagement, the checkout process is specifically about completing a transaction. + +--- + +Arranging items on shelves in a store + +### --feedback-- + +Arranging items is a part of store management, not related to the checkout process of completing a purchase. + +--- + +Conducting market research + +### --feedback-- + +Market research is important for business strategy, but it's separate from the checkout process, which is directly involved in sales transactions. + +--- + +Completing a purchase through payment and receipt of goods + +## --video-solution-- + +4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md new file mode 100644 index 00000000000..db7a9bbed14 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md @@ -0,0 +1,49 @@ +--- +id: 657b133afcef714e542b557a +title: Task 13 +challengeType: 19 +dashedName: task-13 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Implementation` in a technical or business context refers to the process of putting a plan or design into effect. In software development, for instance, implementation involves the actual coding and setup of a software application based on designed specifications. It is a critical phase where ideas or plans are turned into a functioning reality. + +# --question-- + +## --text-- + +What does `implementation` mean in a project context? + +## --answers-- + +The planning stage of a project + +### --feedback-- + +Planning is the phase where strategies are formed, not the actual execution or implementation of those plans. + +--- + +The analysis of project results + +### --feedback-- + +Analysis is about evaluating outcomes, whereas implementation is about executing or carrying out the project plans. + +--- + +The process of team formation + +### --feedback-- + +Team formation is part of project setup, but implementation specifically refers to executing the planned tasks of the project. + +--- + +The execution of a plan or design + +## --video-solution-- + +4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md new file mode 100644 index 00000000000..1fa977ff3c0 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md @@ -0,0 +1,49 @@ +--- +id: 657b135e9029fb4f8141e40c +title: Task 14 +challengeType: 22 +dashedName: task-14 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. This is a great way to practice and remember these words. + +# --fillInTheBlank-- + +## --sentence-- + +`Anna: That's excellent. _ there any specific projects you'd like to mention?` + +`Candidate: Yes, in one of my team's projects, we were _ in the development of an e-commerce platform. We were responsible for the _ process, and it was a successful implementation.` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past tense form of `are`. The first letter should be capitalized. + +--- + +`involved` + +### --feedback-- + +This word means participating actively in something. + +--- + +`checkout` + +### --feedback-- + +This term refers to the process of completing a purchase. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md new file mode 100644 index 00000000000..94904516eba --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md @@ -0,0 +1,54 @@ +--- +id: 657b138d33db9e50f116b5f0 +title: Task 15 +challengeType: 19 +dashedName: task-15 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and answer the question. + +# --question-- + +## --text-- + +How does Anna ask about the candidate's educational background in computer science? + +## --answers-- + +`Are you educated in computer science?` + +### --feedback-- + +`Are you` is present tense, but Anna's question is about the candidate's past education. + +--- + +`Do you study computer science?` + +### --feedback-- + +`Do you study` is present tense. The question is about past education. + +--- + +`Were you educated in computer science?` + +--- + +`Have you studied computer science?` + +### --feedback-- + +`Have you studied` is a different form, asking if they have ever studied it at any time. `Were you educated` specifically asks about formal education in the past. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md new file mode 100644 index 00000000000..6044644f850 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md @@ -0,0 +1,49 @@ +--- +id: 657b1431076b365555784189 +title: Task 16 +challengeType: 19 +dashedName: task-16 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `bachelor's degree` is an undergraduate academic degree awarded by colleges and universities upon completion of a course of study. In the term `bachelor's degree`, the use of the noun (`bachelor`) followed by the `'s` indicates possession or association. This form is commonly used to show that something belongs to or is related to the noun, as in `today's news` or `teacher's guide`. + +# --question-- + +## --text-- + +What does `bachelor's degree` refer to? + +## --answers-- + +An undergraduate academic degree + +--- + +A type of professional certification + +### --feedback-- + +A bachelor's degree is an academic qualification, not a professional certification. + +--- + +A high school diploma + +### --feedback-- + +A bachelor's degree is a higher education qualification, more advanced than a high school diploma. + +--- + +A master's program entry requirement + +### --feedback-- + +While a bachelor's degree may be required for a master's program, it itself refers to an undergraduate degree. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md new file mode 100644 index 00000000000..299109790e0 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md @@ -0,0 +1,56 @@ +--- +id: 657b145976723b56a97b8dda +title: Task 17 +challengeType: 19 +dashedName: task-17 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `I was introduced to` uses the simple past tense form `was` of the verb `be`, combined with the past participle `introduced`. This structure, `be` followed by a verb suffixed with `-ed`, is often used to describe actions that happened to the subject in the past. For example: + +`At college, I was introduced to many programing languages` + +# --question-- + +## --text-- + +What does the candidate mean by saying `I was introduced to various programming languages and software development principles`? + +## --answers-- + +I taught myself various programming languages and principles + +### --feedback-- + +`I was introduced to` implies being formally taught or shown by someone else, not self-teaching. + +--- + +I learned about various programming languages and principles in my studies + +--- + +I have extensive experience with various programming languages and principles + +### --feedback-- + +The phrase indicates initial exposure to these topics, not necessarily extensive experience. + +--- + +I developed various programming languages and principles + +### --feedback-- + +Being introduced to something means learning about it for the first time, not creating or developing it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md new file mode 100644 index 00000000000..2e11e13fa69 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md @@ -0,0 +1,49 @@ +--- +id: 657b149630b3ea5873269a38 +title: Task 18 +challengeType: 19 +dashedName: task-18 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `various` is an adjective used to describe a number of different types or kinds of something, emphasizing diversity or variety. It is often used to indicate that there are several distinct items or examples being referred to. For example, saying `various books` means books of different kinds or genres. + +# --question-- + +## --text-- + +What does `various` imply when talking about programming languages and software development principles? + +## --answers-- + +Different types or kinds + +--- + +A specific type or kind + +### --feedback-- + +The term `various` implies diversity, not specificity. + +--- + +Only one type + +### --feedback-- + +`Various` indicates a number of different types, not just one. + +--- + +Irrelevant or unrelated types + +### --feedback-- + +`Various` does mean different types, but these are usually relevant and related to the context. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md new file mode 100644 index 00000000000..b217384d87c --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md @@ -0,0 +1,38 @@ +--- +id: 657b14d8353d665a187fe771 +title: Task 19 +challengeType: 22 +dashedName: task-19 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this challenge, you'll practice filling in key terms from the dialogue. These terms are commonly used in job interviews and are essential for understanding the context of the discussion. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Sure, I was a programmer at Acme Tech. I was there for three years. I was responsible for developing web _ and maintaining the company's _. I was also part of the software update team.` + +## --blanks-- + +`applications` + +### --feedback-- + +These are programs designed to perform specific tasks or functions. + +--- + +`database` + +### --feedback-- + +This is a collection of information organized for easy access, management, and updating. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md new file mode 100644 index 00000000000..5d81b22a9e7 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md @@ -0,0 +1,62 @@ +--- +id: 657b153ac677705c7059530d +title: Task 20 +challengeType: 19 +dashedName: task-20 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `could you tell me` is a polite way to ask someone for information. It's commonly used in formal or professional situations, like job interviews or meetings. +In English, some verbs have irregular past forms, meaning they do not follow the regular pattern of adding `-ed` to make the past tense. `Can` is one such verb, and its irregular simple past form is `could`. + +The existence of irregular forms, like `could`, often comes from the way language has evolved over time. These forms do not follow the regular patterns and need to be memorized. + +For example: + +- Present: `I can speak English.` +- Past: `I could speak English when I was six.` + +# --question-- + +## --text-- + +What does the phrase `could you tell me` in Anna's sentence express? + +## --answers-- + +A polite request for information + +--- + +A command to do something immediately + +### --feedback-- + +The phrase `could you tell me` is used for polite requests, not direct commands. + +--- + +A suggestion for future action + +### --feedback-- + +This phrase is asking for information now, not suggesting something for the future. + +--- + +An offer to help someone + +### --feedback-- + +This phrase is more about asking for information than offering help. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md new file mode 100644 index 00000000000..ecf0d666af0 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md @@ -0,0 +1,54 @@ +--- +id: 657b15dbcafe4d5f39a5de82 +title: Task 21 +challengeType: 19 +dashedName: task-21 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `previous` is used to describe something that happened before the current time or situation. It's often used to refer to past experiences, jobs, or events. + +# --question-- + +## --text-- + +In the context of Anna's question, what does `previous` refer to? + +## --answers-- + +Past roles and responsibilities + +--- + +Future roles and responsibilities + +### --feedback-- + +`Previous` refers to something that has already happened, not something in the future. + +--- + +Current roles and responsibilities + +### --feedback-- + +`Previous` means something that happened before now, not what is happening currently. + +--- + +Unrelated roles and responsibilities + +### --feedback-- + +`Previous` specifically relates to roles and responsibilities that were held before, not those unrelated. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md new file mode 100644 index 00000000000..8497f67b9bb --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md @@ -0,0 +1,53 @@ +--- +id: 657b160d6a8662610fe6a523 +title: Task 22 +challengeType: 22 +dashedName: task-22 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that were completed in the past. Regular verbs in the past tense usually end with `-ed`, while irregular verbs have unique past forms. For example, as you learned in previous tasks, `was` and `were` are the past forms of `is` and `are`. + +Examples of simple past tense: + +- `I worked at a company.` (`work` becomes `worked`) +- `I was happy.` (`is` becomes `was`) +- `We were busy.` (`are` becomes `were`) + +# --fillInTheBlank-- + +## --sentence-- + +`Hello! Certainly. I _ at Mock Corporation for five years. I _ part of a team of software engineers, and we _ responsible for developing and maintaining various applications.` + +## --blanks-- + +`worked` + +### --feedback-- + +Think of the past tense of `work`, a regular verb that follows the usual `-ed` ending pattern. + +--- + +`was` + +### --feedback-- + +Recall the past tense form of `is`, which changes to a completely different word in its irregular past form. + +--- + +`were` + +### --feedback-- + +Consider the past tense of `are`, an irregular verb that also changes to a different word in the past. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md new file mode 100644 index 00000000000..8e1b26a3bce --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md @@ -0,0 +1,46 @@ +--- +id: 657b163c9da40e62b904be1f +title: Task 23 +challengeType: 22 +dashedName: task-23 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the past simple interrogative. In questions, the simple past tense often begins with a past tense verb, followed by the subject and the rest of the sentence. This structure is used to ask about past events or states. + +# --fillInTheBlank-- + +## --sentence-- + +`That's great to hear. _ the members of the team _ _ any specific achievements or projects?` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past form of `are` used to ask about a past state or condition. + +--- + +`involved` + +### --feedback-- + +Think of a word that means `participated in` or `engaged with`. + +--- + +`in` + +### --feedback-- + +A preposition that often follows `involved` to indicate participation or inclusion. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md new file mode 100644 index 00000000000..bc7924edcf6 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md @@ -0,0 +1,54 @@ +--- +id: 657b18e71067d6680b9ac5d3 +title: Task 24 +challengeType: 19 +dashedName: task-24 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `redesign` means to design something again or differently. It's often used in the context of improving or updating the design of an existing product, service, or structure. In software and web development, redesigning is a common practice to enhance functionality, user experience, or aesthetics. + +# --question-- + +## --text-- + +What does `redesign` imply in Candidate2's statement about the website project? + +## --answers-- + +To design for the first time + +### --feedback-- + +`Redesign` implies working on something that already exists, not creating it for the first time. + +--- + +To remove the design + +### --feedback-- + +`Redesign` means to change or improve the existing design, not to remove it. + +--- + +To change or improve an existing design + +--- + +To copy a design + +### --feedback-- + +`Redesign` involves making changes or improvements, not copying a design as it is. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md new file mode 100644 index 00000000000..ed588a90563 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md @@ -0,0 +1,54 @@ +--- +id: 657b1985ae17886b05b382b1 +title: Task 25 +challengeType: 19 +dashedName: task-25 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `performance` in a technical context often refers to how well a system or component operates, especially in terms of speed, efficiency, and reliability. For websites and software, performance can relate to how quickly pages load, the responsiveness of the application, or the stability of the system under various conditions. + +# --question-- + +## --text-- + +What does `performance` refer to in Candidate2's statement about the website? + +## --answers-- + +A live presentation + +### --feedback-- + +While `performance` can mean a presentation, in this context, it relates to the functioning of the website. + +--- + +Artistic display + +### --feedback-- + +In a technical context, `performance` refers to operational effectiveness, not an artistic aspect. + +--- + +Financial success + +### --feedback-- + +`Performance` in this context is about the website's operational aspects, not its financial success. + +--- + +How well the website operates + +## --video-solution-- + +4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md new file mode 100644 index 00000000000..98e6bda774a --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md @@ -0,0 +1,54 @@ +--- +id: 657b19bf7b32af6caf763ef7 +title: Task 26 +challengeType: 19 +dashedName: task-26 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `collaborative effort` refers to a situation where people work together as a team to achieve a common goal. This kind of teamwork is essential in many work environments, especially on projects where different skills and perspectives are needed. + +# --question-- + +## --text-- + +What does `collaborative effort` imply in the context of Candidate2's statement? + +## --answers-- + +Working independently + +### --feedback-- + +`Collaborative effort` means working together as a team, not independently. + +--- + +Teamwork to achieve a goal + +--- + +Avoiding responsibility + +### --feedback-- + +`Collaborative effort` involves taking shared responsibility, not avoiding it. + +--- + +Focusing on individual skills + +### --feedback-- + +`Collaborative effort` emphasizes teamwork over individual skills. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md new file mode 100644 index 00000000000..56a621b07c6 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md @@ -0,0 +1,38 @@ +--- +id: 657b1a03df3ec46eca276046 +title: Task 27 +challengeType: 22 +dashedName: task-27 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. + +# --fillInTheBlank-- + +## --sentence-- + +`Yes, our team _ involved in a project to _ the company's website.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`redesign` + +### --feedback-- + +This word means to design something again in a different way. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md new file mode 100644 index 00000000000..66d49e9e89f --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md @@ -0,0 +1,55 @@ +--- +id: 657b1a27dc6daf6ffd52ff1f +title: Task 28 +challengeType: 19 +dashedName: task-28 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the noun suffixed with `'s` followed by a second noun structure is used to show possession or belonging. If the first noun is singular, as in `Sarah's laptop`, it indicates that the laptop belongs to Sarah. However, if the first noun is plural, the structure changes to noun suffixed with `'`, as in `teachers' office`, indicating an office for teachers. + +# --question-- + +## --text-- + +What does `master's degree` in the context of the dialogue refer to? + +## --answers-- + +A degree for school teachers + +### --feedback-- + +`Master's degree` refers to an advanced academic degree, not specifically for teachers. + +--- + +A primary level educational degree + +### --feedback-- + +`Master's degree` is a higher education qualification, beyond the primary level. + +--- + +A degree in mastering skills + +### --feedback-- + +While it implies expertise, `master's degree` specifically refers to an academic qualification. + +--- + +An advanced academic degree + +## --video-solution-- + +4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md new file mode 100644 index 00000000000..bf63c3e8d24 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md @@ -0,0 +1,49 @@ +--- +id: 657b1a637e4dc571f8f4d3d7 +title: Task 29 +challengeType: 19 +dashedName: task-29 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `appreciate` is often used to express gratitude or to acknowledge the value or importance of something or someone's actions. It's a way of showing that you recognize and are thankful for someone's help, effort, or achievement. + +# --question-- + +## --text-- + +In a work meeting, your colleague says, `I really appreciate your help on this project.` What is your colleague expressing? + +## --answers-- + +Dissatisfaction with your work + +### --feedback-- + +`Appreciate` means to be grateful or thankful, not to show dissatisfaction. + +--- + +Indifference to your contribution + +### --feedback-- + +`Appreciate` is used to express positive recognition, not indifference. + +--- + +Gratitude for your contribution + +--- + +A need for more assistance + +### --feedback-- + +`Appreciate` here indicates satisfaction with the help received, not a request for more assistance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md new file mode 100644 index 00000000000..4fa33c1c2d0 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md @@ -0,0 +1,47 @@ +--- +id: 657b1a9581015573806e1e20 +title: Task 30 +challengeType: 22 +dashedName: task-30 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words you learned. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for implementing new features and ensuring the website's performance. It _ a _ effort, and we were able to deliver the project on time.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense form of `are`, used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`collaborative` + +### --feedback-- + +This word means working together as a team. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md new file mode 100644 index 00000000000..6013cb50f86 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md @@ -0,0 +1,39 @@ +--- +id: 657b1cc072206e7ac3db88b8 +title: Task 31 +challengeType: 22 +dashedName: task-31 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the missing words correctly. This is a great way to practice what you've learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I have a _ degree in computer science. My studies _ quite intensive, and I was introduced to many different methodologies.` + +## --blanks-- + +`master's` + +### --feedback-- + +This term, using the `noun's noun` structure, refers to an advanced academic degree. + +--- + +`were` + +### --feedback-- + +This is the past tense form of `are` used for plural subjects or things. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md new file mode 100644 index 00000000000..1c7c7b4603c --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md @@ -0,0 +1,30 @@ +--- +id: 657b1d080265ba7c4f96bf79 +title: Task 32 +challengeType: 22 +dashedName: task-32 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task helps you review the word you learned. Listen to the dialogue and complete the sentence correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`Impressive! We _ candidates with strong educational backgrounds and practical experience.` + +## --blanks-- + +`appreciate` + +### --feedback-- + +This word means to recognize the value or importance of something or someone's actions. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md new file mode 100644 index 00000000000..28e4211c290 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md @@ -0,0 +1,15 @@ +--- +id: 657b1d4ec0e2587e8bcc95f7 +title: "Dialogue 3: Two Workmates Talk About Their Backgrounds" +challengeType: 21 +dashedName: dialogue-3-two-workmates-talk-about-their-backgrounds +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md new file mode 100644 index 00000000000..df8ebc66d25 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md @@ -0,0 +1,54 @@ +--- +id: 657b1da0b27fef8117827ce5 +title: Task 33 +challengeType: 19 +dashedName: task-33 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned about the simple past tense. Now, you can explore it further. The simple past tense is often formed by adding `-ed` to a verb. But, when a verb ends with an `e`, you just add a `d`. For example, `notice` becomes `noticed`. + +# --question-- + +## --text-- + +What does `noticed` in Sarah's sentence indicate? + +## --answers-- + +Sarah observed something in the past + +--- + +Sarah is planning to observe something + +### --feedback-- + +The simple past tense `noticed` indicates a completed action in the past, not a future plan. + +--- + +Sarah continuously observes something + +### --feedback-- + +The simple past tense `noticed` is used for actions that were completed, not ongoing actions. + +--- + +Sarah never observes anything + +### --feedback-- + +`Noticed` implies that Sarah did observe something, not never observing. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md new file mode 100644 index 00000000000..5a1ba6afbfc --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md @@ -0,0 +1,30 @@ +--- +id: 657b1dfec76149836ea5c7d0 +title: Task 34 +challengeType: 22 +dashedName: task-34 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you will focus on the past simple negative. It's created by adding `not` after the auxiliary verb `was` or `were`. For example, `was` becomes `wasn't` (`was not`) and `were` becomes `weren't` (`were not`). This form is used to describe something that did not happen in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`It _ exactly tech-related, but I learned a lot about problem-solving and critical thinking.` + +## --blanks-- + +`wasn't` + +### --feedback-- + +This word is used to make a negative statement in the past tense. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md new file mode 100644 index 00000000000..da30e71e20a --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md @@ -0,0 +1,49 @@ +--- +id: 657b1e2fad2ffe84ab420a56 +title: Task 35 +challengeType: 19 +dashedName: task-35 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You're already familiar with `wasn't` and `weren't` for past simple negative. Now, let's explore `didn't`, a contraction of `did not`. It's used with the base form of verbs (the infinitive without `to`) to express that an action did not happen in the past. For example, `didn't go` means the action of going did not occur. + +# --question-- + +## --text-- + +Imagine you are reading a story about a character who planned to attend a concert but couldn't. How would you describe this situation? + +## --answers-- + +The character enjoyed the concert + +### --feedback-- + +Using `didn't` suggests the character did not go to the concert, contradicting the idea of enjoying it. + +--- + +The character didn't attend the concert + +--- + +The character always goes to concerts + +### --feedback-- + +This expression refers to a regular habit, not a specific event in the past. + +--- + +The character is looking forward to the next concert + +### --feedback-- + +This option is about future anticipation. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md new file mode 100644 index 00000000000..938a8118ce2 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md @@ -0,0 +1,54 @@ +--- +id: 657b1e66159fec86336a737b +title: Task 36 +challengeType: 19 +dashedName: task-36 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned the basics of the simple past tense. Now you can dive deeper into it. Typically, the simple past tense is formed by adding `-ed` to regular verbs. For instance, the verb `play` becomes `played` in the simple past. This tense is used to describe actions that were completed at a specific time in the past. + +# --question-- + +## --text-- + +What does `I played` in Sophie's sentence suggest about her experience with coding? + +## --answers-- + +She casually experimented with coding in the past + +--- + +She is currently playing a coding game + +### --feedback-- + +`Played` is in the past tense, indicating a past action, not something happening currently. + +--- + +She plans to start coding soon + +### --feedback-- + +`Played` implies she already has some experience with coding, not that she is planning to start. + +--- + +She never tried coding + +### --feedback-- + +Using `played` confirms she did engage in coding, contradicting the idea of never trying it. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md new file mode 100644 index 00000000000..2bd70b3d732 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md @@ -0,0 +1,49 @@ +--- +id: 657b1e9a62603587747f7f45 +title: Task 37 +challengeType: 19 +dashedName: task-37 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In English, when forming questions in the simple past tense, you often use `did`. This is followed by the subject and the base form of the verb (without `ed`). For example, `Did you enjoy` is a past simple interrogative phrase where `did` is the auxiliary verb, `you` is the subject, and `enjoy` is the base form of the verb. + +# --question-- + +## --text-- + +What does a question like `Did you enjoy the concert last night?` ask about? + +## --answers-- + +Are you going to enjoy the concert? + +### --feedback-- + +This implies a future event. The question with `did` is asking about a past experience. + +--- + +Do you enjoy concerts in general? + +### --feedback-- + +This is asking about general preferences, not a specific past event. + +--- + +Did you have a good experience at the concert last night? + +--- + +Will you enjoy future concerts? + +### --feedback-- + +The question is about a past event, not future experiences. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md new file mode 100644 index 00000000000..430fa995037 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md @@ -0,0 +1,42 @@ +--- +id: 657b1ee1de7216896b5b4361 +title: Task 38 +challengeType: 22 +dashedName: task-38 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blank correctly. This task is a review. Remember, the simple past tense is used to talk about actions or situations in the past, and the negative form is used to describe things that did not happen. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: That's interesting! So, you _ work on many programming projects during your studies?` + +`Sophie: No, not really. I _ around with coding, but most of my projects involved circuit designs and electrical systems. It was a bit different.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used here to talk about something that was not done in the past. + +--- + +`played` + +### --feedback-- + +This word suggests that Sophie casually engaged in coding for pleasure or interest. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md new file mode 100644 index 00000000000..dfcc68a881a --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md @@ -0,0 +1,40 @@ +--- +id: 657b1f0585d48f8ac0b19654 +title: Task 39 +challengeType: 22 +dashedName: task-39 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you'll focus on answering questions in the simple past tense. When responding to a past simple interrogative (a question), you can answer affirmatively with `did` or negatively with `didn't`. For example, `Did you go to the party?` can be answered with `I did` (affirmative) or `I didn't` (negative). Listen to the dialogue and fill in the blanks correctly to practice this structure. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: I see. _ you enjoy your time there, even if it wasn't entirely tech-focused? Sophie: I _.` + +## --blanks-- + +`Did` + +### --feedback-- + +This word is used to form a past simple interrogative question. The first letter should be capitalized. + +--- + +`did` + +### --feedback-- + +This response is an affirmative answer to the past simple interrogative question. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md new file mode 100644 index 00000000000..92e4b28c489 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md @@ -0,0 +1,49 @@ +--- +id: 657b1f598f63008c8bdb20b8 +title: Task 40 +challengeType: 19 +dashedName: task-40 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the simple past tense, some verbs are irregular and don't follow the regular `-ed` ending pattern. One example of this is the verb `meet`, which becomes `met` in the past tense. This is important to remember when talking about past events. + +# --question-- + +## --text-- + +During a class reunion, an old friend tells you, `We met for the first time in art class.` What is your friend referring to with `met`? + +## --answers-- + +We are meeting right now in art class + +### --feedback-- + +The use of `met` indicates a past event, not something happening currently. + +--- + +Our first encounter was in the past, specifically in art class + +--- + +We will meet for the first time soon + +### --feedback-- + +`Met` indicates a past action, not a future arrangement. + +--- + +We have never been in art class together + +### --feedback-- + +`Met` suggests a past meeting. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md new file mode 100644 index 00000000000..e3cdc339c1f --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md @@ -0,0 +1,49 @@ +--- +id: 657b1f981cd42e8dc3b282d9 +title: Task 41 +challengeType: 19 +dashedName: task-41 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn another special case in this task. It's the past tense form of `have`. Unlike regular verbs that add `-ed` for the past tense, `have` becomes `had`. This irregular form is used for both singular and plural subjects in the past tense, making it a unique and important verb to remember. + +# --question-- + +## --text-- + +What does `had` imply in a sentence like `They had a meeting yesterday?` + +## --answers-- + +They possessed or experienced something in the past + +--- + +They are having a meeting right now + +### --feedback-- + +`Had` is used for past actions, indicating the meeting occurred in the past, not at the present moment. + +--- + +They will have a meeting tomorrow + +### --feedback-- + +`Had` indicates a past action, not a future plan. + +--- + +They never have meetings + +### --feedback-- + +Using `had` confirms that the meeting took place in the past. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md new file mode 100644 index 00000000000..9f86ab82bcb --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md @@ -0,0 +1,47 @@ +--- +id: 657b1fe950c0df90346e5d12 +title: Task 42 +challengeType: 22 +dashedName: task-42 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the words `met`, `had`, and `wasn't`. You have already learned these words. Listen to the dialogue and fill in the blanks with the correct words. This exercise is a good way to practice and reinforce your understanding of these words in context. + +# --fillInTheBlank-- + +## --sentence-- + +`I did. It was challenging, but I _ some fantastic people. We _ a bunch of fun coding marathons, although I _ always a very strong programmer.` + +## --blanks-- + +`met` + +### --feedback-- + +This word is used here to describe encountering people in the past. + +--- + +`had` + +### --feedback-- + +This word is used to express possession or experiences in the past. + +--- + +`wasn't` + +### --feedback-- + +This word is the negative form in the past tense, indicating something that was not the case. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md new file mode 100644 index 00000000000..2ee4e256d2a --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md @@ -0,0 +1,39 @@ +--- +id: 657b201372864e91d4f5bb53 +title: Task 43 +challengeType: 22 +dashedName: task-43 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +When a verb ends in a consonant followed by `y`, you should change the `y` to `i` and add `ed` for the past tense. For example, `carry` becomes `carried`. Note that this rule applies when the `y` follows a consonant, not a vowel, so the simple past form of `convey` is `conveyed`. For regular verbs, you simply add `ed` to form the past tense. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ at a small college as well and _ in information technology.` + +## --blanks-- + +`studied` + +### --feedback-- + +The past simple tense of `study` is formed by changing `y` to `i` and adding `ed`. + +--- + +`majored` + +### --feedback-- + +This word follows the regular past simple tense formation by just adding `ed`. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md new file mode 100644 index 00000000000..67255d1bac6 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md @@ -0,0 +1,26 @@ +--- +id: 657b20338e0802931673c1e1 +title: Task 44 +challengeType: 22 +dashedName: task-44 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + +# --description-- + +You've learned that for verbs ending in `e`, you simply add `d` to form the simple past tense. Choose the correct form of `love` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she really _ the beach vacation.` + +## --blanks-- + +`loved` + +### --feedback-- + +To form the simple past, add `d` to the base form of the verb, `love`. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md new file mode 100644 index 00000000000..4d89a2935c0 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md @@ -0,0 +1,54 @@ +--- +id: 657b20985d315095e5c3851d +title: Task 45 +challengeType: 19 +dashedName: task-45 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this context, `got` is a special case in the simple past tense. It's the past tense of `get`. Unlike regular verbs that typically add `-ed` for the past tense, `get` changes to `got`. + +# --question-- + +## --text-- + +In the context of Sarah's statement, what does `got` imply about her experience? + +## --answers-- + +She is getting the opportunity now + +### --feedback-- + +`Got` indicates a past opportunity, not something happening currently. + +--- + +She had the opportunity in the past + +--- + +She will get the opportunity in the future + +### --feedback-- + +`Got` refers to a past experience, not a future possibility. + +--- + +She never gets such opportunities + +### --feedback-- + +`Got` in this context suggests she did have this opportunity. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md new file mode 100644 index 00000000000..ac32d364daa --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md @@ -0,0 +1,50 @@ +--- +id: 657b21e28a01039cb27b4f13 +title: Task 46 +challengeType: 19 +dashedName: task-46 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `exactly` is used to emphasize the truth or accuracy of a statement or description. It can mean `precisely` or `just`. For example, if someone says, `It's exactly what I needed`, they mean that it is precisely or perfectly what was required. `Exactly` often highlights that something is correct in every detail. + +# --question-- + +## --text-- + +What does `exactly` imply in a sentence like `This is exactly the kind of work I enjoy`? + +## --answers-- + +This is somewhat similar to the work I enjoy + +### --feedback-- + +`Exactly` indicates a perfect match, not just a similarity. + +--- + +This is the opposite of the work I enjoy + +### --feedback-- + +`Exactly` implies a perfect match, not an opposite. + +--- + +I am not sure if this is the work I enjoy + +### --feedback-- + +Using `exactly` shows certainty, not uncertainty. + +--- + +This is precisely the type of work that I find enjoyable + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md new file mode 100644 index 00000000000..36c267c651b --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md @@ -0,0 +1,35 @@ +--- +id: 657b221b2ab0ac9e18a173ef +title: Task 47 +challengeType: 22 +dashedName: task-47 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Let's look at `exactly` and `exact`. You use `exactly` to show something is just right or very true. It is an adverb. For example, `You did it exactly right!`. + +`Exact` is an adjective, and it describes something very correct or precise, like in `the exact time`. + +# --fillInTheBlank-- + +## --sentence-- + +`She knew the _ time of the meeting. She arrived _ at 3 pm.` + +## --blanks-- + +`exact` + +### --feedback-- + +This word is an adjective, describing the noun `time`. + +--- + +`exactly` + +### --feedback-- + +This word is an adverb, showing that her arrival time was very precise. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md new file mode 100644 index 00000000000..82dcdea8fbb --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -0,0 +1,39 @@ +--- +id: 657b223e41ce6b9f9a01d214 +title: Task 48 +challengeType: 22 +dashedName: task-48 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You'll review the past simple negative in this task. It's formed using `was` or `were` with `not`, like `weren't` (`were not`) or `wasn't` (`was not`). It's used to talk about things that did not happen or were not true in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`They _ _ big projects.` + +## --blanks-- + +`weren't` + +### --feedback-- + +It's the negative form of `were` in the past tense, used to say something was not true or did not happen. + +--- + +`exactly` + +### --feedback-- + +This word is used to emphasize the statement, suggesting the projects were not precisely big. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md new file mode 100644 index 00000000000..06ce8ba3d76 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md @@ -0,0 +1,15 @@ +--- +id: 657b227f7ad32ea17e2cdf28 +title: "Dialogue 4: A Developer with a Different Background" +challengeType: 21 +dashedName: dialogue-4-a-developer-with-a-different-background +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md new file mode 100644 index 00000000000..abee49452c1 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md @@ -0,0 +1,56 @@ +--- +id: 657b2310b8cd52a4f15c1818 +title: Task 49 +challengeType: 19 +dashedName: task-49 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `unconventional` is used to describe something that's not based on or conforming to what is generally done or believed. It often implies a method or approach that is different from the norm. + +# --question-- + +## --text-- + +What does `unconventional` imply about Alice's background in tech? + +## --answers-- + +Her background is different from the usual way people get into tech + +--- + +Her background is exactly the same as most people in tech + +### --feedback-- + +`Unconventional` means not following the usual conventions, which contradicts being the same as most people. + +--- + +She doesn't have any background in tech + +### --feedback-- + +`Unconventional` suggests a different approach, not the absence of a background. + +--- + +She followed a very traditional path into tech + +### --feedback-- + +`Unconventional` indicates a non-traditional path, not a very traditional one. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md new file mode 100644 index 00000000000..47917952aff --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md @@ -0,0 +1,39 @@ +--- +id: 657b2340be1593a6517fe77b +title: Task 50 +challengeType: 22 +dashedName: task-50 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple negative, `did not` (contracted to `didn't`) is followed by the base form of a verb. This structure is used to express that an action did not happen in the past. In this dialogue, Alice is describing her educational background related to technology. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ _ tech at a traditional university.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used in the past simple negative to indicate that an action was not done. + +--- + +`study` + +### --feedback-- + +The base form of the verb is used after the contraction in negative past simple sentences. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md new file mode 100644 index 00000000000..e19667245f9 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md @@ -0,0 +1,54 @@ +--- +id: 657b236aa1eb9fa7b209aa03 +title: Task 51 +challengeType: 19 +dashedName: task-51 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `mostly` is used to indicate that something is true to a large extent but not completely. It suggests that while other factors or methods may be involved, the primary aspect is what is mentioned. + +# --question-- + +## --text-- + +In Alice's statement, what does `mostly` suggest about her way of learning? + +## --answers-- + +She only learned through formal education + +### --feedback-- + +`Mostly` implies a greater emphasis on self-teaching rather than exclusive formal education. + +--- + +She didn't learn anything on her own + +### --feedback-- + +The use of `mostly` indicates a significant amount of self-learning, not an absence of it. + +--- + +She learned equally through self-teaching and formal courses + +### --feedback-- + +`Mostly` suggests a greater emphasis on one method over an equal balance. + +--- + +Her learning was primarily through her own efforts, with some formal courses + +## --video-solution-- + +4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md new file mode 100644 index 00000000000..10f6121949b --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md @@ -0,0 +1,36 @@ +--- +id: 657b23a413d28da927e087ca +title: Task 52 +challengeType: 22 +dashedName: task-52 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +This task reviews how an adverb is often formed by adding `-ly` to an adjective. + + +# --fillInTheBlank-- + +## --sentence-- + +`She completed _ of her work before lunch. The office is _ quiet in the mornings.` + +## --blanks-- + +`most` + +### --feedback-- + +This word is used as an adjective to describe the quantity of work completed. + +--- + +`mostly` + +### --feedback-- + +This word is used as an adverb to describe the general state of the office. + + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md new file mode 100644 index 00000000000..8f0a554d33f --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md @@ -0,0 +1,50 @@ +--- +id: 657b23bc0e32f9aa9c62eb82 +title: Task 53 +challengeType: 19 +dashedName: task-53 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `self-taught` refers to acquiring knowledge or skills without direct teaching from a traditional teacher or educational institution. It involves learning independently. The word `taught` is the past participle of `teach`. When someone is `self-taught`, it means they have taught themselves. + +# --question-- + +## --text-- + +What does `self-taught` imply when someone says, `I am self-taught in programming`? + +## --answers-- + +They were taught programming by a professional teacher + +### --feedback-- + +`Self-taught` indicates learning independently, not being taught by a professional teacher. + +--- + +They have no knowledge of programming + +### --feedback-- + +`Self-taught` means they have acquired knowledge or skills, not that they lack them. + +--- + +They learned programming on their own, without formal education + +--- + +They are planning to learn programming in the future + +### --feedback-- + +`Self-taught` refers to learning that has already taken place, not future plans. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md new file mode 100644 index 00000000000..daa0ed7fa3b --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md @@ -0,0 +1,27 @@ +--- +id: 657b23f03b449aac2c517089 +title: Task 54 +challengeType: 22 +dashedName: task-54 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `took` is a special case in the simple past tense. It's the past tense of `take`. Unlike regular verbs that follow the standard `-ed` ending for the past tense, `take` changes to `took`. This irregular form is important to know because it's commonly used to talk about actions that happened in the past. Choose the correct past tense form of `take` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she _ a photography class.` + +## --blanks-- + +`took` + +### --feedback-- + +This word is the past tense form of `take`. It's used to talk about actions that happened in the past. + + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md new file mode 100644 index 00000000000..aa093ae629c --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md @@ -0,0 +1,49 @@ +--- +id: 657b242d06512dadaea55056 +title: Task 55 +challengeType: 19 +dashedName: task-55 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The verb `attend` means to be present at an event or place. It's often used regarding schools, colleges, meetings, or events. It implies regular participation or presence at a specific place or event. + +# --question-- + +## --text-- + +If a friend tells you, `I'm going to attend the new art workshop downtown`, what are they planning to do? + +## --answers-- + +They are planning to teach at the art workshop + +### --feedback-- + +`Attend` suggests participating as a learner or member, not as a teacher. + +--- + +They might visit the workshop once + +### --feedback-- + +`Attend` implies regular or scheduled participation, not a one-time visit. + +--- + +They are not interested in art workshops + +### --feedback-- + +Saying they will `attend` indicates interest and intent to participate, not a lack of interest. + +--- + +They plan to regularly participate in the art workshop + +## --video-solution-- + +4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md new file mode 100644 index 00000000000..4dd651ea958 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md @@ -0,0 +1,39 @@ +--- +id: 657b24542024c8af092cd6c4 +title: Task 56 +challengeType: 22 +dashedName: task-56 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple, negative sentences are formed using `did not`, contracted to `didn't`, followed by the base form of the main verb. Listen to the dialogue and fill in the blanks with these words. + +# --fillInTheBlank-- + +## --sentence-- + +`So, you _ _ a regular college or anything like that?` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used to form a negative statement in the past tense. + +--- + +`attend` + +### --feedback-- + +The word means being present at an event or place. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md new file mode 100644 index 00000000000..15b9abab580 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md @@ -0,0 +1,48 @@ +--- +id: 657b24774d8cdab052ffe2a6 +title: Task 57 +challengeType: 22 +dashedName: task-57 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and fill in the blanks correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ study tech at a traditional university. I'm _, and I _ a lot of online courses.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used to form a negative statement in the past tense. + +--- + +`self-taught` + +### --feedback-- + +This word describes acquiring knowledge or skills independently. + +--- + +`took` + +### --feedback-- + +This word is the past tense form of a verb meaning to have completed an action. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md new file mode 100644 index 00000000000..b7c7a773588 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md @@ -0,0 +1,40 @@ +--- +id: 657b24a500800cb1c6945da9 +title: Task 58 +challengeType: 22 +dashedName: task-58 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`No, not at all. I _ at a different job, but I got really interested in programming and tech, so I _ learning in my free time.` + +## --blanks-- + +`was` + +### --feedback-- + +Use `to be` in the past tense. + +--- + +`started` + +### --feedback-- + +Use the verb `start`in the past tense. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md new file mode 100644 index 00000000000..14bccd55f81 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md @@ -0,0 +1,41 @@ +--- +id: 657b2be1b19500c63fc1a467 +title: Task 59 +challengeType: 22 +dashedName: task-59 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`That's impressive! _ you _ learning on your own?` + +## --blanks-- + +`Did` + +### --feedback-- + +Auxiliary verb for questions. This word should be capitalized. + +--- + +`enjoy` + +### --feedback-- + +A verb used to describe you are having fun. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md new file mode 100644 index 00000000000..f55f7908a4f --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md @@ -0,0 +1,38 @@ +--- +id: 657b2c040bb5f6c77fa5df80 +title: Task 60 +challengeType: 22 +dashedName: task-60 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You'll be filling in blanks with words you're already familiar with. + +# --fillInTheBlank-- + +## --sentence-- + +`Absolutely. It _ challenging, but I _ it.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of the verb `to be`, used for singular subjects. + +--- + +`loved` + +### --feedback-- + +This is the past tense form of a verb expressing a strong liking or enjoyment. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md new file mode 100644 index 00000000000..dc14016d020 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md @@ -0,0 +1,38 @@ +--- +id: 657b2d618b8851cc5baf9490 +title: Task 61 +challengeType: 22 +dashedName: task-61 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Listen to the audio and complete the sentence. + + +# --fillInTheBlank-- + +Fill in the blank with correct words. + + +## --sentence-- + +`Yes, I did. I built a few small web applications, just to practice. It _ a great way to apply what I _.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `to be`, used here for a singular subject. + +--- + +`learned` + +### --feedback-- + +This is the past tense form of `learn`, indicating the acquisition of knowledge or skills in the past. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md new file mode 100644 index 00000000000..b2433b84777 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md @@ -0,0 +1,54 @@ +--- +id: 657b2d9cb974dace59024964 +title: Task 62 +challengeType: 19 +dashedName: task-62 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `got` in this context is a versatile term and can have several meanings. In its simplest form, it's the past tense of `get`, which can mean to receive, arrive, become, or reach, depending on the context. In Tom's statement, `got` refers to the progress or level Alice reached through self-study. + +# --question-- + +## --text-- + +What does `got` imply in Tom's statement about Alice's progress? + +## --answers-- + +She received something while studying + +### --feedback-- + +While `got` can mean receiving, in this context it refers to the extent or level of progress. + +--- + +She achieved or reached a significant level in her studies + +--- + +She needs to get more resources for studying + +### --feedback-- + +`Got` here refers to past progress, not a current need for more resources. + +--- + +She didn't make any progress in her studies + +### --feedback-- + +`Got` in this sentence clearly indicates significant progress, not a lack of it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md new file mode 100644 index 00000000000..3ea0498bbbe --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md @@ -0,0 +1,15 @@ +--- +id: 657b2dd7745fdcd03e5160f4 +title: "Dialogue 5: Anna Talks About her Experience" +challengeType: 21 +dashedName: dialogue-5-anna-talks-about-her-experience +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md new file mode 100644 index 00000000000..8a3ff270f80 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -0,0 +1,54 @@ +--- +id: 657b2e0666d4a9d1b851f90e +title: Task 63 +challengeType: 19 +dashedName: task-63 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `tech recruiter` refers to a professional role focused on recruiting candidates for technology-related positions. This role involves understanding the tech industry, identifying qualified candidates, and matching them with suitable tech job openings. + +# --question-- + +## --text-- + +What is Tom asking about when he mentions `Tech recruiter` in his question? + +## --answers-- + +The technical skills needed to be a recruiter + +### --feedback-- + +`Tech recruiter` here refers to the job role, not the specific skills required for the job. + +--- + +The technology used by recruiters + +### --feedback-- + +While technology is involved, `Tech recruiter` refers to the profession itself, not the tools used. + +--- + +The person's career path in becoming a technology recruitment specialist + +--- + +Recruiting people to learn technology + +### --feedback-- + +`Tech recruiter` is about hiring for tech roles, not recruiting people to learn technology. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md new file mode 100644 index 00000000000..340203d5990 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md @@ -0,0 +1,49 @@ +--- +id: 657b2ec6c054efd71e503a27 +title: Task 64 +challengeType: 19 +dashedName: task-64 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `actually` is often used to express a fact or reality, sometimes contrasting with what was thought, believed, or said before. It adds emphasis to a statement to clarify a truth or correct a previous assumption or statement. + +# --question-- + +## --text-- + +What does `actually` imply in a sentence like `I actually prefer working remotely`? + +## --answers-- + +The truth is contrary to what might have been assumed or stated before + +--- + +I never work remotely + +### --feedback-- + +`Actually` in this context is used to express a real preference. + +--- + +I always work in an office setting + +### --feedback-- + +Using `actually` here is meant to reveal a preference for remote work, not office work. + +--- + +I don't have any work preferences + +### --feedback-- + +`Actually` suggests a specific preference, contradicting the idea of having none. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md new file mode 100644 index 00000000000..51c4c579915 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md @@ -0,0 +1,33 @@ +--- +id: 657b2eeb31e435d89ecce6f3 +title: Task 65 +challengeType: 22 +dashedName: task-65 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn about `actual` in this task. It's a describing word (adjective). It means what something is really like. For example, `the actual color` means the real color. You often add `-ly` to an adjective to form an adverb. This rule helps change many describing words into words that tell people how something is said or done. Here, you add `-ly` to `actual` and it's the adverb `actually`. + +# --fillInTheBlank-- + +## --sentence-- + +`The _ size of the room was quite small. She _ likes small cozy spaces.` + +## --blanks-- + +`actual` + +### --feedback-- + +This word describes the real size of the room. + +--- + +`actually` + +### --feedback-- + +This word is used to say she really likes small spaces. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md new file mode 100644 index 00000000000..101e280ee29 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md @@ -0,0 +1,54 @@ +--- +id: 657b2f0b3bcfe7d9f4151854 +title: Task 66 +challengeType: 19 +dashedName: task-66 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The terms `therapist` and `counselor` refer to professionals who provide guidance and support to people dealing with emotional, psychological, or mental health issues. Both play a vital role in helping individuals work through personal challenges. In Anna's statement, these terms describe the career paths she was considering. + +# --question-- + +## --text-- + +In Anna's statement, what does `therapist or counselor` refer to? + +## --answers-- + +Jobs in the technology industry + +### --feedback-- + +`Therapist or counselor` refers to mental health and emotional support roles, not technology-related jobs. + +--- + +Career paths in mental health and emotional support + +--- + +Educational courses she wanted to take + +### --feedback-- + +While these roles require education, the terms directly refer to the job roles, not the courses. + +--- + +Hobbies that she was interested in + +### --feedback-- + +`Therapist or counselor` are professional career paths, not hobbies. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md new file mode 100644 index 00000000000..40c9c66ce5e --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md @@ -0,0 +1,49 @@ +--- +id: 657b2f3bf7a2cbdb58d959d5 +title: Task 67 +challengeType: 19 +dashedName: task-67 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `last` is used to refer to the most recent past occurrence of a period or event. For example, `last year` means the year before this one, `last month` refers to the month before the current one, and `last week` points to the week before this week. Understanding time expressions like `last year`, `last month`, `last week`, or `last day` helps in talking about events that happened in the recent past. + +# --question-- + +## --text-- + +When someone mentions in a discussion about changes, `I switched careers last year.` What does `last year` indicate about the timing of their career change? + +## --answers-- + +They are planning to switch careers in the near future + +### --feedback-- + +This suggests a future action, but `last year` indicates the change already occurred in the past. + +--- + +They have been considering a career change for a long time + +### --feedback-- + +Though they might have considered it for a long time, `last year` specifically identifies when the change took place. + +--- + +The career change is happening currently + +### --feedback-- + +`Last year` refers to a completed action in the past, not something happening in the present. + +--- + +The career switch happened in the previous year + +## --video-solution-- + +4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md new file mode 100644 index 00000000000..796bb1e6c39 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md @@ -0,0 +1,49 @@ +--- +id: 657b2f6cb66826dcbac08094 +title: Task 68 +challengeType: 19 +dashedName: task-68 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Organizational psychology` is a field of psychology that studies how people interact within groups, particularly in workplace settings. It focuses on understanding workplace dynamics, employee behavior, and organizational structure to improve the work environment and increase productivity. + +# --question-- + +## --text-- + +What does `organizational psychology` typically involve? + +## --answers-- + +It deals with organizing office spaces + +### --feedback-- + +While organization is a part of the field, `organizational psychology` primarily focuses on people and behavior, not physical space. + +--- + +It's about the psychology of organizing events + +### --feedback-- + +`Organizational psychology` is not specifically about event planning but rather about behavior in workplace groups. + +--- + +It's the study of how people behave and interact in workplace groups + +--- + +It focuses on individual psychological treatment + +### --feedback-- + +`Organizational psychology` looks at group dynamics in workplaces, not individual therapy. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md new file mode 100644 index 00000000000..e185bc5a457 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md @@ -0,0 +1,38 @@ +--- +id: 657b2fa89ddc20de629ca21f +title: Task 69 +challengeType: 22 +dashedName: task-69 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will fill in the blanks with words you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ studied psychology in college. My plan was to become a _ or counselor.` + +## --blanks-- + +`actually` + +### --feedback-- + +This word is used to emphasize the accuracy or truth of a statement. + +--- + +`therapist` + +### --feedback-- + +This word refers to a professional role focused on mental health and emotional support. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md new file mode 100644 index 00000000000..ecc1ceb6792 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md @@ -0,0 +1,46 @@ +--- +id: 657b2fc9c0f96bdfddfce4d9 +title: Task 70 +challengeType: 22 +dashedName: task-70 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this exercise, you will explore the phrase `pique one's interest`. This phrase means to stimulate or arouse someone's curiosity or interest in something. It's often used when something catches your attention and makes you want to learn more about it. Alongside this phrase, you will fill in the blanks with familiar words that you've already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ a course in organizational _, and it _ my interest in the workplace and employee dynamics.` + +## --blanks-- + +`took` + +### --feedback-- + +This word refers to the action of participating in or completing a course. + +--- + +`psychology` + +### --feedback-- + +This word describes the study of the mind and behavior, particularly in a workplace setting in this context. + +--- + +`piqued` + +### --feedback-- + +This word means to arouse or stimulate interest or curiosity. You should correctly use its simple past tense. diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md new file mode 100644 index 00000000000..acc29551124 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md @@ -0,0 +1,49 @@ +--- +id: 657b2fea728c2be14a8a98c4 +title: Task 71 +challengeType: 19 +dashedName: task-71 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Employee dynamics` refers to the way employees interact and work together in a workplace. It's an example of using one noun (`employee`) to describe another noun (`dynamics`). This type of descriptive noun helps give more specific information about the subject. Other examples include `race car`, where `race` describes the type of car, and `garden hose`, where `garden` describes the type of hose. + +# --question-- + +## --text-- + +What does `employee dynamics` refer to in a workplace context? + +## --answers-- + +The dynamics of machines used by employees + +### --feedback-- + +`Employee dynamics` specifically refers to interactions and relationships among employees, not machinery. + +--- + +The interactions and relationships among employees + +--- + +The employment status of workers + +### --feedback-- + +`Employee dynamics` is about how employees work together, not their employment status. + +--- + +The dynamics of hiring new employees + +### --feedback-- + +`Employee dynamics` refers to existing employee interactions, not the hiring process. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md new file mode 100644 index 00000000000..bcbb031c907 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md @@ -0,0 +1,54 @@ +--- +id: 657b3026ff79fbe2dda6cb39 +title: Task 72 +challengeType: 19 +dashedName: task-72 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `That's a cool twist` is often used to express that something is interestingly unexpected or surprisingly different. The word `twist` here refers to a change or development in a situation or story that is unusual or unexpected. `Cool` in this context means it's positively received. + +# --question-- + +## --text-- + +What is Tom expressing when he says `That's a cool twist`? + +## --answers-- + +He finds the unexpected change or development interesting + +--- + +He thinks the situation is confusing + +### --feedback-- + +While a `twist` can be surprising, Tom's use of `cool` suggests he finds it interesting rather than confusing. + +--- + +He is unhappy with the new development + +### --feedback-- + +`Cool twist` usually indicates a positive reaction, not dissatisfaction. + +--- + +He expected the development all along + +### --feedback-- + +The term `twist` implies that the development was unexpected. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md new file mode 100644 index 00000000000..6a30241c1a2 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md @@ -0,0 +1,55 @@ +--- +id: 657b306fe94f29e4b4aa9105 +title: Task 73 +challengeType: 19 +dashedName: task-73 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `not right away` is used to indicate that something didn't happen immediately or at the earliest opportunity. It suggests that there was a delay or a period before the action or change took place. This phrase helps to set the timeline of events or actions. + +# --question-- + +## --text-- + +What does Anna mean when she says `not right away`? + +## --answers-- + +She immediately started working in HR at a tech company + +### --feedback-- + +`Not right away` indicates a delay or period before taking action, not immediate action. + +--- + +She started working in a different role before moving to HR at a tech company + +--- + +She has never worked in HR + +### --feedback-- + +The statement implies she did work in HR, just not immediately. + +--- + +She was always focused on training and development + +### --feedback-- + +`Not right away` suggests a progression or change over time, not a constant focus. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md new file mode 100644 index 00000000000..b21bdf5b3e6 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md @@ -0,0 +1,49 @@ +--- +id: 657b30ac03b523e6640deaf1 +title: Task 74 +challengeType: 22 +dashedName: task-74 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will practice filling in the blanks with words that you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`Tom: That's a cool _. _ you immediately start working as a tech recruiter after college? Anna: Not right away. I _ in a general HR role at a non-tech company first, focusing on training and development.` + + +## --blanks-- + +`twist` + +### --feedback-- + +It refers to an interesting or unexpected change in a situation. + +--- + +`Did` + +### --feedback-- + +The auxiliary verb used to form a question in the past simple tense. The first letter should be capitalized. + +--- + +`worked` + +### --feedback-- + +Past tense form of `work`, indicating an action completed in the past. + diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md new file mode 100644 index 00000000000..f843ccf34aa --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md @@ -0,0 +1,54 @@ +--- +id: 657b30e1b9f035e7e656fd01 +title: Task 75 +challengeType: 19 +dashedName: task-75 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `employee` is someone who works for a company or a person. When you talk about `employees' well-being`, you are talking about the health and happiness of all the people who work there. The `'s` after `employees` means that the well-being belongs to the employees. It's like `the cat's toy` (one cat) and `the cats' toy` (more than one cat). + +# --question-- + +## --text-- + +What does Anna mean by saying `employees' well-being.` + +## --answers-- + +It's about the health of the company + +### --feedback-- + +`Employees'` means the people who work, not the company. + +--- + +One worker's health and happiness + +### --feedback-- + +`Employees'` with an `'s` shows it's about all workers, not just one. + +--- + +Where the employees work + +### --feedback-- + +`Well-being` is about health and happiness, not a place. + +--- + +The health and happiness of all the workers + +## --video-solution-- + +4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md new file mode 100644 index 00000000000..8e17e595d98 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md @@ -0,0 +1,54 @@ +--- +id: 657b315533e4edeba65111b8 +title: Task 76 +challengeType: 19 +dashedName: task-76 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +A `psychologist` is a professional who studies the human mind and behavior. They often help people understand and manage their emotions, behaviors, and mental processes. In Anna's statement, she refers to becoming a psychologist, indicating her professional choice related to studying and working with psychology. + +# --question-- + +## --text-- + +What does `psychologist` mean in Anna's statement? + +## --answers-- + +It means someone who studies physics + +### --feedback-- + +`Psychologist` refers to a person who studies the mind and behavior, not physics. + +--- + +It's a type of medical doctor + +### --feedback-- + +While related to health, a psychologist is different from a medical doctor and focuses on mental processes. + +--- + +A professional who studies and works with the human mind and behavior + +--- + +A teacher at a school + +### --feedback-- + +A psychologist may teach, but their primary role is studying and working with the mind and behavior, not general teaching. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md new file mode 100644 index 00000000000..40eee7185d9 --- /dev/null +++ b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md @@ -0,0 +1,15 @@ +--- +id: 657b46c9be150f577f5a1086 +title: "Dialogue 2: Another Job Interview" +challengeType: 21 +dashedName: dialogue-2-another-job-interview +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md deleted file mode 100644 index 0a0f3472141..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0feadb1dd77f6cda623f -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md deleted file mode 100644 index e1563f9b06b..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0f39ee87517d584d81f9 -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md deleted file mode 100644 index 7aa1e30008d..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5a46ffb500e3f2ce47b -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -*** - -Giving a job description. - -*** - -Making a statement based on her assumption. - -*** - -Expressing a possibility. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md deleted file mode 100644 index 2ee50fe5647..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5e46ffb500e3f2ce47e -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md b/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md deleted file mode 100644 index adc4b41f091..00000000000 --- a/curriculum/challenges/espanol/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd6071d697d0aab7833b6 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md deleted file mode 100644 index 22181d0f4e1..00000000000 --- a/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: bd7158d8c242eddfaeb5bd13 -title: Erstelle eine persönliche Portfolio-Webseite -challengeType: 14 -forumTopicId: 301143 -dashedName: build-a-personal-portfolio-webpage ---- - -# --description-- - -**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://personal-portfolio.freecodecamp.rocks aufweist - -**User Stories:** - -1. Dein Portfolio sollte einen Begrüßungsbereich mit einer `id` von `welcome-section` besitzen -1. Der Begrüßungsbereich sollte ein `h1` Element besitzen, das einen Text enthält -1. Dein Portfolio sollte einen Projektabschnitt mit einer `id` von `projects` besitzen -1. Der Projektabschnitt sollte mindestens ein Element mit einer `class` von `project-tile` besitzen, um das Projekt zu halten -1. Der Projektabschnitt sollte mindestens einen Link zu einem Projekt enthalten -1. Dein Portfolio sollte eine Navigationsleiste mit einer Id der `navbar` besitzen -1. Die Navigationsleiste sollte mindestens einen klickbaren Link beinhalten, der zu verschiedenen Sektionen auf der Seite navigiert -1. Dein Portfolio sollte einen Link mit der Id von `profile-link` besitzen, der dein GitHub oder das freeCodeCamp Profil in einem neuen Tab öffnet -1. Dein Portfolio sollte mindestens eine Media Query (Medienabfrage) enthalten -1. Die Höhe des Begrüßungsabschnitts sollte der Höhe des Viewports entsprechen -1. Die Navigationsleiste sollte immer oben am Viewport liegen - -Erfülle die folgenden User Stories und bestehe alle Tests, um dieses Projekt abzuschließen. Gib dem Ganzen deinen persönlichen Stil. Viel Spaß beim Programmieren! - -**Hinweis:** Achte darauf, `` in deinen HTML-Code einzufügen, um dein Stylesheet zu verknüpfen und dein CSS-Code anwenden zu können - -# --hints-- - -Dein Portfolio sollte einen Begrüßungsbereich mit einer `id` von `welcome-section` besitzen. - -```js -const el = document.getElementById('welcome-section') -assert(!!el); -``` - -Dein `#welcome-section` Element sollte ein `h1` Element beinhalten. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1').length, - 0, - 'Welcome section should contain an h1 element ' -); -``` - -Du solltest keine leeren `h1` Elemente innerhalb des `#welcome-section` Elements haben. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, - 0, - 'h1 element in welcome section should contain your name or camper ' + - 'name ' -); -``` - -Du solltest einen Projektabschnitt mit einer `id` von `projects` haben. - -```js -const el = document.getElementById('projects') -assert(!!el); -``` - -Dein Portfolio sollte mindestens ein Element mit einer Klasse von `project-tile` haben. - -```js -assert.isAbove( - document.querySelectorAll('#projects .project-tile').length, - 0 -); -``` - -Dein `#projects` Element sollte mindestens ein `a` Element beinhalten. - -```js -assert.isAbove(document.querySelectorAll('#projects a').length, 0); -``` - -Dein Portfolio sollte eine Navigationsleiste mit der `id` von `navbar` besitzen. - -```js -const el = document.getElementById('navbar'); -assert(!!el); -``` - -Dein `#navbar` Element sollte mindestens ein `a` Element, dessen `href` Attribut mit `#` beginnt, besitzen. - -```js -const links = [...document.querySelectorAll('#navbar a')].filter( - (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#' -); - -assert.isAbove( - links.length, - 0, - 'Navbar should contain an anchor link ' -); -``` - -Dein Portfolio sollte ein `a` Element mit einer `id` von `profile-link` besitzen. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.tagName === 'A') -``` - -Dein `#profile-link` Element sollte ein `target` Attribut von `_blank` besitzen. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.target === '_blank') -``` - -Dein Portfolio sollte mindestens eine Medienabfrage (Media Query) benutzen. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -Dein `#navbar` Element sollte immer oben im Viewport liegen. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const navbar = document.getElementById('navbar'); - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - "Navbar's parent should be body and it should be at the top of " + - 'the viewport ' - ); - - window.scroll(0, 500); - - await timeout(1); - - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - 'Navbar should be at the top of the viewport even after ' + - 'scrolling ' - ); - window.scroll(0, 0); -})(); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Personal Portfolio - - - - - -
                                                              -
                                                              -
                                                              -

                                                              It's me!

                                                              - -

                                                              Naomi Carrigan

                                                              -

                                                              Welcome to my portfolio page!

                                                              -
                                                              -
                                                              -

                                                              Projects

                                                              -

                                                              Here's what I've worked on!

                                                              -

                                                              - - - - -

                                                              -
                                                              -

                                                              Contact me!

                                                              -

                                                              Use the links below to get in touch.

                                                              -

                                                              FreeCodeCamp.org | GitHub | Facebook | LinkedIn -

                                                              - - - -``` - -```css -nav{ - position: fixed; - width: 100%; - text-align: right; - font-size: 24pt; - top: 0%; - right: 5px; - background-color: #000000; - color: #ffffff; -} -@media (max-width: 500px){ - nav{ - display: none; - } -} -a{ - color: #ffffff; -} -main{ - text-align: center; - background-color: black; - font-family:Pacifico -} -h1{ - font-size: 48pt; -} -h2{ - font-size: 24pt; -} -p{ - font-size: 12pt; -} -#welcome-section{ - background-color:#251a4a; - color: #FFFFFF; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#projects{ - background-color: #060a9c; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#contact{ - background-color: #03300b; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -``` diff --git a/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md deleted file mode 100644 index fced5e38121..00000000000 --- a/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: Erstelle eine Landing Page für ein Produkt -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://product-landing-page.freecodecamp.rocks aufweist - -**User Stories:** - -1. Deine Produkt-Landingpage sollte ein `header` Element mit einem entsprechenden `id="header"` haben -1. Du kannst ein Bild innerhalb des `header` Elements mit einem entsprechenden `id="header-img"` (Ein Logo würde hier ein gutes Bild abgeben) sehen -1. Innerhalb des `#header` Elements, siehst du ein `nav` Element mit dazugehöriger `id="nav-bar"` -1. Du kannst mindestens drei anklickbare Elemente innerhalb des `nav` Elements sehen, jedes mit der Klasse `nav-link` -1. Wenn du den `.nav-link` Button im `nav` Element drückst, wirst du zu dem entsprechenden Bereich auf der Landingpage geführt -1. Du kannst ein eingebettetes Produktvideo mit `id="video"` ansehen -1. Deine Landingpage sollte ein `form` Element mit einer einer entsprechenden `id="form"` haben -1. Innerhalb des Formulars gibt es ein `input` Feld mit `id="email"`, in das du deine E-Mail Adresse eingeben kannst -1. Das `#email` Eingabefeld sollte einen Platzhaltertext haben, um die Benutzer über das Feld zu informieren -1. Das `#email` Eingabefeld benutzt HTML-5 Validierung, um zu bestätigen, dass der eingegebene Text auch wirklich eine E-Mail Adresse ist -1. Innerhalb des Formulars gibt es auch ein Bestätigungsbutton -`input` mit einer entsprechenden `id="submit"` -1. Wenn du das `#submit` Element klickst, wird die E-Mail zu einer statischen Seite weitergeleitet (Verwende diese Schein-URL: `https://www.freecodecamp.com/email-submit`) -1. Die Navigationsleiste sollte immer oben am Viewport liegen -1. Deine Produkt-Landingpage sollte mindestens eine Medienabfrage (Media Query) haben -1. Deine Produkt-Landingpage sollte die CSS-Flexbox mindestens einmal verwenden - -Erfülle die folgenden User Stories und bestehe alle Tests, um dieses Projekt abzuschließen. Gib dem Ganzen deinen persönlichen Stil. Viel Spaß beim Programmieren! - -**Hinweis:** Achte darauf, `` in deinen HTML-Code einzufügen, um dein Stylesheet zu verknüpfen und dein CSS-Code anwenden zu können - -# --hints-- - -Du solltest ein `header`-Element mit einer `id` von `header` haben. - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -Du solltest ein `img`-Element mit einer `id` von `header-img` haben. - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -Dein `#header-img` sollte ein Nachfahre (descendant) des `#header` sein. - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -Dein `#header-img` sollte ein `src`-Attribut haben. - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -Der `src` Wert deines `#header-img` sollte eine korrekte URL beinhalten (beginnt mit `http`). - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -Du solltest ein `nav`-Element mit einer `id` von `nav-bar` haben. - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -Deine `#nav-bar` sollte ein Nachfahre des `#header` sein. - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -Du solltest mindestens 3 `.nav-link`-Elemente innerhalb des `#nav-bar` haben. - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -Jedes `.nav-link`-Element sollte ein `href` Attribut haben. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -Jedes `.nav-link`-Element sollte mit einem entsprechenden Element auf der Landingpage verknüpft sein (hat ein `href` mit dem Wert der Id eines anderen Elements, wie bspw. `#footer`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -Du solltest ein `video`- oder `iframe`-Element mit einer `id` von `video` haben. - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -Dein `#video` sollte ein `src`-Attribut haben. - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -Du solltest ein `form`-Element mit einer `id` von `form` haben. - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -Du solltest ein `input`-Element mit einer `id` von `email` haben. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Deine `#email` sollte ein Nachfahre der `#form` sein. - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -Deine `#email` sollte ein `placeholder`-Attribut mit Platzhaltertext haben. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Deine `#email` sollte HTML5 Validierung verwenden, indem du `type` auf `email` setzt. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -Du solltest ein `input`-Element mit einer `id` von `submit` haben. - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -Dein `#submit` sollte ein Nachfahre der `#form` sein. - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -Dein `#submit` sollte einen `type` von `submit` haben. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Deine `#form` sollte ein `action`-Attribut von `https://www.freecodecamp.com/email-submit` haben. - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -Deine `#email` sollte ein `name`-Attribut von `email` haben. - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -Dein `#nav-bar` sollte immer oben im Viewport liegen. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const header = document.getElementById('header'); - const headerChildren = header.children; - const navbarCandidates = [header, ...headerChildren]; - - // Return smallest top position of all navbar candidates - const getNavbarPosition = (candidates = []) => { - return candidates.reduce( - (min, candidate) => - Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)), - Infinity - ); - }; - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the viewport ' - ); - - window.scroll(0, 500); - await timeout(1); - - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the ' + - 'viewport even after scrolling ' - ); - - window.scroll(0, 0); -})(); -``` - -Deine Produkt-Landingpage sollte mindestens ein Media Query verwenden. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -Deine Produkt-Landingpage sollte mindestens einmal CSS-Flexbox verwenden. - -```js -const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display) -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media') -const usesFlex = cssRules.find(rule => hasFlex(rule)) -const usesFlexMedia = mediaRules.find(mediaRule => { - return [...mediaRule.cssRules].find(rule => hasFlex(rule)) -}) -assert(usesFlex || usesFlexMedia) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Product Landing Page - - - -
                                                              -

                                                              - Pokemon Daycare Service -

                                                              -
                                                              -

                                                              What we offer

                                                              -
                                                              -
                                                              - -
                                                              -
                                                              Guaranteed friendly and loving staff!
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - Comfortable environment for Pokemon to explore and play! -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - Multiple membership plans to fit your lifestyle! -
                                                              -
                                                              -
                                                              -
                                                              -

                                                              Check us out!

                                                              - A sneak peek into our facility: -
                                                              - -
                                                              -
                                                              -

                                                              Membership Plans

                                                              -
                                                              -
                                                              - Basic Membership
                                                              -
                                                                -
                                                              • One Pokemon
                                                                • -
                                                              • Food and berries provided
                                                                • -
                                                              - $9.99/month -
                                                              -
                                                              - Silver Membership
                                                              -
                                                                -
                                                              • Up to Three Pokemon
                                                                • -
                                                              • Food and berries provided
                                                                • -
                                                              • Grooming and accessories included
                                                                • -
                                                              - $19.99/month -
                                                              -
                                                              - Gold Membership
                                                              -
                                                                -
                                                              • Up to six Pokemon!
                                                                • -
                                                              • Food and berries provided
                                                                • -
                                                              • Grooming and accessories included
                                                                • -
                                                              • Personal training for each Pokemon
                                                                • -
                                                              • Breeding and egg hatching
                                                                • -
                                                              - $29.99/month -
                                                              -
                                                              -
                                                              -
                                                              -

                                                              Sign up for our newsletter!

                                                              - - -
                                                              - -
                                                              - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md deleted file mode 100644 index cd748ca95c8..00000000000 --- a/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: Erstelle ein Umfrageformular -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://survey-form.freecodecamp.rocks aufweist - -**User Stories:** - -1. Du solltest einen Seitentitel in einem `h1`-Element mit einer `id` von `title` haben -1. Du solltest eine kurze Erklärung in einem `p`-Element mit einer `id` von `description` haben -1. Du solltest ein `form`-Element mit einer `id` von `survey-form` haben -1. Innerhalb des Formular-Elements **musst** du deinen Namen in ein `input`-Feld mit einer `id` von `name` und einem `type` von `text` eingeben -1. Innerhalb des Formular-Elements **musst** du deine E-Mail in ein `input`-Feld mit einer `id` von `email` eingeben -1. Wenn du eine falsch formatierte E-Mail angibst, wird dir ein HTML5-Validierungsfehler ausgegeben -1. Innerhalb des Formulars kannst du eine Zahl in das `input`-Feld, das die `id` von `number` hat, eingeben -1. Das Nummernfeld sollte ausschließlich Nummern als Eingabewert akzeptieren – entweder, indem es dich davon abhält, andere Werte einzugeben, oder durch Ausgabe eines HTML5-Überprüfungsfehler (abhängig vom Browser). -1. Wenn du eine Nummer eingibst, die außerhalb des Bereichs der Zahleneingabe liegt, wird dir ein HTML5-Validierungsfehler ausgegeben. Der genannte Bereich wird durch die `min`- und `max`-Attribute festgelegt -1. Für die Namen-, E-Mail- und Nummern-Eingabefelder findest du zugehörige `label`-Elemente im Formular, welches den Nutzen jedes Felds der folgenden IDs beschreibt: `id="name-label"`, `id="email-label"`, und `id="number-label"` -1. Für die Namen-, E-Mail- und Nummern-Eingabefelder findest du einen Platzhalter-Text, der eine Beschreibung oder Anweisung für jedes Feld enthält -1. Innerhalb des Formular-Elements solltest du ein `select`-Dropdown-Element auffinden, welches sowohl über eine `id` von `dropdown` als auch über mindestens zwei Optionen zum Auswählen verfügt -1. Innerhalb des Fomular-Elements kannst du aus einer Gruppe von mindestens zwei Radio-Buttons, die mit dem `name`-Attribut unterteilt wurden, auswählen -1. Innerhalb des Formular-Elements kannst du mehrere Felder aus einer Reihe von Checkboxen auswählen, die alle über ein `value`-Attribut verfügen müssen -1. Innerhalb des Formular-Elements findest du eine `textarea` mit zusätzlichen Kommentaren -1. Innerhalb des Formular-Elementes wird dir ein Button mit der `id` von `submit` angezeigt, um alle Eingaben abzuschicken - -Erfülle die folgenden User Stories und bestehe alle Tests, um dieses Projekt abzuschließen. Gib dem Ganzen deinen persönlichen Stil. Viel Spaß beim Programmieren! - -**Hinweis:** Achte darauf, `` in deinen HTML-Code einzufügen, um dein Stylesheet zu verknüpfen und deinen CSS-Code anwenden zu können - -# --hints-- - -Du solltest ein `h1`-Element mit einer `id` von `title` haben. - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -Dein `#title` sollte nicht leer sein. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -Du solltest ein `p`-Element mit einer `id` von `description` haben. - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -Deine `#description` sollte nicht leer sein. - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -Du solltest ein `form`-Element mit einer `id` von `survey-form` haben. - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -Du solltest ein `input`-Element mit einer `id` von `name` haben. - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -Dein `#name` sollte einen `type` von `text` haben. - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -Dein `#name` sollte eine Eingabe benötigen. - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -Dein `#name` sollte ein Nachfahre von `#survey-form` sein. - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -Du solltest ein `input`-Element mit einer `id` von `email` haben. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Deine `#email` sollte einen `type` von `email` haben. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -Deine `#email` sollte eine Eingabe benötigen. - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -Deine `#email` sollte ein Nachfahre von `#survey-form` sein. - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -Du solltest ein `input`-Element mit einer `id` von `number` haben. - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -Deine `#number` sollte ein Nachfahre von `#survey-form` sein. - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -Deine `#number` sollte einen `type` von `number` haben. - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -Deine `#number` sollte ein `min`-Attribut mit numerischen Wert haben. - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -Deine `#number` sollte ein `max`-Attribut mit numerischen Wert haben. - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -Du solltest ein `label`-Element mit einer `id` von `name-label` haben. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Du solltest ein `label`-Element mit einer `id` von `email-label` haben. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Du solltest ein `label`-Element mit einer `id` von `number-label` haben. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Dein `#name-label` sollte Text enthalten, der die Eingabe beschreibt. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -Dein `#email-label` sollte Text enthalten, der die Eingabe beschreibt. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -Dein `#number-label` sollte Text enthalten, der die Eingabe beschreibt. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -Dein `#name-label` sollte ein Nachfahre von `#survey-form` sein. - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -Dein `#email-label` sollte ein Nachfahre von `#survey-form` sein. - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -Dein `#number-label` sollte ein Nachfahre von `#survey-form` sein. - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -Dein `#name` sollte ein `placeholder`-Attribut und -Wert haben. - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Deine `#email` sollte ein `placeholder`-Attribut und -Wert haben. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Deine `#number` sollte ein `placeholder`-Attribut und -Wert haben. - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Du solltest ein `select`-Feld mit einer `id` von `dropdown` haben. - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -Dein `#dropdown` sollte mindestens zwei auswählbare (nicht deaktivierte) `option`-Elemente haben. - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -Dein `#dropdown` sollte ein Nachfahre von `#survey-form` sein. - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -Du solltest mindestens zwei `input`-Elemente mit einem `type` von `radio` (Radio-Buttons) haben. - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -Du solltest mindestens zwei Radio-Buttons haben, die Nachfahren der `#survey-form` sind. - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -All deine Radio-Buttons sollten ein `value`-Attribut und -Wert haben. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -All deine Radio-Buttons sollten ein `name`-Attribut und -Wert haben. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -Jede Gruppe der Radio-Buttons sollte mindestens 2 Radio-Buttons enthalten. - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -Du solltest mindestens zwei `input`-Elemente mit einem `type` von `checkbox` (Checkboxen) haben, die Nachfahren von `#survey-form` sind. - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -All deine Checkboxen innerhalb von `#survey-form` sollten ein `value`-Attribut und -Wert haben. - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -Du solltest mindestens ein `textarea`-Element haben, das ein Nachfahre von `#survey-form` ist. - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -Du solltest ein `input`- oder `button`-Element mit einer `id` von `submit` haben. - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -Dein `#submit` sollte ein `type` von `submit` haben. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Dein `#submit` sollte ein Nachfahre von `#survey-form` sein. - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Survey Form - - -

                                                              Survey Form

                                                              -

                                                              The card below was built as a sample survey form for freeCodeCamp.

                                                              -
                                                              -

                                                              Join the Togepi Fan Club!

                                                              -

                                                              - Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -

                                                              -
                                                              - - - - -

                                                              Who is your favourite Pokemon?

                                                              - - - -

                                                              Which communications do you want to receive?

                                                              - - - -

                                                              Any other information you would like to share?

                                                              - -

                                                              - Please note: This form is a proof of concept. Submitting the form - will not actually transmit your data. -

                                                              - -
                                                              -
                                                              - - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md deleted file mode 100644 index cc3249184a9..00000000000 --- a/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: Erstelle eine Seite für technische Dokumentationen -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://technical-documentation-page.freecodecamp.rocks aufweist - -**User Stories:** - -1. Du kannst ein `main`-Element mit einer entsprechenden `id="main-doc"` sehen, das den Hauptinhalt der Seite enthält (technische Dokumentation) -1. Innerhalb des `#main-doc`-Elements kannst du mehrere `section`-Elemente sehen, jedes mit einer `main-section`-Klasse. Es sollten mindestens 5 sein -1. Das erste Element innerhalb jeder `.main-section` sollte ein `header`-Element sein, das einen Text enthält, der das Thema dieses Abschnitts beschreibt. -1. Jedes `section`-Element der Klasse `main-section` sollte auch eine `id` haben, die mit dem Text von jedem `header` übereinstimmt. Alle Leerzeichen sollten durch Unterstriche ersetzt werden (z. B. sollte die Sektion, welche die Überschrift "JavaScript and Java" enthält, eine entsprechende `id="JavaScript_and_Java"` haben) -1. Die `.main-section`-Elemente sollten mindestens zehn `p`-Elemente enthalten (insgesamt) -1. Die `.main-section`-Elemente sollten mindestens fünf `code`-Elemente enthalten (insgesamt) -1. Die `.main-section`-Elemente sollten mindestens fünf `li`-Elemente enthalten (nicht jedes) -1. Du kannst ein `nav`-Element mit entsprechender `id="navbar"` sehen -1. Das Navbar-Element sollte ein `header`-Element enthalten, das einen Text enthält, der das Thema der technischen Dokumentation beschreibt -1. Außerdem sollte die Navigationsleiste auch Link-Elemente (`a`) der Klasse `nav-link` enthalten. Es sollte eines für jedes Element mit der Klasse `main-section` geben -1. Das `header`-Element in der `#navbar` muss vor jedem Link-Element (`a`) in der Navigationsleiste stehen -1. Jedes Element der Klasse `nav-link` sollte einen Text enthalten, der zu dem entsprechenden `header`-Text jeder `section` passt (wenn du z.B. einen Header bzw. eine Sektion mit „Hello world" hast, sollte deine Navigationsleiste ein Element mit eben jenem Text enthalten) -1. Wenn du auf ein Element der Navigationsleiste klickst, sollte die Seite zu der entsprechenden Sektion des `#main-doc`-Elements navigieren (klickst du z.B. auf ein `.nav-link`-Element, das den Text „Hello World" enthält, sollte die Seite zu einem `section`-Element mit dieser Id navigieren und nun den entsprechenden Header enthalten) -1. Auf Geräten mit regulärer Größe (Laptops, Desktop-PCs) sollte das Element mit der `id="navbar"` auf der linken Seite des Bildschirms angezeigt werden und für den Nutzer immer sichtbar sein -1. Deine technische Dokumentation sollte mindestens eine Media Query verwenden - -Erfülle die folgenden User Stories und bestehe alle Tests, um dieses Projekt abzuschließen. Gib dem Ganzen deinen persönlichen Stil. Viel Spaß beim Programmieren! - -**Hinweis:** Achte darauf, `` in deinen HTML-Code einzufügen, um dein Stylesheet zu verknüpfen und dein CSS-Code anwenden zu können - -# --hints-- - -Du solltest ein `main`-Element mit einer `id` von `main-doc` haben. - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -Du solltest mindestens fünf `section`-Elemente der Klasse `main-section` haben. - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -All deine `.main-section`-Elemente sollten `section`-Elemente sein. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -Du solltest mindestens fünf `.main-section`-Elemente haben, die Nachfahren von `#main-doc` sind. - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -Das erste untergeordnete Element jeder `.main-section` sollte ein `header`-Element sein. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -Keines deiner `header`-Elemente sollte leer sein. - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -All deine `.main-section`-Elemente sollten eine `id` haben. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -Jede `.main-section` sollte eine `id` haben, die dem Text seines ersten untergeordneten Elementes entspricht, wobei bei den Ids Leerzeichen mit Unterstrichen (`_`) ersetzt werden. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -Du solltest (insgesamt) mindestens 10 `p`-Elemente innerhalb deiner `.main-section`-Elemente haben. - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -Du solltest mindestens fünf `code`-Elemente haben, die Nachfahren von `.main-section`-Elementen sind. - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -Du solltest mindestens fünf `li`-Elemente haben, die Nachfahren von `.main-section`-Elementen sind. - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -Du solltest ein `nav`-Element mit einer `id` von `navbar` haben. - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -Deine `#navbar` sollte genau ein `header`-Element enthalten. - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -Du solltest mindestens ein `a`-Element der Klasse `nav-link` haben. - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -All deine `.nav-link`-Elemente sollten Ankerelemente (`a`) sein. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -All deine `.nav-link`-Elemente sollten in der `#navbar` sein. - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -Du solltest die gleiche Anzahl an `.nav-link`- und `.main-section`-Elementen haben. - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -Das `header`-Element in der `#navbar` sollte auch vor jedem Linkelement (`a`) in der `#navbar` stehen. - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -Jedes `.nav-link`-Element sollte einen Text beinhalten, der dem `header` Text der jeweiligen `section` entspricht (z.B. wenn du ein "Hello-World"-Sektion/Header hast, sollte dein `#navbar` ein `.nav-link` mit dem Text "Hello World" haben). - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -Jede `.nav-link` sollte über ein `href`-Attribut verfügen, das auf die zugehörige `.main-section` verweist (klickst du bspw. auf ein `.nav-link`-Element, das den Text „Hello world“ enthält, navigiert die Seite zu dem `section`-Element mit eben jener Id). - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -Deine `#navbar` sollte sich immer am linken Rand des Fensters befinden. - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -Dein Projekt für die Technische Dokumentation sollte mindestens eine Media Query verwenden. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Technical Documentation Page - - - -
                                                              -
                                                              -
                                                              Introduction
                                                              -

                                                              - Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -

                                                              -
                                                              -
                                                              -
                                                              Definitions
                                                              -

                                                              - To start with, let's define some of the more common terms used in - algebra: -

                                                              -
                                                                -
                                                              • - Variable: A variable is an unknown value, usually represented - by a letter. -
                                                                • -
                                                              • - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. -
                                                                • -
                                                              • - Equation: An equation is a mathematical argument in which two - expressions result in the same value. -
                                                                • -
                                                              -
                                                              -
                                                              -
                                                              Examples
                                                              -

                                                              - Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.

                                                              - x + 5 = 12

                                                              - In this above example, we have: -

                                                              -
                                                                -
                                                              • Variable: The variable in the example is "x".
                                                                • -
                                                              • - Expression: There are two expressions in this example. They - are "x+5" and "12". -
                                                                • -
                                                              • - Equation: The entire example, "x+5=12", is an equation. -
                                                                • -
                                                              -
                                                              -
                                                              -
                                                              Solving Equations
                                                              -

                                                              - The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".

                                                              - x + 5 = 12

                                                              - In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
                                                              For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.

                                                              - x + 5 - 5 = 12 - 5

                                                              - The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:

                                                              - x = 7

                                                              - We now have our solution to this equation! -

                                                              -
                                                              -
                                                              -
                                                              Solving Equations II
                                                              -

                                                              - Let us look at a slightly more challenging equation.

                                                              - 3x + 4 = 13

                                                              - Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:

                                                              - 3x = 9

                                                              - "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.

                                                              - x = 3

                                                              - And now we have our solution! -

                                                              -
                                                              -
                                                              -
                                                              Solving Equations III
                                                              -

                                                              - Now we are getting in to more complex operations. Here is another - equation for us to look at:

                                                              - x^2 - 8 = 8

                                                              - Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.

                                                              - x^2 = 16

                                                              - But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
                                                              - An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -

                                                              - x = √9

                                                              - Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:

                                                              - x = 3 -

                                                              -
                                                              -
                                                              -
                                                              System of Equations
                                                              -

                                                              - As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:

                                                              - y = 3x

                                                              - An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
                                                              - Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:

                                                              - y = 3x | y - 6 = x - A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:

                                                              - 3x - 6 = x

                                                              - Now we can solve for "x"! We start by adding 6 to each side.

                                                              - 3x = x + 6

                                                              - We still need to get "x" by itself, so we subtract "x" from both sides - and get:

                                                              - 2x = 6

                                                              - If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!

                                                              - x = 3

                                                              - However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:

                                                              - y = 3x

                                                              - We have a value for "x" now, so let's see what happens if we put that - value in.

                                                              - y = 3*3

                                                              - We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:

                                                              - x = 3 and y = 9

                                                              -

                                                              -
                                                              -
                                                              -
                                                              Try it Yourself!
                                                              -

                                                              Coming Soon!

                                                              -

                                                              Keep an eye out for new additions!

                                                              -
                                                              -
                                                              -
                                                              More Information
                                                              -

                                                              Check out the following links for more information!

                                                              - -
                                                              -
                                                              - - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md deleted file mode 100644 index 4c9862087fc..00000000000 --- a/curriculum/challenges/german/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: Erstelle eine Gedenkseite -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://tribute-page.freecodecamp.rocks aufweist - -**User Stories:** - -1. Deine Gedenkseite sollte über ein `main`-Element mit einer zugehörigen `id` von `main` verfügen, die alle anderen Elemente enthält -1. Du solltest ein Element mit einer `id` von `title` sehen, das einen String (d.h. Text) enthält, der das Thema der Gedenkseite beschreibt (z.B. „Dr. Norman Borlaug“) -1. Du solltest entweder ein `figure`- oder ein `div`-Element mit einer `id` von `img-div` sehen -1. Du solltest innerhalb des `#img-div`-Elements ein `img`-Element mit zugehöriger `id="image"` sehen -1. Du solltest innerhalb des `#img-div`-Elements ein Element mit zugehöriger `id="img-caption"` sehen, der einen Text enthält, der das in `#img-div` angezeigte Bild beschreibt. -1. Du solltest ein Element mit zugehöriger `id="tribute-info"` sehen, welches das Thema der Gedenkseite beschreibenden Textinhalt enthält -1. Du solltest ein `a`-Element mit zugehöriger `id="tribute-link"` sehen, welches auf eine externe Seite verweist, die zusätzliche Informationen über das Thema der Gedenkseite enthält. TIPP: Du musst deinem Element ein Attribut von `target` zuweisen und es auf `_blank` setzen, damit der Link in einem neuen Tab geöffnet werden kann -1. Dein `#image` sollte die `max-width`- und `height`-Eigenschaften verwenden, um die Größenänderung responsiv zu gestalten, d. h. relativ zur Breite des Elternelements, ohne dessen Originalgröße zu überschreiten -1. Dein `img`-Element sollte innerhalb des Elternelements zentriert werden - -Erfülle die folgenden User Stories und bestehe alle Tests, um dieses Projekt abzuschließen. Gib dem Ganzen deinen persönlichen Stil. Viel Spaß beim Programmieren! - -**Hinweis:** Achte darauf, `` in deinen HTML-Code einzufügen, um dein Stylesheet zu verknüpfen und deinen CSS-Code anwenden zu können - -# --hints-- - -Du solltest ein `main`-Element mit einer `id` von `main` haben. - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -Dein `#img-div`, `#image`, `#img-caption`, `#tribute-info` und `#tribute-link` sollten alle Nachfahren (descendants) von `#main` sein. - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -Du solltest ein Element mit einer `id` von `title` haben. - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -Dein `#title` sollte nicht leer sein. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -Du solltest ein `figure`- oder `div`-Element mit einer `id` von `img-div` haben. - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -Du solltest ein `img`-Element mit einer `id` von `image` haben. - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -Dein `#image` sollte ein Nachfahre (descendant) von `#img-div` sein. - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -Du solltest ein `figcaption`- oder `div`-Element mit einer `id` von `img-caption` haben. - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -Dein `#img-caption` sollte ein Nachfahre (descendant) von `#img-div` sein. - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -Dein `#img-caption` sollte nicht leer sein. - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -Du solltest ein Element mit einer `id` von `tribute-info` haben. - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -Dein `#tribute-info` sollte nicht leer sein. - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -Du solltest ein `a`-Element mit einer `id` von `tribute-link` haben. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -Dein `#tribute-link` sollte ein `href`-Attribut und einen -Wert haben. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -Dein `#tribute-link` sollte ein, auf `_blank` gesetztes, `target`-Attribut haben. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -Dein `img`-Element sollte ein `display` von `block` enthalten. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -Dein `#image` sollte eine `max-width` von `100%` haben. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -Dein `#image` sollte eine `height` von `auto` haben. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -Dein `#image` sollte innerhalb der Elternklasse zentriert sein. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - - Tribute Page - - -

                                                              Tribute Page

                                                              -

                                                              The below card was designed as a tribute page for freeCodeCamp.

                                                              -
                                                              -
                                                              - An image of Togepi -
                                                              Togepi, happy as always.
                                                              -
                                                              -

                                                              Togepi

                                                              -
                                                              -
                                                              -

                                                              - Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -

                                                              -

                                                              - Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -

                                                              -
                                                              -

                                                              Battle Information

                                                              -
                                                                -
                                                              • Type: Fairy
                                                                • -
                                                              • Evolutions: Togepi -> Togetic -> Togekiss
                                                                • -
                                                              • Moves: Growl, Pound, Sweet Kiss, Charm
                                                                • -
                                                              • Weaknesses: Poison, Steel
                                                                • -
                                                              • Resistances: Dragon
                                                                • -
                                                              -

                                                              - Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -

                                                              -
                                                              -
                                                              - - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md deleted file mode 100644 index 9100d2d2f86..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05b -title: Erstelle deine eigenen Funktionen -challengeType: 11 -videoId: nLDychdBwUg -bilibiliIds: - aid: 249487483 - bvid: BV1Fv411J7bS - cid: 376340281 -dashedName: build-your-own-functions ---- - -# --description-- - -Weitere Ressourcen: - -\- Aufgabe - -# --question-- - -## --text-- - -Was wird das folgende Python-Programm ausgeben?: - -```python -def fred(): - print("Zap") -def jane(): - print("ABC") - -jane() -fred() -jane() -``` - -## --answers-- - -
                                                              Zap
-ABC
-jane
-fred
-jane
                                                              - ---- - -
                                                              Zap
-ABC
-Zap
                                                              - ---- - -
                                                              ABC
-Zap
-jane
                                                              - ---- - -
                                                              ABC
-Zap
-ABC
                                                              - ---- - -
                                                              Zap
-Zap
-Zap
                                                              - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index f13c66be674..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: Tupel vergleichen und sortieren -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -Weitere Ressourcen: - -\- Aufgabe - -# --question-- - -## --text-- - -Was macht das gleiche wie der folgende Code?: - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index 774dbba3831..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: Bedingte Anweisung -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -Welcher Code ist korrekt eingerückt, um "Ja" zu drucken, wenn x = 0 und y = 10 ist? - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index ebd44ddae40..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: 'Datenvisualisierung: Mailinglisten' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -Siehe auch: - -\- Aufgabe: Geodata - -\- Aufgabe: Gmane Model - -\- Aufgabe: Gmane Spider - -\- Aufgabe: Gmane Viz - -\- Aufgabe: Page Rank - -\- Aufgabe: Page Spider - -\- Aufgabe: Page Viz - -# --question-- - -## --text-- - -Welches ist eine gängige JavaScript-Visualisierungsbibliothek? - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index 0e4ddb38b9c..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: 'Datenvisualisierung: Seiten-Ranking' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -Wie funktioniert der Seiten-Ranking Algorithmus? - -## --answers-- - -Er bestimmt, welche Seiten am meisten verlinkt sind. - ---- - -Er bewertet Seiten basierend auf der Anzahl von Besuchern der Seiten. - ---- - -Er ermittelt, welche Seiten die wichtigsten Inhalte enthalten. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index cf3ad252435..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: Wörterbücher und Schleifen -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -Siehe auch: - -\- Übung - -# --question-- - -## --text-- - -Welches Ergebnis liefert folgender Code? - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -
                                                              annie 42
-jan 100
                                                              - ---- - -
                                                              chuck 1
-annie 42
-jan 100
                                                              - ---- - -
                                                              chuck 1
                                                              - ---- - -
                                                              [Error]
                                                              - -## --video-solution-- - -1 diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index 4b0f2515c2e..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: 'Wörterbücher: Häufige Anwendungen' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -Welches Ergebnis liefert folgender Code? - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[will return error] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index 452d693f15c..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: Dateien als Sequenz -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -Weitere Ressourcen: - -\- Aufgabe - -# --question-- - -## --text-- - -Was ist der Effekt des Wortes 'continue' mitten in einer Schleife? - -## --answers-- - -Springt nach der Schleife direkt zum Code. - ---- - -Springt zur nächsten Zeile im Code. - ---- - -Springt zur nächsten Iteration der Schleife. - ---- - -Überspringt den nächsten Block des Codes. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index 74492c6ed71..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: Fortgeschrittene Ausdrücke -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -Weitere Ressourcen: - -\- Aufgabe 1 - -\- Aufgabe 2 - -# --question-- - -## --text-- - -Was wird nach der Ausführung dieses Codes ausgegeben: - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index c9146dc7c34..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: Fortgeschrittene Strings -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -Weitere Ressourcen: - -\- Aufgabe - -# --question-- - -## --text-- - -Wie lautet der Wert von i in dem folgenden Code? - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index e2f02ce34fc..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: 'Einführung: Elemente von Python' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -Was wird das folgende Programm ausgeben: - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index c89faa762f9..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: 'Einführung: Hardware-Architektur' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -Wo werden dein Programme gespeichert, wenn sie ausgeführt werden? - -## --answers-- - -Festplatte. - ---- - -Speicher. - ---- - -Prozessor (CPU). - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index d49bb3c5132..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: 'Einführung: Python als Sprache' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -Was wird nach dem Ausführen dieser beiden Codezeilen ausgegeben: - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index 45f2d502111..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: 'Einleitung: Warum programmieren?' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -Weitere Ressourcen: - -\- Installiere Python auf Windows - -\- Installiere Python auf MacOS - -# --question-- - -## --text-- - -Wer sollte programmieren lernen? - -## --answers-- - -College Studenten. - -### --feedback-- - -College students should learn to program, but there's a better answer. - ---- - -People who want to become software developers. - -### --feedback-- - -People who want to become software developers should learn to program, but there's a better answer. - ---- - -Everyone. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index 16aff413d2f..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: 'Iterationen: Eindeutige Schleifen' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -Wie viele Zeilen wird der folgende Code ausgeben?: - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index 7d477a758e4..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: 'Iterationen: Schleifen-Idiome' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -Nachfolgend ist ein Code aufgeführt, der den kleinsten Wert aus einer Liste von Werten ermittelt. Eine Zeile hat einen Fehler, der dazu führt, dass der Code nicht wie erwartet funktioniert. Welche Zeile ist es?: - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index 615803c726a..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: 'Iterationen: Mehr Muster' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -Weitere Ressourcen: - -\- Aufgabe - -# --question-- - -## --text-- - -Welche dieser Auswertungen ist Falsch? - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 74245e80a9b..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: Schleifen und Iterationen -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -Was wird der folgende Code ausgeben?: - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -
                                                              0
-1
-2
                                                              - ---- - -
                                                              0
-1
-2
-3
                                                              - ---- - -
                                                              1
-2
                                                              - ---- - -
                                                              1
-2
-3
                                                              - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index 20c8ae862e9..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: Erstellen einer relationalen Datenbank -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -Welchen SQL-Befehl würden Sie verwenden, um alle Benutzer mit der E-Mail-Adresse `quincy@freecodecamp.org` abzurufen? - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index c60e18205f1..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: Weitere Bedingungsstrukturen -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -Weitere Ressourcen: - -\- Aufgabe 1 - -\- Aufgabe 2 - -# --question-- - -## --text-- - -Gegeben ist der folgende Code: - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -Welche Zeile(n) soll(en) von einem `try`-Block umgeben sein? - -## --answers-- - -1 - ---- - -3 - ---- - -3,4 - ---- - -4 - ---- - -Keine - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index ae3db534b33..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: Netzwerkprotokoll -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -Welche Art von HTTP-Anfrage wird normalerweise für den Zugriff auf eine Website verwendet? - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index fbe3a32b9da..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: 'Vernetzungen: Textverarbeitung' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -Welche Art der Kodierung verwenden die meisten Websites? - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index 5e8ed996ce9..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: 'Vernetzungen: Verwendung von urllib in Python' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -Was wird die Ausgabe des folgenden Codes sein?: - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -Nur der Inhalt von "romeo.txt". - ---- - -Ein Header und der Inhalt von "romeo.txt". - ---- - -Ein Header, eine Fußzeile und der Inhalt von "romeo.txt". - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index 488337dfab6..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: 'Vernetzung: Web Scraping mit Python' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -Weitere Ressourcen: - -\- Aufgabe: socket1 - -\- Aufgabe: urllib - -\- Aufgabe: urllinks - -# --question-- - -## --text-- - -Welche Python-Bibliothek wird zum Parsen von HTML-Dokumenten und zum Extrahieren von Daten aus HTML-Dokumenten verwendet? - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index f59ef4055fe..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: Vernetzung mit Python -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -Welche Python-Bibliothek ermöglicht den Zugriff auf TCP-Sockets? - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index b1f23683404..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: 'Vernetzung: Programmieren eines Web-Browsers' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -Was erstellt der folgende Code?: - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -Einen einfachen Webserver. - ---- - -Einen einfachen E-Mail-Client. - ---- - -Eine einfache ToDo-Liste. - ---- - -Einen einfachen Webbrowser. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index dadd5649665..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: Lebenszyklus von Objekten -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -Was wird das folgende Programm ausgeben?: - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - -
                                                              -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 2
-Quincy party count 3
-
                                                              - ---- - -
                                                              -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 1
-Quincy party count 2
-
                                                              - ---- - -
                                                              -Quincy constructed
-Quincy party count 1
-Quincy party count 2
-Miya constructed
-Miya party count 1
-
                                                              - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index 286f8cb4401..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: 'Objekte: Eine Beispielklasse' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -Was wird das folgende Programm ausgeben?: - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - -
                                                              -So far 1
-So far 2
-
                                                              - ---- - -
                                                              -0
-0
-
                                                              - ---- - -
                                                              -2
-2
-
                                                              - ---- - -
                                                              -2
-4
-
                                                              - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index ae6383ff01e..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: 'Objekte: Vererbung' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -Was versteht man unter Vererbung in der objektorientierten Programmierung? - -## --answers-- - -Eine neue Klasse, die erstellt wird, wenn eine Elternklasse erweitert wird. - ---- - -Eine erzeugte Instanz einer Klasse. - ---- - -Die Möglichkeit, eine neue Klasse durch Erweiterung einer bestehenden Klasse zu erstellen. - ---- - -Eine Methode, die in dem Moment aufgerufen wird, in dem eine Klasse verwendet wird, um ein Objekt zu erzeugen. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index 7dded161b69..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Python Dictionaries -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -Was wird nach der Ausführung dieses Codes ausgegeben?: - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index ba8ebe6880d..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Python Funktionen -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -Was ist der Zweck des Schlüsselworts "def" in Python? - -## --answers-- - -Es ist ein Slang, und bedeutet: "Der folgende Code ist wirklich cool." - ---- - -Es zeigt den Beginn einer Funktion an. - ---- - -Es zeigt an, dass der folgende eingerückte Codeabschnitt für später gespeichert werden soll. - ---- - -Es zeigt den Beginn einer Funktion an, und der folgende eingerückte Codeabschnitt soll für später gespeichert werden. - ---- - -Keine der oben genannten Möglichkeiten. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index c118cb27047..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Python Listen -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -Was ist der Wert von x nach der Ausführung dieses Codes: - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index 4d2217653dc..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Python Objekte -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -Welche Aussage zu Objekten in Python trifft NICHT zu? - -## --answers-- - -Objekte werden erstellt und verwendet. - ---- - -Objekte sind Bits aus Code und Daten. - ---- - -Objekte verbergen Details. - ---- - -Objekte sind einer der fünf Standard-Datentypen. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index 660a4c22411..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: Dateien einlesen -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -Was wird verwendet, um eine neue Zeile in einem String anzuzeigen? - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index 221f1999db2..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: 'Reguläre Ausdrücke: Vergleichen und Extrahieren von Daten' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -Was wird das folgende Programm ausgeben?: - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index b9f70557f75..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: 'Reguläre Ausdrücke: Praktische Anwendungen' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -Wie wird nach einem "$" in einem regulären Ausdruck gesucht? - -## --answers-- - -$ - ---- - -\\dollar\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index 649bcc0c22d..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: Reguläre Ausdrücke -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -Welcher reguläre Ausdruck (Regex) passt nur auf ein Leerzeichen? - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index 8fa3bdfb38b..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: Relationales Datenbank-Design -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -Was ist die beste Vorgehensweise dafür, wie oft ein bestimmter Datenstring in einer Datenbank gespeichert werden sollte? - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index 5044d2b084c..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: Relationale Datenbanken und SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -SQLite herunterladen -DB Browser für SQLite herunterladen -SQLite usage - -# --question-- - -## --text-- - -Was ist KEINE primäre Datenstruktur in einer Datenbank? - -## --answers-- - -index - ---- - -table - ---- - -row - ---- - -column - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index 2e195c514aa..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: 'Relationale Datenbanken: Join-Operation' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -Wenn man eine JOIN-Bedingung in einer SQL-Anweisung verwendet, was bewirkt dann ON? - -## --answers-- - -Es gibt an, auf welchen Tabellen der JOIN ausgeführt werden soll. - ---- - -Er gibt die Felder an, die für den JOIN verwendet werden sollen. - ---- - -Es gibt an, wie die beiden Tabellen verbunden werden sollen. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index 8f13d7b6f3c..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: 'Relationale Datenbanken: Viele-zu-viele-Beziehungen' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -Weitere Ressourcen: - -\- Aufgabe: Email - -\- Aufgabe: Roster - -\- Aufgabe: Tracks - -\- Aufgabe: Twfriends - -\- Aufgabe: Twspider - -# --question-- - -## --text-- - -Was ist ein Beispiel für eine Viele-zu-Viele-Beziehung? - -## --answers-- - -Lehrer zu Schüler - ---- - -Kunde zu Bestellung - ---- - -Buch zu Seiten - ---- - -Stadt zu Land - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index d9df190e9a0..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: 'Relationale Datenbanken: Aufbau von Beziehungen' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -Was macht der INSERT-Befehl in SQL? - -## --answers-- - -Es definiert eine neue Zeile, indem es die Felder auflistet, die aufgenommen werden sollen, gefolgt von den Werten, die in der neuen Zeile stehen sollen. - ---- - -Es definiert eine neue Spalte, indem es die Zeilen auflistet, die einbezogen werden sollen, gefolgt von den Werten, die in der neuen Spalte stehen sollen. - ---- - -Es definiert eine neue Tabelle, indem es die Zeilen und Felder auflistet, die wir einbeziehen wollen, gefolgt von den Werten, die wir in der Tabelle platzieren wollen. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index b83c7ffe2d6..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: Beziehungen in einer relationalen Datenbank darstellen -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -Was ist ein Fremdschlüssel? - -## --answers-- - -Ein Schlüssel, der nicht vorhanden sein sollte. - ---- - -Ein Schlüssel, der nicht-lateinische Zeichen verwendet. - ---- - -Eine Zahl, die auf den Primärschlüssel einer zugehörigen Zeile einer anderen Tabelle verweist. - ---- - -Ein Schlüssel, den die "reale Welt" verwenden könnte, um eine Zeile zu suchen. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index 69171503b20..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: Strings und Listen -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -Weitere Ressourcen: - -\- Aufgabe - -# --question-- - -## --text-- - -Was entspricht n in diesem Code? - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -mail - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index a74884b86bb..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Strings in Python -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -Welches Ergebnis liefert folgender Code? - -```python -for n in "banana": - print(n) -``` - -## --answers-- - -
                                                              -n
-n
-
                                                              - ---- - -
                                                              -0
-1
-
                                                              - ---- - -
                                                              -0
-1
-2
-3
-4
-5
-
                                                              - ---- - -
                                                              -b
-a
-n
-a
-n
-a
-
                                                              - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index 3613be9a905..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: Die Tuples Sammlung -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -Welches Ergebnis liefert folgender Code? - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - -
                                                              -k i
-k i
-k i
-
                                                              - ---- - -
                                                              -quincy 0
-beau 1
-kris 2
-
                                                              - ---- - -
                                                              -quincy 1
-beau 5
-kris 9
-
                                                              - ---- - -
                                                              -1 quincy
-5 beau
-9 kris
-
                                                              - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index bde00c74192..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: Webdienste benutzen -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -Was sind die zwei häufigsten Möglichkeiten, Daten über das Internet zu senden? - -## --answers-- - -JSON und TXT - ---- - -JSON und XML - ---- - -XML und TXT - ---- - -XML und PHP - ---- - -PHP und TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index 4e0311b01b0..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: 'Variablen, Ausdrücke und Anweisungen' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -Was ist das Symbol in einer Zuordnungsanweisung? - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index 7a43905ad03..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: Datenvisualisierung mit Python -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -Die meisten Daten müssen \_\_\_\_\_\_\_\_ sein, bevor sie verwendet werden können. - -## --answers-- - -in JSON-Format konvertiert - ---- - -grafisch - ---- - -bereinigt - ---- - -gespeichert - ---- - -in ein Lied verwandelt - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index 2a789cd1249..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'Webdienste: API-Rate Limiting und Sicherheit' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -Weitere Ressourcen: - -\- Aufgabe: GeoJSON - -\- Aufgabe: JSON - -\- Aufgabe: Twitter - -\- Aufgabe: XML - -# --question-- - -## --text-- - -Wenn du eine Anfrage an die Twitter-API stellst, welche Informationen müssen immer mit der Anfrage gesendet werden? - -## --answers-- - -Twitter Benutzername - ---- - -Zeitraum - ---- - -Suchbegriff - ---- - -Schlüssel - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index c67525f2ec3..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'Webdienste: APIs' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -Wofür steht API? - -## --answers-- - -Application Portable Intelligence - ---- - -Associate Programming International - ---- - -Application Program Interface - ---- - -Action Portable Interface - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index 9934ae86c9a..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'Webdienste: JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -Welches Ergebnis liefert folgender Code? - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[Error] - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index b7cd6428cb6..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'Webdienste: Serviceorientierter Ansatz' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -Wo befinden sich Daten mit einem serviceorientierten Ansatz zur Entwicklung von Web-Apps? - -## --answers-- - -Verteilt auf viele Computersysteme, die über das Internet oder das interne Netzwerk verbunden sind. - ---- - -Innerhalb verschiedener Dienste auf dem Haupt-Webserver. - ---- - -Auf einem separaten Datenbankserver. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index 2ba87d2153e..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'Webdienste: XML-Schema' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -Was ist XSD? - -## --answers-- - -Die W3C-Schema Spezifikation für XML. - ---- - -Das Standard-JSON-Schema von MOZ. - ---- - -Erweiterbarer Situationsbezogener Treiber - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index 86457e4733e..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'XML-Webdienste' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -Was ist falsch mit dem folgenden XML?: - -```xml - - Chuck - - +1 734 303 4456 - - -``` - -## --answers-- - -E-Mail-Tag fehlt ein abschließendes Tag. - ---- - -Durch Leerzeichen wird XML ungültig. - ---- - -Telefon-Tag fehlt ein abschließendes Tag. - ---- - -Einfacher Text sollte mit UTF-8 kodiert werden. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md deleted file mode 100644 index e3c3bbe567b..00000000000 --- a/curriculum/challenges/german/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f065 -title: Mit Listen arbeiten -challengeType: 11 -videoId: lCnHfTHkhbE -bilibiliIds: - aid: 376965958 - bvid: BV1No4y1S7oi - cid: 376387989 -dashedName: working-with-lists ---- - -# --question-- - -## --text-- - -Welche Methode wird verwendet, um ein Element am Ende einer Liste hinzuzufügen? - -## --answers-- - -insert - ---- - -push - ---- - -append - ---- - -new - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index eb6f44c6308..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: Schritt 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Flexbox ist ein eindimensionales CSS-Layout, das steuern kann, wie Elemente innerhalb eines Containers angeordnet und ausgerichtet sind. - -Um es zu verwenden, gib einem Element eine `display`-Eigenschaft von `flex`. Das wird das Element zu einem flex container machen. Alle direkt untergeordneten Elemente eines Flex-Containers werden flex items genannt. - -Erstelle einen `.gallery`-Selektor und mache ihn zu einem Flex-Container. - -# --hints-- - -Du solltest einen `.gallery`-Selektor haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); -``` - -Dein `.gallery`-Selektor sollte eine `display`-Eigenschaft mit `flex` als Wert haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
                                                              -

                                                              css flexbox photo gallery

                                                              -
                                                              -
                                                              - - - - - - - - - -
                                                              - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; -} - -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { - width: 100%; - max-width: 350px; - height: 300px; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index 3ef57aeaa3f..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: Schritt 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Beginne mit dem Einrichten deiner HTML-Struktur. Add a `` declaration and an `html` element with a `lang` attribute set to `en`. Within the `html` element, add a `head` element and a `body` element. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(/html\s*>/gi)); -``` - -Your `DOCTYPE` declaration should be at the beginning of your HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -Your `html` element should have an opening tag with a `lang` attribute of `en` - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -Die `head`- und `body`-Elemente sollten Geschwister sein. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -The `head` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -The `body` element should be within the `html` element. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md deleted file mode 100644 index 536db9ddb59..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: Schritt 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Füge in dein `head`-Element ein `meta`-Tag mit dem `charset`-Attribut von `utf-8` hinzu. Füge auch ein `title`-Element mit dem Text `Picasso Painting` hinzu. - -# --hints-- - -Du solltest genau ein `meta`-Element hinzufügen. - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -Your `meta` element should have a `charset` attribute. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -Dein `charset`-Attribut sollte auf `utf-8` gesetzt sein. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -``` - -Du solltest genau ein `title`-Element hinzufügen. - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -Dein `title`-Element sollte den Text `Picasso Painting` enthalten. Beachte, dass Recht- und Großschreibung von Bedeutung sind. - -```js -assert(document.querySelector('title')?.innerText === 'Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md deleted file mode 100644 index 9728e562d01..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: Schritt 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -FontAwesome is a library of SVG-powered icons, many of which are freely available to use. You will be using some of these icons in this project, so you will need to link the external stylesheet to your HTML. - -Add a `link` element with a `rel` of `stylesheet` and an `href` of `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -# --hints-- - -You should have two `link` elements. - -```js -assert(document.querySelectorAll('link').length === 2); -``` - -Your `link` element should have a `rel` of `stylesheet`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); -``` - -Your `link` element should have an `href` of `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index 46fc8d8ac62..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: Schritt 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -To get your painting started, give your `body` element a `background-color` of `rgb(184, 132, 46)`. - -# --hints-- - -Du solltest den `body`-Selektor verwenden. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -Your `body` element should have the `background-color` property set to `rgb (184, 132, 46)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index ff287672801..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: Schritt 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Füge innerhalb deines Body-Tags ein `div`-Element hinzu. Give it an `id` of `back-wall`. - -# --hints-- - -Du solltest genau 1 `div`-Element hinzufügen. - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -Dein `div`-Element sollte den `id`-Wert von `back-wall` haben. - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index ff3691bd6e6..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: Schritt 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Use an id selector to give the element with the id `back-wall` a `background-color` of `#8B4513`. - -# --hints-- - -Du solltest einen `#back-wall`-Selektor verwenden. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -Dein `#back-wall`-Selektor sollte einen `background-color` von `#8B4513` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index a13688dc7a8..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: Schritt 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Gib dem `#back-wall`-Element eine `width` von `100%` und eine `height` von `60%`. - -# --hints-- - -You should set the `width` of the `#back-wall` selector to `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -Du solltest die `height` vom `#back-wall`-Selektor auf `60%` setzen. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index 20ed0fad7f6..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: Schritt 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. Es kann jedoch vorkommen, dass du die Elemente an andere Positionen verschieben möchtest. Dies kannst du mit der `position`-Eigenschaft machen. - -Set the `position` property for the `#back-wall` element to `absolute`. An `absolute` position takes the element out of that top-down document flow and allows you to adjust it relative to its container. - -When an element is manually positioned, you can shift its layout with `top`, `left`, `right`, and `bottom`. Set the `#back-wall` element to have a `top` value of `0`, and a `left` value of `0`. - - -# --hints-- - -Your `#back-wall` selector should have the `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -Your `#back-wall` selector should have the `top` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -Your `#back-wall` selector should have the `left` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index b3d449b449c..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: Schritt 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -The `z-index` property is used to create "layers" for your HTML elements. If you are familiar with image editing tools, you may have worked with layers before. This is a similar concept. - -Elemente mit einem höheren `z-index`-Wert werden über den Elementen mit einem niedrigeren `z-index`-Wert angeordnet sein. This can be combined with the positioning in the previous lesson to create unique effects. - -Since the `back-wall` element will need to appear "behind" the other elements you will be creating, give the `back-wall` element a `z-index` of `-1`. - -# --hints-- - -Your `#back-wall` selector should have the `z-index` property set to `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index e72889b6277..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: Schritt 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Below your `#back-wall` element, create a `div` with a `class` of `characters`. This is where you will be creating your painting's characters. - -# --hints-- - -You should only add one new `div` element. - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -Your new `div` element should come after your `#back-wall` element. - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -Your new `div` element should have the `class` set to `characters`. - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index ed3d4911aa5..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: Schritt 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Inside that `.characters` element, create another `div` with an `id` of `offwhite-character`. - -# --hints-- - -You should only create 1 additional `div` element. - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -Dein neues `div`-Element sollte in deinem `.characters`-Element eingebettet sein. - -```js -assert(document.querySelector('.characters div')); -``` - -Dein neues `div`-Element sollte eine `id` mit dem Wert `offwhite-character` enthalten. - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index 62ecd85209c..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: Schritt 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Create four `div` elements inside your `offwhite-character` element. Give those `div` elements the following `id` values, in order: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. - -# --hints-- - -You should add four `div` elements within your `.offwhite-character` element. - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -Your first new `div` element should have the `id` of `white-hat`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -Dein zweites neues `div`-Element sollte die `id` `black-mask` enthalten. - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -Dein drittes neues `div`-Element sollte die `id` `gray-instrument` enthalten. - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -Dein viertes neues `div`-Element sollte die `id` `tan-table` enthalten. - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index 152aa3dbbf9..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: Schritt 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -This character needs eyes. Erstelle zwei `div`-Elemente im `#black-mask`-Element. Give them the classes `eyes left` and `eyes right`, in that order. - -# --hints-- - -Du solltest innerhalb deines `#black-mask`-Elements 2 `div`-Elemente erstellen. - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -Your first new `div` should have the classes `eyes` and `left`. - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -Your second new `div` should have the classes `eyes` and `right`. - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index d2d7f87bb61..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: Schritt 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Erstelle einige "Punkte" für das Instrument. Add five `div` elements within your `#gray-instrument` element. Set the `class` of each to `black-dot`. - -# --hints-- - -You should have five new `div` elements within your `#gray-instrument` element. - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -Your five `div` elements should all have the class `black-dot`. - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index e3105e697ee..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: Schritt 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Erstelle mit einem ID-Selektor eine Regel für das Element mit der ID `offwhite-character`. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`. - -# --hints-- - -Du solltest den `#offwhite-character`-Selektor verwenden. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -Dein `#offwhite-character` sollte eine `width`-Eigenschaft von `300px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -Dein `#offwhite-character` sollte eine `height`-Eigenschaft von `550px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -Dein `#offwhite-character` sollte eine `background-color`-Eigenschaft von `GhostWhite` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index 8f8596d2099..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: Schritt 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Move the `#offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`. - -# --hints-- - -Your `#offwhite-character` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -Your `#offwhite-character` selector should have a `top` property set to `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -Your `#offwhite-character` selector should have a `left` property set to `17.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index 4b24d0212ff..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: Schritt 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Gestalte das Element mit der ID `white-hat` unter Verwendung eines ID-Selektors. Give it a `width` and `height` of `0`, and a `border-style` of `solid`. - -# --hints-- - -Du solltest einen `#white-hat`-Selektor verwenden. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -Dein `#white-hat`-Selektor sollte eine `width`-Eigenschaft von `0` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -Dein `#white-hat`-Selektor sollte eine `height`-Eigenschaft von `0` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -Dein `#white-hat`-Selektor sollte eine `border-style`-Eigenschaft von `solid` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index d2983d02cca..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: Schritt 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -That does not look quite right. Set a `border-width` of `0 120px 140px 180px` to size the hat properly. - -# --hints-- - -Your `#white-hat` selector should have a `border-width` property set to `0 120px 140px 180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index 1f27f759001..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: Schritt 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Nun hast du eine große Box. Give it a `border-top-color`, `border-right-color`, and `border-left-color` of `transparent`. Set the `border-bottom-color` to `GhostWhite`. This will make it look more like a hat. - -# --hints-- - -Your `#white-hat` selector should have a `border-top-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -Your `#white-hat` selector should have a `border-right-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -Your `#white-hat` selector should have a `border-left-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -Your `#white-hat` selector should have a `border-bottom-color` property set to `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index e88ee142963..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: Schritt 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Give the hat a `position` of `absolute`, a `top` value of `-140px`, and a `left` value of `0`. - -# --hints-- - -Your `#white-hat` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -Dein `#white-hat`-Selektor sollte eine `top`-Eigenschaft von `-140px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -Your `#white-hat` selector should have a `left` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index d5c0f2f3d5f..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: Schritt 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Using an id selector, create a rule for the element with the id `black-mask`. Give it a `width` of `100%`, a `height` of `50px`, and a `background-color` of `rgb(45, 31, 19)`. - -# --hints-- - -You should have a `#black-mask` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -Your `#black-mask` selector should have a `width` property set to `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -Your `#black-mask` selector should have a `height` property set to `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -Your `#black-mask` selector should have a `background-color` property set to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index 2f5294d543d..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: Schritt 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Give the mask a `position` of `absolute`, and a `top` and `left` value of `0`. - -# --hints-- - -Dein `#black-mask`-Selektor sollte eine `position`-Eigenschaft von `absolute` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -Dein `#black-mask`-Selektor sollte eine `top`-Eigenschaft von `0` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -Dein `#black-mask`-Selektor sollte eine `left`-Eigenschaft von `0` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index 5bc0dd7449f..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: Schritt 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -To ensure you can see the mask, give it a `z-index` of `1`. - -# --hints-- - -Your `#black-mask` selector should have a `z-index` property set to `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index 9b3eeb05984..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: Schritt 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Using an id selector, give the element with the id `gray-instrument` a `width` of `15%`, a `height` of `40%`, and a `background-color` of `rgb(167, 162, 117)`. - -# --hints-- - -You should have a `#gray-instrument` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -Your `#gray-instrument` selector should have a `width` property set to `15%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -Your `#gray-instrument` selector should have a `height` property set to `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -Your `#gray-instrument` selector should have a `background-color` property set to `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index e251c368ef0..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: Schritt 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Now move it into place with a `position` of `absolute`, a `top` value of `50px`, and a `left` value of `125px`. - -# --hints-- - -Dein `#gray-instrument`-Selektor sollte eine `position` von `absolute` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -Dein `#gray-instrument`-Selektor sollte einen `top`-Wert von `50px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -Dein `#gray-instrument`-Selektor sollte einen `left`-Wert von `125px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index e480ac7ca6d..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: Schritt 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Setze den `z-index` auf `1`. - -# --hints-- - -Your `#gray-instrument` selector should have a `z-index` property set to `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index 27cfe2cf109..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: Schritt 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Verwende einen Klassenselektor, um mit der `black-dot`-Klasse eine Regel für die Elemente zu erstellen. Set the `width` to `10px`, the `height` to `10px`, and the `background-color` to `rgb(45, 31, 19)`. - -# --hints-- - -Du solltest einen `.black-dot`-Selektor haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -Dein `.black-dot`-Selektor sollte eine `width`-Eigenschaft von `10px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -Dein `.black-dot`-Selektor sollte eine `height`-Eigenschaft von `10px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -Dein `.black-dot`-Selektor sollte eine `background-color`-Eigenschaft von `rgb(45, 31, 19)` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index 96f6a4831ef..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: Schritt 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -These dots are just a little too square. Give the `black-dot` class a `border-radius` of `50%` to fix it. - -# --hints-- - -Your `.black-dot` selector should have a `border-radius` property set to `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index e9710823b4a..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: Schritt 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Move the dots into place by setting the `display` to `block`, the `margin` to `auto`, and the `margin-top` to `65%`. - -# --hints-- - -Your `.black-dot` selector should have a `display` property set to `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -Your `.black-dot` selector should have a `margin` property set to `auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -Your `.black-dot` selector should have a `margin-top` property set to `65%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index 64b63fd8f60..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: Schritt 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Verwende einen ID-Selektor, um das Element mit der ID `tan-table` zu gestalten. Give it a `width` of `450px`, a `height` of `140px`, and a `background-color` of `#D2691E`. - -# --hints-- - -You should have a `#tan-table` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -Your `#tan-table` selector should have a `width` property set to `450px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -Your `#tan-table` selector should have a `height` property set to `140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -Your `#tan-table` selector should have a `background-color` property set to `#D2691E`. - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index 1f33c565e35..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: Schritt 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Move the table into place by giving it a `position` of `absolute`, a `top` value of `275px`, and a `left` value of `15px`. - -# --hints-- - -Your `#tan-table` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -Your `#tan-table` selector should have a `top` property set to `275px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -Your `#tan-table` selector should have a `left` property set to `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index 3c0e75a9491..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: Schritt 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Give the table a `z-index` of `1`. - -# --hints-- - -Your `#tan-table` selector should have a `z-index` property set to `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index 95ac2977d2b..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: Schritt 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Füge nach deinem `div#offwhite-character`-Element ein `div` mit der `id` `black-character` hinzu. - -# --hints-- - -Du solltest innerhalb des `.characters`-Elements ein neues `div`-Element hinzufügen. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -Dein neues `div`-Element sollte die `id` auf `black-character` gesetzt haben. - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index e1706a1f2d3..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: Schritt 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Within your new `#black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`. - -# --hints-- - -You should have three `div` elements within your `#black-character` element. - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -Your first new `div` element should have the `id` set to `black-hat`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -Your second new `div` element should have the `id` set to `gray-mask`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -Your third new `div` element should have the `id` set to `white-paper`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index 388afb777e3..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: Schritt 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -The mask needs eyes. Füge innerhalb deines `#gray-mask`-Elements zwei `div`-Elemente hinzu. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`. - -# --hints-- - -Du solltest innerhalb deines `#gray-mask`-Elements zwei `div`-Elemente haben. - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -Your first new `div` element should have the `class` set to `eyes left`. - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -Dein zweites neues `div`-Element sollte die `class` auf `eyes right` gesetzt haben. - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index 2e93e378bd4..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: Schritt 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Zeit einige FontAwesome Symbole zu verwenden. - -The `i` element is used for idiomatic text, or text that is separate from the "normal" text content. This could be for _italic_ text, such as scientific terms, or for icons like those provided by FontAwesome. - -Within your `#white-paper` element, add four `i` elements. Give them all a `class` value of `fas fa-music`. - -Diese spezielle Klasse bestimmt, wie FontAwesome festlegt, welches Symbol geladen werden soll. `fas` indicates the category of icons (FontAwesome Solid, here), while `fa-music` selects the specific icon. - -# --hints-- - -You should have four new `i` elements within your `#white-paper` element. - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -All of your `i` elements should have the `class` set to `fas fa-music`. - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index 0d800e19d82..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: Schritt 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Use an id selector to create a rule for the element with the id `black-character`. Set the `width` to `300px`, the `height` to `500px`, and the `background-color` to `rgb(45, 31, 19)`. - -# --hints-- - -You should use a `#black-character` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -Your `#black-character` selector should have a `width` property set to `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -Your `#black-character` selector should have a `height` property set to `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -Your `#black-character` selector should have a `background-color` property set to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index 2399cf7dff7..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: Schritt 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Verschiebe das `#black-character`-Element auf seinen Platz, indem du die `position` auf `absolute`, `top` auf `30%` und `left` auf `59%` setzt. - -# --hints-- - -Dein `#black-character`-Selektor sollte eine `position`-Eigenschaft von `absolute` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -Your `#black-character` selector should have a `top` property set to `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -Dein `#black-character`-Selektor sollte eine `left`-Eigenschaft von `59%` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index 0665b326286..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: Schritt 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Use an id selector to create a rule for the element with the id `black-hat`. Give it a `width` of `0`, a `height` of `0`, and a `border-style` of `solid`. - -# --hints-- - -You should have a `#black-hat` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -Your `#black-hat` selector should have a `width` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -Your `#black-hat` selector should have a `height` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -Your `#black-hat` selector should have a `border-style` property set to `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index ea78f777b47..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: Schritt 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Genau wie bei deinem `#white-hat` solltest du den Rahmen für das `#black-hat`-Element gestalten. Give it a `border-top-color`, `border-right-color`, and `border-bottom-color` of `transparent`. Setze den `border-left-color` auf `rgb(45, 31, 19)`. - -# --hints-- - -Dein `#black-hat`-Selektor sollte eine `border-top-color`-Eigenschaft von `transparent` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -Dein `#black-hat`-Selektor sollte eine `border-right-color`-Eigenschaft von `transparent` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -Dein `#black-hat`-Selektor sollte eine `border-bottom-color`-Eigenschaft von `transparent` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -Dein `#black-hat`-Selektor sollte eine `border-left-color`-Eigenschaft von `rgb(45, 31, 19)` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index 3e5b3ba4d21..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: Schritt 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Now position the `#black-hat` element. Give it a `position` of `absolute`, with a `top` of `-150px` and a `left` of `0`. - -# --hints-- - -Dein `#black-hat`-Selektor sollte eine `position`-Eigenschaft auf `absolute` gesetzt haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -Dein `#black-hat`-Selektor sollte eine `top`-Eigenschaft auf `-150px` gesetzt haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -Your `#black-hat` selector should have a `left` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index 4fc8f60b363..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: Schritt 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Using an id selector, style the element with the id `gray-mask`. Give it a `width` of `150px`, a `height` of `150px`, and a `background-color` of `rgb(167, 162, 117)`. - -# --hints-- - -You should have a `#gray-mask` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -Your `#gray-mask` selector should have a `width` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -Your `#gray-mask` selector should have a `height` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -Your `#gray-mask` selector should have a `background-color` property set to `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index 38cd4817a52..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: Schritt 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Position the `#gray-mask` element by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`. - -# --hints-- - -Dein `#gray-mask`-Selektor sollte eine `position`-Eigenschaft mit dem Wert `absolute` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -Dein `#gray-mask`-Selektor sollte eine `top`-Eigenschaft mit dem Wert `-10px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -Dein `#gray-mask`-Selektor sollte eine `left`-Eigenschaft mit dem Wert `70px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index 1c6c8a203f8..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: Schritt 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Using an id selector, create a rule for the id `white-paper`. Set the `width` to `400px`, the `height` to `100px`, and the `background-color` to `GhostWhite`. - -# --hints-- - -You should have a `#white-paper` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -Your `#white-paper` selector should have a `width` property set to `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -Your `#white-paper` selector should have a `height` property set to `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -Your `#white-paper` selector should have a `background-color` property set to `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index c91c540b2f3..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: Schritt 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Give the `#white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place. - -# --hints-- - -Dein `#white-paper`-Selektor sollte eine `position`-Eigenschaft mit dem Wert `absolute` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -Dein `#white-paper`-Selektor sollte eine `top`-Eigenschaft von `250px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -Dein `#white-paper`-Selektor sollte eine `left`-Eigenschaft von `-150px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index b4f1cd26804..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: Schritt 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Setze den `z-index` vom `#white-paper`-Element auf `1`. - -# --hints-- - -Dein `#white-paper`-Selektor sollte eine `z-index`-Eigenschaft mit dem Wert `1` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index 441452885a4..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: Schritt 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -FontAwesome icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size. Verwende zunächst einen Klassenselektor, um die Symbole mit der Klasse `fa-music` auszuwählen. Set the `display` to `inline-block`, the `margin-top` to `8%`, and the `margin-left` to `13%`. - -# --hints-- - -You should have a `.fa-music` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -Your `.fa-music` selector should have a `display` property set to `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -Your `.fa-music` selector should have a `margin-top` property set to `8%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -Your `.fa-music` selector should have a `margin-left` property set to `13%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index 447305efd75..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: Schritt 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Füge unter deinem `#black-character`-Element zwei neue `div`-Elemente hinzu. Das wird der Schal sein. Weise beiden eine `class` von `blue` zu. Weise dann dem ersten eine `id` von `blue-left` zu und dem zweiten eine `id` von `blue-right`. - -# --hints-- - -Du solltest innerhalb deines `.characters`-Elements zwei neue `div`-Elemente haben. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -Deine zwei neuen `div`-Elemente sollten die `class` auf `blue` gesetzt haben. - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -Dein erstes neues `div` sollte eine `id` von `blue-left` haben. - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -Dein zweites neues `div` sollte eine `id` von `blue-right` haben. - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index dd3ca236ffd..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: Schritt 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Verwende einen Klassenselektor, um die neuen Elemente mit der Klasse `blue` auszuwählen. Setze die `background-color` auf `#1E90FF`. - -# --hints-- - -Du solltest einen `.blue`-Selektor haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -Dein `.blue`-Selektor sollte eine `background-color`-Eigenschaft mit `#1E90FF` als Wert haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index 649742c96ae..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: Schritt 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Wähle mit einem ID-Selektor das Element mit der ID `blue-left` aus. Weise ihm eine `width` von `500px` und eine `height` von `300px` zu. - -# --hints-- - -Du solltest einen `#blue-left`-Selektor haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -Dein `#blue-left`-Selektor sollte eine `width`-Eigenschaft auf `500px` gesetzt haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -Dein `#blue-left`-Selektor sollte eine `height`-Eigenschaft auf `300px` gesetzt haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index bed8a26a126..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: Schritt 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Setze jetzt die `position` auf `absolute`, `top` auf `20%` und `left` auf `20%`. - -# --hints-- - -Dein `#blue-left`-Selektor sollte eine `position`-Eigenschaft haben, die auf `absolute` eingestellt ist. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -Dein `#blue-left`-Selektor sollte eine `top`-Eigenschaft haben, die auf `20%` eingestellt ist. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -Dein `#blue-left`-Selektor sollte eine `left`-Eigenschaft haben, die auf `20%` eingestellt ist. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index 43b884c132a..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: Schritt 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Next, target the element with the id `blue-right` using an id selector. Set the `width` to `400px` and the `height` to `300px`. - -# --hints-- - -You should have a `#blue-right` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -Your `#blue-right` selector should have a `width` property set to `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -Your `#blue-right` selector should have a `height` property set to `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index 72616aff975..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: Schritt 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Weise dem `#blue-right`-Element die richtige Positionierung zu, indem du `position` auf `absolute`, `top` auf `50%` und `left` auf `40%` setzt. - -# --hints-- - -Dein `#blue-right`-Selektor sollte eine `position`-Eigenschaft von `absolute` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -Dein `#blue-right`-Selektor sollte eine `top`-Eigenschaft von `50%` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -Dein `#blue-right`-Selektor sollte eine `left`-Eigenschaft von `40%` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index 83f71f82d81..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: Schritt 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Füge unter deinen `.blue`-Elementen einen weiteren `div` hinzu. Weise ihm `orange-character` als `id`-Wert zu. - -# --hints-- - -Du solltest innerhalb deines `.characters`-Elements ein neues `div`-Element haben. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -Dein neues `div`-Element sollte die `id` auf `orange-character` gesetzt haben. - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index dc519c9f4ba..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: Schritt 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Within that `#orange-character` element, add four `div` elements. Give them the `id` values of `black-round-hat`, `eyes-div`, `triangles`, and `guitar`, in order. - -# --hints-- - -You should have four new `div` elements within your `#orange-character` element. - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -Your first new `div` element should have an `id` set to `black-round-hat`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -Your second new `div` element should have an `id` set to `eyes-div`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -Your third new `div` element should have an `id` set to `triangles`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -Your fourth new `div` element should have an `id` set to `guitar`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index 9371a3e68fb..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: Schritt 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Das `#eyes-div`-Element sollte ein paar Augen enthalten. Füge zwei `div`-Elemente im Inneren hinzu. Weise dem ersten eine `class` von `eyes left` und dem zweiten eine `class` von `eyes right` zu. - -# --hints-- - -Du solltest zwei `div`-Elemente in deinem `#eyes-div`-Element eingebettet haben. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -Das erste neue `div` sollte die `class` auf `eyes left` gesetzt haben. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -Das zweite neue `div` sollte die `class` auf `eyes right` gesetzt haben. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index 80ecd4affc8..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: Schritt 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Du wirst innerhalb des `#triangles`-divs Elemente hinzufügen müssen, die deine Dreiecke werden sollen. Erstelle dreißig `div`-Elemente und weise jedem von ihnen die Klasse `triangle` zu. - -# --hints-- - -Du solltest innerhalb deines `#triangles`-Elements 30 `div`-Elemente haben. - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -Alle 30 deiner neuen `div`-Elemente sollten die `class` auf `triangle` gesetzt haben. - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index a220c2a6ffa..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: Schritt 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Erstelle drei `div`-Elemente innerhalb deines `#guitar`-Elements. Weise den ersten zwei eine `class` mit dem Wert `guitar` zu. Weise dann dem ersten eine `id` von `guitar-left` und dem zweiten eine `id` von `guitar-right` zu. Füge eine `id` zum dritten `div` mit dem Wert `guitar-neck` hinzu. - -Das dritte `div` sollte keine `guitar`-Klasse enthalten. - -# --hints-- - -Du solltest drei neue `div`-Elemente innerhalb deines `#guitar`-Elements erstellen. - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -Dein erstes neues `div` sollte eine `class` von `guitar` enthalten. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -Dein erstes neues `div` sollte eine `id` von `guitar-left` enthalten. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -Dein zweites neues `div` sollte eine `class` von `guitar` enthalten. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -Dein zweites neues `div` sollte eine `id` von `guitar-right` enthalten. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -Dein drittes neues `div` sollte eine `id` von `guitar-neck` enthalten. - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -Du solltest dem dritten neuen `div` keine `class` von `guitar` zuweisen. - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index 6b37d35013f..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: Schritt 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Use another FontAwesome icon for your `.guitar`. Inside both the `#guitar-left` and `#guitar-right` elements, add an `i` element and give it a `class` of `fas fa-bars`. - -# --hints-- - -Within your `#guitar-left` element, you should add an `i` element. - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -Within your `#guitar-right` element, you should add an `i` element. - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -Your two new `i` elements should have the `class` set to `fas fa-bars`. - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - --fcc-editable-region-- -
                                                              - -
                                                              -
                                                              - -
                                                              - --fcc-editable-region-- -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index aabcd83ad93..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: Schritt 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Select your `orange-character` element with an id selector. Give it a `width` of `250px`, a `height` of `550px`, and a `background-color` of `rgb(240, 78, 42)`. - -# --hints-- - -You should have an `#orange-character` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -Your `#orange-character` selector should have a `width` property set to `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -Your `#orange-character` selector should have a `height` property set to `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -Your `#orange-character` selector should have a `background-color` property set to `rgb(240, 78, 42)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index 3931f33099c..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: Schritt 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Give the `#orange-character` element a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`. - -# --hints-- - -Dein `#orange-character`-Selektor sollte eine `position`-Eigenschaft mit dem Wert `absolute` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -Dein `#orange-character`-Selektor sollte eine `top`-Eigenschaft mit dem Wert `25%` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -Dein `#orange-character`-Selektor sollte eine `left`-Eigenschaft mit dem Wert `40%` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index 2dd993a5b78..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: Schritt 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Style the element with the id `black-round-hat` using an id selector. Setze die `width` auf `180px`, die `height` auf `150px` und die `background-color` auf `rgb(45, 31, 19)`. - -# --hints-- - -You should have a `#black-round-hat` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -Your `#black-round-hat` selector should have a `width` property set to `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -Your `#black-round-hat` selector should have a `height` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -Your `#black-round-hat` selector should have a `background-color` property set to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index c89204f1634..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: Schritt 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Das `#black-round-hat`-Element sollte wahrscheinlich rund sein. Give it a `border-radius` of `50%` to fix this. - -# --hints-- - -Your `#black-round-hat` selector should have a `border-radius` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index 88b067b8123..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: Schritt 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Bringe das `#black-round-hat`-Element an seinen Platz mit einer `position` von `absolute`, einem `top` von `-100px` und einem `left` von `5px`. - -# --hints-- - -Your `#black-round-hat` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -Dein `#black-round-hat`-Selektor sollte eine `top`-Eigenschaft von `-100px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -Dein `#black-round-hat`-Selektor sollte eine `left`-Eigenschaft von `5px` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index eab633e9079..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: Schritt 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Put the `#black-round-hat` element on the correct layer with a `z-index` of `-1`. - -# --hints-- - -Your `#black-round-hat` selector should have a `z-index` property set to `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index 9fc68579307..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: Schritt 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -Verwende einen ID-Selektor, um eine Regel für das Element mit der ID `eyes-div` zu erstellen. Set the `width` to `180px` and the `height` to `50px`. - -# --hints-- - -Du solltest einen `#eyes-div`-Selektor erstellen. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -Your `#eyes-div` selector should have a `width` property set to `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -Dein `#eyes-div`-Selektor sollte eine `height`-Eigenschaft von `50px` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index 94a3cffa3c0..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: Schritt 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Now move the `#eyes-div` element into position with `position` set to `absolute`, `top` set to `-40px`, and `left` set to `20px`. - -# --hints-- - -Your `#eyes-div` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -Your `#eyes-div` selector should have a `top` property set to `-40px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -Your `#eyes-div` selector should have a `left` property set to `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index 4d9b65c325e..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: Schritt 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Gib dem `#eyes-div`-Element einen `z-index` von `3`. - -# --hints-- - -Dein `#eyes-div`-Selektor sollte eine `z-index`-Eigenschaft von `3` besitzen. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index d21c7f6523c..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: Schritt 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -Verwende nun einen Klassenselektor, um `guitar` auszuwählen. Dies wird die beiden "Hälften" deiner Gitarre gestalten. Set the `width` to `150px`, the `height` to `120px`, the `background-color` to `Goldenrod`, and the `border-radius` to `50%`. - -# --hints-- - -You should create a `.guitar` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -Your `.guitar` selector should have a `width` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -Your `.guitar` selector should have a `height` property set to `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -Your `.guitar` selector should have a `background-color` property set to `Goldenrod`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -Your `.guitar` selector should have a `border-radius` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index ab619a28247..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: Schritt 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Select the `id` with value `guitar-left`, and set the `position` to `absolute` and the `left` to `0px`. - -# --hints-- - -Du solltest einen neuen `#guitar-left`-Selektor erstellen. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -Dein `#guitar-left`-Selektor sollte eine `position`-Eigenschaft auf `absolute` gesetzt haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index f4228268afa..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: Schritt 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Select the `id` with value `guitar-right`, and also set `position` to `absolute`. Setze dieses Mal `left` auf `100px`. - -# --hints-- - -You should create a new `#guitar-right` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -Dein `#guitar-right`-Selektor sollte eine `position`-Eigenschaft auf `absolute` gesetzt haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -Your `#guitar-right` selector should have a `left` property set to `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index 617ceb1c888..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: Schritt 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Now you need to move the bar icons into place. Erstelle einen Klassenselektor für die `fa-bars`-Klasse. Set the `display` to `block`, the `margin-top` to `30%`, and the `margin-left` to `40%`. - -# --hints-- - -Du solltest einen `.fa-bars`-Selektor erstellen. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -Dein `.fa-bars`-Selektor sollte eine `display`-Eigenschaft von `block` haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -Your `.fa-bars` selector should have a `margin-top` property set to `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -Dein `.fa-bars`-Selektor sollte eine `margin-left`-Eigenschaft von `40%` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index 1ab2d58f0c3..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: Schritt 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -Verwende einen id-Selektor, um eine Regel für die ID `guitar-neck` zu erstellen. Setze die `width` auf `200px`, die `height` auf `30px` und den `background-color` auf `#D2691E`. - -# --hints-- - -Du solltest einen `#guitar-neck`-Selektor erstellen. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -Dein `#guitar-neck`-Selektor sollte eine `width`-Eigenschaft mit dem Wert `200px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -Dein `#guitar-neck`-Selektor sollte eine `height`-Eigenschaft mit dem Wert `30px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -Dein `#guitar-neck`-Selektor sollte eine `background-color`-Eigenschaft mit dem Wert `#D2691E` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index 8f2a5e7ae4b..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: Schritt 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Now move the `#guitar-neck` element with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`. - -# --hints-- - -Your `#guitar-neck` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -Your `#guitar-neck` selector should have a `top` property set to `45px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -Your `#guitar-neck` selector should have a `left` property set to `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index be12902bb94..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: Schritt 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Weise dem `#guitar-neck`-Element einen `z-index` von `3` zu. - -# --hints-- - -Your `#guitar-neck` selector should have a `z-index` property set to `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index 2bdcdc1642c..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: Schritt 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Time to style the elements with the `eyes` class. Use a class selector to set the `width` to `35px`, the `height` to `20px`, the `background-color` to `#8B4513`, and the `border-radius` to `20px 50%`. - -# --hints-- - -You should create a `.eyes` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -Your `.eyes` selector should have a `width` property set to `35px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -Your `.eyes` selector should have a `height` property set to `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -Your `.eyes` selector should have a `background-color` property set to `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -Your `.eyes` selector should have a `border-radius` property set to `20px 50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index 56cba6766cb..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: Schritt 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Target the `class` with value `right` and set the `position` to `absolute`, `top` to `15px`, and `right` to `30px`. - -# --hints-- - -You should create a `.right` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -Your `.right` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -Your `.right` selector should have a `top` property set to `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -Your `.right` selector should have a `right` property set to `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index 6302f1143f1..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: Schritt 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -For the `class` with value `left`, create the selector and set the `position` to `absolute`, the `top` to `15px`, and the `left` to `30px`. - -# --hints-- - -You should create a new `.left` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -Your `.left` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -Your `.left` selector should have a `top` property set to `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -Your `.left` selector should have a `left` property set to `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index dba72f0aaf0..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: Schritt 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Ein letzter Schritt. Die FontAwesome Symbole sind etwas zu klein. Target all of them with a class selector for `fas`, and set the `font-size` to `30px`. - -Hiermit ist dein Picasso Gemälde vollständig! - -# --hints-- - -Du solltest einen `.fas`-Selektor erstellen. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -Dein `.fas`-Selektor sollte eine `font-size`-Eigenschaft auf `30px` gesetzt haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index 70436b7c961..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: Schritt 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Fahre fort und verlinke jetzt deine CSS-Datei, obwohl du noch kein CSS geschrieben hast. - -Füge ein `link`-Element mit einem `rel` von `stylesheet` und einen `href` von `styles.css` hinzu. - -# --hints-- - - -Dein Code sollte ein `link`-Element haben. - -```js -assert.match(code, / link')); -``` - -Dein `link`-Element sollte ein `rel`-Attribut mit dem Wert `stylesheet` haben. - -```js -const link_element = document.querySelector('link'); -const rel = link_element.getAttribute("rel"); -assert.equal(rel, "stylesheet"); -``` - -Dein `link`-Element sollte ein `href`-Attribut mit dem Wert `styles.css` haben. - -```js -const link = document.querySelector('link'); -assert.equal(link.dataset.href, "styles.css"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index a04a9d395a7..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: Schritt 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Adjust the layout of the `.triangle` elements with a `display` of `inline-block`. - -# --hints-- - -Your `.triangle` selector should have a `display` property set to `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index 12bf6a78f78..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: Schritt 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Weise deinen `.triangle`-Elementen die richtige Farbe zu. Setze die `border-top-color`, `border-bottom-color` und `border-left-color` auf `transparent`. Setze die `border-right-color` auf `Gold`. - -# --hints-- - -Dein `.triangle`-Selektor sollte eine `border-top-color`-Eigenschaft mit `transparent` als Wert enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -Dein `.triangle`-Selektor sollte eine `border-bottom-color`-Eigenschaft mit `transparent` als Wert enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -Dein `.triangle`-Selektor sollte eine `border-left-color`-Eigenschaft mit `transparent` als Wert enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -Dein `.triangle`-Selektor sollte eine `border-right-color`-Eigenschaft mit `Gold` als Wert enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index 2de9e2721b5..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: Schritt 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -Gestalte den Rand deiner `.triangle`-Elemente. Setze die `border-style` auf `solid` und die `border-width` auf `42px 45px 45px 0`. - -# --hints-- - -Dein `.triangle`-Selektor sollte eine `border-style`-Eigenschaft auf `solid` gesetzt haben. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -Dein `.triangle`-Selektor sollte eine `border-width`-Eigenschaft von `42px 45px 45px 0` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index 73693a7b8bb..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: Schritt 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Erstelle einen Klassenselektor für die Elemente mit der `triangle`-Klasse. Setze die `width` auf `0` und die `height` auf `0`. - -# --hints-- - -Du solltest einen `.triangle`-Selektor erstellen. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -Dein `.triangle`-Selektor sollte eine `width`-Eigenschaft mit dem Wert `0` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -Dein `.triangle`-Selektor sollte eine `height`-Eigenschaft mit dem Wert `0` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index 3ede7a9c4dc..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: Schritt 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Wähle mit einem ID-Selektor das Element mit der ID `triangles` aus. Setze die `width` auf `250px` und die `height` auf `550px`. - -# --hints-- - -Du solltest einen `#triangles`-Selektor hinzufügen. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -Dein `#triangles`-Selektor sollte eine `width`-Eigenschaft mit dem Wert `250px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -Dein `#triangles`-Selektor sollte eine `height`-Eigenschaft mit dem Wert `550px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index 9c74dabf165..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: Schritt 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Now use an id selector for `guitar`. Set the `width` to `100%`, and the `height` to `100px`. - -# --hints-- - -You should create a `#guitar` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -Your `#guitar` selector should have a `width` property set to `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -Your `#guitar` selector should have a `height` property set to `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index e362ddd01a0..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: Schritt 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -Setze beim gleichen `#guitar`-Selektor die `position` auf `absolute`, `top` auf `120px` und `left` auf `0px`. - -# --hints-- - -Dein `#guitar`-Selektor sollte eine `position`-Eigenschaft mit dem Wert `absolute` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -Dein `#guitar`-Selektor sollte eine `top`-Eigenschaft mit dem Wert `120px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -Dein `#guitar`-Selektor sollte eine `left`-Eigenschaft mit dem Wert `0px` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index d980e13e95f..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: Schritt 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -Weise der `#guitar`-Regel einen `z-index` von `3` zu. - -# --hints-- - -Dein `#guitar`-Selektor sollte eine `z-index`-Eigenschaft von `3` enthalten. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - -
                                                              -
                                                              - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index 8dc7efe0da1..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: Schritt 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Set the `border-width` of the `#black-hat` to `150px 0 0 300px`. - -# --hints-- - -Your `#black-hat` selector should have a `border-width` property set to `150px 0 0 300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              -
                                                              - - - - -
                                                              -
                                                              -
                                                              - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md deleted file mode 100644 index 0992cb922f4..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f5c1cb7575c7551ed8a40 -title: Schritt 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The larger font size of the number `230` is causing it to overflow. Give the `.calories-info h1` an `overflow` property set to `hidden` to avoid this. - -# --hints-- - -Your `.calories-info h1` selector should have an `overflow` property set to `hidden`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                              -
                                                              -

                                                              Nutrition Facts

                                                              -
                                                              -

                                                              8 servings per container

                                                              -

                                                              Serving size 2/3 cup (55g)

                                                              -
                                                              -
                                                              -
                                                              -

                                                              Amount per serving

                                                              -

                                                              Calories 230

                                                              -
                                                              -
                                                              - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- -.calories-info h1 { - margin: -5px -2px; -} ---fcc-editable-region-- - -.calories-info span { - font-size: 1.2em; -} -``` diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md deleted file mode 100644 index 655b881bfe7..00000000000 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f6a7d4ba8037bc086c2c7 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Give the `.divider` selector a `clear` property set to `right`. This will clear the `float` property, pushing the divider and any following content down below the `float` text. - -# --hints-- - -Your `.divider` selector should have a `clear` property set to `right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                              -
                                                              -

                                                              Nutrition Facts

                                                              -
                                                              -

                                                              8 servings per container

                                                              -

                                                              Serving size 2/3 cup (55g)

                                                              -
                                                              -
                                                              -
                                                              -

                                                              Amount per serving

                                                              -

                                                              Calories 230

                                                              -
                                                              -
                                                              -
                                                              -

                                                              % Daily Value *

                                                              -
                                                              -
                                                              -
                                                              - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - ---fcc-editable-region-- -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} ---fcc-editable-region-- - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md deleted file mode 100644 index b6194699dfe..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 56533eb9ac21ba0edf2244e2 -title: Build a Caesars Cipher -challengeType: 5 -forumTopicId: 16003 -dashedName: build-a-caesars-cipher ---- - -# --description-- - -One of the simplest and most widely known ciphers is a Caesar cipher, also known as a shift cipher. In a shift cipher the meanings of the letters are shifted by some set amount. - -A common modern use is the ROT13 cipher, where the values of the letters are shifted by 13 places. Thus `A ↔ N`, `B ↔ O` and so on. - -Write a function which takes a ROT13 encoded string as input and returns a decoded string. - -Alle Buchstaben werden großgeschrieben. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on. - -# --hints-- - -`rot13("SERR PBQR PNZC")` should decode to the string `FREE CODE CAMP` - -```js -assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); -``` - -`rot13("SERR CVMMN!")` should decode to the string `FREE PIZZA!` - -```js -assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); -``` - -`rot13("SERR YBIR?")` should decode to the string `FREE LOVE?` - -```js -assert(rot13('SERR YBIR?') === 'FREE LOVE?'); -``` - -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` should decode to the string `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` - -```js -assert( - rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === - 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function rot13(str) { - return str; -} - -rot13("SERR PBQR PNZC"); -``` - -# --solutions-- - -```js -var lookup = { - 'A': 'N','B': 'O','C': 'P','D': 'Q', - 'E': 'R','F': 'S','G': 'T','H': 'U', - 'I': 'V','J': 'W','K': 'X','L': 'Y', - 'M': 'Z','N': 'A','O': 'B','P': 'C', - 'Q': 'D','R': 'E','S': 'F','T': 'G', - 'U': 'H','V': 'I','W': 'J','X': 'K', - 'Y': 'L','Z': 'M' -}; - -function rot13(encodedStr) { - var codeArr = encodedStr.split(""); // String to Array - var decodedArr = []; // Your Result goes here - // Only change code below this line - - decodedArr = codeArr.map(function(letter) { - if(lookup.hasOwnProperty(letter)) { - letter = lookup[letter]; - } - return letter; - }); - - // Only change code above this line - return decodedArr.join(""); // Array to String -} -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md deleted file mode 100644 index 1a922aa17ed..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: aa2e6f85cab2ab736c9a9b24 -title: Erstelle eine Registrierkasse -challengeType: 5 -forumTopicId: 16012 -dashedName: build-a-cash-register ---- - -# --description-- - -Entwirf eine Registrierkassenfunktion `checkCashRegister()`, die als erstes Argument den Kaufpreis (`price`), als zweites Argument das übergebene Bargeld (`cash`) und als drittes Argument den Kassenbestand (`cid`) akzeptiert. - -`cid` ist ein 2D-Array mit den verfügbaren Währungen. - -Die `checkCashRegister()`-Funktion sollte immer ein Objekt mit den Schlüsseln `status` und `change` zurückgeben. - -Gib `{status: "INSUFFICIENT_FUNDS", change: []}` zurück, wenn der Kassenbestand nicht das benötigte Wechselgeld hergibt oder du das genaue Wechselgeld nicht zurückgeben kannst. - -Gib `{status: "CLOSED", change: [...]}` mit dem vorhandenen Wechselgeld als Wert für den Schlüssel `change` zurück, wenn der Kassenbestand gleich dem fälligen Wechselgeld ist. - -Otherwise, return `{status: "OPEN", change: [...]}`, with the change due in coins and bills, sorted in highest to lowest order, as the value of the `change` key. - -
                                                              WährungseinheitBetrag
                                                              Penny$0.01 (PENNY)
                                                              Nickel$0.05 (NICKEL)
                                                              Dime$0.1 (DIME)
                                                              Quarter$0.25 (QUARTER)
                                                              Dollar$1 (ONE)
                                                              Fünf Dollar$5 (FIVE)
                                                              Zehn Dollar$10 (TEN)
                                                              Zwanzig Dollar$20 (TWENTY)
                                                              Einhundert Dollar$100 (ONE HUNDRED)
                                                              - -Anbei ein Beispiel für einen Array mit Wechselgeld: - -```js -[ - ["PENNY", 1.01], - ["NICKEL", 2.05], - ["DIME", 3.1], - ["QUARTER", 4.25], - ["ONE", 90], - ["FIVE", 55], - ["TEN", 20], - ["TWENTY", 60], - ["ONE HUNDRED", 100] -] -``` - -# --hints-- - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` sollte ein Objekt zurückgeben. - -```js -assert.deepEqual( - Object.prototype.toString.call( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]) - ), - '[object Object]' -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` sollte `{status: "OPEN", change: [["QUARTER", 0.5]]}` zurückgeben. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { status: 'OPEN', change: [['QUARTER', 0.5]] } -); -``` - -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` sollte `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}` zurückgeben. - -```js -assert.deepEqual( - checkCashRegister(3.26, 100, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { - status: 'OPEN', - change: [ - ['TWENTY', 60], - ['TEN', 20], - ['FIVE', 15], - ['ONE', 1], - ['QUARTER', 0.5], - ['DIME', 0.2], - ['PENNY', 0.04] - ] - } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` sollte `{status: "INSUFFICIENT_FUNDS", change: []}` zurückgeben. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` sollte `{status: "INSUFFICIENT_FUNDS", change: []}` zurückgeben. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 1], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` sollte `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}` zurückgeben. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { - status: 'CLOSED', - change: [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ] - } -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function checkCashRegister(price, cash, cid) { - let change; - return change; -} - -checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); -``` - -# --solutions-- - -```js -const denom = [ - { name: "ONE HUNDRED", val: 100 }, - { name: "TWENTY", val: 20 }, - { name: "TEN", val: 10 }, - { name: "FIVE", val: 5 }, - { name: "ONE", val: 1 }, - { name: "QUARTER", val: 0.25 }, - { name: "DIME", val: 0.1 }, - { name: "NICKEL", val: 0.05 }, - { name: "PENNY", val: 0.01 }, -]; - -function checkCashRegister(price, cash, cid) { - const output = { status: null, change: [] }; - let change = cash - price; - const register = cid.reduce( - function (acc, curr) { - acc.total += curr[1]; - acc[curr[0]] = curr[1]; - return acc; - }, - { total: 0 } - ); - if (register.total === change) { - output.status = "CLOSED"; - output.change = cid; - return output; - } - if (register.total < change) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - const change_arr = denom.reduce(function (acc, curr) { - let value = 0; - while (register[curr.name] > 0 && change >= curr.val) { - change -= curr.val; - register[curr.name] -= curr.val; - value += curr.val; - change = Math.round(change * 100) / 100; - } - if (value > 0) { - acc.push([curr.name, value]); - } - return acc; - }, []); - if (change_arr.length < 1 || change > 0) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - output.status = "OPEN"; - output.change = change_arr; - return output; -} -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md deleted file mode 100644 index 7f2170fa8d0..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: aaa48de84e1ecc7c742e1124 -title: Erstelle einen Palindrom-Prüfer -challengeType: 5 -forumTopicId: 16004 -dashedName: build-a-palindrome-checker ---- - -# --description-- - -Gib `true` zurück, falls der übergebene String ein Palindrom ist. Gib ansonsten `false` zurück. - -Ein Palindrom kann sowohl ein Wort als auch ein Satz sein, das sowohl vorwärts als auch rückwärts gelesen dasselbe Wort bzw. denselben Satz ergibt. Interpunktion, Leerzeichen sowie Groß- und Kleinschreibung ausgenommen. - -**Hinweis:** Entferne **alle nicht alphanumerischen Zeichen** (Interpunktion, Leerzeichen und Symbole) und setze alles in dieselbe Schreibweise (Klein- oder Großbuchstaben), um nach Palindromen zu filtern. - -Wir übergeben Strings mit unterschiedlichen Formaten, wie zum Beispiel `racecar`, `RaceCar` und `race CAR`. - -Auch Strings mit speziellen Symbolen wie `2A3*3a2`, `2A3 3a2` und `2_A3*3#A2` werden dir übergeben. - -# --hints-- - -`palindrome("eye")` sollte einen Boolean zurückgeben. - -```js -assert(typeof palindrome('eye') === 'boolean'); -``` - -`palindrome("eye")` sollte `true` zurückgeben. - -```js -assert(palindrome('eye') === true); -``` - -`palindrome("_eye")` sollte `true` zurückgeben. - -```js -assert(palindrome('_eye') === true); -``` - -`palindrome("race car")` sollte `true` zurückgeben. - -```js -assert(palindrome('race car') === true); -``` - -`palindrome("not a palindrome")` sollte `false` zurückgeben. - -```js -assert(palindrome('not a palindrome') === false); -``` - -`palindrome("A man, a plan, a canal. Panama")` sollte `true` zurückgeben. - -```js -assert(palindrome('A man, a plan, a canal. Panama') === true); -``` - -`palindrome("never odd or even")` sollte `true` zurückgeben. - -```js -assert(palindrome('never odd or even') === true); -``` - -`palindrome("nope")` sollte `false` zurückgeben. - -```js -assert(palindrome('nope') === false); -``` - -`palindrome("almostomla")` sollte `false` zurückgeben. - -```js -assert(palindrome('almostomla') === false); -``` - -`palindrome("My age is 0, 0 si ega ym.")` sollte `true` zurückgeben. - -```js -assert(palindrome('My age is 0, 0 si ega ym.') === true); -``` - -`palindrome("1 eye for of 1 eye.")` sollte `false` zurückgeben. - -```js -assert(palindrome('1 eye for of 1 eye.') === false); -``` - -`palindrome("0_0 (: /-\ :) 0-0")` sollte `true` zurückgeben. - -```js -assert(palindrome('0_0 (: /- :) 0-0') === true); -``` - -`palindrome("five|\_/|four")` sollte `false` zurückgeben. - -```js -assert(palindrome('five|_/|four') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function palindrome(str) { - return true; -} - -palindrome("eye"); -``` - -# --solutions-- - -```js -function palindrome(str) { - var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); - var aux = string.split(''); - if (aux.join('') === aux.reverse().join('')){ - return true; - } - - return false; -} -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md deleted file mode 100644 index 89aeb506c4e..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: a7f4d8f2483413a6ce226cac -title: Erstelle einen Konverter für römische Zahlen -challengeType: 5 -forumTopicId: 16044 -dashedName: build-a-roman-numeral-converter ---- - -# --description-- - -Konvertiere die übergebene Zahl in eine römische Zahl. - -| Römische Ziffern | Arabische Ziffern | -| ---------------- | ----------------- | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| C | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -Römische Ziffern sollten in Großbuchstaben übergeben werden. - -# --hints-- - -`convertToRoman(2)` sollte den String `II` zurückgeben. - -```js -assert.deepEqual(convertToRoman(2), 'II'); -``` - -`convertToRoman(3)` sollte den String `III` zurückgeben. - -```js -assert.deepEqual(convertToRoman(3), 'III'); -``` - -`convertToRoman(4)` sollte den String `IV` zurückgeben. - -```js -assert.deepEqual(convertToRoman(4), 'IV'); -``` - -`convertToRoman(5)` sollte den String `V` zurückgeben. - -```js -assert.deepEqual(convertToRoman(5), 'V'); -``` - -`convertToRoman(9)` sollte den String `IX` zurückgeben. - -```js -assert.deepEqual(convertToRoman(9), 'IX'); -``` - -`convertToRoman(12)` sollte den String `XII` zurückgeben. - -```js -assert.deepEqual(convertToRoman(12), 'XII'); -``` - -`convertToRoman(16)` sollte den String `XVI` zurückgeben. - -```js -assert.deepEqual(convertToRoman(16), 'XVI'); -``` - -`convertToRoman(29)` sollte den String `XXIX` zurückgeben. - -```js -assert.deepEqual(convertToRoman(29), 'XXIX'); -``` - -`convertToRoman(44)` sollte den String `XLIV` zurückgeben. - -```js -assert.deepEqual(convertToRoman(44), 'XLIV'); -``` - -`convertToRoman(45)` sollte den String `XLV` zurückgeben. - -```js -assert.deepEqual(convertToRoman(45), 'XLV'); -``` - -`convertToRoman(68)` sollte den String `LXVIII` zurückgeben - -```js -assert.deepEqual(convertToRoman(68), 'LXVIII'); -``` - -`convertToRoman(83)` sollte den String `LXXXIII` zurückgeben - -```js -assert.deepEqual(convertToRoman(83), 'LXXXIII'); -``` - -`convertToRoman(97)` sollte den String `XCVII` zurückgeben - -```js -assert.deepEqual(convertToRoman(97), 'XCVII'); -``` - -`convertToRoman(99)` sollte den String `XCIX` zurückgeben - -```js -assert.deepEqual(convertToRoman(99), 'XCIX'); -``` - -`convertToRoman(400)` sollte den String `CD` zurückgeben - -```js -assert.deepEqual(convertToRoman(400), 'CD'); -``` - -`convertToRoman(500)` sollte den String `D` zurückgeben - -```js -assert.deepEqual(convertToRoman(500), 'D'); -``` - -`convertToRoman(501)` sollte den String `DI` zurückgeben - -```js -assert.deepEqual(convertToRoman(501), 'DI'); -``` - -`convertToRoman(649)` sollte den String `DCXLIX` zurückgeben - -```js -assert.deepEqual(convertToRoman(649), 'DCXLIX'); -``` - -`convertToRoman(798)` sollte den String `DCCXCVIII` zurückgeben - -```js -assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); -``` - -`convertToRoman(891)` sollte den String `DCCCXCI` zurückgeben - -```js -assert.deepEqual(convertToRoman(891), 'DCCCXCI'); -``` - -`convertToRoman(1000)` sollte den String `M` zurückgeben - -```js -assert.deepEqual(convertToRoman(1000), 'M'); -``` - -`convertToRoman(1004)` sollte den String `MIV` zurückgeben - -```js -assert.deepEqual(convertToRoman(1004), 'MIV'); -``` - -`convertToRoman(1006)` sollte den String `MVI` zurückgeben - -```js -assert.deepEqual(convertToRoman(1006), 'MVI'); -``` - -`convertToRoman(1023)` sollte den String `MXXIII` zurückgeben - -```js -assert.deepEqual(convertToRoman(1023), 'MXXIII'); -``` - -`convertToRoman(2014)` sollte den String `MMXIV` zurückgeben - -```js -assert.deepEqual(convertToRoman(2014), 'MMXIV'); -``` - -`convertToRoman(3999)` sollte den String `MMMCMXCIX` zurückgeben - -```js -assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); -``` - -# --seed-- - -## --seed-contents-- - -```js -function convertToRoman(num) { - return num; -} - -convertToRoman(36); -``` - -# --solutions-- - -```js -function convertToRoman(num) { - var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; - var res = []; - ref.forEach(function(p) { - while (num >= p[1]) { - res.push(p[0]); - num -= p[1]; - } - }); - return res.join(''); -} -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md deleted file mode 100644 index 951cd97ab5f..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: aff0395860f5d3034dc0bfc9 -title: Erstelle einen Telefonnummern-Validator -challengeType: 5 -forumTopicId: 16090 -dashedName: build-a-telephone-number-validator ---- - -# --description-- - -Gibt `true` zurück, wenn der übergebene String wie eine gültige US-Telefonnummer aussieht. - -Der Benutzer kann das Formularfeld auf jede beliebige Weise ausfüllen, solange es das Format einer gültigen US-Nummer hat. Es folgen Beispiele für gültige US-Nummern-Formate (siehe Tests unten für weitere Varianten): - -
                                                              555-555-5555
                                                              (555)555-5555
                                                              (555) 555-5555
                                                              555 555 5555
                                                              5555555555
                                                              1 555 555 5555
                                                              - -In dieser Aufgabe wird dir ein String wie `800-692-7753` oder `8oo-six427676;laskdjf` übergeben. Du sollst eine US-Telefonnummer anhand von Kombinationen der oben genannten Formate entweder validieren oder als ungültig ablehnen. Die Vorwahl ist erforderlich. Wird dir ein Ländercode übergeben, musst du bestätigen, dass dieser `1` ist. Gebe `true` zurück, wenn der String eine gültige US-Telefonnummer ist, ansonsten `false`. - -# --hints-- - -`telephoneCheck("555-555-5555")` sollte einen Boolean zurückgeben. - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` sollte `true` zurückgeben. - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` sollte `true` zurückgeben. - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` sollte `true` zurückgeben. - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` sollte `true` zurückgeben. - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` sollte `true` zurückgeben. - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` sollte `true` zurückgeben. - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` sollte `true` zurückgeben. - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` sollte `true` zurückgeben. - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` sollte `false` zurückgeben. - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index 034d69ef3c5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: Schritt 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Du hast deine Variablen mit dem Schlüsselwort `var` deklariert. In modernem JavaScript ist es jedoch die beste Praxis, stattdessen das Schlüsselwort `let` zu verwenden. Dies behebt mehrere ungewöhnliche Verhaltensweisen mit `var`, die die Fehlersuche in deinem Code erschweren können. - -Ändere alle deine `var`-Schlüsselwörter in `let` um. - -# --hints-- - -Du solltest keine `var`-Schlüsselwörter in deinem Code haben. - -```js -assert.notMatch(code, /var/); -``` - -Du solltest mit dem `let`-Schlüsselwort deine `xp`-Variable deklarieren. - -```js -assert.match(code, /let xp/); -``` - -Du solltest mit dem `let`-Schlüsselwort deine `health`-Variable deklarieren. - -```js -assert.match(code, /let health/); -``` - -Du solltest mit dem `let`-Schlüsselwort deine `gold`-Variable deklarieren. - -```js -assert.match(code, /let gold/); -``` - -Du solltest mit dem `let`-Schlüsselwort deine `currentWeapon`-Variable deklarieren. - -```js -assert.match(code, /let currentWeapon/); -``` - -Du solltest die Werte deiner Variablen nicht ändern. - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - - -
                                                              -
                                                              - XP: 0 - Health: 100 - Gold: 50 -
                                                              -
                                                              - - - -
                                                              -
                                                              - Monster Name: - Health: -
                                                              -
                                                              - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                              -
                                                              - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js ---fcc-editable-region-- -var xp = 0; -var health = 100; -var gold = 50; -var currentWeapon = 0; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md deleted file mode 100644 index 9797c9630c4..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 62a8f2bc37675e77d5835235 -title: Schritt 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -JavaScript hat einen bedingten Operator, der ternärer Operator genannt wird. Dies kann als einzeiliger `if-else`-Ausdruck verwendet werden. Die Sytnax ist: `condition ? true : false`. - -Hier ist ein Beispiel für einen `if-else`-Ausdruck, der in einen ternären Ausdruck umgewandelt wurde: - -```js -if (num > 5) { - bigger() -} else { - smaller() -} - -num > 5 ? bigger() : smaller(); -``` - -Ändere deinen neuen `if-else`-Ausdruck in einen ternären Ausdruck. - -# --hints-- - -Du solltest den `if` und `else` aus deinem `else if` Block entfernen. - -```js -const block = attack.toString().split("else if"); -assert.notMatch(block[1], /if/); -assert.notMatch(block[1], /else/); -``` - -Du solltest überprüfen, ob `fighting` gleich `2` ist. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2/); -``` - -Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); -``` - -Mit der ternären Syntax solltest du `defeatMonster` aufrufen, wenn `fighting` nicht gleich `2` ist. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - -
                                                              -
                                                              - XP: 0 - Health: 100 - Gold: 50 -
                                                              -
                                                              - - - -
                                                              -
                                                              - Monster Name: - Health: -
                                                              -
                                                              - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                              -
                                                              - - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js -let xp = 0; -let health = 100; -let gold = 50; -let currentWeapon = 0; -let fighting; -let monsterHealth; -let inventory = ["stick"]; - -const button1 = document.querySelector('#button1'); -const button2 = document.querySelector("#button2"); -const button3 = document.querySelector("#button3"); -const text = document.querySelector("#text"); -const xpText = document.querySelector("#xpText"); -const healthText = document.querySelector("#healthText"); -const goldText = document.querySelector("#goldText"); -const monsterStats = document.querySelector("#monsterStats"); -const monsterName = document.querySelector("#monsterName"); -const monsterHealthText =document.querySelector("#monsterHealth"); -const weapons = [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]; -const monsters = [ - { - name: "slime", - level: 2, - health: 15 - }, - { - name: "fanged beast", - level: 8, - health: 60 - }, - { - name: "dragon", - level: 20, - health: 300 - } -] -const locations = [ - { - name: "town square", - "button text": ["Go to store", "Go to cave", "Fight dragon"], - "button functions": [goStore, goCave, fightDragon], - text: "You are in the town square. You see a sign that says \"Store\"." - }, - { - name: "store", - "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], - "button functions": [buyHealth, buyWeapon, goTown], - text: "You enter the store." - }, - { - name: "cave", - "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], - "button functions": [fightSlime, fightBeast, goTown], - text: "You enter the cave. You see some monsters." - }, - { - name: "fight", - "button text": ["Attack", "Dodge", "Run"], - "button functions": [attack, dodge, goTown], - text: "You are fighting a monster." - }, - { - name: "kill monster", - "button text": ["Go to town square", "Go to town square", "Go to town square"], - "button functions": [goTown, goTown, goTown], - text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' - }, - { - name: "lose", - "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], - "button functions": [restart, restart, restart], - text: "You die. ☠️" - } -]; - -// initialize buttons -button1.onclick = goStore; -button2.onclick = goCave; -button3.onclick = fightDragon; - -function update(location) { - monsterStats.style.display = "none"; - button1.innerText = location["button text"][0]; - button2.innerText = location["button text"][1]; - button3.innerText = location["button text"][2]; - button1.onclick = location["button functions"][0]; - button2.onclick = location["button functions"][1]; - button3.onclick = location["button functions"][2]; - text.innerText = location.text; -} - -function goTown() { - update(locations[0]); -} - -function goStore() { - update(locations[1]); -} - -function goCave() { - update(locations[2]); -} - -function buyHealth() { - if (gold >= 10) { - gold -= 10; - health += 10; - goldText.innerText = gold; - healthText.innerText = health; - } else { - text.innerText = "You do not have enough gold to buy health."; - } -} - -function buyWeapon() { - if (currentWeapon < weapons.length - 1) { - if (gold >= 30) { - gold -= 30; - currentWeapon++; - goldText.innerText = gold; - let newWeapon = weapons[currentWeapon].name; - text.innerText = "You now have a " + newWeapon + "."; - inventory.push(newWeapon); - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "You do not have enough gold to buy a weapon."; - } - } else { - text.innerText = "You already have the most powerful weapon!"; - button2.innerText = "Sell weapon for 15 gold"; - button2.onclick = sellWeapon; - } -} - -function sellWeapon() { - if (inventory.length > 1) { - gold += 15; - goldText.innerText = gold; - let currentWeapon = inventory.shift(); - text.innerText = "You sold a " + currentWeapon + "."; - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "Don't sell your only weapon!"; - } -} - -function fightSlime() { - fighting = 0; - goFight(); -} - -function fightBeast() { - fighting = 1; - goFight(); -} - -function fightDragon() { - fighting = 2; - goFight(); -} - -function goFight() { - update(locations[3]); - monsterHealth = monsters[fighting].health; - monsterStats.style.display = "block"; - monsterName.innerText = monsters[fighting].name; - monsterHealthText.innerText = monsterHealth; -} - ---fcc-editable-region-- -function attack() { - text.innerText = "The " + monsters[fighting].name + " attacks."; - text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; - health -= monsters[fighting].level; - monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; - healthText.innerText = health; - monsterHealthText.innerText = monsterHealth; - if (health <= 0) { - lose(); - } else if (monsterHealth <= 0) { - if (fighting === 2) { - winGame(); - } else { - defeatMonster(); - } - } -} ---fcc-editable-region-- - -function dodge() { - text.innerText = "You dodge the attack from the " + monsters[fighting].name; -} - -function defeatMonster() { - gold += Math.floor(monsters[fighting].level * 6.7); - xp += monsters[fighting].level; - goldText.innerText = gold; - xpText.innerText = xp; - update(locations[4]); -} - -function lose() { - update(locations[5]); -} - -function restart() { - xp = 0; - health = 100; - gold = 50; - currentWeapon = 0; - inventory = ["stick"]; - goldText.innerText = gold; - healthText.innerText = health; - xpText.innerText = xp; - goTown(); -} -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md new file mode 100644 index 00000000000..d178d5a5a2b --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -0,0 +1,682 @@ +--- +id: 659b0093d7db5a1a1122b7bd +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +```js +const animals = ["dog", "cat", "horse"]; +animals.indexOf("cat") // 1 +``` + +Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`. + +# --hints-- + +You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/) +``` + +You should pass in `userData.currentSong` into the `indexOf()` method. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +

                                                              freeCodeCamp

                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              + song cover art +
                                                              +
                                                              +
                                                              +

                                                              +

                                                              +
                                                              +
                                                              + + + + + +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +

                                                              Playlist

                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                              +
                                                                +
                                                                +
                                                                + + + +``` + +```css +:root { + /* colors */ + --primary-color: #dfdfe2; + --secondary-color: #ffffff; + --app-background-color: #4d4d62; + --background-color: #1b1b32; + --foreground-color: #3b3b4f; + --highlight-color: #f1be32; + + /* font sizes */ + --root-font-size: 16px; + font-size: var(--root-font-size); + + /* font-families */ + --font-headline: "Roboto Mono", monospace; + --font-family: "Lato", sans-serif; +} + +*, +*::after, +*::before { + box-sizing: border-box; +} + +body { + background-color: var(--app-background-color); + color: var(--primary-color); + font-family: var(--font-family); +} + +h1 { + font-size: 1.125rem; + line-height: 1.6; +} + +h2 { + font-size: var(--root-font-size); +} + +ul { + margin: 0; +} + +.container { + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; +} + +.player, +.playlist { + width: 450px; + background-color: var(--background-color); + border: 3px solid var(--foreground-color); +} + +.player { + height: 260px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +.player-bar, +.playlist-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + width: 100%; + height: 30px; + background-color: var(--foreground-color); +} + +.parallel-lines { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + padding: 0 5px; +} + +.parallel-lines > div { + height: 2px; + width: 100%; + min-width: 75px; + background-color: var(--highlight-color); +} + +.fcc-title, +.playlist-title { + color: var(--secondary-color); + margin: 0 10px; + font-family: var(--font-headline); +} + +.player-content { + display: flex; + background-color: var(--foreground-color); + width: 430px; + height: 200px; + column-gap: 13px; + align-items: center; + justify-content: center; +} + +#player-album-art { + background-color: var(--secondary-color); + border: 6px solid var(--background-color); +} + +#player-album-art img { + width: 150px; + display: block; +} + +.player-display { + display: flex; + flex-direction: column; + row-gap: 20px; + padding: 14px; + background-color: var(--background-color); + height: 153px; + width: 226px; +} + +.player-display-song-artist { + height: 80px; +} + +.player-buttons svg { + fill: var(--primary-color); +} + +.playing > svg { + fill: var(--highlight-color); +} + +.player-buttons { + display: flex; + justify-content: space-around; +} + +button { + background: transparent; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: var(--root-font-size); + outline-color: var(--highlight-color); + text-align: center; +} + +.playlist-song { + outline-color: var(--highlight-color); +} + +.playlist li:not(:last-child) { + border-bottom: 1px solid var(--background-color); +} + +button:focus, +.playlist-song:focus { + outline-style: dashed; + outline-width: 2px; +} + +/* Playlist */ +.playlist { + height: auto; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +#playlist-songs { + width: 430px; + height: 100%; + background-color: var(--foreground-color); + display: flex; + flex-direction: column; + row-gap: 8px; + padding: 8px 9px; + visibility: visible; + justify-content: start; + list-style: none; +} + +.playlist-song { + display: flex; + height: 55px; + justify-content: space-between; + align-items: center; + padding: 5px; +} + +[aria-current="true"] { + background-color: var(--background-color); +} + +[aria-current="true"] p { + color: var(--highlight-color); +} + +.playlist-song-info { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + column-gap: 7px; + padding: 5px 0; + font-family: var(--font-family); +} + +#player-song-title, +#player-song-artist { + margin: 0; +} + +#player-song-artist { + color: var(--highlight-color); + font-size: 0.75rem; +} + +#player-song-title { + font-size: 1.125rem; +} + +.playlist-song-title { + font-size: 0.85rem; + width: 241px; + text-align: left; +} + +.playlist-song-artist { + font-size: 0.725rem; + width: 80px; +} + +.playlist-song-duration { + font-size: 0.725rem; + margin: auto; + font-family: var(--font-headline); + width: 30px; +} + +.playlist-song-delete { + padding: 0; + width: 20px; + height: 20px; +} + +.playlist-song-delete, +.playlist-song-delete { + fill: var(--foreground-color); +} + +.playlist-song-delete:hover circle, +.playlist-song-delete:focus circle { + fill: #ff0000; +} + +@media (max-width: 700px) { + .player, + .playlist { + width: 300px; + } + + .player { + height: 340px; + } + + #playlist-songs { + height: 280px; + padding: 5px 6px; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-color: var(--background-color) var(--secondary-color); + scrollbar-width: thin; + } + + #playlist-songs::-webkit-scrollbar { + width: 5px; + } + + #playlist-songs::-webkit-scrollbar-track { + background: var(--background-color); + } + + #playlist-songs::-webkit-scrollbar-thumb { + background: var(--secondary-color); + } + + h1 { + font-size: 0.813rem; + } + + h2 { + font-size: 0.75rem; + } + + .player-bar, + .playlist-bar, + .player-content, + #playlist-songs { + width: 280px; + } + + .playlist-song { + justify-content: space-between; + } + + .playlist-song-title { + width: 140px; + } + + .playlist-song-artist { + width: 40px; + } + + .playlist-song-duration > button { + padding: 0; + } + + .player-content { + display: inline; + position: relative; + justify-items: center; + height: 100%; + } + + #player-album-art { + z-index: -100; + height: 280px; + box-shadow: none; + background: #000; + } + + #player-album-art img { + width: 100%; + opacity: 0.6; + } + + .player-display-song-artist { + padding: 0 10px; + } + + .player-display-song-artist > p { + white-space: pre-wrap; + } + + .player-display { + position: absolute; + width: 100%; + z-index: 1000; + background-color: transparent; + top: 0; + height: 280px; + justify-content: space-between; + text-align: center; + } +} +``` + +```js +const playlistSongs = document.getElementById("playlist-songs"); +const playButton = document.getElementById("play"); +const pauseButton = document.getElementById("pause"); +const nextButton = document.getElementById("next"); +const previousButton = document.getElementById("previous"); +const shuffleButton = document.getElementById("shuffle"); + +const allSongs = [ + { + id: 0, + title: "Scratching The Surface", + artist: "Quincy Larson", + duration: "4:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3", + }, + { + id: 1, + title: "Can't Stay Down", + artist: "Quincy Larson", + duration: "4:15", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3", + }, + { + id: 2, + title: "Still Learning", + artist: "Quincy Larson", + duration: "3:51", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3", + }, + { + id: 3, + title: "Cruising for a Musing", + artist: "Quincy Larson", + duration: "3:34", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3", + }, + { + id: 4, + title: "Never Not Favored", + artist: "Quincy Larson", + duration: "3:35", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3", + }, + { + id: 5, + title: "From the Ground Up", + artist: "Quincy Larson", + duration: "3:12", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3", + }, + { + id: 6, + title: "Walking on Air", + artist: "Quincy Larson", + duration: "3:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3", + }, + { + id: 7, + title: "Can't Stop Me. Can't Even Slow Me Down.", + artist: "Quincy Larson", + duration: "3:52", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3", + }, + { + id: 8, + title: "The Surest Way Out is Through", + artist: "Quincy Larson", + duration: "3:10", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3", + }, + { + id: 9, + title: "Chasing That Feeling", + artist: "Quincy Larson", + duration: "2:43", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3", + }, +]; + +const audio = new Audio(); +let userData = { + songs: [...allSongs], + currentSong: null, + songCurrentTime: 0, +}; + +const playSong = (id) => { + const song = userData?.songs.find((song) => song.id === id); + audio.src = song.src; + audio.title = song.title; + + if (userData?.currentSong === null || userData?.currentSong.id !== song.id) { + audio.currentTime = 0; + } else { + audio.currentTime = userData.songCurrentTime; + } + userData.currentSong = song; + playButton.classList.add("playing"); + + audio.play(); +}; + +const pauseSong = () => { + userData.songCurrentTime = audio.currentTime; + + playButton.classList.remove("playing"); + audio.pause(); +}; + +const renderSongs = (array) => { + const songsHTML = array + .map((song)=> { + return ` +
                                                              • + + +
                                                                • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +const getCurrentSongIndex = () => { + +} +--fcc-editable-region-- + +playButton.addEventListener("click", () => { + if (userData?.currentSong === null) { + playSong(userData?.songs[0].id); + } else { + playSong(userData?.currentSong.id); + } +}); + +pauseButton.addEventListener("click", pauseSong); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md deleted file mode 100644 index 1d06b65e707..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 63ec14d1c216aa063f0be4af -title: Schritt 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive. - -Um zu beginnen, musst du einige deiner Elemente aus dem DOM holen. Beginne mit der Verwendung von `document.getElementById()` um die `#cart-container`-, `#products-container`-, und `#dessert-card-container`-Elemente zu erhalten. Speichere sie in Variablen namens `cartContainer`, `productsContainer` und `dessertCards`. - -Da sich diese nicht ändern werden, denke daran, `const` zu verwenden, um sie zu deklarieren. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -Du solltest das `#cart-container`-Element einer Variablen namens `cartContainer` zuweisen. Denke daran, `const` zu verwenden, um die Variable zu deklarieren. - -```js -assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#products-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -Du solltest das `#products-container`-Element einer Variablen namens `productsContainer` zuweisen. Denke daran, `const` zu verwenden, um die Variable zu deklarieren. - -```js -assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#dessert-card-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -Du solltest das `#dessert-card-container`-Element einer Variablen namens `dessertCards` zuweisen. Denke daran, `const` zu verwenden, um die Variable zu deklarieren. - -```js -assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md deleted file mode 100644 index d8ced4b2cd1..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 63ec19978a066607e23439f8 -title: Schritt 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Now you need to get your two buttons. Weiter geht es mit den `#cart-btn`- und `#clear-cart-btn`-Elementen. Speichere sie in Variablen namens `cartBtn` und `clearCartBtn`. - -# --hints-- - -Du solltest `document.getElementById()` verwenden, um das `#cart-btn`-Element zu erhalten. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -Du solltest das `#cart-btn`-Element einer Variablen namens `cartBtn` zuweisen. Denke daran, `const` zu verwenden, um die Variable zu deklarieren. - -```js -assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#clear-cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -Du solltest das `#clear-cart-btn`-Element einer Variablen namens `clearCartBtn` zuweisen. Denke daran, `const` zu verwenden, um die Variable zu deklarieren. - -```js -assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md deleted file mode 100644 index 2c612b82e8d..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 63ec1a16f930b108b8a76806 -title: Schritt 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Als Nächstes musst du deine Gesamtbeträge ermitteln. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Speichere sie in den Variablen namens `totalNumberOfItems`, `cartSubTotal`, `cartTaxes` und `cartTotal`. - -# --hints-- - -Du solltest `document.getElementById()` verwenden, um das `#total-items`-Element zu erhalten. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -Du solltest das `#total-items`-Element einer Variablen namens `totalNumberOfItems` zuweisen. Denke daran, `const` zu verwenden, um die Variable zu deklarieren. - -```js -assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -Du solltest `document.getElementById()` verwenden, um das `#subtotal`-Element zu erhalten. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -Du solltest das `#subtotal`-Element einer Variablen namens `cartSubTotal` zuweisen. Denke daran, `const` zu verwenden, um die Variable zu deklarieren. - -```js -assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -Du solltest `document.getElementById()` verwenden, um das `#taxes`-Element zu erhalten. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -Du solltest das `#taxes`-Element einer Variablen namens `cartTaxes` zuweisen. Denke daran, `const` zu verwenden, um die Variable zu deklarieren. - -```js -assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -Du solltest `document.getElementById()` verwenden, um das `#total`-Element zu erhalten. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -Du solltest das `#total`-Element einer Variablen namens `cartTotal` zuweisen. Denke daran, `const` zu verwenden, um die Variable zu deklarieren. - -```js -assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md deleted file mode 100644 index 859155f8373..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 63ec1bbf5584390a7d08d41f -title: Schritt 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Das letzte Element, das abgerufen wird, ist das `#show-hide-cart`-Element. Speichere dieses dann in einer Variablen namens `showHideCartSpan`. - -Then, use `let` to declare a variable named `isCartShowing` and set it to `false`. - -# --hints-- - -Du solltest `document.getElementById()` verwenden, um das `#show-hide-cart`-Element zu erhalten. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -Du solltest das `#show-hide-cart`-Element einer Variablen namens `showHideCartSpan` zuweisen. Denke daran, `const` zu verwenden, um die Variable zu deklarieren. - -```js -assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -Du solltest `let` verwenden, um eine Variable mit dem Namen `isCartShowing` zu deklarieren. - -```js -assert.match(code, /let\s+isCartShowing/); -``` - -Du solltest die `isCartShowing`-Variable auf `false` setzen. - -```js -assert.match(code, /let\s+isCartShowing\s*=\s*false/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md deleted file mode 100644 index a65e38fe769..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 63ec1cb59f2a4c0be5b6dfa0 -title: Schritt 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Ein Einkaufswagen erfüllt ohne Produkte kaum einen Zweck. Deklariere die `products`-Variable und setze sie auf ein leeres Array. Die Verwendung eines Arrays ermöglicht es dir, mehrere Produkte zu speichern. - -# --hints-- - -You should declare a `products` variable with `const`. - -```js -assert.match(code, /const\s+products/); -``` - -Du solltest die `products`-Variable auf ein leeres Array setzen. - -```js -assert.match(code, /const\s+products\s*=\s*\[\s*\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md deleted file mode 100644 index 5e50d22e364..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 63ec20a06fff670d37befbd9 -title: Schritt 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Jetzt musst du anfangen, Produkte hinzuzufügen. Bevor du das machst, musst du dir Gedanken über die Struktur deiner Produktdaten machen. A product will need a unique identifier to distinguish it from other products, a price so people know how much it costs, and a name so people know what they are buying. Außerdem solltest du zu jedem Produkt eine Kategorie hinzufügen. - -Füge ein Objekt zu deinem `products`-Array hinzu. Gib diesem Objekt eine `id`-Eigenschaft auf die Zahl `1` gesetzt, eine `name`-Eigenschaft auf `Vanilla Cupcakes (6 Pack)` gesetzt, eine `price`-Eigenschaft auf die Zahl `12.99` und eine `category`-Eigenschaft auf `Cupcake` gesetzt. - -# --hints-- - -Dein Produkte-Array sollte einen Wert haben. - -```js -assert.equal(products.length, 1); -``` - -Dein Produkte-Array sollte ein Objekt als ersten Wert haben. - -```js -assert.isObject(products[0]); -``` - -Dein Produkte-Array sollte ein Objekt mit einer `id`-Eigenschaft haben, die auf die Zahl `1` gesetzt ist. - -```js -assert.equal(products[0].id, 1); -``` - -Dein Produkte-Array sollte ein Objekt mit der `name`-Eigenschaft haben, die auf `Vanilla Cupcakes (6 Pack)` gesetzt ist. - -```js -assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)'); -``` - -Dein Produkte-Array sollte ein Objekt mit einer `price`-Eigenschaft haben, die auf die Zahl `12.99` gesetzt ist. - -```js -assert.equal(products[0].price, 12.99); -``` - -Dein Produkte-Array sollte ein Objekt mit der `category`-Eigenschaft haben, die auf `Cupcake` gesetzt ist. - -```js -assert.equal(products[0].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md deleted file mode 100644 index 722bb23e4a6..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md +++ /dev/null @@ -1,472 +0,0 @@ ---- -id: 63ec3287b182ec0efe8a3135 -title: Schritt 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up. - -| `name` | `price` | `category` | -| ------------------------------ | ------- | ----------- | -| `French Macaroon` | `3.99` | `Macaroon` | -| `Pumpkin Cupcake` | `3.99` | `Cupcake` | -| `Chocolate Cupcake` | `5.99` | `Cupcake` | -| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` | -| `Strawberry Ice Cream` | `2.99` | `Ice Cream` | -| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` | -| `Strawberry Pretzel` | `4.99` | `Pretzel` | -| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` | -| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` | -| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` | -| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` | - -# --hints-- - -Dein zweites Objekt im `products`-Array sollte eine `id`-Eigenschaft haben, die auf die Zahl `2` gesetzt ist. - -```js -assert.equal(products[1].id, 2); -``` - -Dein zweites Objekt im `products`-Array sollte eine `name`-Eigenschaft haben, die auf `French Macaroon` gesetzt ist. - -```js -assert.equal(products[1].name, 'French Macaroon'); -``` - -Dein zweites Objekt im `products`-Array sollte eine `price`-Eigenschaft haben, die auf die Zahl `3.99` gesetzt ist. - -```js -assert.equal(products[1].price, 3.99); -``` - -Dein zweites Objekt im `products`-Array sollte eine `category`-Eigenschaft haben, die auf `Macaroon` gesetzt ist. - -```js -assert.equal(products[1].category, 'Macaroon'); -``` - -Dein drittes Objekt im `products`-Array sollte eine `id`-Eigenschaft haben, die auf die Zahl `3` gesetzt ist. - -```js -assert.equal(products[2].id, 3); -``` - -Dein drittes Objekt im `products`-Array sollte eine `name`-Eigenschaft haben, die auf `Pumpkin Cupcake` gesetzt ist. - -```js -assert.equal(products[2].name, 'Pumpkin Cupcake'); -``` - -Dein drittes Objekt im `products`-Array sollte eine `price`-Eigenschaft haben, die auf die Zahl `3.99` gesetzt ist. - -```js -assert.equal(products[2].price, 3.99); -``` - -Dein drittes Objekt im `products`-Array sollte eine `category`-Eigenschaft haben, die auf `Cupcake` gesetzt ist. - -```js -assert.equal(products[2].category, 'Cupcake'); -``` - -Dein viertes Objekt im `products`-Array sollte eine `id`-Eigenschaft haben, die auf die Zahl `4` gesetzt ist. - -```js -assert.equal(products[3].id, 4); -``` - -Dein viertes Objekt im `products`-Array sollte eine `name`-Eigenschaft haben, die auf `Chocolate Cupcake` gesetzt ist. - -```js -assert.equal(products[3].name, 'Chocolate Cupcake'); -``` - -Dein viertes Objekt im `products`-Array sollte eine `price`-Eigenschaft haben, die auf die Zahl `5.99` gesetzt ist. - -```js -assert.equal(products[3].price, 5.99); -``` - -Dein viertes Objekt im `products`-Array sollte eine `category`-Eigenschaft haben, die auf `Cupcake` gesetzt ist. - -```js -assert.equal(products[3].category, 'Cupcake'); -``` - -Dein fünftes Objekt im `products`-Array sollte eine `id`-Eigenschaft haben, die auf die Zahl `5` gesetzt ist. - -```js -assert.equal(products[4].id, 5); -``` - -Dein fünftes Objekt im `products`-Array sollte eine `name`-Eigenschaft haben, die auf `Chocolate Pretzels (4 Pack)` gesetzt ist. - -```js -assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)'); -``` - -Dein fünftes Objekt im `products`-Array sollte eine `price`-Eigenschaft haben, die auf die Zahl `10.99` gesetzt ist. - -```js -assert.equal(products[4].price, 10.99); -``` - -Dein fünftes Objekt im `products`-Array sollte eine `category`-Eigenschaft haben, die auf `Pretzel` gesetzt ist. - -```js -assert.equal(products[4].category, 'Pretzel'); -``` - -Dein sechstes Objekt im `products`-Array sollte eine `id`-Eigenschaft haben, die auf die Zahl `6` gesetzt ist. - -```js -assert.equal(products[5].id, 6); -``` - -Dein sechstes Objekt im `products`-Array sollte eine `name`-Eigenschaft haben, die auf `Strawberry Ice Cream` gesetzt ist. - -```js -assert.equal(products[5].name, 'Strawberry Ice Cream'); -``` - -Dein sechstes Objekt im `products`-Array sollte eine `price`-Eigenschaft haben, die auf die Zahl `2.99` gesetzt ist. - -```js -assert.equal(products[5].price, 2.99); -``` - -Dein sechstes Objekt im `products`-Array sollte eine `category`-Eigenschaft haben, die auf `Ice Cream` gesetzt ist. - -```js -assert.equal(products[5].category, 'Ice Cream'); -``` - -Dein siebtes Objekt im `products`-Array sollte eine `id`-Eigenschaft haben, die auf die Zahl `7` gesetzt ist. - -```js -assert.equal(products[6].id, 7); -``` - -Dein siebtes Objekt im `products`-Array sollte eine `name`-Eigenschaft haben, die auf `Chocolate Macaroons (4 Pack)` gesetzt ist. - -```js -assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)'); -``` - -Dein siebtes Objekt im `products`-Array sollte eine `price`-Eigenschaft haben, die auf die Zahl `9.99` gesetzt ist. - -```js -assert.equal(products[6].price, 9.99); -``` - -Dein siebtes Objekt im `products`-Array sollte eine `category`-Eigenschaft haben, die auf `Macaroon` gesetzt ist. - -```js -assert.equal(products[6].category, 'Macaroon'); -``` - -Dein achtes Objekt im `products`-Array sollte eine `id`-Eigenschaft haben, die auf die Zahl `8` gesetzt ist. - -```js -assert.equal(products[7].id, 8); -``` - -Dein achtes Objekt im `products`-Array sollte eine `name`-Eigenschaft haben, die auf `Strawberry Pretzel` gesetzt ist. - -```js -assert.equal(products[7].name, 'Strawberry Pretzel'); -``` - -Dein achtes Objekt im `products`-Array sollte eine `price`-Eigenschaft haben, die auf die Zahl `4.99` gesetzt ist. - -```js -assert.equal(products[7].price, 4.99); -``` - -Dein achtes Objekt im `products`-Array sollte eine `category`-Eigenschaft haben, die auf `Pretzel` gesetzt ist. - -```js -assert.equal(products[7].category, 'Pretzel'); -``` - -Dein neuntes Objekt im `products`-Array sollte eine `id`-Eigenschaft haben, die auf die Zahl `9` gesetzt ist. - -```js -assert.equal(products[8].id, 9); -``` - -Dein neuntes Objekt im `products`-Array sollte eine `name`-Eigenschaft haben, die auf `Butter Pecan Ice Cream` gesetzt ist. - -```js -assert.equal(products[8].name, 'Butter Pecan Ice Cream'); -``` - -Dein neuntes Objekt im `products`-Array sollte eine `price`-Eigenschaft haben, die auf die Zahl `2.99` gesetzt ist. - -```js -assert.equal(products[8].price, 2.99); -``` - -Dein neuntes Objekt im `products`-Array sollte eine `category`-Eigenschaft haben, die auf `Ice Cream` gesetzt ist. - -```js -assert.equal(products[8].category, 'Ice Cream'); -``` - -Dein zehntes Objekt im `products`-Array sollte eine `id`-Eigenschaft haben, die auf die Zahl `10` gesetzt ist. - -```js -assert.equal(products[9].id, 10); -``` - -Dein zehntes Objekt im `products`-Array sollte eine `name`-Eigenschaft haben, die auf `Rocky Road Ice Cream` gesetzt ist. - -```js -assert.equal(products[9].name, 'Rocky Road Ice Cream'); -``` - -Dein zehntes Objekt im `products`-Array sollte eine `price`-Eigenschaft haben, die auf die Zahl `2.99` gesetzt ist. - -```js -assert.equal(products[9].price, 2.99); -``` - -Dein zehntes Objekt im `products`-Array sollte eine `category`-Eigenschaft haben, die auf `Ice Cream` gesetzt ist. - -```js -assert.equal(products[9].category, 'Ice Cream'); -``` - -Dein elftes Objekt im `products`-Array sollte eine `id`-Eigenschaft haben, die auf die Zahl `11` gesetzt ist. - -```js -assert.equal(products[10].id, 11); -``` - -Dein elftes Objekt im`products`-Array sollte eine `name`-Eigenschaft haben, die auf `Vanilla Macaroons (5 Pack)` gesetzt ist. - -```js -assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)'); -``` - -Dein elftes Objekt im `products`-Array sollte eine `price`-Eigenschaft haben, die auf die Zahl `11.99` gesetzt ist. - -```js -assert.equal(products[10].price, 11.99); -``` - -Dein elftes Objekt im `products`-Array sollte eine `category`-Eigenschaft haben, die auf `Macaroon` gesetzt ist. - -```js -assert.equal(products[10].category, 'Macaroon'); -``` - -Dein zwölftes Objekt im `products`-Array sollte eine `id`-Eigenschaft haben, die auf die Zahl `12` gesetzt ist. - -```js -assert.equal(products[11].id, 12); -``` - -Dein zwölftes Objekt im `products`-Array sollte eine `name`-Eigenschaft haben, die auf `Lemon Cupcakes (4 Pack)` gesetzt ist. - -```js -assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)'); -``` - -Dein zwölftes Objekt im `products`-Array sollte eine `price`-Eigenschaft haben, die auf die Zahl `12.99` gesetzt ist. - -```js -assert.equal(products[11].price, 12.99); -``` - -Dein zwöfltes Objekt im `products`-Array sollte eine `category`-Eigenschaft haben, die auf `Cupcake` gesetzt ist. - -```js -assert.equal(products[11].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md deleted file mode 100644 index d2b2a413327..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 63ec3427fc3e9214c9ed2a14 -title: Schritt 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Nun, da du deine Produktliste hast, kannst du JavaScript verwenden, um sie in den HTML-Code einzufügen. Mit diesem Ansatz wird der HTML-Code automatisch angepasst, wenn du dich entscheidest, weitere Produkte hinzuzufügen. - -Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function. - -# --hints-- - -Du solltest die `.forEach`-Methode deines `products`-Arrays aufrufen. - -```js -assert.match(code, /products\.forEach\(/); -``` - -Du solltest eine Arrow-Syntax verwenden, um eine leere Callback-Funktion zu erstellen. - -```js -assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/) -``` - -Du solltest deine leere Callback-Funktion an die `.forEach`-Methode übergeben. - -```js -assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md deleted file mode 100644 index 21c2cf5ee55..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 63ec36f6133df7160be3ec66 -title: Schritt 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Denke daran, dass du die Destrukturierung verwenden kannst, um mehrere Werte aus einem Array oder Objekt in einer einzigen Anweisung zu extrahieren. - -Für den ersten Parameter deiner Callback-Funktion destrukturierst du die `name`-, `id`-, `price`- und `category`-Eigenschaften aus dem übergebenen Objekt. - -# --hints-- - -Du solltest Destrukturierung verwenden, um die `name`-, `id`-, `price`- und die `category`-Parameter zu deklarieren. In diesem Test kommt es auf die Reihenfolge an. - -```js -assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/); -``` - -Deine Destrukturierung sollte der erste Parameter der Callback-Funktion sein. - -```js -assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - () => {} -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md deleted file mode 100644 index 0eaa83d0610..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 63ec47b454495519739486a7 -title: Schritt 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Du musst die verfügbaren Produkte in deinem HTML anzeigen. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable. - -# --hints-- - -Du solltest die `innerHTML`-Eigenschaft der `dessertCards`-Variablen verwenden. - -```js -assert.match(code, /dessertCards\.innerHTML/); -``` - -You should use the addition assignment operator on the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/); -``` - -You should add an empty template literal string to the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md deleted file mode 100644 index 8b6d5f30d65..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 63ee5d38a5d29d0696f8d820 -title: Schritt 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -In your template literal, create a `div` element with a class of `dessert-card`. In diesem `div` erstellst du ein `h2`-Element und gibst ihm den Text der `name`-Variablen. - -# --hints-- - -You should create a `div` element. - -```js -assert.isAtLeast(document.querySelectorAll('div')?.length, 12); -``` - -Dein `div`-Element sollte eine Klasse von `dessert-card` haben. - -```js -assert.equal(document.querySelectorAll('.dessert-card')?.length, 12); -``` - -You should create an `h2` element. - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.length, 12); -``` - -Your `h2` element should have the text of the `name` variable. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)'); -``` - -Dein `h2`-Element sollte sich innerhalb des `div`-Elements befinden. - -```js -assert.equal(document.querySelectorAll('div h2')?.length, 12); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` - - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md deleted file mode 100644 index e50d1730941..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63ee5d8f9e7168076e932fe2 -title: Schritt 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -After your `h2` element, create two `p` elements. Gib dem Ersten eine `class` von `dessert-price` und den Text der `price`-Variablen mit einem vorangestellten Dollarzeichen. Give the second a `class` of `product-category`, and the text `Category:` followed by the value of the `category` variable. - -# --hints-- - -You should create two `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card')?.children.length, 3); -assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2) -``` - -Dein `p`-Element sollte nach deinem `h2`-Element stehen. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2'); -assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P'); -assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P'); -``` - -Dein erstes `p`-Element sollte eine `class` auf `dessert-price` gesetzt haben. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price'); -``` - -Dein erstes `p`-Element sollte den Text der `price`-Variablen mit einem vorangestellten Dollarzeichen enthalten. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99'); -``` - -Dein zweites `p`-Element sollte die `class` `product-category` haben. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category'); -``` - -Dein zweites `p`-Element sollte den Text `Category:` enthalten, gefolgt von dem Wert der `category`-Variable. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                - -
                                                                - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md deleted file mode 100644 index 72f86ed35ef..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 63ee5e0f08e82208364c4128 -title: Schritt 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Abschließend erstellst du nach deinen `p`-Elementen ein `button`-Element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `Add to cart` for the text. - -# --hints-- - -You should create a `button` element. - -```js -assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12); -``` - -Your `button` element should come after your `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P'); -assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling); -``` - -Dein `-button`-Element sollte eine `id` auf den Wert der `id`-Variable gesetzt haben. - -```js -assert.equal(document.querySelector('.dessert-card button')?.id, '1'); -``` - -Dein `button`-Element sollte die `class` `btn add-to-cart-btn` haben. - -```js -assert.include(document.querySelector('.dessert-card button')?.className, 'btn'); -assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn'); -``` - -Your `button` element should have the text `Add to cart`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md deleted file mode 100644 index 08664c4366a..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 63ee5ea8be892e0955ab346c -title: Schritt 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -You are already familiar with an HTML `class`, but JavaScript also has a class. In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods. - -Das `class`-Schlüsselwort wird verwendet, um eine Klasse zu deklarieren. Hier ist ein Beispiel für die Deklaration einer `Computer`-Klasse: - -```js -class Computer {}; -``` - -Deklariere eine `ShoppingCart`-Klasse. - -# --hints-- - -You should declare a `ShoppingCart` variable. - -```js -assert.match(code, /ShoppingCart/); -``` - -You should use the `class` keyword to declare a `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*/); -``` - -Your `ShoppingCart` class should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md deleted file mode 100644 index 5e18bede669..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 63ee5fc113bcb20a5db9214b -title: Schritt 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Klassen haben eine besondere `constructor`-Methode, die aufgerufen wird, wenn eine neue Instanz der Klasse erstellt wird. The `constructor` method is a great place to initialize properties of the class. Hier ist ein Beispiel für eine Klasse mit einer `constructor`-Methode: - -```js -class Computer { - constructor() { - } -} -``` - -Füge eine leere `constructor`-Methode zur `ShoppingCart`-Klasse hinzu. - -# --hints-- - -Du solltest eune `constructor`-Methode zu der `ShoppingCart`-Klasse hinzufügen. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/) -``` - -Your `constructor` method should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md deleted file mode 100644 index f3fb106faaf..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 63ee611d478dca0b77f6a393 -title: Schritt 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Das `this`-Schlüsselwort in JavaScript wird verwendet, um auf das aktuelle Objekt zu verweisen. Depending on where `this` is used, what it references changes. In the case of a class, it refers to the instance of the object being constructed. You can use the `this` keyword to set the properties of the object being instantiated. Here is an example: - -```js -class Computer { - constructor() { - this.ram = 16; - } -} -``` - -Verwende in deinem Konstruktor das `this`-Schlüsselwort, um die `items`-Eigenschaft auf ein leeres Array zu setzen. Setze ebenfalls die `total`-Eigenschaft auf `0` und die `taxRate`-Eigenschaft auf `8.25`. - -# --hints-- - -Du solltest das `this`-Schlüsselwort verwenden, um die `items`-Eigenschaft deiner Klasse auf ein leeres Array zu setzen. - -```js -assert.match(code, /this\.items/); -const cart = new ShoppingCart(); -assert.isArray(cart.items); -assert.isEmpty(cart.items); -``` - -You should use the `this` keyword to set the `total` property of your class to `0`. - -```js -assert.match(code, /this\.total/); -const cart = new ShoppingCart(); -assert.equal(cart.total, 0); -``` - -You should use the `this` keyword to set the `taxRate` property of your class to `8.25`. - -```js -assert.match(code, /this\.taxRate/); -const cart = new ShoppingCart(); -assert.equal(cart.taxRate, 8.25); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - - } -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md deleted file mode 100644 index c542b5df202..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 63ee7c664f9b65137d925c8a -title: Schritt 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Your `ShoppingCart` class needs the ability to add items. Erstelle eine leere `addItem`-Methode, die zwei Parameter benötigt: `id` und `products`. So könnte die Erstellung einer Methode aussehen: - -```js -class Computer { - constructor() { - this.ram = 16; - } - - addRam(amount) { - this.ram += amount; - } -} -``` - -Der erste Parameter, `id`, ist die `id` des Produkts, das der Nutzer in seinen Einkaufswagen gelegt hat. Der zweite Parameter, `products`, ist ein Array von Produktobjekten. By using a parameter instead of directly referencing your existing `products` array, this method will be more flexible if you wanted to add additional product lists in the future. - -# --hints-- - -Your `ShoppingCart` class should have an `addItem` method. - -```js -const cart = new ShoppingCart(); -assert.isFunction(cart.addItem); -``` - -Your `addItem` method should take two parameters: `id` and `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/); -``` - -Your `addItem` method should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md deleted file mode 100644 index 63ab5a56499..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 63eea5cea403a81a68ae493c -title: Schritt 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Du musst das Produkt finden, das der Nutzer in den Einkaufswagen legt. Remember that arrays have a `.find()` method. Deklariere in deiner `addItem`-Funktion eine `product`-Variable und weise ihr den Wert des Aufrufs der `.find()`-Methode für das `products`-Array zu. - -For the callback to `.find()`, pass a function that takes a single parameter `item`, and returns whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -# --hints-- - -You should declare a `product` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=/); -``` - -Du solltest die `.find()`-Methode für dein `products`-Array aufrufen. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(/); -``` - -Du solltest eine Callback-Funktion an die `.find()`-Methode übergeben. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/); -``` - -The callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/); -``` - -The callback function should return whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/); -``` - -Du solltest den Wert der `.find()`-Methode der `product`-Variablen zuweisen. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md deleted file mode 100644 index bd60baa3f40..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63eea817673c8e1c22927fa6 -title: Schritt 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Nutze `const` und die Destrukturierung, um die `name`- und `price`-Variablen aus `product` zu extrahieren. - -# --hints-- - -Du solltest die Destrukturierung verwenden, um die `name`- und `price`-Variablen zu erhalten. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/); -``` - -Du solltest `const` verwenden, um die `name`- und `price`-Variablen zu deklarieren. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/); -``` - -Du solltest die Destrukturierung verwenden, um die `name`- und `price`-Variablen vom `product` zu erhalten. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md deleted file mode 100644 index 5ca79d5e6ae..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 63eea8e1e143ae1d098c8c9d -title: Schritt 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Jetzt musst du das `product` in das `items`-Array des Einkaufswagens schieben. Denke daran, das `this`-Schlüsselwort zu verwenden. - -# --hints-- - -Du solltest die `push`-Methode für das `items`-Array aufrufen. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.push\(/); -``` - -Denke daran, das `this`-Schlüsselwort zu verwenden, um auf das `items`-Array zuzugreifen. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.push\(/); -``` - -You should `push` the `product` variable to the `items` array. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.deepEqual(cart.items, [products[0]]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md deleted file mode 100644 index 6eaa28ab0b1..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 63eeb8e86becbf1e75c2cb0d -title: Schritt 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Du brauchst jetzt die Gesamtzahl aller Produkte, die der Nutzer im Einkaufswagen hat. Deklariere eine `totalCountPerProduct`-Variable und weise ihr ein leeres Objekt zu. - -# --hints-- - -You should declare a `totalCountPerProduct` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/); -``` - -You should use `const` to declare `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/); -``` - -Du solltest `totalCountPerProduct` ein leeres Objekt zuweisen. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md deleted file mode 100644 index 29345e2f381..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63eedebb0ec0231ff1cede1a -title: Schritt 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Use the `.forEach()` method to loop through the `items` array. Pass an empty callback function that takes a single parameter `dessert`. - -# --hints-- - -You should use the `.forEach()` method on your `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.forEach\(/); -``` - -Denke daran, das `this`-Schlüsselwort zu verwenden, um auf das `items`-Array zuzugreifen. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(/); -``` - -You should pass a callback function to the `.forEach()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/); -``` - -Your callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/); -``` - -Your callback function should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md deleted file mode 100644 index 22cc2597fe4..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 63efdbc22a0c56070beabed7 -title: Schritt 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -In deinem `forEach`-Callback musst du das `totalCountPerProduct`-Objekt aktualisieren. Verwende die `id` des aktuellen `dessert` als deine Eigenschaft und aktualisiere den Wert der Eigenschaft auf den aktuellen Wert plus eins. Do not use the addition assignment operator for this. - -# --hints-- - -Verwende die Punktschreibweise, um auf die `id`-Eigenschaft von `dessert` zuzugreifen. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /dessert\.id/); -``` - -Du solltest die Klammerschreibweise verwenden, um auf die Eigenschaft von `totalCountPerProduct` zuzugreifen, die der `dessert.id` entspricht. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the assignment operator to update the value of the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/); -``` - -Du solltest den Wert von `totalCountPerProduct` auf den aktuellen Wert plus eins aktualisieren. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md deleted file mode 100644 index 9d939b8e96e..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 63efe370bbfc4a08d500118e -title: Schritt 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -You now have a small bug. When you try to access a property of an object and the property doesn't exist, you get `undefined`. This means if the dessert isn't already present in the `totalCountPerProduct` object, you end up trying to add `1` to `undefined`, which results in `NaN`. - -To fix this, you can use the `||` operator to set the value to `0` if it doesn't exist. Wrap your right-hand `totalCountPerProduct[data.id]` in parentheses, and add `|| 0` to the end of the expression. - -# --hints-- - -You should wrap your right-hand `totalCountPerProduct[data.id]` in parentheses. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the `||` operator. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/); -``` - -You should use `0` as your fallback value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/); -``` - -Du solltest weiterhin `1` zu dem Wert hinzufügen. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1; - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md deleted file mode 100644 index a9936cf4028..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 63eff02f00e69a0b2ac10b43 -title: Schritt 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Jetzt musst du dich darauf vorbereiten, die Anzeige mit dem neuen Produkt zu aktualisieren, das der Nutzer hinzugefügt hat. Declare a `currentProductCount` variable, and assign it the value of the `totalCountPerProduct` object's property matching the `id` of `product`. - -# --hints-- - -You should declare a `currentProductCount` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=/); -``` - -You should use `const` to declare `currentProductCount`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCount\s*=/); -``` - -You should assign the value of `totalCountPerProduct[product.id]` to `currentProductCount`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md deleted file mode 100644 index e5cc9f2bf98..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 63eff98ffb1d5a0d24ec79cb -title: Schritt 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -You haven't written the code to generate the HTML yet, but if a product has already been added to the user's cart then there will be a matching element which you'll need. - -Use `.getElementById()` to get the matching element - you'll be setting the `id` value to `product-count-for-id${product.id}`, so use a template literal to query that value. - -Weise deine Query einer `currentProductCountSpan`-Variablen zu. - -# --hints-- - -You should declare a `currentProductCountSpan` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/); -``` - -You should use `const` to declare `currentProductCountSpan`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/); -``` - -Du solltest `document.getElementById()` verwenden, um das übereinstimmende Element zu erhalten. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /document\.getElementById\(/); -``` - -You should use a template literal to query the `id` value. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/); -``` - -Du solltest den Wert von `document.getElementById()` dem `currentProductCountSpan` zuweisen. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md deleted file mode 100644 index 391fdc321f4..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63effe558c87a70e7072e447 -title: Schritt 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. - -# --hints-- - -Du solltest kontrollieren, ob `currentProductCount` größer als `1` ist. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/); -``` - -You should use a ternary operator with your `currentProductCount > 1` condition. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/); -``` - -You should use `undefined` as the truthy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should use `undefined` as the falsy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md deleted file mode 100644 index b1137a212b3..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 63f0165121a9181342d5bc66 -title: Schritt 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Für deinen wahrheitsgemäßen Ausdruck, bei dem du den `undefined` entfernst, musst du den `textContent` des `currentProductCountSpan` so aktualisieren, dass er der `currentProductCount` gefolgt von einem `x` ist. Use a template literal to do so. - -# --hints-- - -You should remove the `undefined` from your truthy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should access the `textContent` property of `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/); -``` - -You should use template literal syntax to update the `textContent` to be `${currentProductCount}x`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 ? undefined : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md deleted file mode 100644 index 7a523d7bfaa..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 63f017b4ad028a148eb713c0 -title: Schritt 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -For your falsy expression, you'll need to add new HTML to your `productsContainer`. Start by removing the `undefined`, then use the addition assignment operator and template literal syntax to add a `div` with the `class` set to `product` and the `id` set to `dessert${id}` to the `innerHTML` property of the `productsContainer`. - -# --hints-- - -You should remove the `undefined` from your falsy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /undefined/); -``` - -You should use the addition assignment operator to add HTML to the `productsContainer`. Denke daran, dass HTML in die `innerHTML`-Eigenschaft gehört. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/); -``` - -You should use template literal syntax to add HTML to the `productsContainer`. - -```js -assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/); -``` - -Du solltest einen `div` in den `productsContainer` einfügen. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.tagName, "DIV"); -``` - -Dein `div` sollte die `class` auf `product` gesetzt haben. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.className, "product"); -``` - -Dein `div` sollte die `id` auf `dessert${id}` gesetzt haben. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.id, "dessert1"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md deleted file mode 100644 index 6a28544648c..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 63f01861f813e01564c95315 -title: Schritt 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Inside your `div`, add two `p` elements. Set the text of the second `p` element to be the value of the `price` variable. - -# --hints-- - -You should add two `p` elements inside your `div` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children.length, 2); -assert.equal(div?.children[0].tagName, 'P'); -assert.equal(div?.children[1].tagName, 'P'); -``` - -Your second `p` element should have the text of the `price` variable. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children[1].textContent, '12.99'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                - -
                                                                - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md deleted file mode 100644 index e17688c50d2..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 63f018f04e487e164dc27bd9 -title: Schritt 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Füge in dein erstes `p`-Element ein `span`-Element ein. Gib dem `span` eine Klasse von `product-count` und eine `id` von `product-count-for-id${id}`. Dann, nach der Span, gibst du deinem `p`-Element den Text der `name`-Variable. - -# --hints-- - -Your first `p` element should have a `span` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children.length, 1); -assert.equal(p.children[0].tagName, 'SPAN'); -``` - -Dein `span`-Element sollte die `class` `product-count` haben. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].className, 'product-count'); -``` - -Dein `span`-Element sollte die `id` `product-count-for-id${id}` haben. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].id, 'product-count-for-id1'); -``` - -Your first `p` element should have the text of the `name` variable. This should be outside the span. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md deleted file mode 100644 index 63204342379..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 63f01c9791a0aa1751c73760 -title: Schritt 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -There is still more functionality that your `ShoppingCart` class needs, but first you need to be able to test the code you have currently written. Du musst ein neues `ShoppingCart`-Objekt instantiieren und es einer Variablen zuweisen. Hier ist ein Beispiel für die Instanziierung der `Computer`-Klasse aus früheren Beispielen: - -```js -const myComputer = new Computer(); -``` - -Deklariere eine `cart`-Variable, und weise ihr ein neues `ShoppingCart`-Objekt zu. Note the use of the `new` keyword when instantiating the object. - -# --hints-- - -You should use `const` to declare a `cart` variable. - -```js -assert.match(code, /const\s+cart\s*=/); -``` - -Du solltest das `new`-Schlüsselwort verwenden, um ein neues `ShoppingCart`-Objekt zu instanziieren. - -```js -assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/); -``` - -You should assign your new `ShoppingCart` object to the `cart` variable. - -```js -assert.isTrue(cart instanceof ShoppingCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } -}; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md deleted file mode 100644 index 2ec0a681246..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f0224ceb16dc196d2c860a -title: Schritt 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Du musst alle `Add to cart`-Buttons, die du zuvor zum DOM hinzugefügt hast, abrufen. Deklariere eine `addToCartBtns`-Variable und weise ihr den Wert des Aufrufs der `getElementsByClassName()`-Methode auf dem `document`-Objekt zu, indem du den String `add-to-cart-btn` übergibst. - -# --hints-- - -You should use `const` to declare your `addToCartBtns` variable. - -```js -assert.match(code, /const\s+addToCartBtns\s*=/); -``` - -Du solltest die `getElementsByClassName()`-Methode für das `document`-Objekt aufrufen. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/); -``` - -Du solltest den String `add-to-cart-btn` an die `getElementsByClassName()`-Methode übergeben. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/); -``` - -Du solltest den von der `getElementsByClassName()`-Methode zurückgegebenen Wert der `addToCartBtns`-Variable zuweisen. - -```js -assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } -}; - -const cart = new ShoppingCart(); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md deleted file mode 100644 index ea464dc0ee1..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f026d041bc6c1a3d5cba0f -title: Schritt 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -You need to iterate through the buttons in your `addToCartBtns` variable. However, `.getElementsByClassName()` returns a Collection, which does not have a `forEach` method. - -Use the spread operator on the `addToCartBtns` variable to convert it into an array. Then, use the `forEach` method to iterate through the array. Übergib noch keine Callback-Funktion. - -# --hints-- - -You should use the spread operator on the `addToCartBtns` variable. - -```js -assert.match(code, /\.\.\.addToCartBtns/); -``` - -Du solltest die `addToCartBtns`-Variable in ein Array verteilen. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/); -``` - -Du solltest die `forEach`-Methode auf das von dir erstellte Array anwenden. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/); -``` - -Du solltest keine Callback-Funktion an die `forEach`-Methode übergeben. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md deleted file mode 100644 index 976cb82ac40..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0284532742c1b26c7a052 -title: Schritt 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Add your callback function to the `forEach` method. It should take a `btn` parameter. Then, in the callback, add an event listener to the `btn`. The event listener should listen for a `click` event, and should take another callback with an `event` parameter. The second callback should be empty. - -# --hints-- - -You should use arrow syntax to add a callback function to the `forEach` method which takes a `btn` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/); -``` - -You should add an event listener to the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/); -``` - -You should add an empty callback function to the event listener. Remember to give it an `event` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md deleted file mode 100644 index a85ab621938..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0289df84a581bbdbd29b7 -title: Schritt 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -In your event listener callback, call the `.addItem()` method of your `cart` object, and pass in the `event.target.id`. Remember that the `id` here will be a string, so you need to convert it to a number. - -Übergib dein `products`-Array als zweites Argument. - -# --hints-- - -Dein Event-Listener-Callback sollte die `.addItem()`-Methode deines `cart`-Objekts aufrufen. - -```js -assert.match(code, /cart\.addItem\(/); -``` - -Deine `.addItem()`-Methode sollte mit der `event.target.id` als erstes Argument aufgerufen werden. Remember to convert the `id` to a number using `Number()`. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/); -``` - -Your `.addItem()` method should be called with the `products` array as the second argument. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - - }) - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md deleted file mode 100644 index bf3635877b5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 63f0295e673b661ccb299e8a -title: Schritt 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Du brauchst eine Lösung, um auf die Gesamtzahl der Artikel im Einkaufswagen zuzugreifen. Der beste Weg, dies zu tun, ist, eine weitere Methode zu deiner `ShoppingCart`-Klasse hinzuzufügen, anstatt direkt auf das `items`-Array zuzugreifen. - -Füge der `ShoppingCart`-Klasse eine `getCounts`-Methode hinzu. Sie sollte die Anzahl der Elemente im `items`-Array zurückgeben. - -# --hints-- - -Deine `ShoppingCart`-Klasse sollte eine `getCounts`-Methode haben. - -```js -assert.isFunction(cart.getCounts); -``` - -Denke daran, das `this`-Schlüsselwort zu verwenden, um auf das `items`-Array zuzugreifen. - -```js -const afterCounts = code.split('getCounts')[1]; -assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/); -``` - -Deine `getCounts`-Methode sollte die Anzahl der Elemente im `items`-Array zurückgeben. - -```js -assert.equal(cart.getCounts(), 0); -cart.addItem(1, products); -assert.equal(cart.getCounts(), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md deleted file mode 100644 index d77ed6fa27a..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 63f029b96b9e9e1df93be951 -title: Schritt 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Jetzt kannst du die Gesamtzahl der Artikel auf der Website aktualisieren. Weise den Wert der `.getCounts()`-Methode deines `cart`-Objekts dem `textContent` der `totalNumberOfItems`-Variable zu. - -# --hints-- - -Greife auf die `textContent`-Eigenschaft der `totalNumberOfItems`-Variablen zu. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent/) -``` - -Der Wert der `.getCounts()`-Methode deines `cart`-Objekts sollte der `textContent`-Eigenschaft der `totalNumberOfItems`-Variablen zugewiesen werden. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md deleted file mode 100644 index 5b4a837b8a4..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 63f02a4ef92d711ec1ff618c -title: Schritt 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Außerdem musst du den Gesamtpreis des Einkaufswagens aktualisieren, wenn der Nutzer einen Artikel hinzufügt. Erstelle eine `calculateTotal`-Methode in der `ShoppingCart`-Klasse. - -In that method, declare a `subTotal` variable and use the `reduce` method on the `items` array to calculate the sum of the `price` property of each item in the array. Verwende `total` und `item` als Parameter für deinen Callback. - -Denke daran, deinen Anfangswert in der `reduce`-Methode festzulegen. - -# --hints-- - -Du solltest eine `calculateTotal`-Methode in der `ShoppingCart`-Klasse erstellen. - -```js -assert.isFunction(cart.calculateTotal); -``` - -Deine `calculateTotal`-Methode sollte eine `subTotal`-Variable haben, die mit `const` deklariert ist. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+subTotal\s*=/); -``` - -Deine `calculateTotal`-Methode sollte die `reduce`-Methode auf das `items`-Array anwenden. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/); -``` - -Dein `reduce`-Callback sollte `total` und `item` als ersten und zweiten Parameter verwenden. Remember to use arrow function syntax. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/); -``` - -Your `reduce` callback should return the sum of `total` and `item.price`. Verwende eine implizite Rückgabe. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/); -``` - -Your `reduce` call should have an initial value of `0`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md deleted file mode 100644 index c1d890611fa..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f02b22cce1c11fe9604381 -title: Schritt 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Part of the total cost will include the tax, so you need to calculate that as well. Erstelle eine `calculateTaxes`-Methode in der `ShoppingCart`-Klasse. This method should take an `amount` parameter. - -# --hints-- - -Du solltest eine `calculateTaxes`-Methode in der `ShoppingCart`-Klasse erstellen. - -```js -assert.isFunction(cart.calculateTaxes); -``` - -Deine `calculateTaxes`-Methode sollte einen `amount`-Parameter verwenden. - -```js -assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md deleted file mode 100644 index a0b97a9aa4f..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f02bdeb9b428208b97eb6b -title: Schritt 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Deine `calculateTaxes`-Methode sollte den Wert von `taxRate` zurückgeben (geteilt durch 100, um ihn in eine Prozentzahl umzuwandeln), multipliziert mit dem `amount`-Parameter. - -For clarity, wrap the `taxRate / 100` calculation in parentheses. - -# --hints-- - -Du solltest die `taxRate` in deiner `calculateTaxes`-Methode durch 100 teilen. Denke daran, das `this`-Schlüsselwort zu verwenden. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/); -``` - -You should wrap the `this.taxRate / 100` calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/); -``` - -Du solltest den `amount`-Parameter mit `taxRate`, geteilt durch 100 in deiner `calculateTaxes`-Methode multiplizieren. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/); -``` - -Deine `calculateTaxes`-Methode sollte den Wert von `taxRate` zurückgeben (geteilt durch 100, um ihn in eine Prozentzahl umzuwandeln), multipliziert mit dem `amount`-Parameter. - -```js -console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md deleted file mode 100644 index 8581346a8d1..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 63f02c6e18773921ba50aa53 -title: Schritt 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Because of the way computers store and work with numbers, calculations involving decimal numbers can result in some strange behavior. Zum Beispiel ist `0.1 + 0.2` nicht gleich `0.3`. This is because computers store decimal numbers as binary fractions, and some binary fractions cannot be represented exactly as decimal fractions. - -We want to clean up the number result from your calculation. Wrap your calculation in parentheses (don't include the `return` statement!) and call the `.toFixed()` method on it. Übergib der `.toFixed()`-Methode die Zahl `2` als Argument. Dies rundet die Zahl auf zwei Dezimalstellen ab und gibt einen String zurück. - -# --hints-- - -You should wrap your calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/) -``` - -Du solltest die `.toFixed()`-Methode für deine Berechnung aufrufen. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/) -``` - -Du solltest der `.toFixed()`-Methode die Zahl `2` als Argument übergeben. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return (this.taxRate / 100) * amount; - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md deleted file mode 100644 index 3b3d9848e6f..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 63f0311f5ea9382388d6124f -title: Schritt 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -The issue with `.toFixed()` returning a string is that you want to be able to perform calculations with the tax rate. Um dies zu beheben, kannst du den `.toFixed()`-Aufruf (einschließlich der Berechnung) an die `parseFloat()`-Funktion übergeben. This will convert the fixed string back into a number, preserving the existing decimal places. - -Übergib deinen `.toFixed()`-Aufruf an `parseFloat()`. - -# --hints-- - -Du solltest deine gesamte Berechnung (außer der `return`-Anweisung) an `parseFloat()` übergeben. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return ((this.taxRate / 100) * amount).toFixed(2); - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md deleted file mode 100644 index 5bff2cf7af9..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f033fdb1fbcc254999fcc3 -title: Schritt 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Dein Einkaufswagen ist derzeit nicht auf der Website sichtbar. To make it visible, start by adding an event listener to the `cartBtn` variable, listening for the click event. Der Callback benötigt keine Parameter. - -# --hints-- - -Du solltest einen Event-Listener zu deiner `cartBtn`-Variablen hinzufügen. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/); -``` - -You should add an empty callback function (using arrow syntax) to the event listener. Remember that it does not need any parameters. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md deleted file mode 100644 index 408826b38ac..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f03446c2ed3e264be6c7fc -title: Schritt 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Start by inverting the value of `isCartShowing`. Remember that you can use the logical not operator `!` to invert the value of a boolean. Assign the inverted value to `isCartShowing`. - -# --hints-- - -You should invert the value of `isCartShowing`. - -```js -assert.match(code, /!isCartShowing/); -``` - -You should assign the inverted value of `isCartShowing` to `isCartShowing`. - -```js -assert.match(code, /isCartShowing\s*=\s*!isCartShowing/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md deleted file mode 100644 index d09a7599c63..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f0348a54a177272071a595 -title: Schritt 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `Hide`, otherwise set it to `Show`. - -# --hints-- - -You should use the assignment operator on the `textContent` property of the `showHideCartSpan` variable. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/) -``` - -Du solltest den `textContent` der `showHideCartSpan`-Variable auf `Hide` setzen, wenn `isCartShowing` wahr (true) ist. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Show` if `isCartShowing` is false. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md deleted file mode 100644 index 686ad063809..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 63f034d012f74627ce538d3a -title: Schritt 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `block`, otherwise set it to `none`. - -Jetzt solltest du in der Lage sein, deinen Einkaufswagen zu sehen und Artikel hinzuzufügen. - -# --hints-- - -Du solltest auf die `display`-Eigenschaft der `style`-Eigenschaft der `cartContainer`-Variable zugreifen. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/) -``` - -You should use the assignment operator on the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `block` if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `none` if `isCartShowing` is false. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md deleted file mode 100644 index 67627b582d2..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f03686c5ea863533ec71f4 -title: Schritt 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Declare a variable `tax` and assign it the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument. - -# --hints-- - -Use `const` to declare a variable named `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+tax\s*=/); -``` - -Assign the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument, to the `tax` variable. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md deleted file mode 100644 index 5a827b37edb..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f036ec91fdf238c90665f5 -title: Schritt 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Update the `total` value to be the sum of the `subTotal` and `tax` values. - -# --hints-- - -Du solltest den `total`-Wert aktualisieren. Denke daran, das `this`-Schlüsselwort zu verwenden. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total/); -``` - -Du solltest den `total`-Wert so einstellen, dass er die Summe der `subTotal`- und `tax`-Werte ergibt. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md deleted file mode 100644 index c6f8fc86723..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 63f0370b340915399d31e5eb -title: Schritt 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -You're going to update the HTML in this method as well. Set the `textContent` of the `cartSubTotal` to be the value of `subTotal` to a fixed 2 decimal places. Use template literal syntax to add the dollar sign to the beginning of the value. - -# --hints-- - -You should access the `textContent` property of the `cartSubTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `subTotal` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartSubTotal` element to your template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md deleted file mode 100644 index 2d705d15d47..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 63f0374d5351223a747c301d -title: Schritt 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Nach dem gleichen Muster wie bei `cartSubTotal` aktualisierst du `cartTaxes`, um den `tax`-Wert anzuzeigen, und `cartTotal`, um die `total`-Eigenschaft anzuzeigen. - -# --hints-- - -You should access the `textContent` property of the `cartTaxes` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/); -``` - -You should call the `.toFixed()` method on the `tax` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTaxes` element to `tax.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should access the `textContent` property of the `cartTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `total` variable, passing `2` as the argument. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTotal` element to your `total.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md deleted file mode 100644 index ad6bbf75c26..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f0378e173e3c3b7638b528 -title: Schritt 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Finally, return the value of the `total` property. Remember your `this` keyword. - -# --hints-- - -Your `calculateTotal` method should return the value of the `total` property. - -```js -assert.equal(cart.calculateTotal(), 0); -cart.addItem(1, products); -assert.approximately(cart.calculateTotal(), 14.06, 0.1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md deleted file mode 100644 index 7abc58b824a..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f038a0ae041d3c5b0cdf23 -title: Schritt 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Die letzte Funktion besteht darin, dass die Nutzer ihren Einkaufswagen leeren können. Füge eine `clearCart()`-Methode zu deiner `ShoppingCart`-Klasse hinzu. - -# --hints-- - -Deine `ShoppingCart`-Klasse sollte über eine `clearCart`-Methode verfügen. - -```js -assert.isFunction(cart.clearCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md deleted file mode 100644 index 7a4cd3cae13..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -id: 63f038e671d3f73d5a041973 -title: Schritt 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Als erstes solltest du überprüfen, ob das `items`-Array leer ist. Wenn dies der Fall ist, wird dem Nutzer ein `alert` mit dem Text `Your shopping cart is already empty` angezeigt, und die Funktion wird beendet. - -Remember that `0` is a falsy value, so you can use the `!` operator to check if the array is empty. - -Nachdem die Meldung angezeigt wurde, verlasse die Funktion, um die Ausführung zu beenden. - -# --hints-- - -You should create an `if` statement that checks if the `items` array is empty, using the negation operator. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/); -``` - -Deine `if`-Anweisung sollte dem Nutzer einen `alert` mit dem Text `Your shopping cart is already empty` anzeigen. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/); -``` - -Deine `if`-Anweisung sollte von der Funktion zurückkehren. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md deleted file mode 100644 index 2d0e85e4d5d..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 63f039dbcef7673e4e758fa3 -title: Schritt 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Browser haben eine eingebaute `confirm()`-Funktion, die dem Nutzer eine Sicherheitsabfrage anzeigt. `confirm()` akzeptiert einen String, das ist die Nachricht, die dem Nutzer angezeigt wird. It returns `true` if the user confirms, and `false` if the user cancels. - -Deklariere eine Variable `isCartCleared` und weise ihr den Wert des Aufrufs `confirm()` mit dem String `"Are you sure you want to clear all items from your shopping cart?"` zu. - -# --hints-- - -You should use `const` to declare the `isCartCleared` variable. - -```js -const afterClearCart = code.split('clearCart()')[1]; -assert.match(afterClearCart, /const\s+isCartCleared\s*=/); -``` - -You should call the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(/); -``` - -Du solltest den String `Are you sure you want to clear all items from your shopping cart?` an die `confirm()`-Funktion übergeben. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -Du solltest den Wert der `confirm()`-Funktion der `isCartCleared`-Variable zuweisen. - -```js -assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md deleted file mode 100644 index d8082170cad..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -id: 63f03a7143a6ef3f7f3344f0 -title: Schritt 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Du möchtest den Einkaufswagen nur leeren, wenn der Nutzer die Aufforderung bestätigt. Create an `if` statement that checks if the user confirmed the prompt. - -In der `if`-Anweisung setzt du die `items`-Eigenschaft zurück auf ein leeres Array, danach setzt du die `total`-Eigenschaft auf `0`. - -# --hints-- - -You should create an `if` statement that checks if the user confirmed the prompt. Denke daran, dass du den Wahrheitsgehalt von `isCartCleared` direkt überprüfen kannst. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/); -``` - -Deine `if`-Anweisung sollte die `items`-Eigenschaft auf ein leeres Array zurücksetzen. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/); -``` - -Deine `if` -Anweisung sollte die `total`-Eigenschaft auf `0` setzen. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md deleted file mode 100644 index cbf4f40f322..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f03ac2b428b2404a5a7518 -title: Schritt 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -You also need to start clearing the HTML. Set the `innerHTML` property of the `productsContainer` back to an empty string. - -# --hints-- - -In deiner `if`-Anweisung solltest du die `innerHTML`-Eigenschaft des `productsContainer` auf einen leeren String zurücksetzen. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md deleted file mode 100644 index 5e6f39883ae..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 63f03af535682e4138fdb915 -title: Schritt 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Setze den `textContent` der Elemente `totalNumberOfItems`, `cartSubTotal`, `cartTaxes` und `cartTotal` alle auf die Zahl `0`. - -# --hints-- - -Du solltest den `textContent` des `totalNumberOfItems`-Elements auf `0` setzen. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/); -``` - -Du solltest den `textContent` des `cartSubTotal`-Elements auf `0` setzen. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/); -``` - -Du solltest den `textContent` des `cartTaxes`-Elements auf `0` setzen. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/); -``` - -Du solltest den `textContent` des `cartTotal`-Elements auf `0` setzen. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTotal\.textContent\s*=\s*0/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md deleted file mode 100644 index a7096bf6b07..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md +++ /dev/null @@ -1,744 +0,0 @@ ---- -id: 63f03b1ed5ab15420c057463 -title: Schritt 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Your final step is to make your clear button functional. Add a `click` event listener to the `clearCartBtn`. Für den Callback kannst du `cart.clearCart` direkt übergeben. - -However, doing so will not work, because the context of `this` will be the `clearCartBtn` element. Du musst die `clearCart`-Methode an das `cart`-Objekt binden. - -Dies ist möglich, indem du `cart.clearCart.bind(cart)` als Callback übergibst. - -Und damit ist dein Einkaufswagen-Projekt abgeschlossen! - -# --hints-- - -You should add an event listener to your `clearCartBtn` element. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(/); -``` - -Your event listener should listen for the `click` event. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/); -``` - -Your event listener should take `cart.clearCart.bind(cart)` as the callback. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - -clearCartBtn.addEventListener("click", cart.clearCart.bind(cart)); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md deleted file mode 100644 index 6bfaaffce92..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f6721d5110af243ef8f3d9 -title: Schritt 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now call your `.calculateTotal()` method inside your `forEach` loop. - -# --hints-- - -You should call `cart.calculateTotal()` inside your `forEach` loop. - -```js -const afterForEach = code.split('[...addToCartBtns].forEach(')[1]; -assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                -

                                                                Desserts Page

                                                                -
                                                                -
                                                                - -
                                                                - -
                                                                -

                                                                Total number of items: 0

                                                                -

                                                                Subtotal: $0

                                                                -

                                                                Taxes: $0

                                                                -

                                                                Total: $0

                                                                -
                                                                -
                                                                -
                                                                - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                -

                                                                ${name}

                                                                -

                                                                $${price}

                                                                -

                                                                Category: ${category}

                                                                - -
                                                                - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                -

                                                                - ${name} -

                                                                -

                                                                ${price}

                                                                -
                                                                - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md deleted file mode 100644 index a2ce162457c..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9a -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. - -In JavaScript, you can access the DOM by referencing the global `document` object. - -To view the DOM, log it to the console with `console.log(document)`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast
                                                                - Lunch
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md deleted file mode 100644 index aab244748d6..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9b -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -In our HTML document, we have a form element with an `id` attribute: `
                                                                ` - -To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. - -The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                - -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - - -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md deleted file mode 100644 index 31afd7303fc..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9c -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. - -Forms have an `onsubmit` event that can execute a function when the form is submitted. - -For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. - -Assign a function named `calculate` to the `onsubmit` event of your form. - -You will create the `calculate` function later. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md deleted file mode 100644 index bcd3b1bc287..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9d -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. Here is an example of an empty function called `square`: - -```js -function square() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(typeof calculate === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md deleted file mode 100644 index 8a02a67b570..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9e -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -By default, `onsubmit` will pass the event object as a parameter to the function it calls. People usually call it `e`, short for event. Update the `calculate()` function to accept `e` as parameter. - -Here is an example of an empty function called `square` that takes a `number` as a parameter: - -```js -function square(number) {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md deleted file mode 100644 index 0cd5d1525fd..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9f -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. - -Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md deleted file mode 100644 index ee8e8356f0d..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da0 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. - -To access elements with a certain class name, we use the `getElementsByClassName()` method. - -Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md deleted file mode 100644 index 9b80e0f827c..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da1 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md deleted file mode 100644 index c5a2856f2c3..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da2 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -To make the document objects easier to handle, let's turn them into an array. Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md deleted file mode 100644 index 40f6a846fd5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da3 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md deleted file mode 100644 index 725bff25987..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da4 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md deleted file mode 100644 index fead88a0598..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da5 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. - -The `map()` method allows us to do exactly that. - -Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .toString() - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md deleted file mode 100644 index 714497fddbb..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da6 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Now we need to provide a function to `map()` that will be performed on each item of the array. - -This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: - -```js -function(meal){} -``` - -Enter in the above function as an argument in between the parentheses of the `.map()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md deleted file mode 100644 index 7d58167b80c..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da7 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. - -If you want, console log `total` to see what results you are getting. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md deleted file mode 100644 index 4a199951818..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da8 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md deleted file mode 100644 index 6058cea614a..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da9 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md deleted file mode 100644 index 46dfade8b55..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daa -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. - -Chain the `reduce()` method to the `Array.from()` expression. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md deleted file mode 100644 index 065b5dce513..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dab -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: - -```js -function(accumulator, currentValue) { /* code to run */ } -``` - -or using arrow functions: - -```js -(accumulator, currentValue) => { /* code to run */ } -``` - -Insert the above callback function as an argument in the `.reduce()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md deleted file mode 100644 index 448c7702610..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dac -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. - -Here is an example of a `reduce()` method with an empty object as its initial value: - -```js -arr.reduce((accumulator, currentValue) => { - /* code to run */ -}, {}); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md deleted file mode 100644 index 4134f0401a2..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dad -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. - -We can use the reduce function as follows: - -```js -arr.reduce((accumulator, currentValue) => { - return accumulator + currentValue; -}, 0); -``` - -At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, since `arr[0] = 1 = currentValue`. - -At `arr[1]`, the function is `(1, 3) => 1 + 3`, - -Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. - -In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md deleted file mode 100644 index c9d4f5bd8ad..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 5e302e80e003129199103c78 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` - -You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. - -When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md deleted file mode 100644 index b36ed2d97b6..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5e302e8ce003129199103c79 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Now let's simplify the `reduce()` callback function by refactoring it. - -Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. - -So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. - -Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md deleted file mode 100644 index 8825fbe6dd0..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dae -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. - -Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. - -If you inspect the Female radio button you will notice its id: `` - -Create a variable named `maxCalories` and set it equal to the document element with the id of `female`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md deleted file mode 100644 index 1e19c715fcf..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daf -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` - -Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md deleted file mode 100644 index 21d83417535..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db0 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. - -For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: - -```js -if (5 - 3 === 4) { - return 'Yes'; -} else { - return 'No'; -} -``` - -`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md deleted file mode 100644 index abe960e3120..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db1 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Now that we have `total` and `maxCalories`, we need to find out the difference between them. - -Create a variable named `difference` and set it equal to `total - maxCalories` - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md deleted file mode 100644 index ad3abc0bfe5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db2 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. - -To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). - -If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. - -Use the same ternary syntax that you used to determine `maxCalories`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md deleted file mode 100644 index 2dbdd8b547b..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db3 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
                                                                `. - -We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. - -Create a variable named `output` and set it equal to this division element with the `id` of `output`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md deleted file mode 100644 index 87062f28e7f..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db4 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Now it's time to create the HTML elements that we will add inside of `output`. - -To create an element, use `createElement()`. For example: - -```js -const myHeading1 = document.createElement('h1') -``` - -Create an `h3` element and assign it to a variable named `result`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md deleted file mode 100644 index 90ad3c91cb4..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db5 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Next, we will create a text node that we will later append to the `result` element. - -JavaScript has a function called `createTextNode()` to accomplish this. For example: - -```js -const myText = document.createTextNode("Hello world!") -``` - -Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md deleted file mode 100644 index b93248efe69..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db6 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -We can now use the `difference` variable that we created above. - -Insert the `difference` variable inside the parentheses of `.createTextNode()` - -If you want to see what the text currently looks like, try `console.log(resultText)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md deleted file mode 100644 index fd08248b5f0..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db7 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Notice how if `total` is less than `maxCalories`, `difference` is a negative number. - -We want to show the absolute value of the difference so it displays "300" rather than "-300". - -Wrap the `difference` in a `Math.abs()` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md deleted file mode 100644 index f066a2b3607..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db8 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md deleted file mode 100644 index d2e8c9a31c3..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db9 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Next we want to add the text from the `surplusOrDeficit` variable that we previously created. - -Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md deleted file mode 100644 index 1311c2ac849..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dba -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. - -Some people consider this a little cumbersome and prefer to use template literals instead. - -Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. - -For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. - -Convert the data inside of `createTextNode()` to be a template literal. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md deleted file mode 100644 index 923d7d02e23..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbb -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: - -```js -result.appendChild(resultText); -``` - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md deleted file mode 100644 index 09da32b6cb5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbc -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Similarly, append the `result` to the `output` element with the `appendChild()` method. - -Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md deleted file mode 100644 index ccb8660bf13..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbd -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Next, let's create and add a horizontal rule (`hr`) element to the output. - -Create an `hr` element and assign it to a variable named `line`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md deleted file mode 100644 index e0f9bd9c47c..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbe -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Add the `line` to the `output` element using the `appendChild()` method. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md deleted file mode 100644 index 4c4b069fb43..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbf -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Let's create a few more HTML elements to add to the `output`. - -Create an `h4` element and assign it to a variable named `recommended`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md deleted file mode 100644 index 0becd375fa5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc0 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Create a text node and assign it to a variable named `recommendedText`. - -This is similar to how your created the `resultText` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md deleted file mode 100644 index fd2d846ab52..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc1 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. - -Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". - -This is similar to template literal syntax previously used to create `resultText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md deleted file mode 100644 index 9e9d9c9c3f2..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc2 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Append the `recommendedText` node to the `recommended` element. - -This is similar to how the `resultText` is appended to `result` previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md deleted file mode 100644 index 9264e8ac9cf..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc3 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Append the `recommended` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md deleted file mode 100644 index 0fd8978f093..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc4 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. - -Create an `h4` element and assign it to a variable named `consumed`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md deleted file mode 100644 index 6bb2536f422..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc5 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. - -For example: - -```js -consumed.innerHTML = `Hello world`; -``` - -Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md deleted file mode 100644 index 29d043f4c6e..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc6 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Append the `consumed` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md deleted file mode 100644 index c34dcad8f68..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc7 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Now it's time to add some styling which can be added directly as attributes or classes. - -In our CSS file, we have a styling rule for any elements with the class name `green-text`. - -On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. - -Now if you submit the form again and inspect the `result` element, you will see it as `

                                                                ` and notice that the text is now green. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md deleted file mode 100644 index 7298971ffec..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc8 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. - -For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. - -Set the `class` attribute of the `output` element equal to a class named `bordered-class`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md deleted file mode 100644 index 1b0bd348910..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc9 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. - -Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. - -The `calculate()` function is now finished! - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                -
                                                                -

                                                                Calorie Counter

                                                                -
                                                                - Sex -
                                                                - - - -
                                                                - - -
                                                                -
                                                                -
                                                                -
                                                                - Breakfast -
                                                                - Lunch -
                                                                - Dinner -
                                                                - - - -
                                                                -
                                                                -
                                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md deleted file mode 100644 index 56bbb142804..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dca -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. - -In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: - -```html - - - - -
                                                                -

                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md deleted file mode 100644 index db8f9bc95c1..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcb -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -We want a function to run every time the user clicks the "Add Entry" button. - -Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: - -```js -function() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md deleted file mode 100644 index 886f041422c..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcc -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Inside the function, create an `input` document element and assign it to a variable named `foodInput`. - -This is similar to how you created the `result` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md deleted file mode 100644 index 6860d68731d..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcd -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Set the `placeholder` property of the `foodInput` equal to `'food name'`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md deleted file mode 100644 index 89e37a9f626..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dce -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. - -In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. - -Add the class name `food-control` to the `foodInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md deleted file mode 100644 index e0ab30e27b5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcf -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Notice that parent container of all of the inputs has an `id` of `entries`: `
                                      `. - -Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. - -This is similar to the other `appendChild()` methods that you have used previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md deleted file mode 100644 index ea1faf6c59c..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md deleted file mode 100644 index 594af428356..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd1 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. - -This is similar to how to set the class of the `output` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md deleted file mode 100644 index 962a0309894..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd2 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -The `calorieInput` element should only accept numbers that are 0 or above. - -Set the `min` attribute of `calorieInput` to `0`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md deleted file mode 100644 index eac60b49fce..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd3 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. - -We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md deleted file mode 100644 index 7ffb7021744..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd4 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. - -To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md deleted file mode 100644 index 8e15285d2a9..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd5 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. - -The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md deleted file mode 100644 index df36314c4ae..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd6 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. - -Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md deleted file mode 100644 index 1e5b3e9b048..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd7 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. - -# --hints-- - -See description above for instructions. - -```js -assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md deleted file mode 100644 index 7a941b6559c..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd8 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Create a variable named `clearOutput` and set it equal to a blank arrow function: - -```js -const clearOutput = () => {} -``` - -This is similar to `function clearOutput () {}`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearOutput === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md deleted file mode 100644 index e6a2d2c6337..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd9 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -We need to remove the contents inside of element with the `id` of `output`. - -In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md deleted file mode 100644 index f8984120835..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dda -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. - -Remove the `bordered-class` class. For example: - -```js -document.getElementById('my-div').classList.remove('my-class') -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md deleted file mode 100644 index 93a258c395b..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddb -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. - -In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/clearOutput\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md deleted file mode 100644 index 6a07e9aa83b..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddc -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearForm === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md deleted file mode 100644 index 88284a00280..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddd -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. - -Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. - -This is similar to how you declared the `total` variable previously in the `calculate` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md deleted file mode 100644 index 9cc201d5194..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dde -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. - -Add `foodInputs.forEach()`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md deleted file mode 100644 index 8044dac1e60..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddf -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -We need to provide a callback function in the parentheses of `forEach()`. - -This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. - -In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md deleted file mode 100644 index dd34b193b4c..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de0 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. - -Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. - -This is similar to how you declared the `foodInputs` variable previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md deleted file mode 100644 index 652c8f99281..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de1 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md deleted file mode 100644 index b3cf00545fa..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de2 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. - -Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md deleted file mode 100644 index ead4dfe0e77..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de3 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Congratulations! Have fun playing with your completed calorie counter. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                      -
                                      -

                                      Calorie Counter

                                      -
                                      - Sex -
                                      - - - -
                                      - - -
                                      -
                                      -
                                      -
                                      - Breakfast -
                                      - Lunch -
                                      - Dinner -
                                      - - - -
                                      -
                                      -
                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md deleted file mode 100644 index 08bc2a4aa43..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 5d79253297c0ebb149ea9fed -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -In functional programming, we prefer immutable values over mutable values. - -Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. - -Start by creating an empty `infixToFunction` object using `const`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md deleted file mode 100644 index 3159f1d2410..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 5d7925323be8848dbc58a07a -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md deleted file mode 100644 index c5dbbab705c..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792532f631702ae6d23e11 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now return the sum of `x` and `y` using the `return` keyword. - -# --hints-- - -See description above for instructions. - -```js -assert(add(1, 2) === 3 && add(100, 2000) === 2100); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md deleted file mode 100644 index 0a9d327d798..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5d7925329445167ecc2ac9c9 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. - -Assign `add` to a new variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md deleted file mode 100644 index 4e85d64fbe2..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792532b07918c3a5904913 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: - -```js -function(x) { - return x -} -``` - -First, remove the `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md deleted file mode 100644 index a9aa387addd..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792533cc8b18b6c133edc7 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: - -```js -const fn = function(x) { - return x; -} - -fn(); -``` - -Assign the anonymous function to the variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md deleted file mode 100644 index 68c44b16619..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 5d7925337954ed57a565a135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. - -Rewrite `addVar` using ES6's arrow syntax: - -```js -const fn = (x, y) => x; -``` - -Note that the value is returned implicitly. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md deleted file mode 100644 index 676f6c6f4ff..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d79253352e33dd59ec2f6de -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Add the key `+` to `infixToFunction` and assign it the value `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(infixToFunction['+'].toString() === addVar.toString()); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md deleted file mode 100644 index c44846417a5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792533d31e4f7fad33011d -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md deleted file mode 100644 index 2096072d738..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d792533e7707b9645d7b540 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Remove the now redundant `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof addVar === 'undefined'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md deleted file mode 100644 index 526e706eb08..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 5d79253378595ec568f70ab6 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Add similar definitions for `-`, `*` and `/` in `infixToFunction`. - -# --hints-- - -See description above for instructions. - -```js -assert( - infixToFunction['-'](10, 2) === 8 && - infixToFunction['*'](10, 10) === 100 && - infixToFunction['/'](100, 10) === 10 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md deleted file mode 100644 index 37432637ac6..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5d7925330918ae4a2f282e7e -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md deleted file mode 100644 index 3d09b3967f2..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5d792533ed00e75d129e1b18 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). - -Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. - -This is how you would pass the `-` function: - -```js -str.replace(regex, infixToFunction["-"]) -``` - -# --hints-- - -See description above for instructions. - -```js -assert(infixEval('ab', /(a)b/) === 'aba'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md deleted file mode 100644 index 0926459ef14..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5d792533a5c42fb4d1a4b70d -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md deleted file mode 100644 index 23968d2e070..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5d79253358e8f646cbeb2bb0 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Change the `"+"` in the call to `infixToFunction` to `fn`. - -`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md deleted file mode 100644 index f3dd1211e6a..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5d792533bb38fab70b27f527 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". - -Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). - -# --hints-- - -See description above for instructions. - -```js -const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; -assert( - infixEval('23+35', regex) === '58' && - infixEval('100-20', regex) === '80' && - infixEval('10*10', regex) === '100' && - infixEval('120/6', regex) === '20' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md deleted file mode 100644 index e295114e777..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5d79253386060ed9eb04a070 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. - -To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. - -Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md deleted file mode 100644 index 1af15a10b8e..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d792533717672657b81aa69 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -When defining an arrow function with a single argument, the parentheses can be omitted: - -```js -const greeting = name => `Hello !`; -``` - -Define a function `highPrecedence` which takes a single argument `str` and returns it. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('a') === 'a'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md deleted file mode 100644 index 5c2d8560932..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5d7925335ab63018dcec11fe -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Arrow functions can have multiple statements: - -```js -const fn = (x, y) => { - const result = x + y; - return result; // explicit return statement required -}; -``` - -Use this syntax for the `highPrecedence` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md deleted file mode 100644 index 1ddd40ce5d8..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5d7925330f300c342315066d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md deleted file mode 100644 index 3bfba3454a9..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5d792533aa6443215c9b16bf -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md deleted file mode 100644 index 333b8bcb122..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925334c5e22586dd72962 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -The ternary operator has the following syntax: - -```js -const result = condition ? valueIfTrue : valueIfFalse; -const result = 1 === 1 ? 1 : 0; // 1 -const result = 9 > 10 ? "Yes" : "No"; // "No" -``` - -Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2') === '' && - highPrecedence('2+2') === '2+2' && - code.includes('?') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md deleted file mode 100644 index c5f666b8a05..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5d79253307ecd49e030bdcd1 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. - -Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2*2') === '8' && - highPrecedence('2*2') === '4' && - highPrecedence('2+2') === '2+2' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md deleted file mode 100644 index c837d8e94e1..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5d792534257122211d3043af -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. - -# --hints-- - -See description above for instructions. - -```js -assert(spreadsheetFunctions['']('x') === 'x'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md deleted file mode 100644 index 58109dce7a4..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925346f4f2da6df4354a6 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md deleted file mode 100644 index 313db4427d6..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5d792534cac2dbe0a719ea7a -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Set `noHigh` to `highPrecedence(str)` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md deleted file mode 100644 index bc94c78c155..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d792534857332d07ccba3ad -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md deleted file mode 100644 index 7972802a8b8..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5d792534d586ef495ea9df90 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Set `str2` to `infixEval(noHigh, infix)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md deleted file mode 100644 index f957c47d628..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5d79253410532e13d13fe574 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - applyFn - .toString() - .replace(/\s/g, '') - .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md deleted file mode 100644 index 42b80301fc6..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d7925342415527083bd6667 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: - -```js -"a b c".split(" "); // ["a", "b", "c"]; -``` - -Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md deleted file mode 100644 index 33e85a097cc..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d792534c3d26890ac1484d4 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: - -```js -[1, 2, 3].map(x => x + 1); // [2, 3, 4] -``` - -In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md deleted file mode 100644 index abb91060f5e..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d792534b92f3d1cd4410ce3 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md deleted file mode 100644 index bb2f8da03a5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 5d7925341193948dfe6d76b4 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md deleted file mode 100644 index f32c582d3ef..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d792534cf81365cfca58794 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md deleted file mode 100644 index a460b595da1..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d7925348ee084278ff15556 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. - -Now return `str2.replace(regex, "")` at the end of `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md deleted file mode 100644 index 45e848ecbeb..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d7925348a6a41c32f7a4e3e -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md deleted file mode 100644 index 7394c7c6472..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d792534408c5be896b0a46e -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. - -Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md deleted file mode 100644 index c86fe809104..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 5d792534f0eda837510e9192 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md deleted file mode 100644 index bfa91d4503f..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d7925346b911fce161febaf -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md deleted file mode 100644 index 24d94216931..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d79253483eada4dd69258eb -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -`range` should set `arr` to `[start]` and should then return `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constarr=[start]') && - JSON.stringify(range(1)) === '[1]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md deleted file mode 100644 index 4307ef2889a..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d7925342b2b993ef18cd45f -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md deleted file mode 100644 index 0fa8e6fe0fb..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5d7925341747ad42b12f8e68 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. - -The `concat` method returns a new array instead of modifying an existing one: - -```js -[1,2,3].concat(4); // [1, 2, 3, 4] -[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] -``` - -Use `concat` instead of `push` to return the result of adding `end` to `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(1, 2)) === '[1,2]' && - code.includes('concat') && - !code.includes('push') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md deleted file mode 100644 index 448578598f5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: 5d792535b0b3c198ee3ed6f9 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -The `concat` method can also accept arrays: - -```js -[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] -[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] -``` - -Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md deleted file mode 100644 index 6e89d44a236..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d7925357a0533eb221b005d -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('arr') && - code.replace(/\s/g, '').includes('[start].concat([end])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md deleted file mode 100644 index 0d876da26b6..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d792535591db67ee15b4106 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(3, 2)) === '[]' && - JSON.stringify(range(1, 3)) === '[1,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md deleted file mode 100644 index ee94e71d4a4..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d792535f1f7adf77de5831d -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md deleted file mode 100644 index 497b63c634b..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925353d2c505eafd50cd9 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Remove the curly braces and `return` keyword from `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md deleted file mode 100644 index 862a0002f2f..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d79253539b5e944ba3e314c -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md deleted file mode 100644 index 9845839bbeb..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535a4f1cbff7a8b9a0b -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Make `charRange` return `range(start, end)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md deleted file mode 100644 index 43167394a7b..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535e3304f15a8890162 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md deleted file mode 100644 index f5bb024255e..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 5d792535a40ea5ac549d6804 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md deleted file mode 100644 index 8369854b752..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925358c220e5b2998909e -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Now, pass `x` to `String.fromCharCode` in the arrow function. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md deleted file mode 100644 index 6253e20d545..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5d7925357729e183a49498aa -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md deleted file mode 100644 index 03ceaf96068..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253555aa652afbb68086 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md deleted file mode 100644 index 27b4b66f7f2..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253582be306d339564f6 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md deleted file mode 100644 index 72223dddb2c..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d7925352047e5c54882c436 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md deleted file mode 100644 index 1870ab8b951..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 5d79253568e441c0adf9db9f -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md deleted file mode 100644 index b394d603ed4..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925356ab117923b80c9cd -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md deleted file mode 100644 index e79d2b6f857..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d792535e54a8cd729a0d708 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md deleted file mode 100644 index 3d6a5a955b7..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -id: 5d7925353b307724a462b06b -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Finally, return `fn("A")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md deleted file mode 100644 index 994e931f57f..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d792536735f71d746ee5d99 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. - -Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md deleted file mode 100644 index b06f86f5495..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d792536ad340d9dff2e4a96 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Now, remove the curly braces and return statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md deleted file mode 100644 index d1492aa5cbf..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925369614afd92d01fed5 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md deleted file mode 100644 index 8d17549a291..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d792536504e68254fe02236 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. - -Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md deleted file mode 100644 index 1c388711e2f..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536c8d2f0fdfad768fe -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -You can add more arguments by simply adding another arrow with another argument name: - -```js -const manyArguments = a => b => c => d => [a, b, c, d] -``` - -Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md deleted file mode 100644 index 45e6af501cc..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d79253639028b8ec56afcda -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md deleted file mode 100644 index 19bbc068cd3..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d792536834f2fd93e84944f -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -You call curried functions like this: - -```js -const result = add(1)(2); -``` - -Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md deleted file mode 100644 index e220cf656e5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536ddff9ea73c90a994 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. - -Change `x => elemValue(n)(x)` to `elemValue(n)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md deleted file mode 100644 index eaff17e3511..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d7925361596f84067904f7f -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('const fn') && - code.includes('varRangeExpanded') && - evalFormula('A1:J133') === '3' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md deleted file mode 100644 index 03ec1f65ba2..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dd8a4daf255488ac -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md deleted file mode 100644 index b1139d99d92..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536449c73004f265fb1 -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md deleted file mode 100644 index a481e918c67..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d79253685fc69b8fe60a0d2 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. - -This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md deleted file mode 100644 index 64e48966f02..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dc6e3ab29525de9e -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md deleted file mode 100644 index 57da365160d..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536cfd0fd893c630abb -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.includes('varRegex') && - code.includes('varExpanded') && - evalFormula('aC12bc') === 'abc' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md deleted file mode 100644 index 2dc9ec5c8ab..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 5d7925366a5ff428fb483b40 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md deleted file mode 100644 index 0516f1f77e6..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5d7925365d4035eeb2e395fd -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md deleted file mode 100644 index a1022f45c6a..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 5d7925364c106e9aaf05a16f -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. - -Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(evalFormula('(2+2)*2') === '8'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md deleted file mode 100644 index 5617221e798..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: 5d792536970cd8e819cc8a96 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -You can define arrow functions without arguments: - -```js -const two = () => 2; -``` - -Define an empty arrow function without arguments and assign it to `window.onload`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('window.onload=()=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md deleted file mode 100644 index 06b401c7e8e..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5d792536e33baeaa60129e0a -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md deleted file mode 100644 index 59443f50dc9..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 5d7925379e2a488f333e2d43 -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Now define a function `createLabel` which takes an argument `name` and has an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md deleted file mode 100644 index 3a3a6f126c8..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5d7925379000785f6d8d9af3 -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Inside `createLabel`, assign `document.createElement("div")` to `label`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md deleted file mode 100644 index a9a1dcc5726..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 5d79253791391b0acddd0ac5 -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Add the following code to `createLabel`: - -```js -label.className = "label"; -label.textContent = name; -container.appendChild(label); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md deleted file mode 100644 index 780a9dab7fe..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373104ae5ae83f20a5 -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -The `forEach` method takes a function and calls it with each element of the array. - -Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md deleted file mode 100644 index ccfac003142..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373b7127cfaeb50c26 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). - -# --hints-- - -See description above for instructions. - -```js -assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md deleted file mode 100644 index 5216d89d1d9..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d792537cb3a5cd6baca5e1a -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md deleted file mode 100644 index 544000db907..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 5d79253742f3313d55db981f -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md deleted file mode 100644 index bf8bee8395a..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 5d7925379e0180a438ce7f95 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md deleted file mode 100644 index d57aa617713..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d792537c80984dfa5501b96 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Inside `letters.forEach`, assign `document.createElement("input")` to `input`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md deleted file mode 100644 index 4568ec50b24..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925377b54d8a76efb5657 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Add the following code to `letters.forEach`: - -```js -input.type = "text"; -input.id = y + x; -input.onchange = update; -container.appendChild(input); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md deleted file mode 100644 index 6543d3124fb..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925371398513549bb6395 -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md deleted file mode 100644 index 378c01975ac..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d792537ea3eaf302bf2d359 -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md deleted file mode 100644 index 93968d4e378..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 5d792537533b1c7843bfd029 -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -The `includes` method works on a string and checks if the argument is its substring. - -Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md deleted file mode 100644 index dcc989ea328..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537dc0fe84345d4f19e -title: Step 93 -challengeType: 0 -dashedName: step-93 ---- - -# --description-- - -Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md deleted file mode 100644 index ce97294c369..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537b6cadae0f4b0cda1 -title: Step 94 -challengeType: 0 -dashedName: step-94 ---- - -# --description-- - -The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. - -Use the `slice` method to log the first two letters of `value` to the console. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md deleted file mode 100644 index 1eaf868ad16..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 5d79253770083fb730c93a93 -title: Step 95 -challengeType: 0 -dashedName: step-95 ---- - -# --description-- - -You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. - -Change the call to `slice` to log all characters except the first instead. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md deleted file mode 100644 index cd6f2405a86..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d792537fef76b226b63b93b -title: Step 96 -challengeType: 0 -dashedName: step-96 ---- - -# --description-- - -Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md deleted file mode 100644 index fb91f29be96..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d79253760fca25ccbbd8990 -title: Step 97 -challengeType: 0 -dashedName: step-97 ---- - -# --description-- - -The array destructuring syntax can be used to extract values from arrays: - -```js -const [x, y] = [1, 2]; // in variables -const fn = ([x, y]) => x + y // in functions -``` - -Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && - spreadsheetFunctions['random']([1, 2]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md deleted file mode 100644 index c933b24aaac..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d7925374321824cba309875 -title: Step 98 -challengeType: 0 -dashedName: step-98 ---- - -# --description-- - -Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( - code.replace(/\s/g, '') - ) && spreadsheetFunctions['random']([1, 1]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md deleted file mode 100644 index 2a5ee766e3d..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md +++ /dev/null @@ -1,276 +0,0 @@ ---- -id: 5d7925381e8565a5c50ba7f1 -title: Step 99 -challengeType: 0 -dashedName: step-99 ---- - -# --description-- - -In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. - -You can check if this is the case by comparing a call to a function with another call (with the same arguments): - -```js -console.log(f(2) === f(2)); // always true for pure functions -``` - -Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md deleted file mode 100644 index 2f419cf2876..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925383f1b77db7f1ff59e -title: Step 100 -challengeType: 0 -dashedName: step-100 ---- - -# --description-- - -This is (probably) false, so `random` is certainly impure. - -The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. - -Call `window.onload()` in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md deleted file mode 100644 index 176257a88b5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d792538de9fa3f298bcd5f6 -title: Step 101 -challengeType: 0 -dashedName: step-101 ---- - -# --description-- - -Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md deleted file mode 100644 index ad427105522..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -id: 5d7925385b74f69642e1fea5 -title: Step 102 -challengeType: 0 -dashedName: step-102 ---- - -# --description-- - -Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. - -Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md deleted file mode 100644 index 231159b2b34..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d7925380ea76d55b2c97d7b -title: Step 103 -challengeType: 0 -dashedName: step-103 ---- - -# --description-- - -This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. - -Remove the `console.log` statement. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.includes('console.log')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md deleted file mode 100644 index 36fd2f83b90..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d792538be4fe331f1a6c008 -title: Step 104 -challengeType: 0 -dashedName: step-104 ---- - -# --description-- - -Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. - -But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. - -Change these calls to `""` - the function is now pure but doesn't work. - -# --hints-- - -See description above for instructions. - -```js -const nos = code.replace(/\s/g, ''); -assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md deleted file mode 100644 index 4b9e711aae6..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 5d792538d169f33142175b95 -title: Step 105 -challengeType: 0 -dashedName: step-105 ---- - -# --description-- - -To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. - -Add an argument `cells` to `evalFormula`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md deleted file mode 100644 index 39584a049ae..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538e48b5a2c6e5bbe12 -title: Step 106 -challengeType: 0 -dashedName: step-106 ---- - -# --description-- - -When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md deleted file mode 100644 index 1ab52bf8124..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d7925387f3e9da5ec856dbe -title: Step 107 -challengeType: 0 -dashedName: step-107 ---- - -# --description-- - -Update the recursive call to `evalFormula` by passing in `cells` as the second argument. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md deleted file mode 100644 index 11e0b2d0bbc..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253824ae9b4a6e6f3108 -title: Step 108 -challengeType: 0 -dashedName: step-108 ---- - -# --description-- - -Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. - -# --hints-- - -See description above for instructions. - -```js -assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md deleted file mode 100644 index d4c961be237..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 5d7925383f122a279f4c54ad -title: Step 109 -challengeType: 0 -dashedName: step-109 ---- - -# --description-- - -The `find` method returns the first element of an array that satisfies the function passed to it. - -Chain `find` onto `cells` and pass it `cell => cell === id`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md deleted file mode 100644 index abdc6794679..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d7925387b682e962f209269 -title: Step 110 -challengeType: 0 -dashedName: step-110 ---- - -# --description-- - -In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md deleted file mode 100644 index 4baca0e6cc3..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538de774217b173288e -title: Step 111 -challengeType: 0 -dashedName: step-111 ---- - -# --description-- - -Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md deleted file mode 100644 index a2c5b9b1bef..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253891d93585323d1f3c -title: Step 112 -challengeType: 0 -dashedName: step-112 ---- - -# --description-- - -Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md deleted file mode 100644 index 637af181723..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925384e34e944ecb4612d -title: Step 113 -challengeType: 0 -dashedName: step-113 ---- - -# --description-- - -Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md deleted file mode 100644 index d12140aa462..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d792538631844ad0bdfb4c3 -title: Step 114 -challengeType: 0 -dashedName: step-114 ---- - -# --description-- - -`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. - -Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md deleted file mode 100644 index c966a9161ed..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -id: 5d792538e2a8d20cc580d481 -title: Step 115 -challengeType: 0 -dashedName: step-115 ---- - -# --description-- - -The `slice` method can also work on arrays. - -Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md deleted file mode 100644 index 5483ee8a3e9..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 5d792538f5004390d6678554 -title: Step 116 -challengeType: 0 -dashedName: step-116 ---- - -# --description-- - -You can also pass in a negative argument to `slice` to specify that index from the end: - -```js -[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] -``` - -Use a negative index to add a function `lasttwo` which returns the last two elements of an array. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md deleted file mode 100644 index 3e61d996f85..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 5d792539dd4fd4c96fd85f7e -title: Step 117 -challengeType: 0 -dashedName: step-117 ---- - -# --description-- - -The `%` operator returns the remainder: - -```js -4 % 3; // 1 -5 % 3; // 2 -6 % 3; // 0 -``` - -Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. - -# --hints-- - -See description above for instructions. - -```js -assert(isEven(20) && !isEven(31)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md deleted file mode 100644 index 8c4b6a9e314..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md +++ /dev/null @@ -1,292 +0,0 @@ ---- -id: 5d79253949802f8587c8bbd3 -title: Step 118 -challengeType: 0 -dashedName: step-118 ---- - -# --description-- - -The `filter` method keeps only the elements of an array that satisfy the function passed to it: - -```js -[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] -``` - -Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && - code.includes('filter') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md deleted file mode 100644 index c441a9459d8..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 5d7925395888767e9304c082 -title: Step 119 -challengeType: 0 -dashedName: step-119 ---- - -# --description-- - -The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. - -The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. - -For example, here's how to multiply all the value in an array: - -```js -[2, 3, 4].reduce((a, x) => a * x); // 24 -``` - -Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md deleted file mode 100644 index 787472aea1d..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 5d7925393b30099e37a34668 -title: Step 120 -challengeType: 0 -dashedName: step-120 ---- - -# --description-- - -The `includes` method checks if an element is in an array. - -Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md deleted file mode 100644 index f032db3ac16..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 5d7925398157757b23730fdd -title: Step 121 -challengeType: 0 -dashedName: step-121 ---- - -# --description-- - -The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: - -```js -[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] -// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array -// now it first tries [].concat(1) which works -``` - -Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md deleted file mode 100644 index 6b5714247b5..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d792539de4b9ac14dd40409 -title: Step 122 -challengeType: 0 -dashedName: step-122 ---- - -# --description-- - -Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === - '[1,3,5,7,9]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md deleted file mode 100644 index 8f15f9adfd4..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539534f1bf991bb987f -title: Step 123 -challengeType: 0 -dashedName: step-123 ---- - -# --description-- - -ES6 introduced a shorthand object literal syntax: - -```js -const a = 10; -const myObject = { a }; -console.log(myObject); // { a: 10 } -``` - -First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. - -# --hints-- - -See description above for instructions. - -```js -assert(sum([1, 2, 3]) === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md deleted file mode 100644 index eef96f2d471..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d7925394089b762f93ffa52 -title: Step 124 -challengeType: 0 -dashedName: step-124 ---- - -# --description-- - -Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. - -This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. - -# --hints-- - -See description above for instructions. - -```js -assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md deleted file mode 100644 index cb3b30d8c4f..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539ec758d45a6900173 -title: Step 125 -challengeType: 0 -dashedName: step-125 ---- - -# --description-- - -The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. - -As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md deleted file mode 100644 index 621e4cc4fbc..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md +++ /dev/null @@ -1,308 +0,0 @@ ---- -id: 5d7925398d525f61a9ff3a79 -title: Step 126 -challengeType: 0 -dashedName: step-126 ---- - -# --description-- - -The spread operator allow you to pass multiple arguments instead of an array: - -```js -const arr = [1, 2, 3]; -const sum3 = (a, b, c) => a + b + c; -sum3(...arr); // 6 -``` - -Use the spread operator to add `range` to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && - code.includes('...') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md deleted file mode 100644 index 8d27ee2bf76..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 5d792539a222f385c5c17d2b -title: Step 127 -challengeType: 0 -dashedName: step-127 ---- - -# --description-- - -Now define a `median` function which takes an argument `nums` (in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md deleted file mode 100644 index 08ffbd94e4a..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d7925398a7184b41b12a0e0 -title: Step 128 -challengeType: 0 -dashedName: step-128 ---- - -# --description-- - -The `sort` method sorts an array alphabetically: - -```js -["B", "C", "A"].sort(); // ["A", "B", "C"] -``` - -Assign the sorted `nums` to `sorted` in `median`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md deleted file mode 100644 index 49b025f4b1e..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d7925399afb905c34730a75 -title: Step 129 -challengeType: 0 -dashedName: step-129 ---- - -# --description-- - -But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: - -```js -[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] -``` - -If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. - -Use `sort` to sort `nums` in ascending order. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md deleted file mode 100644 index cad2f5aa466..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d792539728d1aa7788e2c9b -title: Step 130 -challengeType: 0 -dashedName: step-130 ---- - -# --description-- - -Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. - -You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md deleted file mode 100644 index df39b579f78..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d79253939434a2724c0ec41 -title: Step 131 -challengeType: 0 -dashedName: step-131 ---- - -# --description-- - -Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md deleted file mode 100644 index 1e4f1aca372..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 5d792539b9e1d3c54d8fe94a -title: Step 132 -challengeType: 0 -dashedName: step-132 ---- - -# --description-- - -Add a return statement to `median` so that it returns `isEven(length)`. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md deleted file mode 100644 index 4cf66a6dd6a..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5d792539b2e0bd8f9e8213e4 -title: Step 133 -challengeType: 0 -dashedName: step-133 ---- - -# --description-- - -Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. - -Note that the `middle` variable is close to the middle but is not actually the middle. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md deleted file mode 100644 index 2428ff3a79d..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 5d792539239148965a1a59a5 -title: Step 134 -challengeType: 0 -dashedName: step-134 ---- - -# --description-- - -Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.median([1, 20, 3]) === 3 && - spreadsheetFunctions.median([27, 7, 20, 10]) === 15 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md deleted file mode 100644 index ff91ae909fd..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d792539e1446045d0df6d28 -title: Step 135 -challengeType: 0 -dashedName: step-135 ---- - -# --description-- - -The `some` method checks if any element of the array satisfies the provided testing function. - -Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.someeven([1, 5, 4, 3]) && - !spreadsheetFunctions.someeven([3, 5, 9]) && - code.includes('.some') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md deleted file mode 100644 index ddede0016d6..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a2febbb77098730b9 -title: Step 136 -challengeType: 0 -dashedName: step-136 ---- - -# --description-- - -The `every` method checks if all elements of an array satisfy the provided testing function. - -Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && - !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && - code.includes('.every') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md deleted file mode 100644 index c475cf8ba22..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d79253a98bd9fdf7ce68d0a -title: Step 137 -challengeType: 0 -dashedName: step-137 ---- - -# --description-- - -We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. - -While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. - -Replace the body of `range` with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md deleted file mode 100644 index 52e294c3655..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 5d79253a1e9abf29de64c177 -title: Step 138 -challengeType: 0 -dashedName: step-138 ---- - -# --description-- - -The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. - -Make `range` return an array of `undefined` with size `end - start + 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md deleted file mode 100644 index ce1e1c87c73..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a8b29d78984369e4b -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -The `fill` method takes an argument and replaces all elements of the array with that argument. - -Use it on the array in `range` to replace everything with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md deleted file mode 100644 index 9630c3210b7..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 5d79253ad297a31cbe073718 -title: Step 140 -challengeType: 0 -dashedName: step-140 ---- - -# --description-- - -The function in the `map` method can actually take a second argument: the index of the element. - -This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). - -Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md deleted file mode 100644 index 7531f12a5a3..00000000000 --- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5dc10b8b93704f41d279eb5b -title: Step 141 -challengeType: 0 -dashedName: step-141 ---- - -# --description-- - -Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                      -
                                      -
                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md new file mode 100644 index 00000000000..d522cf2c5ab --- /dev/null +++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md @@ -0,0 +1,388 @@ +--- +id: 659ebe52d74b132a1d75c891 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug. + +The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function. +# --hints-- + +You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`. + +```js +assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn localStorage by Building a Todo App + + + + +
                                      +

                                      Todo App

                                      +
                                      + + + +
                                      +

                                      Discard unsaved changes?

                                      +
                                      + + +
                                      +
                                      +                                       +
                                      +
                                      +
                                      + + + + +``` + +```css +:root { + --white: #fff; + --light-grey: #f5f6f7; + --dark-grey: #0a0a23; + --yellow: #f1be32; + --golden-yellow: #feac32; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--dark-grey); +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + color: var(--light-grey); + margin: 20px 0 40px 0; +} + +.todo-app { + background-color: var(--white); + width: 300px; + height: 350px; + border: 5px solid var(--yellow); + border-radius: 8px; + padding: 15px; + position: relative; + display: flex; + flex-direction: column; + gap: 10px; +} + +.btn { + cursor: pointer; + width: 100px; + margin: 10px; + color: var(--dark-grey); + background-color: var(--golden-yellow); + background-image: linear-gradient(#fecc4c, #ffac33); + border-color: var(--golden-yellow); + border-width: 3px; +} + +.btn:hover { + background-image: linear-gradient(#ffcc4c, #f89808); +} + +.large-btn { + width: 80%; + font-size: 1.2rem; + align-self: center; + justify-self: center; +} + +.close-task-form-btn { + background: none; + border: none; + cursor: pointer; +} + +.close-icon { + width: 20px; + height: 20px; +} + +.task-form { + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--white); + border-radius: 5px; + padding: 15px; + width: 300px; + height: 350px; + flex-direction: column; + justify-content: space-between; + overflow: auto; +} + +.task-form-header { + display: flex; + justify-content: flex-end; +} + +.task-form-body { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.task-form-footer { + display: flex; + justify-content: center; +} + +.task-form-label, +#title-input, +#date-input, +#description-input { + display: block; +} + +.task-form-label { + margin-bottom: 5px; + font-size: 1.3rem; + font-weight: bold; +} + +#title-input, +#date-input, +#description-input { + width: 100%; + margin-bottom: 10px; + padding: 2px; +} + +#confirm-close-dialog { + padding: 10px; + margin: 10px auto; + border-radius: 15px; +} + +.confirm-close-dialog-btn-container { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.discard-message-text { + font-weight: bold; + font-size: 1.5rem; +} + +#tasks-container { + height: 100%; + overflow-y: auto; +} + +.task { + margin: 5px 0; +} + +.hidden { + display: none; +} + +@media (min-width: 576px) { + .todo-app, + .task-form { + width: 400px; + height: 450px; + } + + .task-form-label { + font-size: 1.5rem; + } + + #title-input, + #date-input { + height: 2rem; + } + + #title-input, + #date-input, + #description-input { + padding: 5px; + margin-bottom: 20px; + } +} +``` + +```js +const taskForm = document.getElementById("task-form"); +const confirmCloseDialog = document.getElementById("confirm-close-dialog"); +const openTaskFormBtn = document.getElementById("open-task-form-btn"); +const closeTaskFormBtn = document.getElementById("close-task-form-btn"); +const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); +const cancelBtn = document.getElementById("cancel-btn"); +const discardBtn = document.getElementById("discard-btn"); +const tasksContainer = document.getElementById("tasks-container"); +const titleInput = document.getElementById("title-input"); +const dateInput = document.getElementById("date-input"); +const descriptionInput = document.getElementById("description-input"); + +const taskData = []; +let currentTask = {}; + +const addOrUpdateTask = () => { + --fcc-editable-region-- + + --fcc-editable-region-- + const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); + const taskObj = { + id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, + title: titleInput.value, + date: dateInput.value, + description: descriptionInput.value, + }; + + if (dataArrIndex === -1) { + taskData.unshift(taskObj); + } else { + taskData[dataArrIndex] = taskObj; + } + + updateTaskContainer() + reset() +}; + +const updateTaskContainer = () => { + tasksContainer.innerHTML = ""; + + taskData.forEach( + ({ id, title, date, description }) => { + (tasksContainer.innerHTML += ` +
                                      +

                                      Title: ${title}

                                      +

                                      Date: ${date}

                                      +

                                      Description: ${description}

                                      + + +
                                      + `) + } + ); +}; + + +const deleteTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + buttonEl.parentElement.remove(); + taskData.splice(dataArrIndex, 1); +} + +const editTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + currentTask = taskData[dataArrIndex]; + + titleInput.value = currentTask.title; + dateInput.value = currentTask.date; + descriptionInput.value = currentTask.description; + + addOrUpdateTaskBtn.innerText = "Update Task"; + + taskForm.classList.toggle("hidden"); +} + +const reset = () => { + titleInput.value = ""; + dateInput.value = ""; + descriptionInput.value = ""; + taskForm.classList.toggle("hidden"); + currentTask = {}; +} + +openTaskFormBtn.addEventListener("click", () => + taskForm.classList.toggle("hidden") +); + +closeTaskFormBtn.addEventListener("click", () => { + const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; + if (formInputsContainValues) { + confirmCloseDialog.showModal(); + } else { + reset(); + } +}); + +cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); + +discardBtn.addEventListener("click", () => { + confirmCloseDialog.close(); + reset() +}); + +taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + addOrUpdateTask(); +}); +``` diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md deleted file mode 100644 index f4b05b12871..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e0e72c65bc8e73dfe1e -videoId: LGQuIIv2RVA -title: Elements and Tags Question A -challengeType: 15 -dashedName: elements-and-tags-question-a ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `

                                      `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                      `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                      ` or ``, but some can also be used without the closing forward slash such as `
                                      ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) - -## --text-- - -What are HTML tags? - -## --answers-- - -HTML tags tell the browser what content an element contains. - ---- - -HTML tags tell the browser when to load its content. - ---- - -HTML tags tell the browser what content the next element contains. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md deleted file mode 100644 index 51bf43a7014..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 637f4e1672c65bc8e73dfe1f -title: Elements and Tags Question B -challengeType: 15 -dashedName: elements-and-tags-question-b ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `

                                      `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                      `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                      ` or ``, but some can also be used without the closing forward slash such as `
                                      ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --text-- - -What are the three parts of most HTML elements? - -## --answers-- - -An opening tag, self closing tag, and content. - ---- - -An opening tag, closing tag, and content. - ---- - -An opening tag, closing tag, and attribute. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md deleted file mode 100644 index ab85844e81b..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e1c72c65bc8e73dfe20 -title: HTML Boilerplate Question A -challengeType: 15 -dashedName: html-boilerplate-question-a ---- - -# --description-- - -To demonstrate an HTML boilerplate, you first need an HTML file to work with. - -Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. - -You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. - -To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. - -It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. - -## The DOCTYPE - -Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. - -The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: - -```html - -``` - -However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. - -Open the `index.html` file created earlier in your text editor and add `` to the very first line. - -# --question-- -## --text-- - -What is the purpose of the `DOCTYPE` declaration? - -## --answers-- - -It tells the browser which version of HTML to use to render the document. - ---- - -It tells the browser that this document uses JavaScript. - ---- - -It tells the browser the title of the document. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md deleted file mode 100644 index ffd10a4b5ac..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 637f4e2872c65bc8e73dfe21 -title: HTML Boilerplate Question B -challengeType: 15 -dashedName: html-boilerplate-question-b ---- - -# --description-- - -After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. - -This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. - -Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: - -```html - - - -``` - -## What is the lang attribute? -`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. - -# --question-- - -## --text-- - -What is the `html` element? - -## --answers-- - -It is the root element in the document and tells the browser which version of HTML it should use. - ---- - -It is the root element in the document and all other elements should descend from it. - ---- - -It is the root element in the document and all other elements should come after it. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md deleted file mode 100644 index e4ddaa12c4b..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e2f72c65bc8e73dfe22 -title: HTML Boilerplate Question C -challengeType: 15 -dashedName: html-boilerplate-question-c ---- - -# --description-- - -The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. - -## The Charset Meta Element -You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. - -Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. - -## Title Element -Another element you should always include in the head of an HTML document is the `title` element: - -```html -My First Webpage -``` - -The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. - -If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. - -There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. - -Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: - - -```html - - - - - - My First Webpage - - -``` - -# --question-- - -## --text-- - -What is the purpose of the `head` element? - -## --answers-- - -The `head` element is used to display all elements that are displayed on the webpage. - ---- - -The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. - ---- - -The `head` element is used to display the header content on top of the webpage. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md deleted file mode 100644 index 302b6a95d44..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e3672c65bc8e73dfe23 -videoId: V8UAEoOvqFg -title: HTML Boilerplate Question D -challengeType: 15 -dashedName: html-boilerplate-question-d ---- - -# --description-- - -The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. - -To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. - ---- - -Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. - ---- - -Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. - -## --text-- - -What is the purpose of the `body` element? - -## --answers-- - -This is where all important information about the webpage is displayed such as the `title` and `meta` tags. - ---- - -This is where you tell the browser how to render the webpage correctly. - ---- - -This is where all content will be displayed on the page such images, text, and links. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md deleted file mode 100644 index 6c1bfb0a976..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 6374f208de18c50e48ba767b -title: Introduction To HTML and CSS Question A -challengeType: 15 -dashedName: introduction-to-html-and-css-question-a ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --assignment-- - -Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. - -## --text-- - -Which of the following statements is true? - -## --answers-- - -CSS is used to create the basic structure of a webpage, and HTML is used to add style. - ---- - -HTML is used to create the basic structure of a webpage, and CSS is used to add style. - ---- - -HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. - - -## --video-solution-- - -2 - - diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md deleted file mode 100644 index 87aff63d4ec..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 6376327e2724a688c04636e3 -title: Introduction To HTML and CSS Question B -challengeType: 15 -dashedName: introduction-to-html-and-css-question-b ---- - -# --description-- - - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to add paragraphs of text on a webpage? - -## --answers-- - -CSS - ---- - -JavaScript - ---- - -HTML - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md deleted file mode 100644 index 2ca9f2fbacb..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 637633162724a688c04636e4 -title: Introduction To HTML and CSS Question C -challengeType: 15 -dashedName: introduction-to-html-and-css-question-c ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to change the font and background color of a button? - -## --answers-- - -You should use CSS to change the background color and font of a button. - ---- - -You should use JavaScript to change the background color and font of a button. - ---- - -You should use HTML to change the background color and font of a button. - -## --video-solution-- - -1 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md deleted file mode 100644 index 53e4c08471a..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 637633672724a688c04636e5 -title: Introduction To HTML and CSS Question D -challengeType: 15 -dashedName: introduction-to-html-and-css-question-d ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -What is the difference between HTML, CSS, and JavaScript? - -## --answers-- - -HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. - ---- - -CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. - ---- - -JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md deleted file mode 100644 index b4d237448f3..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f704072c65bc8e73dfe36 -videoId: tsEQgGjSmkM -title: Links and Images Question A -challengeType: 15 -dashedName: links-and-images-question-a ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- Finally, add the following `h1` to the `body`: `

                                      Homepage

                                      ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. - -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. - -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Links video above. - -## --text-- - -What HTML tag is used to create a link? - -## --answers-- - -`` - ---- - -`

                                      ` - ---- - -`

                                        ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md deleted file mode 100644 index a138268c406..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f703572c65bc8e73dfe35 -title: Links and Images Question B -challengeType: 15 -dashedName: links-and-images-question-b ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                        Homepage

                                        ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `                                        ` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- -## --text-- - -What is an attribute? -## --answers-- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. - ---- - -An HTML attribute is used to tell the browser what the element contains. - ---- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md deleted file mode 100644 index 8863b087456..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 637f703072c65bc8e73dfe34 -title: Links and Images Question C -challengeType: 15 -dashedName: links-and-images-question-c ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                        Homepage

                                        ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --text-- - -What attribute tells links where to go to? - -## --answers-- - -`src` - ---- - -`href` - ---- - -`link` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md deleted file mode 100644 index 37eebffbabf..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 637f702872c65bc8e73dfe33 -videoId: ta3Oxx7Yqbo -title: Links and Images Question D -challengeType: 15 -dashedName: links-and-images-question-d ---- - -# --description-- - - -Generally, there are two kinds of links you will create: - -- Links to pages on other websites on the internet - -- Links to pages located on your own websites - - -## Absolute Links -Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. - -You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. - -`https://www.theodinproject.com/about` - -## Relative Links -Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. - -Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. - -Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: - -```html - - - - - Odin Links and Images - - - -

                                        About Page

                                        - - -``` - -Back in the `index` page, add the following anchor element to create a link to the `about` page: - -```html - -

                                        Homepage

                                        - click me - - About - -``` - -Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. - -This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. - -But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. - -Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. - -Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. - -To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. - -```html - -

                                        Homepage

                                        - About - -``` - -Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. - -In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. - -```html - -

                                        Homepage

                                        - About - -``` - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML File Structure video above. - -## --text-- - -What is the difference between an absolute and a relative link? - -## --answers-- - -An absolute link is a link to another page on the current website. A relative link is a link to another website. - ---- - -An absolute link is a link to another website. A relative link is a link another page on the current website. - ---- - -There is no difference between absolute and relative links. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md deleted file mode 100644 index ae008078088..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 637f702372c65bc8e73dfe32 -videoId: 0xoztJCHpbQ -title: Links and Images Question E -challengeType: 15 -dashedName: links-and-images-question-e ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                        Homepage

                                        - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## `Alt` attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included: - - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Images Video above. - -## --text-- - -Which tag is used to display an image? - -## --answers-- - -`` - ---- - -`` - ---- - -`` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md deleted file mode 100644 index e1af2d6a659..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701c72c65bc8e73dfe31 -title: Links and Images Question F -challengeType: 15 -dashedName: links-and-images-question-f ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                        Homepage

                                        -                                         click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -What two attributes do images always need to have? - -## --answers-- - -`href` and `alt` - ---- - -`name` and `href` - ---- - -`alt` and `src` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md deleted file mode 100644 index 5bc84fa6c96..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701572c65bc8e73dfe30 -title: Links and Images Question G -challengeType: 15 -dashedName: links-and-images-question-g ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                        Homepage

                                        - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -How do you access a parent directory in a filepath? - -## --answers-- - -`../` - ---- - -`./` - ---- - -`.../` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md deleted file mode 100644 index 71157081ae7..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 637f700b72c65bc8e73dfe2f -title: Links and Images Question H -challengeType: 15 -dashedName: links-and-images-question-h ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                        Homepage

                                        - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --assignment-- - -Read about the four main image formats that can be used on the web. - -## --text-- - -What are the four main image formats that you can use for images on the web? - -## --answers-- - -TIFF, GIF, PNG, and SVG. - ---- - -JPG, PNG, GIF, and SVG. - ---- - -JPG, PDF, SVG, and GIF. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md deleted file mode 100644 index f4625eb7e31..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e3e72c65bc8e73dfe24 -videoId: kcHKFZBVtf4 -title: Understand Ordered and Unordered List Question A -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-a ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                          ` element, and each item within the list is created using the list item element `
                                        • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                            ` element. Each individual item in them is again created using the list item element `
                                          1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --assignment-- - -Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. - ---- - -Make an unordered shopping list of your favorite foods. - ---- - -Make an ordered list of todo’s you need to get done today. - ---- - -Make an unordered list of places you’d like to visit someday. - ---- - -Make an ordered list of your all time top 5 favorite video games or movies. - -## --text-- - -What HTML tag is used to create an unordered list? - -## --answers-- - -`
                                          2. ` - ---- - -`
                                              ` - ---- - -`
                                                ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md deleted file mode 100644 index 67e79f0ccb9..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e4672c65bc8e73dfe25 -title: Understand Ordered and Unordered List Question B -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-b ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                                  ` element, and each item within the list is created using the list item element `
                                                • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                    ` element. Each individual item in them is again created using the list item element `
                                                  1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create an ordered list? - -## --answers-- - -`
                                                      ` - ---- - -`
                                                    1. ` - ---- - -`
                                                        ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md deleted file mode 100644 index 1edd6feffbf..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e5172c65bc8e73dfe26 -title: Understand Ordered and Unordered List Question C -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-c ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                                          ` element, and each item within the list is created using the list item element `
                                                        • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                            ` element. Each individual item in them is again created using the list item element `
                                                          1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create list items within both unordered and ordered lists? - -## --answers-- - -`
                                                              ` - ---- - -`
                                                            1. ` - ---- - -`
                                                                ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md deleted file mode 100644 index 8698b62aca8..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 637f4e5872c65bc8e73dfe27 -videoId: yqcd-XkxZNM -title: Working With Text Question A -challengeType: 15 -dashedName: working-with-text-question-a ---- - -# --description-- - -What would you expect the following text to output on an HTML page? - -```html - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. - -``` - -It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below: - - - -When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line. - -If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `

                                                                ` tag. - -Changing our example from before to use paragraph elements fixes the issue: - - - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. - -## --text-- - -How do you create a paragraph in HTML? - -## --answers-- - -`

                                                                This is a paragraph

                                                                ` - ---- - -`

                                                                This is a paragraph

                                                                ` - ---- - -`This is a paragraph` - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md deleted file mode 100644 index 17d3c900359..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 637f4e5f72c65bc8e73dfe28 -title: Working With Text Question B -challengeType: 15 -dashedName: working-with-text-question-b ---- - -# --description-- - -Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. - -There are 6 different levels of headings starting from `

                                                                ` to `

                                                                `. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. - -Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `

                                                                ` tag. - - - -Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. - -# --question-- -## --text-- - -How many different levels of headings are there and what is the difference between them? - -## --answers-- - -There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. - ---- - -There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. - ---- - -There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md deleted file mode 100644 index 6ccf0e06658..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 637f4e6672c65bc8e73dfe29 -videoId: gW6cBZLUk6M -title: Working With Text Question C -challengeType: 15 -dashedName: working-with-text-question-c ---- - -# --description-- - -The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. - -You can use `strong` on its own: - - - -But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: - - - -Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Bold and Italic Text Video above. - -## --text-- - -What element should you use to make text bold and important? - -## --answers-- - -`This is an important message` - ---- - -`

                                                                This is an important message

                                                                ` - ---- - -`This is an important message` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md deleted file mode 100644 index e686b2698e0..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 637f4e6e72c65bc8e73dfe2a -title: Working With Text Question D -challengeType: 15 -dashedName: working-with-text-question-d ---- - -# --description-- - -The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. - -To use `em` on its own: - - -Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: - - - -# --question-- -## --text-- - -What element should you use to make text italicized to add emphasis? - -## --answers-- - -`This is an italic message` - ---- - -`This is an italic message` - ---- - -`This is an italic message` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md deleted file mode 100644 index a0a7ba2fda9..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e7972c65bc8e73dfe2b -title: Working With Text Question E -challengeType: 15 -dashedName: working-with-text-question-e ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the `body` element is the parent and the `p` is the child: - -```html - - - - -

                                                                Lorem ipsum dolor sit amet.

                                                                - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: - -```html - - - - -

                                                                Lorem ipsum dolor sit amet.

                                                                -

                                                                Ut enim ad minim veniam.

                                                                - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship do two elements have if they are at the same level of nesting? - -## --answers-- - -The elements are each other's parents. - ---- - -The elements are each other's children. - ---- - -The elements are siblings. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md deleted file mode 100644 index 7d440cfab25..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f4e8072c65bc8e73dfe2c -title: Working With Text Question F -challengeType: 15 -dashedName: working-with-text-question-f ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the body element is the parent and the paragraph is the child: - -```html - - - - -

                                                                Lorem ipsum dolor sit amet.

                                                                - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: - -```html - - - - -

                                                                Lorem ipsum dolor sit amet.

                                                                -

                                                                Ut enim ad minim veniam.

                                                                - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship does an element have with any nested element within it? - -## --answers-- - -The element within the other element is called the parent element. - ---- - -The element within the other element is called the child element. - ---- - -The element within the other element is called the sibling element. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md deleted file mode 100644 index 5f5d141fa46..00000000000 --- a/curriculum/challenges/german/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e8772c65bc8e73dfe2d -title: Working With Text Question G -challengeType: 15 -dashedName: working-with-text-question-g ---- - -# --description-- - -HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. - -Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: - -```html -

                                                                View the html to see the hidden comments

                                                                - - - -

                                                                Some paragraph text

                                                                - - -``` - -# --question-- - -## --assignment-- - -To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. - -## --text-- - -How do you create HTML comments? - -## --answers-- - -`/* This is an HTML comment */` - ---- - -`` - ---- - -`<-- This is an HTML comment --!>` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md deleted file mode 100644 index 5b3f6a44858..00000000000 --- a/curriculum/challenges/german/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5900f36e1000cf542c50fe80 -title: 'Problem 1: Multiples of 3 and 5' -challengeType: 1 -forumTopicId: 301722 -dashedName: problem-1-multiples-of-3-and-5 ---- - -# --description-- - -If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. - -Find the sum of all the multiples of 3 or 5 below the provided parameter value `number`. - -# --hints-- - -`multiplesOf3and5(10)` should return a number. - -```js -assert(typeof multiplesOf3and5(10) === 'number'); -``` - -`multiplesOf3and5(49)` should return 543. - -```js -assert.strictEqual(multiplesOf3and5(49), 543); -``` - -`multiplesOf3and5(1000)` should return 233168. - -```js -assert.strictEqual(multiplesOf3and5(1000), 233168); -``` - -`multiplesOf3and5(8456)` should return 16687353. - -```js -assert.strictEqual(multiplesOf3and5(8456), 16687353); -``` - -`multiplesOf3and5(19564)` should return 89301183. - -```js -assert.strictEqual(multiplesOf3and5(19564), 89301183); -``` - -# --seed-- - -## --seed-contents-- - -```js -function multiplesOf3and5(number) { - - return true; -} - -multiplesOf3and5(1000); -``` - -# --solutions-- - -```js -const multiplesOf3and5 = (number) => { - var total = 0; - - for(var i = 0; i < number; i++) { - if(i % 3 == 0 || i % 5 == 0) { - total += i; - } - } - return total; -}; -``` diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md deleted file mode 100644 index a8abd3ff027..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 651dd5ae6ffb500e3f2ce47c -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -```js -console.log('with code'); -``` - -*** - -Making a statement based on her assumption. - -### --feedback-- - -No, that's not correct - -*** - -Expressing a possibility. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md deleted file mode 100644 index 27f5dcb5e42..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5d86ffb500e3f2ce47d -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md deleted file mode 100644 index a79f83d6f5a..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd5f41d697d0aab7833b5 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md deleted file mode 100644 index 13028d7c28a..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 651dd3e06ffb500e3f2ce478 -title: "Dialogue: Introducing" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-introducing ---- - -# --description-- - -What the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md deleted file mode 100644 index 3d67f522c07..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543abeff5f028dba112f278 -title: "I am: I'm" -challengeType: 19 -dashedName: i-am-im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, the verb `to be` is used to talk about identities, characteristics, and more. The contraction `I'm` is a combination of `I` and `am`. Here, Tom uses it to introduce himself. - -# --question-- - -## --text-- - -Which operation correctly expands the contraction `I'm`? - -## --answers-- - -`I is` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I am` - -*** - -`I was` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I have` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md deleted file mode 100644 index a2aa6a8f717..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 6543abf5f5f028dba112f279 -title: I'm -challengeType: 22 -dashedName: im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -The word `I'm` is a contraction of `I am`. Contractions are a way to shorten common combinations of words, especially with verbs. - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, that's right! _ Tom McKenzie.` - -## --blanks-- - -`I'm` diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md deleted file mode 100644 index 3b8b7cff0bd..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 6537e6ece93e5724eeb27c54 -title: Name and Job Title -challengeType: 19 -dashedName: name-and-job-title -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, we often mention our job or role in a company by saying, `I'm [Name], the [Job title].` This lets others know our position or role. - -# --question-- - -## --text-- - -What is Maria's job role at the company? - -## --answers-- - -`Graphic Designer` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Member` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Lead` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`CEO` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md deleted file mode 100644 index 2a3c405b6ad..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 651dd5386ffb500e3f2ce47a -title: Right -challengeType: 22 -dashedName: right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, to check or confirm something people sometimes use tag questions. For example, `You are a programmer, right?` Here, `right?` is used as a tag to check or confirm the previous statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, _?` - -## --blanks-- - -`are` - -### --feedback-- - -Pay attention to the verb in the sentence. - -*** - -`right` - -### --feedback-- - -Pay attention to the verb in the sentence. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md deleted file mode 100644 index 2ae09721cbf..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 6543aa3df5f028dba112f275 -title: Team Lead -challengeType: 22 -dashedName: team-lead -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -A `team lead` is a person who leads or manages a team. In the dialogue, Maria introduces herself as the team lead, meaning she has a leadership role. - -# --fillInTheBlank-- - -## --sentence-- - -`I'm Maria, the _ _.` - -## --blanks-- - -team - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -lead - -### --feedback-- - -Focus on the term Maria used to describe herself. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md deleted file mode 100644 index 3349bcfead9..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 6543aae6f5f028dba112f277 -title: "That's Right: 2" -challengeType: 22 -dashedName: thats-right-2 -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -Placeholder Description \_\_\_ \_\_ - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, _ _! I'm Tom McKenzie. It's a pleasure to meet you.` - -## --blanks-- - -`that's` - -*** - -`right` diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md deleted file mode 100644 index e85982fd561..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543aaa9f5f028dba112f276 -title: That's Right -challengeType: 19 -dashedName: thats-right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -When someone makes a correct assumption or guess about you, you can confirm it using phrases like `that's right`. It's a way of agreeing or saying yes to what is said. - -# --question-- - -## --text-- - -Which phrase does Tom use to confirm Maria's statement about him? - -## --answers-- - -`that's wrong` - -### --feedback-- - -`That's wrong` is used to disagree. - -*** - -`that's okay` - -### --feedback-- - -`that's okay` usually shows acceptance, not confirmation. - -*** - -`that's right` - -*** - -`that's left` - -### --feedback-- - -`that's left` refers to a direction, not confirmation. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md deleted file mode 100644 index dd254987129..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 651dd5296ffb500e3f2ce479 -title: You Are -challengeType: 22 -dashedName: you-are -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, when making introductions or identifying someone, you use the verb `to be`. In this case, `You are` is used to address the person Maria is talking to and affirmatively identify their occupation. - -Maria is introducing herself and confirming Tom's job role. `Are` is used in the present affirmative to make a statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, right?` - -## --blanks-- - -are - -### --feedback-- - -The verb `to be` is an irregular verb. When conjugated with the pronoun `you`, `be` becomes `are`. For example: `You are an English learner.` diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md new file mode 100644 index 00000000000..a041fbddef7 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md @@ -0,0 +1,15 @@ +--- +id: 655c0feadb1dd77f6cda623f +title: "Dialogue 1: A Job Interview" +challengeType: 21 +videoId: nLDychdBwUg +dashedName: dialogue-1-a-job-interview +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md new file mode 100644 index 00000000000..97f3f3245d8 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md @@ -0,0 +1,54 @@ +--- +id: 657b0f0be03b2137ed88b36c +title: Task 1 +challengeType: 19 +dashedName: task-1 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `interview` is a formal meeting where someone asks questions to learn about another person's experience, skills, or opinions. In job interviews, like in the dialogue, the interviewer asks about the candidate's previous job experiences. + +# --question-- + +## --text-- + +What is the purpose of Anna's meeting with the candidate? + +## --answers-- + +To discuss a new project at Acme Tech + +### --feedback-- + +The dialogue is about an interview, not a project discussion. + +--- + +To give a presentation on web development + +### --feedback-- + +The dialogue focuses on an interview, not a presentation. + +--- + +To have a casual conversation about programming + +### --feedback-- + +This is a formal interview, not a casual conversation. + +--- + +To conduct an interview about the candidate's job experience + +## --video-solution-- + +4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md new file mode 100644 index 00000000000..301a777a900 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md @@ -0,0 +1,50 @@ +--- +id: 657b106ced8c653be6b3218f +title: Task 2 +challengeType: 22 +dashedName: task-2 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Thanks for coming in for this interview. _ you _ me about your _ job experiences?` + +## --blanks-- + +`Can` + +### --feedback-- + +This word is used to ask if someone is able to do something. + +--- + +`tell` + +### --feedback-- + +This word is used when asking someone to give information. + +--- + +`previous` + +### --feedback-- + +This word is used to describe something that happened before now. + + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md new file mode 100644 index 00000000000..ad5202d23d2 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md @@ -0,0 +1,58 @@ +--- +id: 657b108cf870283d22b21e8e +title: Task 3 +challengeType: 19 +dashedName: task-3 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the simple present tense is used to describe habitual or usual actions. However, when you are talking about past roles or experiences, like in an interview, you should use the simple past tense. + +The simple past tense often involves changing verbs. For example, `is` becomes `was` for singular subjects and `are` becomes `were` for plural subjects. + +For example, `I am a teacher` in the present becomes `I was a teacher` for past experiences. Similarly, `They are engineers` changes to `They were engineers` when speaking about the past. + +# --question-- + +## --text-- + +What was the candidate's position at Acme Tech? + +## --answers-- + +`A project manager` + +### --feedback-- + +The candidate stated they were a programmer, not a project manager. + +--- + +`A database analyst` + +### --feedback-- + +The candidate mentioned being a programmer, which is different from a database analyst. + +--- + +`A programmer` + +--- + +`A software tester` + +### --feedback-- + +The candidate specifically mentioned their role as a programmer, not a software tester. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md new file mode 100644 index 00000000000..f757d7077f1 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md @@ -0,0 +1,38 @@ +--- +id: 657b110ad8afcc3f8e586362 +title: Task 4 +challengeType: 22 +dashedName: task-4 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that have been completed in the past. It involves changing verbs to show that the action happened before now. In this challenge, you'll practice using the simple past form of verb `to be`. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ there for three years. I _ responsible for developing web applications and maintaining the company's database.` + +## --blanks-- + +`was` + +### --feedback-- + +The first `was` indicates the completion of the time period the candidate spent at their previous job. + +--- + +`was` + +### --feedback-- + +The second `was` is used to describe past responsibility, indicating what the candidate used to do in their previous job. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md new file mode 100644 index 00000000000..a2258172744 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md @@ -0,0 +1,49 @@ +--- +id: 657b115008a62d41c0d7482f +title: Task 5 +challengeType: 19 +dashedName: task-5 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the context of programming and technology, the term `web applications` refers to software programs that run on a web server and are accessed through a web browser. They are an essential part of modern technology, allowing users to perform functions or access services over the internet. + +# --question-- + +## --text-- + +What does `web applications` refer to in the context of programming? + +## --answers-- + +Mobile apps that are downloaded from app stores + +### --feedback-- + +While mobile apps are a type of application, `web applications` specifically refer to those accessed through a web browser. + +--- + +Programs that run on a web server and are accessed via a web browser + +--- + +Physical hardware used in networking + +### --feedback-- + +Web applications are software, not physical hardware. + +--- + +Websites that only provide information without user interaction + +### --feedback-- + +Web applications are interactive and functional, not just informational. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md new file mode 100644 index 00000000000..6c2c5ba78bf --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md @@ -0,0 +1,49 @@ +--- +id: 657b119f0ce64343420bb850 +title: Task 6 +challengeType: 19 +dashedName: task-6 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `database` is a structured collection of data, typically stored electronically in a computer system. It is used to organize, store, and retrieve large amounts of information efficiently. In programming, `database` is essential for managing data that applications need to function. + +# --question-- + +## --text-- + +What is a `database` in the context of programming? + +## --answers-- + +A structured collection of data stored electronically + +--- + +A tool for designing websites + +### --feedback-- + +While important in web development, a database is not a tool for designing websites, but for storing data. + +--- + +A programming language used to create applications + +### --feedback-- + +A database is not a programming language; it's a system for storing and managing data. + +--- + +A type of computer virus + +### --feedback-- + +A database is a safe and structured way to store data, not a computer virus. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md new file mode 100644 index 00000000000..03e329649a9 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md @@ -0,0 +1,40 @@ +--- +id: 657b11e082e48a44eb4bfc09 +title: Task 7 +challengeType: 22 +dashedName: task-7 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's response and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ also part of the _ update team.` + +## --blanks-- + +`was` + +### --feedback-- + +This word is a past tense verb. You use it to talk about something that happened in the past. + +--- + +`software` + +### --feedback-- + +This word refers to computer programs. It's an important term in technology and programming. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md new file mode 100644 index 00000000000..67343b31705 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -0,0 +1,57 @@ +--- +id: 657b11f87368cf463ea4fe46 +title: Task 8 +challengeType: 19 +dashedName: task-8 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. For example: + + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. + `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + +# --question-- + +## --text-- + +How does Anna ask about specific projects in the past tense? + +## --answers-- + +`Where there any specific projects you'd like to mention?` + +### --feedback-- + +`Where` is used for locations. The correct form for asking about past events is `Were`. + +--- + +`Were there any specific projects you'd like to mention?` + +--- + +`Was there any specific projects you'd like to mention?` + +### --feedback-- + +`Was` is used with singular nouns. Since `projects` is plural, `Were` is the correct choice. + +--- + +`Are there any specific projects you'd like to mention?` + +### --feedback-- + +`Are` is present tense. The question is about past projects, so `Were` is needed. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md new file mode 100644 index 00000000000..e6bc643d065 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md @@ -0,0 +1,55 @@ +--- +id: 657b1240ef768447b80817ad +title: Task 9 +challengeType: 19 +dashedName: task-9 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense, as reviewed earlier, is used for actions completed in the past. In this context, `we were involved in` combines the simple past tense (`were`) with the expression `involved in`, which means being a part of something, especially in an active or important role. For example, `They were involved in organizing the event` means they played an important role in organizing it. + +# --question-- + +## --text-- + +How does the candidate describe their role in the project? + +## --answers-- + +`We had involvement in the development of the e-commerce platform.` + +### --feedback-- + +Although this phrase communicates involvement, the more common expression in English is `were involved in`. + +--- + +`We were engaged in the development of the e-commerce platform.` + +### --feedback-- + +`engaged in` is similar but not the exact phrase used by the candidate. `Involved in` specifically indicates an active participation. + +--- + +`We were involved in the development of the e-commerce platform.` + +--- + +`We participated in the development of the e-commerce platform.` + +### --feedback-- + +While `participated in` suggests involvement, the specific phrase used here is `involved in`. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md new file mode 100644 index 00000000000..f51e04c012a --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md @@ -0,0 +1,49 @@ +--- +id: 657b12ae08dd7049b300c901 +title: Task 10 +challengeType: 19 +dashedName: task-10 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +An `e-commerce platform` refers to a software application that allows businesses to manage their online sales operations. It typically includes features for displaying products, processing orders, and handling customer transactions. This term is essential in the world of online business, as it enables companies to sell goods and services over the internet. + +# --question-- + +## --text-- + +What is an `e-commerce platform` in the context of online business? + +## --answers-- + +A platform for social media marketing + +### --feedback-- + +While e-commerce platforms may use social media for marketing, they are primarily used for online sales operations. + +--- + +A software application for managing online sales + +--- + +A tool for website design and development + +### --feedback-- + +An e-commerce platform is specifically for managing online sales, not just website design. + +--- + +A system for email communication with customers + +### --feedback-- + +Though communication might be a feature, an e-commerce platform's main function is to manage online sales. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md new file mode 100644 index 00000000000..092c2b7ff32 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md @@ -0,0 +1,41 @@ +--- +id: 657b12e7c306334b7c320221 +title: Task 11 +challengeType: 22 +dashedName: task-11 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's statement and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for the checkout process, and it _ a successful implementation.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense of `are` used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense of `is` used for singular subjects or situations. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md new file mode 100644 index 00000000000..5a555480e1c --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md @@ -0,0 +1,49 @@ +--- +id: 657b13088693ef4ce21ce0e4 +title: Task 12 +challengeType: 19 +dashedName: task-12 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `checkout process` refers to the steps involved in completing a purchase, whether in a physical store or online. In a physical store, this usually involves taking items to a cashier, paying, and receiving a receipt. In online shopping, it includes adding items to a cart, entering shipping and payment details, and finalizing the order. + +# --question-- + +## --text-- + +What does the `checkout process` typically involve? + +## --answers-- + +Signing up for a store's loyalty program + +### --feedback-- + +While loyalty programs are part of customer engagement, the checkout process is specifically about completing a transaction. + +--- + +Arranging items on shelves in a store + +### --feedback-- + +Arranging items is a part of store management, not related to the checkout process of completing a purchase. + +--- + +Conducting market research + +### --feedback-- + +Market research is important for business strategy, but it's separate from the checkout process, which is directly involved in sales transactions. + +--- + +Completing a purchase through payment and receipt of goods + +## --video-solution-- + +4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md new file mode 100644 index 00000000000..db7a9bbed14 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md @@ -0,0 +1,49 @@ +--- +id: 657b133afcef714e542b557a +title: Task 13 +challengeType: 19 +dashedName: task-13 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Implementation` in a technical or business context refers to the process of putting a plan or design into effect. In software development, for instance, implementation involves the actual coding and setup of a software application based on designed specifications. It is a critical phase where ideas or plans are turned into a functioning reality. + +# --question-- + +## --text-- + +What does `implementation` mean in a project context? + +## --answers-- + +The planning stage of a project + +### --feedback-- + +Planning is the phase where strategies are formed, not the actual execution or implementation of those plans. + +--- + +The analysis of project results + +### --feedback-- + +Analysis is about evaluating outcomes, whereas implementation is about executing or carrying out the project plans. + +--- + +The process of team formation + +### --feedback-- + +Team formation is part of project setup, but implementation specifically refers to executing the planned tasks of the project. + +--- + +The execution of a plan or design + +## --video-solution-- + +4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md new file mode 100644 index 00000000000..1fa977ff3c0 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md @@ -0,0 +1,49 @@ +--- +id: 657b135e9029fb4f8141e40c +title: Task 14 +challengeType: 22 +dashedName: task-14 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. This is a great way to practice and remember these words. + +# --fillInTheBlank-- + +## --sentence-- + +`Anna: That's excellent. _ there any specific projects you'd like to mention?` + +`Candidate: Yes, in one of my team's projects, we were _ in the development of an e-commerce platform. We were responsible for the _ process, and it was a successful implementation.` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past tense form of `are`. The first letter should be capitalized. + +--- + +`involved` + +### --feedback-- + +This word means participating actively in something. + +--- + +`checkout` + +### --feedback-- + +This term refers to the process of completing a purchase. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md new file mode 100644 index 00000000000..94904516eba --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md @@ -0,0 +1,54 @@ +--- +id: 657b138d33db9e50f116b5f0 +title: Task 15 +challengeType: 19 +dashedName: task-15 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and answer the question. + +# --question-- + +## --text-- + +How does Anna ask about the candidate's educational background in computer science? + +## --answers-- + +`Are you educated in computer science?` + +### --feedback-- + +`Are you` is present tense, but Anna's question is about the candidate's past education. + +--- + +`Do you study computer science?` + +### --feedback-- + +`Do you study` is present tense. The question is about past education. + +--- + +`Were you educated in computer science?` + +--- + +`Have you studied computer science?` + +### --feedback-- + +`Have you studied` is a different form, asking if they have ever studied it at any time. `Were you educated` specifically asks about formal education in the past. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md new file mode 100644 index 00000000000..6044644f850 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md @@ -0,0 +1,49 @@ +--- +id: 657b1431076b365555784189 +title: Task 16 +challengeType: 19 +dashedName: task-16 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `bachelor's degree` is an undergraduate academic degree awarded by colleges and universities upon completion of a course of study. In the term `bachelor's degree`, the use of the noun (`bachelor`) followed by the `'s` indicates possession or association. This form is commonly used to show that something belongs to or is related to the noun, as in `today's news` or `teacher's guide`. + +# --question-- + +## --text-- + +What does `bachelor's degree` refer to? + +## --answers-- + +An undergraduate academic degree + +--- + +A type of professional certification + +### --feedback-- + +A bachelor's degree is an academic qualification, not a professional certification. + +--- + +A high school diploma + +### --feedback-- + +A bachelor's degree is a higher education qualification, more advanced than a high school diploma. + +--- + +A master's program entry requirement + +### --feedback-- + +While a bachelor's degree may be required for a master's program, it itself refers to an undergraduate degree. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md new file mode 100644 index 00000000000..299109790e0 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md @@ -0,0 +1,56 @@ +--- +id: 657b145976723b56a97b8dda +title: Task 17 +challengeType: 19 +dashedName: task-17 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `I was introduced to` uses the simple past tense form `was` of the verb `be`, combined with the past participle `introduced`. This structure, `be` followed by a verb suffixed with `-ed`, is often used to describe actions that happened to the subject in the past. For example: + +`At college, I was introduced to many programing languages` + +# --question-- + +## --text-- + +What does the candidate mean by saying `I was introduced to various programming languages and software development principles`? + +## --answers-- + +I taught myself various programming languages and principles + +### --feedback-- + +`I was introduced to` implies being formally taught or shown by someone else, not self-teaching. + +--- + +I learned about various programming languages and principles in my studies + +--- + +I have extensive experience with various programming languages and principles + +### --feedback-- + +The phrase indicates initial exposure to these topics, not necessarily extensive experience. + +--- + +I developed various programming languages and principles + +### --feedback-- + +Being introduced to something means learning about it for the first time, not creating or developing it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md new file mode 100644 index 00000000000..2e11e13fa69 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md @@ -0,0 +1,49 @@ +--- +id: 657b149630b3ea5873269a38 +title: Task 18 +challengeType: 19 +dashedName: task-18 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `various` is an adjective used to describe a number of different types or kinds of something, emphasizing diversity or variety. It is often used to indicate that there are several distinct items or examples being referred to. For example, saying `various books` means books of different kinds or genres. + +# --question-- + +## --text-- + +What does `various` imply when talking about programming languages and software development principles? + +## --answers-- + +Different types or kinds + +--- + +A specific type or kind + +### --feedback-- + +The term `various` implies diversity, not specificity. + +--- + +Only one type + +### --feedback-- + +`Various` indicates a number of different types, not just one. + +--- + +Irrelevant or unrelated types + +### --feedback-- + +`Various` does mean different types, but these are usually relevant and related to the context. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md new file mode 100644 index 00000000000..b217384d87c --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md @@ -0,0 +1,38 @@ +--- +id: 657b14d8353d665a187fe771 +title: Task 19 +challengeType: 22 +dashedName: task-19 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this challenge, you'll practice filling in key terms from the dialogue. These terms are commonly used in job interviews and are essential for understanding the context of the discussion. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Sure, I was a programmer at Acme Tech. I was there for three years. I was responsible for developing web _ and maintaining the company's _. I was also part of the software update team.` + +## --blanks-- + +`applications` + +### --feedback-- + +These are programs designed to perform specific tasks or functions. + +--- + +`database` + +### --feedback-- + +This is a collection of information organized for easy access, management, and updating. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md new file mode 100644 index 00000000000..5d81b22a9e7 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md @@ -0,0 +1,62 @@ +--- +id: 657b153ac677705c7059530d +title: Task 20 +challengeType: 19 +dashedName: task-20 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `could you tell me` is a polite way to ask someone for information. It's commonly used in formal or professional situations, like job interviews or meetings. +In English, some verbs have irregular past forms, meaning they do not follow the regular pattern of adding `-ed` to make the past tense. `Can` is one such verb, and its irregular simple past form is `could`. + +The existence of irregular forms, like `could`, often comes from the way language has evolved over time. These forms do not follow the regular patterns and need to be memorized. + +For example: + +- Present: `I can speak English.` +- Past: `I could speak English when I was six.` + +# --question-- + +## --text-- + +What does the phrase `could you tell me` in Anna's sentence express? + +## --answers-- + +A polite request for information + +--- + +A command to do something immediately + +### --feedback-- + +The phrase `could you tell me` is used for polite requests, not direct commands. + +--- + +A suggestion for future action + +### --feedback-- + +This phrase is asking for information now, not suggesting something for the future. + +--- + +An offer to help someone + +### --feedback-- + +This phrase is more about asking for information than offering help. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md new file mode 100644 index 00000000000..ecf0d666af0 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md @@ -0,0 +1,54 @@ +--- +id: 657b15dbcafe4d5f39a5de82 +title: Task 21 +challengeType: 19 +dashedName: task-21 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `previous` is used to describe something that happened before the current time or situation. It's often used to refer to past experiences, jobs, or events. + +# --question-- + +## --text-- + +In the context of Anna's question, what does `previous` refer to? + +## --answers-- + +Past roles and responsibilities + +--- + +Future roles and responsibilities + +### --feedback-- + +`Previous` refers to something that has already happened, not something in the future. + +--- + +Current roles and responsibilities + +### --feedback-- + +`Previous` means something that happened before now, not what is happening currently. + +--- + +Unrelated roles and responsibilities + +### --feedback-- + +`Previous` specifically relates to roles and responsibilities that were held before, not those unrelated. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md new file mode 100644 index 00000000000..8497f67b9bb --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md @@ -0,0 +1,53 @@ +--- +id: 657b160d6a8662610fe6a523 +title: Task 22 +challengeType: 22 +dashedName: task-22 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that were completed in the past. Regular verbs in the past tense usually end with `-ed`, while irregular verbs have unique past forms. For example, as you learned in previous tasks, `was` and `were` are the past forms of `is` and `are`. + +Examples of simple past tense: + +- `I worked at a company.` (`work` becomes `worked`) +- `I was happy.` (`is` becomes `was`) +- `We were busy.` (`are` becomes `were`) + +# --fillInTheBlank-- + +## --sentence-- + +`Hello! Certainly. I _ at Mock Corporation for five years. I _ part of a team of software engineers, and we _ responsible for developing and maintaining various applications.` + +## --blanks-- + +`worked` + +### --feedback-- + +Think of the past tense of `work`, a regular verb that follows the usual `-ed` ending pattern. + +--- + +`was` + +### --feedback-- + +Recall the past tense form of `is`, which changes to a completely different word in its irregular past form. + +--- + +`were` + +### --feedback-- + +Consider the past tense of `are`, an irregular verb that also changes to a different word in the past. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md new file mode 100644 index 00000000000..8e1b26a3bce --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md @@ -0,0 +1,46 @@ +--- +id: 657b163c9da40e62b904be1f +title: Task 23 +challengeType: 22 +dashedName: task-23 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the past simple interrogative. In questions, the simple past tense often begins with a past tense verb, followed by the subject and the rest of the sentence. This structure is used to ask about past events or states. + +# --fillInTheBlank-- + +## --sentence-- + +`That's great to hear. _ the members of the team _ _ any specific achievements or projects?` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past form of `are` used to ask about a past state or condition. + +--- + +`involved` + +### --feedback-- + +Think of a word that means `participated in` or `engaged with`. + +--- + +`in` + +### --feedback-- + +A preposition that often follows `involved` to indicate participation or inclusion. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md new file mode 100644 index 00000000000..bc7924edcf6 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md @@ -0,0 +1,54 @@ +--- +id: 657b18e71067d6680b9ac5d3 +title: Task 24 +challengeType: 19 +dashedName: task-24 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `redesign` means to design something again or differently. It's often used in the context of improving or updating the design of an existing product, service, or structure. In software and web development, redesigning is a common practice to enhance functionality, user experience, or aesthetics. + +# --question-- + +## --text-- + +What does `redesign` imply in Candidate2's statement about the website project? + +## --answers-- + +To design for the first time + +### --feedback-- + +`Redesign` implies working on something that already exists, not creating it for the first time. + +--- + +To remove the design + +### --feedback-- + +`Redesign` means to change or improve the existing design, not to remove it. + +--- + +To change or improve an existing design + +--- + +To copy a design + +### --feedback-- + +`Redesign` involves making changes or improvements, not copying a design as it is. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md new file mode 100644 index 00000000000..ed588a90563 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md @@ -0,0 +1,54 @@ +--- +id: 657b1985ae17886b05b382b1 +title: Task 25 +challengeType: 19 +dashedName: task-25 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `performance` in a technical context often refers to how well a system or component operates, especially in terms of speed, efficiency, and reliability. For websites and software, performance can relate to how quickly pages load, the responsiveness of the application, or the stability of the system under various conditions. + +# --question-- + +## --text-- + +What does `performance` refer to in Candidate2's statement about the website? + +## --answers-- + +A live presentation + +### --feedback-- + +While `performance` can mean a presentation, in this context, it relates to the functioning of the website. + +--- + +Artistic display + +### --feedback-- + +In a technical context, `performance` refers to operational effectiveness, not an artistic aspect. + +--- + +Financial success + +### --feedback-- + +`Performance` in this context is about the website's operational aspects, not its financial success. + +--- + +How well the website operates + +## --video-solution-- + +4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md new file mode 100644 index 00000000000..98e6bda774a --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md @@ -0,0 +1,54 @@ +--- +id: 657b19bf7b32af6caf763ef7 +title: Task 26 +challengeType: 19 +dashedName: task-26 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `collaborative effort` refers to a situation where people work together as a team to achieve a common goal. This kind of teamwork is essential in many work environments, especially on projects where different skills and perspectives are needed. + +# --question-- + +## --text-- + +What does `collaborative effort` imply in the context of Candidate2's statement? + +## --answers-- + +Working independently + +### --feedback-- + +`Collaborative effort` means working together as a team, not independently. + +--- + +Teamwork to achieve a goal + +--- + +Avoiding responsibility + +### --feedback-- + +`Collaborative effort` involves taking shared responsibility, not avoiding it. + +--- + +Focusing on individual skills + +### --feedback-- + +`Collaborative effort` emphasizes teamwork over individual skills. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md new file mode 100644 index 00000000000..56a621b07c6 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md @@ -0,0 +1,38 @@ +--- +id: 657b1a03df3ec46eca276046 +title: Task 27 +challengeType: 22 +dashedName: task-27 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. + +# --fillInTheBlank-- + +## --sentence-- + +`Yes, our team _ involved in a project to _ the company's website.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`redesign` + +### --feedback-- + +This word means to design something again in a different way. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md new file mode 100644 index 00000000000..66d49e9e89f --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md @@ -0,0 +1,55 @@ +--- +id: 657b1a27dc6daf6ffd52ff1f +title: Task 28 +challengeType: 19 +dashedName: task-28 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the noun suffixed with `'s` followed by a second noun structure is used to show possession or belonging. If the first noun is singular, as in `Sarah's laptop`, it indicates that the laptop belongs to Sarah. However, if the first noun is plural, the structure changes to noun suffixed with `'`, as in `teachers' office`, indicating an office for teachers. + +# --question-- + +## --text-- + +What does `master's degree` in the context of the dialogue refer to? + +## --answers-- + +A degree for school teachers + +### --feedback-- + +`Master's degree` refers to an advanced academic degree, not specifically for teachers. + +--- + +A primary level educational degree + +### --feedback-- + +`Master's degree` is a higher education qualification, beyond the primary level. + +--- + +A degree in mastering skills + +### --feedback-- + +While it implies expertise, `master's degree` specifically refers to an academic qualification. + +--- + +An advanced academic degree + +## --video-solution-- + +4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md new file mode 100644 index 00000000000..bf63c3e8d24 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md @@ -0,0 +1,49 @@ +--- +id: 657b1a637e4dc571f8f4d3d7 +title: Task 29 +challengeType: 19 +dashedName: task-29 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `appreciate` is often used to express gratitude or to acknowledge the value or importance of something or someone's actions. It's a way of showing that you recognize and are thankful for someone's help, effort, or achievement. + +# --question-- + +## --text-- + +In a work meeting, your colleague says, `I really appreciate your help on this project.` What is your colleague expressing? + +## --answers-- + +Dissatisfaction with your work + +### --feedback-- + +`Appreciate` means to be grateful or thankful, not to show dissatisfaction. + +--- + +Indifference to your contribution + +### --feedback-- + +`Appreciate` is used to express positive recognition, not indifference. + +--- + +Gratitude for your contribution + +--- + +A need for more assistance + +### --feedback-- + +`Appreciate` here indicates satisfaction with the help received, not a request for more assistance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md new file mode 100644 index 00000000000..4fa33c1c2d0 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md @@ -0,0 +1,47 @@ +--- +id: 657b1a9581015573806e1e20 +title: Task 30 +challengeType: 22 +dashedName: task-30 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words you learned. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for implementing new features and ensuring the website's performance. It _ a _ effort, and we were able to deliver the project on time.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense form of `are`, used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`collaborative` + +### --feedback-- + +This word means working together as a team. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md new file mode 100644 index 00000000000..6013cb50f86 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md @@ -0,0 +1,39 @@ +--- +id: 657b1cc072206e7ac3db88b8 +title: Task 31 +challengeType: 22 +dashedName: task-31 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the missing words correctly. This is a great way to practice what you've learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I have a _ degree in computer science. My studies _ quite intensive, and I was introduced to many different methodologies.` + +## --blanks-- + +`master's` + +### --feedback-- + +This term, using the `noun's noun` structure, refers to an advanced academic degree. + +--- + +`were` + +### --feedback-- + +This is the past tense form of `are` used for plural subjects or things. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md new file mode 100644 index 00000000000..1c7c7b4603c --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md @@ -0,0 +1,30 @@ +--- +id: 657b1d080265ba7c4f96bf79 +title: Task 32 +challengeType: 22 +dashedName: task-32 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task helps you review the word you learned. Listen to the dialogue and complete the sentence correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`Impressive! We _ candidates with strong educational backgrounds and practical experience.` + +## --blanks-- + +`appreciate` + +### --feedback-- + +This word means to recognize the value or importance of something or someone's actions. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md new file mode 100644 index 00000000000..28e4211c290 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md @@ -0,0 +1,15 @@ +--- +id: 657b1d4ec0e2587e8bcc95f7 +title: "Dialogue 3: Two Workmates Talk About Their Backgrounds" +challengeType: 21 +dashedName: dialogue-3-two-workmates-talk-about-their-backgrounds +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md new file mode 100644 index 00000000000..df8ebc66d25 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md @@ -0,0 +1,54 @@ +--- +id: 657b1da0b27fef8117827ce5 +title: Task 33 +challengeType: 19 +dashedName: task-33 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned about the simple past tense. Now, you can explore it further. The simple past tense is often formed by adding `-ed` to a verb. But, when a verb ends with an `e`, you just add a `d`. For example, `notice` becomes `noticed`. + +# --question-- + +## --text-- + +What does `noticed` in Sarah's sentence indicate? + +## --answers-- + +Sarah observed something in the past + +--- + +Sarah is planning to observe something + +### --feedback-- + +The simple past tense `noticed` indicates a completed action in the past, not a future plan. + +--- + +Sarah continuously observes something + +### --feedback-- + +The simple past tense `noticed` is used for actions that were completed, not ongoing actions. + +--- + +Sarah never observes anything + +### --feedback-- + +`Noticed` implies that Sarah did observe something, not never observing. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md new file mode 100644 index 00000000000..5a1ba6afbfc --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md @@ -0,0 +1,30 @@ +--- +id: 657b1dfec76149836ea5c7d0 +title: Task 34 +challengeType: 22 +dashedName: task-34 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you will focus on the past simple negative. It's created by adding `not` after the auxiliary verb `was` or `were`. For example, `was` becomes `wasn't` (`was not`) and `were` becomes `weren't` (`were not`). This form is used to describe something that did not happen in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`It _ exactly tech-related, but I learned a lot about problem-solving and critical thinking.` + +## --blanks-- + +`wasn't` + +### --feedback-- + +This word is used to make a negative statement in the past tense. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md new file mode 100644 index 00000000000..da30e71e20a --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md @@ -0,0 +1,49 @@ +--- +id: 657b1e2fad2ffe84ab420a56 +title: Task 35 +challengeType: 19 +dashedName: task-35 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You're already familiar with `wasn't` and `weren't` for past simple negative. Now, let's explore `didn't`, a contraction of `did not`. It's used with the base form of verbs (the infinitive without `to`) to express that an action did not happen in the past. For example, `didn't go` means the action of going did not occur. + +# --question-- + +## --text-- + +Imagine you are reading a story about a character who planned to attend a concert but couldn't. How would you describe this situation? + +## --answers-- + +The character enjoyed the concert + +### --feedback-- + +Using `didn't` suggests the character did not go to the concert, contradicting the idea of enjoying it. + +--- + +The character didn't attend the concert + +--- + +The character always goes to concerts + +### --feedback-- + +This expression refers to a regular habit, not a specific event in the past. + +--- + +The character is looking forward to the next concert + +### --feedback-- + +This option is about future anticipation. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md new file mode 100644 index 00000000000..938a8118ce2 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md @@ -0,0 +1,54 @@ +--- +id: 657b1e66159fec86336a737b +title: Task 36 +challengeType: 19 +dashedName: task-36 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned the basics of the simple past tense. Now you can dive deeper into it. Typically, the simple past tense is formed by adding `-ed` to regular verbs. For instance, the verb `play` becomes `played` in the simple past. This tense is used to describe actions that were completed at a specific time in the past. + +# --question-- + +## --text-- + +What does `I played` in Sophie's sentence suggest about her experience with coding? + +## --answers-- + +She casually experimented with coding in the past + +--- + +She is currently playing a coding game + +### --feedback-- + +`Played` is in the past tense, indicating a past action, not something happening currently. + +--- + +She plans to start coding soon + +### --feedback-- + +`Played` implies she already has some experience with coding, not that she is planning to start. + +--- + +She never tried coding + +### --feedback-- + +Using `played` confirms she did engage in coding, contradicting the idea of never trying it. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md new file mode 100644 index 00000000000..2bd70b3d732 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md @@ -0,0 +1,49 @@ +--- +id: 657b1e9a62603587747f7f45 +title: Task 37 +challengeType: 19 +dashedName: task-37 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In English, when forming questions in the simple past tense, you often use `did`. This is followed by the subject and the base form of the verb (without `ed`). For example, `Did you enjoy` is a past simple interrogative phrase where `did` is the auxiliary verb, `you` is the subject, and `enjoy` is the base form of the verb. + +# --question-- + +## --text-- + +What does a question like `Did you enjoy the concert last night?` ask about? + +## --answers-- + +Are you going to enjoy the concert? + +### --feedback-- + +This implies a future event. The question with `did` is asking about a past experience. + +--- + +Do you enjoy concerts in general? + +### --feedback-- + +This is asking about general preferences, not a specific past event. + +--- + +Did you have a good experience at the concert last night? + +--- + +Will you enjoy future concerts? + +### --feedback-- + +The question is about a past event, not future experiences. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md new file mode 100644 index 00000000000..430fa995037 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md @@ -0,0 +1,42 @@ +--- +id: 657b1ee1de7216896b5b4361 +title: Task 38 +challengeType: 22 +dashedName: task-38 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blank correctly. This task is a review. Remember, the simple past tense is used to talk about actions or situations in the past, and the negative form is used to describe things that did not happen. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: That's interesting! So, you _ work on many programming projects during your studies?` + +`Sophie: No, not really. I _ around with coding, but most of my projects involved circuit designs and electrical systems. It was a bit different.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used here to talk about something that was not done in the past. + +--- + +`played` + +### --feedback-- + +This word suggests that Sophie casually engaged in coding for pleasure or interest. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md new file mode 100644 index 00000000000..dfcc68a881a --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md @@ -0,0 +1,40 @@ +--- +id: 657b1f0585d48f8ac0b19654 +title: Task 39 +challengeType: 22 +dashedName: task-39 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you'll focus on answering questions in the simple past tense. When responding to a past simple interrogative (a question), you can answer affirmatively with `did` or negatively with `didn't`. For example, `Did you go to the party?` can be answered with `I did` (affirmative) or `I didn't` (negative). Listen to the dialogue and fill in the blanks correctly to practice this structure. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: I see. _ you enjoy your time there, even if it wasn't entirely tech-focused? Sophie: I _.` + +## --blanks-- + +`Did` + +### --feedback-- + +This word is used to form a past simple interrogative question. The first letter should be capitalized. + +--- + +`did` + +### --feedback-- + +This response is an affirmative answer to the past simple interrogative question. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md new file mode 100644 index 00000000000..92e4b28c489 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md @@ -0,0 +1,49 @@ +--- +id: 657b1f598f63008c8bdb20b8 +title: Task 40 +challengeType: 19 +dashedName: task-40 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the simple past tense, some verbs are irregular and don't follow the regular `-ed` ending pattern. One example of this is the verb `meet`, which becomes `met` in the past tense. This is important to remember when talking about past events. + +# --question-- + +## --text-- + +During a class reunion, an old friend tells you, `We met for the first time in art class.` What is your friend referring to with `met`? + +## --answers-- + +We are meeting right now in art class + +### --feedback-- + +The use of `met` indicates a past event, not something happening currently. + +--- + +Our first encounter was in the past, specifically in art class + +--- + +We will meet for the first time soon + +### --feedback-- + +`Met` indicates a past action, not a future arrangement. + +--- + +We have never been in art class together + +### --feedback-- + +`Met` suggests a past meeting. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md new file mode 100644 index 00000000000..e3cdc339c1f --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md @@ -0,0 +1,49 @@ +--- +id: 657b1f981cd42e8dc3b282d9 +title: Task 41 +challengeType: 19 +dashedName: task-41 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn another special case in this task. It's the past tense form of `have`. Unlike regular verbs that add `-ed` for the past tense, `have` becomes `had`. This irregular form is used for both singular and plural subjects in the past tense, making it a unique and important verb to remember. + +# --question-- + +## --text-- + +What does `had` imply in a sentence like `They had a meeting yesterday?` + +## --answers-- + +They possessed or experienced something in the past + +--- + +They are having a meeting right now + +### --feedback-- + +`Had` is used for past actions, indicating the meeting occurred in the past, not at the present moment. + +--- + +They will have a meeting tomorrow + +### --feedback-- + +`Had` indicates a past action, not a future plan. + +--- + +They never have meetings + +### --feedback-- + +Using `had` confirms that the meeting took place in the past. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md new file mode 100644 index 00000000000..9f86ab82bcb --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md @@ -0,0 +1,47 @@ +--- +id: 657b1fe950c0df90346e5d12 +title: Task 42 +challengeType: 22 +dashedName: task-42 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the words `met`, `had`, and `wasn't`. You have already learned these words. Listen to the dialogue and fill in the blanks with the correct words. This exercise is a good way to practice and reinforce your understanding of these words in context. + +# --fillInTheBlank-- + +## --sentence-- + +`I did. It was challenging, but I _ some fantastic people. We _ a bunch of fun coding marathons, although I _ always a very strong programmer.` + +## --blanks-- + +`met` + +### --feedback-- + +This word is used here to describe encountering people in the past. + +--- + +`had` + +### --feedback-- + +This word is used to express possession or experiences in the past. + +--- + +`wasn't` + +### --feedback-- + +This word is the negative form in the past tense, indicating something that was not the case. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md new file mode 100644 index 00000000000..2ee4e256d2a --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md @@ -0,0 +1,39 @@ +--- +id: 657b201372864e91d4f5bb53 +title: Task 43 +challengeType: 22 +dashedName: task-43 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +When a verb ends in a consonant followed by `y`, you should change the `y` to `i` and add `ed` for the past tense. For example, `carry` becomes `carried`. Note that this rule applies when the `y` follows a consonant, not a vowel, so the simple past form of `convey` is `conveyed`. For regular verbs, you simply add `ed` to form the past tense. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ at a small college as well and _ in information technology.` + +## --blanks-- + +`studied` + +### --feedback-- + +The past simple tense of `study` is formed by changing `y` to `i` and adding `ed`. + +--- + +`majored` + +### --feedback-- + +This word follows the regular past simple tense formation by just adding `ed`. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md new file mode 100644 index 00000000000..67255d1bac6 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md @@ -0,0 +1,26 @@ +--- +id: 657b20338e0802931673c1e1 +title: Task 44 +challengeType: 22 +dashedName: task-44 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + +# --description-- + +You've learned that for verbs ending in `e`, you simply add `d` to form the simple past tense. Choose the correct form of `love` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she really _ the beach vacation.` + +## --blanks-- + +`loved` + +### --feedback-- + +To form the simple past, add `d` to the base form of the verb, `love`. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md new file mode 100644 index 00000000000..4d89a2935c0 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md @@ -0,0 +1,54 @@ +--- +id: 657b20985d315095e5c3851d +title: Task 45 +challengeType: 19 +dashedName: task-45 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this context, `got` is a special case in the simple past tense. It's the past tense of `get`. Unlike regular verbs that typically add `-ed` for the past tense, `get` changes to `got`. + +# --question-- + +## --text-- + +In the context of Sarah's statement, what does `got` imply about her experience? + +## --answers-- + +She is getting the opportunity now + +### --feedback-- + +`Got` indicates a past opportunity, not something happening currently. + +--- + +She had the opportunity in the past + +--- + +She will get the opportunity in the future + +### --feedback-- + +`Got` refers to a past experience, not a future possibility. + +--- + +She never gets such opportunities + +### --feedback-- + +`Got` in this context suggests she did have this opportunity. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md new file mode 100644 index 00000000000..ac32d364daa --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md @@ -0,0 +1,50 @@ +--- +id: 657b21e28a01039cb27b4f13 +title: Task 46 +challengeType: 19 +dashedName: task-46 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `exactly` is used to emphasize the truth or accuracy of a statement or description. It can mean `precisely` or `just`. For example, if someone says, `It's exactly what I needed`, they mean that it is precisely or perfectly what was required. `Exactly` often highlights that something is correct in every detail. + +# --question-- + +## --text-- + +What does `exactly` imply in a sentence like `This is exactly the kind of work I enjoy`? + +## --answers-- + +This is somewhat similar to the work I enjoy + +### --feedback-- + +`Exactly` indicates a perfect match, not just a similarity. + +--- + +This is the opposite of the work I enjoy + +### --feedback-- + +`Exactly` implies a perfect match, not an opposite. + +--- + +I am not sure if this is the work I enjoy + +### --feedback-- + +Using `exactly` shows certainty, not uncertainty. + +--- + +This is precisely the type of work that I find enjoyable + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md new file mode 100644 index 00000000000..36c267c651b --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md @@ -0,0 +1,35 @@ +--- +id: 657b221b2ab0ac9e18a173ef +title: Task 47 +challengeType: 22 +dashedName: task-47 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Let's look at `exactly` and `exact`. You use `exactly` to show something is just right or very true. It is an adverb. For example, `You did it exactly right!`. + +`Exact` is an adjective, and it describes something very correct or precise, like in `the exact time`. + +# --fillInTheBlank-- + +## --sentence-- + +`She knew the _ time of the meeting. She arrived _ at 3 pm.` + +## --blanks-- + +`exact` + +### --feedback-- + +This word is an adjective, describing the noun `time`. + +--- + +`exactly` + +### --feedback-- + +This word is an adverb, showing that her arrival time was very precise. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md new file mode 100644 index 00000000000..82dcdea8fbb --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -0,0 +1,39 @@ +--- +id: 657b223e41ce6b9f9a01d214 +title: Task 48 +challengeType: 22 +dashedName: task-48 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You'll review the past simple negative in this task. It's formed using `was` or `were` with `not`, like `weren't` (`were not`) or `wasn't` (`was not`). It's used to talk about things that did not happen or were not true in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`They _ _ big projects.` + +## --blanks-- + +`weren't` + +### --feedback-- + +It's the negative form of `were` in the past tense, used to say something was not true or did not happen. + +--- + +`exactly` + +### --feedback-- + +This word is used to emphasize the statement, suggesting the projects were not precisely big. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md new file mode 100644 index 00000000000..06ce8ba3d76 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md @@ -0,0 +1,15 @@ +--- +id: 657b227f7ad32ea17e2cdf28 +title: "Dialogue 4: A Developer with a Different Background" +challengeType: 21 +dashedName: dialogue-4-a-developer-with-a-different-background +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md new file mode 100644 index 00000000000..abee49452c1 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md @@ -0,0 +1,56 @@ +--- +id: 657b2310b8cd52a4f15c1818 +title: Task 49 +challengeType: 19 +dashedName: task-49 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `unconventional` is used to describe something that's not based on or conforming to what is generally done or believed. It often implies a method or approach that is different from the norm. + +# --question-- + +## --text-- + +What does `unconventional` imply about Alice's background in tech? + +## --answers-- + +Her background is different from the usual way people get into tech + +--- + +Her background is exactly the same as most people in tech + +### --feedback-- + +`Unconventional` means not following the usual conventions, which contradicts being the same as most people. + +--- + +She doesn't have any background in tech + +### --feedback-- + +`Unconventional` suggests a different approach, not the absence of a background. + +--- + +She followed a very traditional path into tech + +### --feedback-- + +`Unconventional` indicates a non-traditional path, not a very traditional one. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md new file mode 100644 index 00000000000..47917952aff --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md @@ -0,0 +1,39 @@ +--- +id: 657b2340be1593a6517fe77b +title: Task 50 +challengeType: 22 +dashedName: task-50 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple negative, `did not` (contracted to `didn't`) is followed by the base form of a verb. This structure is used to express that an action did not happen in the past. In this dialogue, Alice is describing her educational background related to technology. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ _ tech at a traditional university.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used in the past simple negative to indicate that an action was not done. + +--- + +`study` + +### --feedback-- + +The base form of the verb is used after the contraction in negative past simple sentences. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md new file mode 100644 index 00000000000..e19667245f9 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md @@ -0,0 +1,54 @@ +--- +id: 657b236aa1eb9fa7b209aa03 +title: Task 51 +challengeType: 19 +dashedName: task-51 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `mostly` is used to indicate that something is true to a large extent but not completely. It suggests that while other factors or methods may be involved, the primary aspect is what is mentioned. + +# --question-- + +## --text-- + +In Alice's statement, what does `mostly` suggest about her way of learning? + +## --answers-- + +She only learned through formal education + +### --feedback-- + +`Mostly` implies a greater emphasis on self-teaching rather than exclusive formal education. + +--- + +She didn't learn anything on her own + +### --feedback-- + +The use of `mostly` indicates a significant amount of self-learning, not an absence of it. + +--- + +She learned equally through self-teaching and formal courses + +### --feedback-- + +`Mostly` suggests a greater emphasis on one method over an equal balance. + +--- + +Her learning was primarily through her own efforts, with some formal courses + +## --video-solution-- + +4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md new file mode 100644 index 00000000000..10f6121949b --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md @@ -0,0 +1,36 @@ +--- +id: 657b23a413d28da927e087ca +title: Task 52 +challengeType: 22 +dashedName: task-52 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +This task reviews how an adverb is often formed by adding `-ly` to an adjective. + + +# --fillInTheBlank-- + +## --sentence-- + +`She completed _ of her work before lunch. The office is _ quiet in the mornings.` + +## --blanks-- + +`most` + +### --feedback-- + +This word is used as an adjective to describe the quantity of work completed. + +--- + +`mostly` + +### --feedback-- + +This word is used as an adverb to describe the general state of the office. + + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md new file mode 100644 index 00000000000..8f0a554d33f --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md @@ -0,0 +1,50 @@ +--- +id: 657b23bc0e32f9aa9c62eb82 +title: Task 53 +challengeType: 19 +dashedName: task-53 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `self-taught` refers to acquiring knowledge or skills without direct teaching from a traditional teacher or educational institution. It involves learning independently. The word `taught` is the past participle of `teach`. When someone is `self-taught`, it means they have taught themselves. + +# --question-- + +## --text-- + +What does `self-taught` imply when someone says, `I am self-taught in programming`? + +## --answers-- + +They were taught programming by a professional teacher + +### --feedback-- + +`Self-taught` indicates learning independently, not being taught by a professional teacher. + +--- + +They have no knowledge of programming + +### --feedback-- + +`Self-taught` means they have acquired knowledge or skills, not that they lack them. + +--- + +They learned programming on their own, without formal education + +--- + +They are planning to learn programming in the future + +### --feedback-- + +`Self-taught` refers to learning that has already taken place, not future plans. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md new file mode 100644 index 00000000000..daa0ed7fa3b --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md @@ -0,0 +1,27 @@ +--- +id: 657b23f03b449aac2c517089 +title: Task 54 +challengeType: 22 +dashedName: task-54 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `took` is a special case in the simple past tense. It's the past tense of `take`. Unlike regular verbs that follow the standard `-ed` ending for the past tense, `take` changes to `took`. This irregular form is important to know because it's commonly used to talk about actions that happened in the past. Choose the correct past tense form of `take` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she _ a photography class.` + +## --blanks-- + +`took` + +### --feedback-- + +This word is the past tense form of `take`. It's used to talk about actions that happened in the past. + + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md new file mode 100644 index 00000000000..aa093ae629c --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md @@ -0,0 +1,49 @@ +--- +id: 657b242d06512dadaea55056 +title: Task 55 +challengeType: 19 +dashedName: task-55 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The verb `attend` means to be present at an event or place. It's often used regarding schools, colleges, meetings, or events. It implies regular participation or presence at a specific place or event. + +# --question-- + +## --text-- + +If a friend tells you, `I'm going to attend the new art workshop downtown`, what are they planning to do? + +## --answers-- + +They are planning to teach at the art workshop + +### --feedback-- + +`Attend` suggests participating as a learner or member, not as a teacher. + +--- + +They might visit the workshop once + +### --feedback-- + +`Attend` implies regular or scheduled participation, not a one-time visit. + +--- + +They are not interested in art workshops + +### --feedback-- + +Saying they will `attend` indicates interest and intent to participate, not a lack of interest. + +--- + +They plan to regularly participate in the art workshop + +## --video-solution-- + +4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md new file mode 100644 index 00000000000..4dd651ea958 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md @@ -0,0 +1,39 @@ +--- +id: 657b24542024c8af092cd6c4 +title: Task 56 +challengeType: 22 +dashedName: task-56 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple, negative sentences are formed using `did not`, contracted to `didn't`, followed by the base form of the main verb. Listen to the dialogue and fill in the blanks with these words. + +# --fillInTheBlank-- + +## --sentence-- + +`So, you _ _ a regular college or anything like that?` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used to form a negative statement in the past tense. + +--- + +`attend` + +### --feedback-- + +The word means being present at an event or place. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md new file mode 100644 index 00000000000..15b9abab580 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md @@ -0,0 +1,48 @@ +--- +id: 657b24774d8cdab052ffe2a6 +title: Task 57 +challengeType: 22 +dashedName: task-57 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and fill in the blanks correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ study tech at a traditional university. I'm _, and I _ a lot of online courses.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used to form a negative statement in the past tense. + +--- + +`self-taught` + +### --feedback-- + +This word describes acquiring knowledge or skills independently. + +--- + +`took` + +### --feedback-- + +This word is the past tense form of a verb meaning to have completed an action. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md new file mode 100644 index 00000000000..b7c7a773588 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md @@ -0,0 +1,40 @@ +--- +id: 657b24a500800cb1c6945da9 +title: Task 58 +challengeType: 22 +dashedName: task-58 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`No, not at all. I _ at a different job, but I got really interested in programming and tech, so I _ learning in my free time.` + +## --blanks-- + +`was` + +### --feedback-- + +Use `to be` in the past tense. + +--- + +`started` + +### --feedback-- + +Use the verb `start`in the past tense. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md new file mode 100644 index 00000000000..14bccd55f81 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md @@ -0,0 +1,41 @@ +--- +id: 657b2be1b19500c63fc1a467 +title: Task 59 +challengeType: 22 +dashedName: task-59 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`That's impressive! _ you _ learning on your own?` + +## --blanks-- + +`Did` + +### --feedback-- + +Auxiliary verb for questions. This word should be capitalized. + +--- + +`enjoy` + +### --feedback-- + +A verb used to describe you are having fun. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md new file mode 100644 index 00000000000..f55f7908a4f --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md @@ -0,0 +1,38 @@ +--- +id: 657b2c040bb5f6c77fa5df80 +title: Task 60 +challengeType: 22 +dashedName: task-60 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You'll be filling in blanks with words you're already familiar with. + +# --fillInTheBlank-- + +## --sentence-- + +`Absolutely. It _ challenging, but I _ it.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of the verb `to be`, used for singular subjects. + +--- + +`loved` + +### --feedback-- + +This is the past tense form of a verb expressing a strong liking or enjoyment. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md new file mode 100644 index 00000000000..dc14016d020 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md @@ -0,0 +1,38 @@ +--- +id: 657b2d618b8851cc5baf9490 +title: Task 61 +challengeType: 22 +dashedName: task-61 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Listen to the audio and complete the sentence. + + +# --fillInTheBlank-- + +Fill in the blank with correct words. + + +## --sentence-- + +`Yes, I did. I built a few small web applications, just to practice. It _ a great way to apply what I _.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `to be`, used here for a singular subject. + +--- + +`learned` + +### --feedback-- + +This is the past tense form of `learn`, indicating the acquisition of knowledge or skills in the past. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md new file mode 100644 index 00000000000..b2433b84777 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md @@ -0,0 +1,54 @@ +--- +id: 657b2d9cb974dace59024964 +title: Task 62 +challengeType: 19 +dashedName: task-62 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `got` in this context is a versatile term and can have several meanings. In its simplest form, it's the past tense of `get`, which can mean to receive, arrive, become, or reach, depending on the context. In Tom's statement, `got` refers to the progress or level Alice reached through self-study. + +# --question-- + +## --text-- + +What does `got` imply in Tom's statement about Alice's progress? + +## --answers-- + +She received something while studying + +### --feedback-- + +While `got` can mean receiving, in this context it refers to the extent or level of progress. + +--- + +She achieved or reached a significant level in her studies + +--- + +She needs to get more resources for studying + +### --feedback-- + +`Got` here refers to past progress, not a current need for more resources. + +--- + +She didn't make any progress in her studies + +### --feedback-- + +`Got` in this sentence clearly indicates significant progress, not a lack of it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md new file mode 100644 index 00000000000..3ea0498bbbe --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md @@ -0,0 +1,15 @@ +--- +id: 657b2dd7745fdcd03e5160f4 +title: "Dialogue 5: Anna Talks About her Experience" +challengeType: 21 +dashedName: dialogue-5-anna-talks-about-her-experience +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md new file mode 100644 index 00000000000..8a3ff270f80 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -0,0 +1,54 @@ +--- +id: 657b2e0666d4a9d1b851f90e +title: Task 63 +challengeType: 19 +dashedName: task-63 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `tech recruiter` refers to a professional role focused on recruiting candidates for technology-related positions. This role involves understanding the tech industry, identifying qualified candidates, and matching them with suitable tech job openings. + +# --question-- + +## --text-- + +What is Tom asking about when he mentions `Tech recruiter` in his question? + +## --answers-- + +The technical skills needed to be a recruiter + +### --feedback-- + +`Tech recruiter` here refers to the job role, not the specific skills required for the job. + +--- + +The technology used by recruiters + +### --feedback-- + +While technology is involved, `Tech recruiter` refers to the profession itself, not the tools used. + +--- + +The person's career path in becoming a technology recruitment specialist + +--- + +Recruiting people to learn technology + +### --feedback-- + +`Tech recruiter` is about hiring for tech roles, not recruiting people to learn technology. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md new file mode 100644 index 00000000000..340203d5990 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md @@ -0,0 +1,49 @@ +--- +id: 657b2ec6c054efd71e503a27 +title: Task 64 +challengeType: 19 +dashedName: task-64 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `actually` is often used to express a fact or reality, sometimes contrasting with what was thought, believed, or said before. It adds emphasis to a statement to clarify a truth or correct a previous assumption or statement. + +# --question-- + +## --text-- + +What does `actually` imply in a sentence like `I actually prefer working remotely`? + +## --answers-- + +The truth is contrary to what might have been assumed or stated before + +--- + +I never work remotely + +### --feedback-- + +`Actually` in this context is used to express a real preference. + +--- + +I always work in an office setting + +### --feedback-- + +Using `actually` here is meant to reveal a preference for remote work, not office work. + +--- + +I don't have any work preferences + +### --feedback-- + +`Actually` suggests a specific preference, contradicting the idea of having none. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md new file mode 100644 index 00000000000..51c4c579915 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md @@ -0,0 +1,33 @@ +--- +id: 657b2eeb31e435d89ecce6f3 +title: Task 65 +challengeType: 22 +dashedName: task-65 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn about `actual` in this task. It's a describing word (adjective). It means what something is really like. For example, `the actual color` means the real color. You often add `-ly` to an adjective to form an adverb. This rule helps change many describing words into words that tell people how something is said or done. Here, you add `-ly` to `actual` and it's the adverb `actually`. + +# --fillInTheBlank-- + +## --sentence-- + +`The _ size of the room was quite small. She _ likes small cozy spaces.` + +## --blanks-- + +`actual` + +### --feedback-- + +This word describes the real size of the room. + +--- + +`actually` + +### --feedback-- + +This word is used to say she really likes small spaces. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md new file mode 100644 index 00000000000..101e280ee29 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md @@ -0,0 +1,54 @@ +--- +id: 657b2f0b3bcfe7d9f4151854 +title: Task 66 +challengeType: 19 +dashedName: task-66 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The terms `therapist` and `counselor` refer to professionals who provide guidance and support to people dealing with emotional, psychological, or mental health issues. Both play a vital role in helping individuals work through personal challenges. In Anna's statement, these terms describe the career paths she was considering. + +# --question-- + +## --text-- + +In Anna's statement, what does `therapist or counselor` refer to? + +## --answers-- + +Jobs in the technology industry + +### --feedback-- + +`Therapist or counselor` refers to mental health and emotional support roles, not technology-related jobs. + +--- + +Career paths in mental health and emotional support + +--- + +Educational courses she wanted to take + +### --feedback-- + +While these roles require education, the terms directly refer to the job roles, not the courses. + +--- + +Hobbies that she was interested in + +### --feedback-- + +`Therapist or counselor` are professional career paths, not hobbies. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md new file mode 100644 index 00000000000..40c9c66ce5e --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md @@ -0,0 +1,49 @@ +--- +id: 657b2f3bf7a2cbdb58d959d5 +title: Task 67 +challengeType: 19 +dashedName: task-67 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `last` is used to refer to the most recent past occurrence of a period or event. For example, `last year` means the year before this one, `last month` refers to the month before the current one, and `last week` points to the week before this week. Understanding time expressions like `last year`, `last month`, `last week`, or `last day` helps in talking about events that happened in the recent past. + +# --question-- + +## --text-- + +When someone mentions in a discussion about changes, `I switched careers last year.` What does `last year` indicate about the timing of their career change? + +## --answers-- + +They are planning to switch careers in the near future + +### --feedback-- + +This suggests a future action, but `last year` indicates the change already occurred in the past. + +--- + +They have been considering a career change for a long time + +### --feedback-- + +Though they might have considered it for a long time, `last year` specifically identifies when the change took place. + +--- + +The career change is happening currently + +### --feedback-- + +`Last year` refers to a completed action in the past, not something happening in the present. + +--- + +The career switch happened in the previous year + +## --video-solution-- + +4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md new file mode 100644 index 00000000000..796bb1e6c39 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md @@ -0,0 +1,49 @@ +--- +id: 657b2f6cb66826dcbac08094 +title: Task 68 +challengeType: 19 +dashedName: task-68 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Organizational psychology` is a field of psychology that studies how people interact within groups, particularly in workplace settings. It focuses on understanding workplace dynamics, employee behavior, and organizational structure to improve the work environment and increase productivity. + +# --question-- + +## --text-- + +What does `organizational psychology` typically involve? + +## --answers-- + +It deals with organizing office spaces + +### --feedback-- + +While organization is a part of the field, `organizational psychology` primarily focuses on people and behavior, not physical space. + +--- + +It's about the psychology of organizing events + +### --feedback-- + +`Organizational psychology` is not specifically about event planning but rather about behavior in workplace groups. + +--- + +It's the study of how people behave and interact in workplace groups + +--- + +It focuses on individual psychological treatment + +### --feedback-- + +`Organizational psychology` looks at group dynamics in workplaces, not individual therapy. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md new file mode 100644 index 00000000000..e185bc5a457 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md @@ -0,0 +1,38 @@ +--- +id: 657b2fa89ddc20de629ca21f +title: Task 69 +challengeType: 22 +dashedName: task-69 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will fill in the blanks with words you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ studied psychology in college. My plan was to become a _ or counselor.` + +## --blanks-- + +`actually` + +### --feedback-- + +This word is used to emphasize the accuracy or truth of a statement. + +--- + +`therapist` + +### --feedback-- + +This word refers to a professional role focused on mental health and emotional support. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md new file mode 100644 index 00000000000..ecc1ceb6792 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md @@ -0,0 +1,46 @@ +--- +id: 657b2fc9c0f96bdfddfce4d9 +title: Task 70 +challengeType: 22 +dashedName: task-70 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this exercise, you will explore the phrase `pique one's interest`. This phrase means to stimulate or arouse someone's curiosity or interest in something. It's often used when something catches your attention and makes you want to learn more about it. Alongside this phrase, you will fill in the blanks with familiar words that you've already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ a course in organizational _, and it _ my interest in the workplace and employee dynamics.` + +## --blanks-- + +`took` + +### --feedback-- + +This word refers to the action of participating in or completing a course. + +--- + +`psychology` + +### --feedback-- + +This word describes the study of the mind and behavior, particularly in a workplace setting in this context. + +--- + +`piqued` + +### --feedback-- + +This word means to arouse or stimulate interest or curiosity. You should correctly use its simple past tense. diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md new file mode 100644 index 00000000000..acc29551124 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md @@ -0,0 +1,49 @@ +--- +id: 657b2fea728c2be14a8a98c4 +title: Task 71 +challengeType: 19 +dashedName: task-71 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Employee dynamics` refers to the way employees interact and work together in a workplace. It's an example of using one noun (`employee`) to describe another noun (`dynamics`). This type of descriptive noun helps give more specific information about the subject. Other examples include `race car`, where `race` describes the type of car, and `garden hose`, where `garden` describes the type of hose. + +# --question-- + +## --text-- + +What does `employee dynamics` refer to in a workplace context? + +## --answers-- + +The dynamics of machines used by employees + +### --feedback-- + +`Employee dynamics` specifically refers to interactions and relationships among employees, not machinery. + +--- + +The interactions and relationships among employees + +--- + +The employment status of workers + +### --feedback-- + +`Employee dynamics` is about how employees work together, not their employment status. + +--- + +The dynamics of hiring new employees + +### --feedback-- + +`Employee dynamics` refers to existing employee interactions, not the hiring process. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md new file mode 100644 index 00000000000..bcbb031c907 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md @@ -0,0 +1,54 @@ +--- +id: 657b3026ff79fbe2dda6cb39 +title: Task 72 +challengeType: 19 +dashedName: task-72 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `That's a cool twist` is often used to express that something is interestingly unexpected or surprisingly different. The word `twist` here refers to a change or development in a situation or story that is unusual or unexpected. `Cool` in this context means it's positively received. + +# --question-- + +## --text-- + +What is Tom expressing when he says `That's a cool twist`? + +## --answers-- + +He finds the unexpected change or development interesting + +--- + +He thinks the situation is confusing + +### --feedback-- + +While a `twist` can be surprising, Tom's use of `cool` suggests he finds it interesting rather than confusing. + +--- + +He is unhappy with the new development + +### --feedback-- + +`Cool twist` usually indicates a positive reaction, not dissatisfaction. + +--- + +He expected the development all along + +### --feedback-- + +The term `twist` implies that the development was unexpected. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md new file mode 100644 index 00000000000..6a30241c1a2 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md @@ -0,0 +1,55 @@ +--- +id: 657b306fe94f29e4b4aa9105 +title: Task 73 +challengeType: 19 +dashedName: task-73 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `not right away` is used to indicate that something didn't happen immediately or at the earliest opportunity. It suggests that there was a delay or a period before the action or change took place. This phrase helps to set the timeline of events or actions. + +# --question-- + +## --text-- + +What does Anna mean when she says `not right away`? + +## --answers-- + +She immediately started working in HR at a tech company + +### --feedback-- + +`Not right away` indicates a delay or period before taking action, not immediate action. + +--- + +She started working in a different role before moving to HR at a tech company + +--- + +She has never worked in HR + +### --feedback-- + +The statement implies she did work in HR, just not immediately. + +--- + +She was always focused on training and development + +### --feedback-- + +`Not right away` suggests a progression or change over time, not a constant focus. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md new file mode 100644 index 00000000000..b21bdf5b3e6 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md @@ -0,0 +1,49 @@ +--- +id: 657b30ac03b523e6640deaf1 +title: Task 74 +challengeType: 22 +dashedName: task-74 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will practice filling in the blanks with words that you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`Tom: That's a cool _. _ you immediately start working as a tech recruiter after college? Anna: Not right away. I _ in a general HR role at a non-tech company first, focusing on training and development.` + + +## --blanks-- + +`twist` + +### --feedback-- + +It refers to an interesting or unexpected change in a situation. + +--- + +`Did` + +### --feedback-- + +The auxiliary verb used to form a question in the past simple tense. The first letter should be capitalized. + +--- + +`worked` + +### --feedback-- + +Past tense form of `work`, indicating an action completed in the past. + diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md new file mode 100644 index 00000000000..f843ccf34aa --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md @@ -0,0 +1,54 @@ +--- +id: 657b30e1b9f035e7e656fd01 +title: Task 75 +challengeType: 19 +dashedName: task-75 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `employee` is someone who works for a company or a person. When you talk about `employees' well-being`, you are talking about the health and happiness of all the people who work there. The `'s` after `employees` means that the well-being belongs to the employees. It's like `the cat's toy` (one cat) and `the cats' toy` (more than one cat). + +# --question-- + +## --text-- + +What does Anna mean by saying `employees' well-being.` + +## --answers-- + +It's about the health of the company + +### --feedback-- + +`Employees'` means the people who work, not the company. + +--- + +One worker's health and happiness + +### --feedback-- + +`Employees'` with an `'s` shows it's about all workers, not just one. + +--- + +Where the employees work + +### --feedback-- + +`Well-being` is about health and happiness, not a place. + +--- + +The health and happiness of all the workers + +## --video-solution-- + +4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md new file mode 100644 index 00000000000..8e17e595d98 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md @@ -0,0 +1,54 @@ +--- +id: 657b315533e4edeba65111b8 +title: Task 76 +challengeType: 19 +dashedName: task-76 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +A `psychologist` is a professional who studies the human mind and behavior. They often help people understand and manage their emotions, behaviors, and mental processes. In Anna's statement, she refers to becoming a psychologist, indicating her professional choice related to studying and working with psychology. + +# --question-- + +## --text-- + +What does `psychologist` mean in Anna's statement? + +## --answers-- + +It means someone who studies physics + +### --feedback-- + +`Psychologist` refers to a person who studies the mind and behavior, not physics. + +--- + +It's a type of medical doctor + +### --feedback-- + +While related to health, a psychologist is different from a medical doctor and focuses on mental processes. + +--- + +A professional who studies and works with the human mind and behavior + +--- + +A teacher at a school + +### --feedback-- + +A psychologist may teach, but their primary role is studying and working with the mind and behavior, not general teaching. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md new file mode 100644 index 00000000000..40eee7185d9 --- /dev/null +++ b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md @@ -0,0 +1,15 @@ +--- +id: 657b46c9be150f577f5a1086 +title: "Dialogue 2: Another Job Interview" +challengeType: 21 +dashedName: dialogue-2-another-job-interview +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md deleted file mode 100644 index 0a0f3472141..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0feadb1dd77f6cda623f -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md deleted file mode 100644 index e1563f9b06b..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0f39ee87517d584d81f9 -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md deleted file mode 100644 index 7aa1e30008d..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5a46ffb500e3f2ce47b -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -*** - -Giving a job description. - -*** - -Making a statement based on her assumption. - -*** - -Expressing a possibility. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md deleted file mode 100644 index 2ee50fe5647..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5e46ffb500e3f2ce47e -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md b/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md deleted file mode 100644 index adc4b41f091..00000000000 --- a/curriculum/challenges/german/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd6071d697d0aab7833b6 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md deleted file mode 100644 index 8c195788654..00000000000 --- a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: bd7158d8c242eddfaeb5bd13 -title: Creare una pagina Web per il Portfolio Personale -challengeType: 14 -forumTopicId: 301143 -dashedName: build-a-personal-portfolio-webpage ---- - -# --description-- - -**Obiettivo:** crea un'app funzionalmente simile a https://personal-portfolio.freecodecamp.rocks - -**User story:** - -1. Il portfolio dovrebbe avere una sezione di benvenuto con un `id` di `welcome-section` -1. La sezione di benvenuto dovrebbe avere un elemento `h1` che contiene del testo -1. Il tuo portfolio dovrebbe avere una sezione progetti con un attributo `id` di `projects` -1. La sezione progetti dovrebbe contenere almeno un elemento con un attributo `class` di `project-tile` per contenere un progetto -1. La sezione progetti dovrebbe contenere almeno un link ad un progetto -1. Il tuo portfolio dovrebbe avere una barra di navigazione con un id di `navbar` -1. La barra di navigazione dovrebbe contenere almeno un link che puoi cliccare per navigare ad una sezione diversa della pagina -1. Il portfolio dovrebbe avere un link con un id di `profile-link` che apre il tuo profilo GitHub o freeCodeCamp in una nuova scheda -1. Il portfolio dovrebbe avere almeno una media query -1. L'altezza della sezione di benvenuto dovrebbe essere uguale all'altezza della porta di visualizzazione -1. La barra di navigazione dovrebbe sempre essere in cima alla porta di visualizzazione - -Soddisfa le user story e passa tutti i test qua sotto per complerare questo progetto. Usa il tuo stile personale. Buon divertimento! - -**Nota:** Assicurati di aggiungere `` nel tuo HTML per linkare il tuo foglio di stile e applicare il tuo CSS - -# --hints-- - -Il portfolio dovrebbe avere una sezione "Benvenuto" con un `id` di `welcome-section`. - -```js -const el = document.getElementById('welcome-section') -assert(!!el); -``` - -L'elemento `#welcome-section` dovrebbe contenere un elemento `h1`. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1').length, - 0, - 'Welcome section should contain an h1 element ' -); -``` - -Non dovrebbe esserci alcun elemento `h1` dentro l'elemento `#welcome-section`. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, - 0, - 'h1 element in welcome section should contain your name or camper ' + - 'name ' -); -``` - -Dovresti avere una sezione "Progetti" con un `id` di `projects`. - -```js -const el = document.getElementById('projects') -assert(!!el); -``` - -Il portfolio dovrebbe contenere almeno un elemento con una classe di `project-tile`. - -```js -assert.isAbove( - document.querySelectorAll('#projects .project-tile').length, - 0 -); -``` - -L'elemento `#projects` dovrebbe contenere almeno un elemento `a`. - -```js -assert.isAbove(document.querySelectorAll('#projects a').length, 0); -``` - -Il portfolio dovrebbe avere una barra di navigazione con un attributo `id` di `navbar`. - -```js -const el = document.getElementById('navbar'); -assert(!!el); -``` - -L'elemento `#navbar` dovrebbe contenere almeno un elemento `a` il cui attributo `href` inizia con `#`. - -```js -const links = [...document.querySelectorAll('#navbar a')].filter( - (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#' -); - -assert.isAbove( - links.length, - 0, - 'Navbar should contain an anchor link ' -); -``` - -Il portfolio dovrebbe avere almeno un elemento `a` con un attributo `id` di `profile-link`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.tagName === 'A') -``` - -L'elemento `#profile-link` dovrebbe avere un attributo `target` di `_blank`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.target === '_blank') -``` - -Il portfolio dovrebbe usare almeno una media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -L'elemento `#navbar` dovrebbe sempre essere in cima al viewport. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const navbar = document.getElementById('navbar'); - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - "Navbar's parent should be body and it should be at the top of " + - 'the viewport ' - ); - - window.scroll(0, 500); - - await timeout(1); - - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - 'Navbar should be at the top of the viewport even after ' + - 'scrolling ' - ); - window.scroll(0, 0); -})(); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Personal Portfolio - - - - - -
                                                                -
                                                                -
                                                                -

                                                                It's me!

                                                                - -

                                                                Naomi Carrigan

                                                                -

                                                                Welcome to my portfolio page!

                                                                -
                                                                -
                                                                -

                                                                Projects

                                                                -

                                                                Here's what I've worked on!

                                                                -

                                                                - - - - -

                                                                -
                                                                -

                                                                Contact me!

                                                                -

                                                                Use the links below to get in touch.

                                                                -

                                                                FreeCodeCamp.org | GitHub | Facebook | LinkedIn -

                                                                - - - -``` - -```css -nav{ - position: fixed; - width: 100%; - text-align: right; - font-size: 24pt; - top: 0%; - right: 5px; - background-color: #000000; - color: #ffffff; -} -@media (max-width: 500px){ - nav{ - display: none; - } -} -a{ - color: #ffffff; -} -main{ - text-align: center; - background-color: black; - font-family:Pacifico -} -h1{ - font-size: 48pt; -} -h2{ - font-size: 24pt; -} -p{ - font-size: 12pt; -} -#welcome-section{ - background-color:#251a4a; - color: #FFFFFF; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#projects{ - background-color: #060a9c; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#contact{ - background-color: #03300b; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md deleted file mode 100644 index 304859f24f8..00000000000 --- a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: Costruire la Landing Page per un prodotto -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**Obiettivo:** crea un'app funzionalmente simile a https://product-landing-page.freecodecamp.rocks - -**User story:** - -1. La pagina di destinazione del prodotto dovrebbe avere un elemento `header` con un corrispondente `id="header"` -1. Puoi vedere un immagine dentro l'elemento `header` con un attributo corrispondente `id="header-img"` (un logo sarebbe una buona immagine qui) -1. Dentro l'elemento `#header`, puoi vedere un elemento `nav` con un corrispondente attributo `id="nav-bar"` -1. Puoi vedere almeno tre elementi cliccabili dentro l'elemento `nav`, ognuno con una classe di `nav-link` -1. Quando clicchi su un pulsante `.nav-link` dentro l'elemento `nav`, vieni portato alla sezione corrispondente nella pagina -1. Puoi vedere un video sul prodotto incorporato nella pagina con `id="video"` -1. La tua pagina ha un elemento `form` con un corrispondente attributo `id="form"` -1. Dentro il modulo, c'è un campo `input` con un `id="email"` dove puoi inserire un indirizzo email -1. Il campo input `#email` dovrebbe avere testo segnaposto per far sapere agli utenti per che cosa è il campo -1. Il campo input `#email` usa la validazione HTML5 per confermare che il testo inserito è un indirizzo email -1. Dentro il modulo, c'è un `input` per inviare con un corrispondente `id="submit"` -1. Quando clicchi l'elemento `#submit`, l'email è inviata a una pagina statica (usa l'URL non funzionante: `https://www.freecodecamp.com/email-submit`) -1. La barra di navigazione dovrebbe essere sempre in cima alla porta di visualizzazione -1. La tua pagina del prodotto dovrebbe avere almeno un media query -1. La tua pagina del prodotto dovrebbe utilizzare CSS flexbox almeno una volta - -Soddisfa le storie utente e passa tutti i test qua sotto per completare il progetto. Usa il tuo stile personale. Buon divertimento! - -**Nota:** Assicurati di aggiungere `` nel tuo HTML per linkare il tuo foglio di stile e applicare il tuo CSS - -# --hints-- - -Dovresti avere un elemento `header` con un `id` del valore di `header`. - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -Dovresti avere un elemento `img` con un attributo `id` del valore di `header-img`. - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -L'elemento `#header-img` dovrebbe essere un discendente di `#header`. - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -L'elemento `#header-img` dovrebbe avere un attributo `src`. - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -L'attributo `src` dell'elemento `#header-img` dovrebbe essere un URL valido (inizia con `http`). - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -Dovresti avere un elemento `nav` con un `id` del valore di `nav-bar`. - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -L'elemento `#nav-bar` dovrebbe essere un discendente dell'elemento `#header`. - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -Dovresti avere almeno 3 elementi `.nav-link` dentro `#nav-bar`. - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -Ogni elemento `.nav-link` dovrebbe avere un attributo `href`. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -Ogni elemento `.nav-link` dovrebbe linkare a un elemento corrispondente nella pagina (quindi dovrebbe avere un attributo `href` con il valore dell'id di un altro elemento, ad esempio `#footer`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -Dovresti avere un elemento `video` o `iframe` con un `id` del valore di `video`. - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -L'elemento `#video` dovrebbe avere un attributo `src`. - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -Dovresti avere un elemento `form` con un attributo `id` del valore di `form`. - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -Dovresti avere un elemento `input` con un `id` del valore di `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -L'elemento `#email` dovrebbe essere un discendente di `#form`. - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -L'elemento `#email`dovrebbe avere un attributo `placeholder` con del testo segnaposto. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -L'elemento `#email` dovrebbe usare la validazione HTML5 impostando l'attributo `type` su `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -Dovresti avere un elemento `input` con un `id` del valore di `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -L'elemento `#submit` dovrebbe essere un discendente di `#form`. - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -L'elemento `#submit` dovrebbe avere un attributo `type` con il valore `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -L'elemento `#form` dovrebbe avere un attributo `action` con il valore `https://www.freecodecamp.com/email-submit`. - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -L'elemento `#email` dovrebbe avere un attributo `name` con il valore `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -L'elemento `#nav-bar` dovrebbe sempre essere in cima al viewport. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const header = document.getElementById('header'); - const headerChildren = header.children; - const navbarCandidates = [header, ...headerChildren]; - - // Return smallest top position of all navbar candidates - const getNavbarPosition = (candidates = []) => { - return candidates.reduce( - (min, candidate) => - Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)), - Infinity - ); - }; - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the viewport ' - ); - - window.scroll(0, 500); - await timeout(1); - - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the ' + - 'viewport even after scrolling ' - ); - - window.scroll(0, 0); -})(); -``` - -La pagina dovrebbe avere almeno un media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -La tua pagina dovrebbe usare CSS Flexbox almeno una volta. - -```js -const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display) -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media') -const usesFlex = cssRules.find(rule => hasFlex(rule)) -const usesFlexMedia = mediaRules.find(mediaRule => { - return [...mediaRule.cssRules].find(rule => hasFlex(rule)) -}) -assert(usesFlex || usesFlexMedia) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Product Landing Page - - - -
                                                                -

                                                                - Pokemon Daycare Service -

                                                                -
                                                                -

                                                                What we offer

                                                                -
                                                                -
                                                                - -
                                                                -
                                                                Guaranteed friendly and loving staff!
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - Comfortable environment for Pokemon to explore and play! -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - Multiple membership plans to fit your lifestyle! -
                                                                -
                                                                -
                                                                -
                                                                -

                                                                Check us out!

                                                                - A sneak peek into our facility: -
                                                                - -
                                                                -
                                                                -

                                                                Membership Plans

                                                                -
                                                                -
                                                                - Basic Membership
                                                                -
                                                                  -
                                                                • One Pokemon
                                                                  • -
                                                                • Food and berries provided
                                                                  • -
                                                                - $9.99/month -
                                                                -
                                                                - Silver Membership
                                                                -
                                                                  -
                                                                • Up to Three Pokemon
                                                                  • -
                                                                • Food and berries provided
                                                                  • -
                                                                • Grooming and accessories included
                                                                  • -
                                                                - $19.99/month -
                                                                -
                                                                - Gold Membership
                                                                -
                                                                  -
                                                                • Up to six Pokemon!
                                                                  • -
                                                                • Food and berries provided
                                                                  • -
                                                                • Grooming and accessories included
                                                                  • -
                                                                • Personal training for each Pokemon
                                                                  • -
                                                                • Breeding and egg hatching
                                                                  • -
                                                                - $29.99/month -
                                                                -
                                                                -
                                                                -
                                                                -

                                                                Sign up for our newsletter!

                                                                - - -
                                                                - -
                                                                - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md deleted file mode 100644 index b1482e86f0f..00000000000 --- a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: Creare un modulo di sondaggio -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**Obiettivo:** crea un'app funzionalmente simile a https://survey-form.freecodecamp.rocks - -**User story:** - -1. Dovresti avere un titolo di pagina in un elemento `h1` con un attributo `id` di `title` -1. Dovrebbe esserci una breve spiegazione in un elemento `p` con un `id` di `description` -1. Dovrebbe esserci un elemento `form` con un attributo `id` di `survey-form` -1. All'interno dell'elemento modulo, ti è **richiesto** di scrivere il tuo nome in un campo `input` che ha un attributo `id` di `name` e un attributo `type` di `text` -1. All'interno dell'elemento modulo, ti è **richiesto** di inserire la tua email in un campo di `input` che ha un `id` di `email` -1. Se inserisci una mail che non è formattata correttamente, vedrai un errore di validazione HTML5 -1. All'interno del modulo è possibile inserire un numero in un campo `input` che ha un `id` di `number` -1. L'input del numero non dovrebbe accettare valori non numerici, impedendo all'utente di inserirli o tramite una validazione degli errori HTML5 (a seconda del browser). -1. Se immetti un numero al di fuori del range del campo per il numero, che hai definito con gli attributi `min` e `max`, vedrai un errore di validazione HTML5 -1. Per le caselle di input per il nome, la mail e il numero, puoi vedere dei corrispondenti elementi `label` nel modulo che descrivono lo scopo di ogni campo con i seguenti attributi id: `id="name-label"`, `id="email-label"`, e `id="number-label"` -1. Per i campi di input del nome, mail e numero, puoi vedere del testo segnaposto che da una descrizione o istruzioni per ogni campo -1. Dentro l'elemento modulo, dovresti vedere un elemento `select` a tendina con un `id` di `dropdown` e almeno due opzioni tra cui scegliere -1. Dentro l'elemento modulo, puoi selezionare una opzione da un gruppo di almeno due elementi radio che sono raggruppati con l'attributo `name` -1. All'interno dell'elemento del modulo, è possibile selezionare diversi campi da una serie di caselle di controllo, ciascuno dei quali deve avere un attributo `value` -1. All'interno del modulo, ti è presentato un elemento `textarea` per commenti aggiuntivi -1. Dentro l'elemento modulo, puoi vedere un pulsante con un `id` di `submit` per inviare tutti gli input - -Soddisfa le user story e passa tutti i test qua sotto per complerare questo progetto. Usa il tuo stile personale. Buon divertimento! - -**Nota:** Assicurati di aggiungere `` nel tuo HTML per linkare il tuo foglio di stile e applicare il tuo CSS - -# --hints-- - -Dovrebbe esserci un elemento `h1` con un `id` di `title`. - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -L'elemento `#title` non dovrebbe essere vuoto. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -Dovrebbe esserci un elemento `p` con un `id` di `description`. - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -L'elemento `#description` non dovrebbe essere vuoto. - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -Dovrebbe esserci un elemento `form` con un attributo `id` di `survey-form`. - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -Dovrebbe esserci un elemento `input` con un `id` di `name`. - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -L'elemento `#name` dovrebbe avere un attributo `type` con il valore `text`. - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -L'elemento `#name` dovrebbe richiedere un input. - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -L'elemento `#name` dovrebbe essere un discendente di `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -Dovrebbe esserci un elemento `input` con un `id` con il valore `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -L'elemento `#email` dovrebbe avere un attributo `type` con il valore `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -L'elemento `#email` dovrebbe richiedere un input. - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -L'elemento `#email` dovrebbe essere un discendente di `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -Dovresti avere un elemento `input` con un `id` con il valore `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -L'elemento `#number` dovrebbe essere un discendente di `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -L'elemento `#number` dovrebbe avere un attributo `type` con il valore `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -L'elemento `#number` dovrebbe avere un attributo `min` con un valore numerico. - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -L'elemento `#number` dovrebbe avere un attributo `max` con un valore numerico. - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -Dovresti avere un elemento `label` con un `id` con il valore `name-label`. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Dovresti avere un elemento `label` con un `id` con il valore `email-label`. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Dovresti avere un elemento `label` con un `id` con il valore `number-label`. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Il tuo elemento `#name-label` dovrebbe contenere del testo che descrive l'input. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -Il tuo elemento `#email-label` dovrebbe contenere del testo che descrive l'input. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -Il tuo elemento `#number-label` dovrebbe contenere del testo che descrive l'input. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -L'elemento `#name-label` dovrebbe essere un discendente di `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -L'elemento `#email-label` dovrebbe essere un discendente di `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -L'elemento `#number-label` dovrebbe essere un discendente di `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -L'elemento `#name` dovrebbe avere un attributo `placeholder` con un valore. - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -L'elemento `#email` dovrebbe avere un attributo `placeholder` con un valore. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -L'elemento `#number` dovrebbe avere un attributo `placeholder` con un valore. - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Dovrebbe esserci un campo `select` con un `id` con il valore `dropdown`. - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -L'elemento `#dropdown` dovrebbe avere almeno due elementi `option` selezionabili (non disattivati). - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -L'elemento `#dropdown` dovrebbe essere un discendente di `#survey-form`. - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -Dovresti avere almeno due elementi `input` con un attributo `type` con il valore `radio` (pulsanti radio o di opzione). - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -Dovresti avere almeno due pulsanti di opzione discendenti di `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -Tutti i pulsanti di opzione dovrebbero avere un attributo `value` con un valore. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -Tutti i pulsanti di opzione dovrebbero avere un attributo `name` con un valore. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -Ogni gruppo di pulsanti di opzione dovrebbe avere almeno 2 pulsanti. - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -Dovresti avere almeno due elementi `input` con un attributo `type` con il valore `checkbox` (caselle di spunta) discendenti di `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -Tutte le caselle di spunta dentro l'elemento `#survey-form` dovrebbero avere un attributo `value` con un valore. - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -Dovrebbe esserci almeno un elemento `textarea` discendente di `#survey-form`. - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -Dovrebbe esserci un elemento `input` o `button` con un `id` con il valore `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -L'elemento `#submit` dovrebbe avere un attributo `type` con il valore `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -L'elemento `#submit` dovrebbe essere un discendente di `#survey-form`. - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Survey Form - - -

                                                                Survey Form

                                                                -

                                                                The card below was built as a sample survey form for freeCodeCamp.

                                                                -
                                                                -

                                                                Join the Togepi Fan Club!

                                                                -

                                                                - Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -

                                                                -
                                                                - - - - -

                                                                Who is your favourite Pokemon?

                                                                - - - -

                                                                Which communications do you want to receive?

                                                                - - - -

                                                                Any other information you would like to share?

                                                                - -

                                                                - Please note: This form is a proof of concept. Submitting the form - will not actually transmit your data. -

                                                                - -
                                                                -
                                                                - - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md deleted file mode 100644 index 7754b1d4c0a..00000000000 --- a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: Creare una pagina di documentazione tecnica -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**Obiettivo:** crea un'app funzionalmente simile a https://technical-documentation-page.freecodecamp.rocks - -**User story:** - -1. Puoi vedere un elemento `main` con un corrispondente `id="main-doc"`, che contiene il contenuto principale della pagina (documentazione tecnica) -1. Dentro l'elemento `#main-doc`, puoi vedere svariati elementi `section`, ognuno con una classe di `main-section`. Dovrebbero esserne almeno cinque -1. Il primo elemento dentro ogni `.main-section` dovrebbe essere un elemento `header`, che contiene testo che descrive l'argomento della sezione. -1. Ogni elemento `section` con una classe di `main-section` dovrebbe avere un `id` che corrisponde al testo di ogni elemento `header` al suo interno. Qualsiasi spazio deve essere sostituito con un underscore (ad es. La sezione section che contiene l'intestazione "JavaScript e Java" dovrebbe avere un corrispondente `id="JavaScript_and_Java"`) -1. Gli elementi `.main-section` dovrebbero contenere almeno dieci elementi `p` in totale (non ognuno) -1. Gli elementi `.main-section` dovrebbero contenere almeno cinque elementi `code` in totale (non ognuno) -1. Gli elementi `.main-section` dovrebbero contenere almeno cinque elementi `li` in totale (non ognuno) -1. Puoi vedere un elemento `nav` con un corrispondente `id="navbar"` -1. L'elemento barra di navigazione dovrebbe contenere un elemento `header` che contiene del testo che descrive l'argomento della documentazione tecnica -1. In aggiunta, la barra di navigazione dovrebbe contenere dei link (elementi `a`) con la classe di `nav-link`. Dovrebbe essercene uno per ogni elemento di classe `main-section` -1. L'elemento `header` dentro `#navbar` deve venire prima di qualsiasi link (elemento `a`) nella barra di navigazione -1. Ogni elemento con la classe `nav-link` dovrebbe contenere del testo che corrisponde al testo dell'elemento `header` dentro ogni elemento `section` (per esempio, se c'è una sezione/intestazione "Hello world", la barra di navigazione dovrebbe avere un elemento che contiene il testo "Hello world") -1. Quando clicchi su un elemento navbar, la pagina dovrebbe andare alla sezione corrispondente dell'elemento `#main-doc` (per esempio se clicchi su un elemento `.nav-link` che contiene il testo "Hello world", la pagina va fino all'elemento `section` che ha quell'id, e contiene l'intestazione corrispondente) -1. Su dispositivi di dimensione regolare (laptop, desktop), l'elemeneto con `id="navbar"` dovrebbe essere sempre mostrato nella parte destra dello schermo e dovrebbe essere sempre visibile all'utente -1. La tua documentazione tecnica dovrebbe usare almeno un media query - -Soddisfa le user story e passa tutti i test qua sotto per complerare questo progetto. Usa il tuo stile personale. Buon divertimento! - -**Nota:** Assicurati di aggiungere `` nel tuo HTML per linkare il tuo foglio di stile e applicare il tuo CSS - -# --hints-- - -Dovresti avere un elemento `main` con un `id` di `main-doc`. - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -Dovresti avere almeno cinque elementi `section` con la classe `main-section`. - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -Tutti gli elementi `.main-section` dovrebbero essere elementi `section`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -Dovrebbero esserci almeno cinque elementi `.main-section` discendenti di `#main-doc`. - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -Il primo figlio di ogni elemento `.main-section` dovrebbe essere un elemento `header`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -Nessuno degli elementi `header` dovrebbe essere vuoto. - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -Tutti gli elementi `.main-section` dovrebbero avere un `id`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -Ogni elemento `.main-section` dovrebbe avere un `id` che corrisponde con il testo del primo figlio, e ogni spazio nel testo del figlio deve essere sostituito con dei trattini bassi (`_`). - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -Dovresti avere almeno 10 elementi `p` (in totale) dentro gli elementi `.main-section`. - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -Dovresti avere almeno cinque elementi `code` che sono discendenti degli elementi `.main-section`. - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -Dovrebbero esserci almeno cinque elementi `li` che sono discendenti degli elementi `.main-section`. - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -Dovrebbe esserci un elemento `nav` con un attributo `id` con il valore `navbar`. - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -L'elemento `#navbar` dovrebbe avere un solo elemento `header` al suo interno. - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -Dovrebbe esserci almeno un elemento `a` con la classe `nav-link`. - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -Tutti gli elementi `.nav-link` dovrebbero essere elementi di ancoraggio (`a`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -Tutti gli elementi `.nav-link` dovrebbero essere dentro `#navbar`. - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -Dovresti avere lo stesso numero di elementi `.nav-link` e di elementi `.main-section`. - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -L'elemento `header` dentro `#navbar` dovrebbe trovarsi prima di qualsiasi link (elemento `a`) all'interno di `#navbar`. - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -Ogni elemento `.nav-link` dovrebbe avere del testo corrispondente all'elemento `header` del relativo elemento `section` (per esempio, se hai una sezione/intestazione con "Hello world", l'elemento `#navbar` dovrebbe avere un elemento `.nav-link` con il testo "Hello world"). - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -Ogni elemento `.nav-link` dovrebbe avere un attributo `href` che linka all'elemento `.main-section` corrispondente (per esempio, se clicchi su un elemento `.nav-link` che contiene il testo "Hello world", la pagina va all'elemento `section` con quell'id). - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -L'elemento `#navbar` dovrebbe sempre essere sul bordo sinistro della finestra. - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -Il progetto di documentazione tecnica dovrebbe avere almeno un media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Technical Documentation Page - - - -
                                                                -
                                                                -
                                                                Introduction
                                                                -

                                                                - Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -

                                                                -
                                                                -
                                                                -
                                                                Definitions
                                                                -

                                                                - To start with, let's define some of the more common terms used in - algebra: -

                                                                -
                                                                  -
                                                                • - Variable: A variable is an unknown value, usually represented - by a letter. -
                                                                  • -
                                                                • - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. -
                                                                  • -
                                                                • - Equation: An equation is a mathematical argument in which two - expressions result in the same value. -
                                                                  • -
                                                                -
                                                                -
                                                                -
                                                                Examples
                                                                -

                                                                - Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.

                                                                - x + 5 = 12

                                                                - In this above example, we have: -

                                                                -
                                                                  -
                                                                • Variable: The variable in the example is "x".
                                                                  • -
                                                                • - Expression: There are two expressions in this example. They - are "x+5" and "12". -
                                                                  • -
                                                                • - Equation: The entire example, "x+5=12", is an equation. -
                                                                  • -
                                                                -
                                                                -
                                                                -
                                                                Solving Equations
                                                                -

                                                                - The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".

                                                                - x + 5 = 12

                                                                - In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
                                                                For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.

                                                                - x + 5 - 5 = 12 - 5

                                                                - The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:

                                                                - x = 7

                                                                - We now have our solution to this equation! -

                                                                -
                                                                -
                                                                -
                                                                Solving Equations II
                                                                -

                                                                - Let us look at a slightly more challenging equation.

                                                                - 3x + 4 = 13

                                                                - Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:

                                                                - 3x = 9

                                                                - "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.

                                                                - x = 3

                                                                - And now we have our solution! -

                                                                -
                                                                -
                                                                -
                                                                Solving Equations III
                                                                -

                                                                - Now we are getting in to more complex operations. Here is another - equation for us to look at:

                                                                - x^2 - 8 = 8

                                                                - Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.

                                                                - x^2 = 16

                                                                - But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
                                                                - An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -

                                                                - x = √9

                                                                - Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:

                                                                - x = 3 -

                                                                -
                                                                -
                                                                -
                                                                System of Equations
                                                                -

                                                                - As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:

                                                                - y = 3x

                                                                - An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
                                                                - Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:

                                                                - y = 3x | y - 6 = x - A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:

                                                                - 3x - 6 = x

                                                                - Now we can solve for "x"! We start by adding 6 to each side.

                                                                - 3x = x + 6

                                                                - We still need to get "x" by itself, so we subtract "x" from both sides - and get:

                                                                - 2x = 6

                                                                - If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!

                                                                - x = 3

                                                                - However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:

                                                                - y = 3x

                                                                - We have a value for "x" now, so let's see what happens if we put that - value in.

                                                                - y = 3*3

                                                                - We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:

                                                                - x = 3 and y = 9

                                                                -

                                                                -
                                                                -
                                                                -
                                                                Try it Yourself!
                                                                -

                                                                Coming Soon!

                                                                -

                                                                Keep an eye out for new additions!

                                                                -
                                                                -
                                                                -
                                                                More Information
                                                                -

                                                                Check out the following links for more information!

                                                                - -
                                                                -
                                                                - - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md deleted file mode 100644 index 772b402bde7..00000000000 --- a/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: Costruire una pagina di tributo -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**Obiettivo:** crea un'app funzionalmente simile a https://tribute-page.freecodecamp.rocks - -**User story:** - -1. La tua Tribute Page dovrebbe avere un elemento `main` con un corrispondente `id` di `main`, che contiene tutti gli altri elementi -1. Dovresti vedere un elemento con un attributo `id` di `title`, che contiene una stringa (cioè del testo) che descrive il soggetto della pagina di tributo (per esempio "Dr. Normal Borlaug") -1. Dovresti vedere o un elemento `figure` o un elemento `div` con un attributo `id` di `img-div` -1. Dentro l'elemento `#img-div`, dovresti vedere un elemento `img` con un corrispondente `id="image"` -1. Dentro l'elemento `#img-div`, dovresti vedere un elemento con un corrispondente attributo `id="img-caption"` che contiene del testo che descrive l'immagine mostrata in `#img-div` -1. Dovresti vedere un elemento con un corrispondente attributo `id="tribute-info"` che contiene contenuto testuale descrivente il soggetto della pagina tributo -1. Dovresti vedere un elemento `a` con un corrispondente attributo `id="tribute-link"` che linka a un sito esterno che contiene informazioni aggiuntive sul soggetto della pagina tributo. Suggerimento: Devi dare al tuo elemento un attributo `target` e impostarlo a `_blank` per far si che il link apra in una scheda nuova -1. Il tio elemento `#image` dovrebbe usare le proprietà `max-width` e `height` per ridimensionarsi in maniera responsiva, relativa alla larghezza dell'elemento genitore senza eccedere la dimensione originale -1. Il tuo elemento `img` dovrebbe essere centrato dentro il suo elemento genitore - -Soddisfa le user story e passa tutti i test qua sotto per complerare questo progetto. Usa il tuo stile personale. Buon divertimento! - -**Nota:** Assicurati di aggiungere `` nel tuo HTML per linkare il tuo foglio di stile e applicare il tuo CSS - -# --hints-- - -Dovrebbe esserci un elemento `main` con un `id` del valore di `main`. - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -Gli elementi `#img-div`, `#image`, `#img-caption`, `#tribute-info` e `#tribute-link` dovrebbero essere tutti discendenti di `#main`. - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -Dovresti avere un elemento con un attributo `id` del valore di `title`. - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -L'elemento `#title` non dovrebbe essere vuoto. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -Dovrebbe esserci o un elemento `figure` o un elemento `div` con un attributo `id` del valore di `img-div`. - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -Dovrebbe esserci un elemento `img` con un `id` del valore di `image`. - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -L'elemento `#image` dovrebbe essere un discendente di `#img-div`. - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -Dovrebbe esserci o un elemento `figcaption` o un elemento `div` con un attributo `id` di `img-caption`. - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -L'elemento `#img-caption` dovrebbe essere un discendente di `#img-div`. - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -L'elemento `#img-caption` non dovrebbe essere vuoto. - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -Dovrebbe esserci un elemento con un attributo `id` del valore di `tribute-info`. - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -L'elemento `#tribute-info` non dovrebbe essere vuoto. - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -Dovrebbe esserci un elemento `a` con un `id` del valore di `tribute-link`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -L'elemento `#tribute-link` dovrebbe avere un attributo `href` con un valore. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -L'elemento `#tribute-link` dovrebbe avere un attributo `target` con il valore `_blank`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -L'elemento `img` dovrebbe avere una proprietà `display` con il valore `block`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -`#image` dovrebbe avere una proprietà `max-width` del `100%`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -`#image` dovrebbe avere una proprietà `height` con il valore `auto`. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -L'elemento `#image` dovrebbe essere centrato dentro l'elemento genitore. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - - Tribute Page - - -

                                                                Tribute Page

                                                                -

                                                                The below card was designed as a tribute page for freeCodeCamp.

                                                                -
                                                                -
                                                                - An image of Togepi -
                                                                Togepi, happy as always.
                                                                -
                                                                -

                                                                Togepi

                                                                -
                                                                -
                                                                -

                                                                - Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -

                                                                -

                                                                - Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -

                                                                -
                                                                -

                                                                Battle Information

                                                                -
                                                                  -
                                                                • Type: Fairy
                                                                  • -
                                                                • Evolutions: Togepi -> Togetic -> Togekiss
                                                                  • -
                                                                • Moves: Growl, Pound, Sweet Kiss, Charm
                                                                  • -
                                                                • Weaknesses: Poison, Steel
                                                                  • -
                                                                • Resistances: Dragon
                                                                  • -
                                                                -

                                                                - Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -

                                                                -
                                                                -
                                                                - - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md deleted file mode 100644 index 9b5e082b124..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05b -title: Costruire le proprie funzioni -challengeType: 11 -videoId: nLDychdBwUg -bilibiliIds: - aid: 249487483 - bvid: BV1Fv411J7bS - cid: 376340281 -dashedName: build-your-own-functions ---- - -# --description-- - -Altre risorse: - -\- Esercizio - -# --question-- - -## --text-- - -Cosa scriverà il seguente programma Python? - -```python -def fred(): - print("Zap") -def jane(): - print("ABC") - -jane() -fred() -jane() -``` - -## --answers-- - -
                                                                Zap
-ABC
-jane
-fred
-jane
                                                                - ---- - -
                                                                Zap
-ABC
-Zap
                                                                - ---- - -
                                                                ABC
-Zap
-jane
                                                                - ---- - -
                                                                ABC
-Zap
-ABC
                                                                - ---- - -
                                                                Zap
-Zap
-Zap
                                                                - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index 714c95e40b2..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: Confrontare e ordinare tuple -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -Altre risorse: - -\- Esercizio - -# --question-- - -## --text-- - -A cosa equivale il seguente codice? - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index d0c0e8ae6db..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: Esecuzione condizionale -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -Quale codice è indentato correttamente per stampare "Yes" se x = 0 e y = 10? - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index 6d1755cfb34..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: 'Data Visualization: Mailing List' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -Altre risorse: - -\- Esercizio: Geodata - -\- Esercizio: Gmane Model - -\- Esercizio: Gmane Spider - -\- Esercizio: Gmane Viz - -\- Esercizio: Page Rank - -\- Esercizio: Page Spider - -\- Esercizio: Page Viz - -# --question-- - -## --text-- - -Quale di queste è una comune libreria di visualizzazione JavaScript? - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index 63f9c2b6bd5..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: 'Data Visualization: Page Rank' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -Come funziona l'algoritmo PageRank? - -## --answers-- - -Determina quali pagine sono più connesse. - ---- - -Posiziona le pagine in base al conteggio delle visualizzazioni. - ---- - -Indica quali pagine contengono i contenuti più importanti. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index 65949ff48f7..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: Dizionari e cicli -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -Altre risorse: - -\- Esercizio - -# --question-- - -## --text-- - -Cosa scriverà il seguente codice? - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -
                                                                annie 42
-jan 100
                                                                - ---- - -
                                                                chuck 1
-annie 42
-jan 100
                                                                - ---- - -
                                                                chuck 1
                                                                - ---- - -
                                                                [Error]
                                                                - -## --video-solution-- - -1 diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index 0a84d7b6159..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: 'Dizionari: applicazioni comuni' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -Cosa scriverà il seguente codice? - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[verrà restituito errore] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index 0ca94fc934b..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: File come sequenze -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -Altre risorse: - -\- Esercizio - -# --question-- - -## --text-- - -Cosa fa la parola 'continue' all'interno di un ciclo? - -## --answers-- - -Salta al codice direttamente dopo il ciclo. - ---- - -Salta alla riga successiva nel codice. - ---- - -Salta alla successiva iterazione del ciclo. - ---- - -Salta il blocco di codice successivo. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index 597ecfbf423..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: Espressioni Intermedie -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -Altre risorse: - -\- Esercizio 1 - -\- Esercizio 2 - -# --question-- - -## --text-- - -Cosa scriverà il seguente codice? - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index 5e56ee56134..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: Stringhe Intermedio -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -Altre risorse: - -\- Esercizio - -# --question-- - -## --text-- - -Qual è il valore di i nel seguente codice? - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index 8150d084594..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: 'Introduzione: elementi di Python' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -Cosa scriverà il seguente programma? - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index 5ab037855e2..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: 'Introduzione: architettura hardware' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -Dove sono memorizzati i programmi quando sono in esecuzione? - -## --answers-- - -Disco Fisso. - ---- - -Memoria. - ---- - -Unità Centrale di Elaborazione (CPU). - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index b024ccc49ca..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: 'Introduzione: Python come linguaggio' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -Cosa verrà scritto dopo aver eseguito queste due righe di codice? - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index cb337c359db..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: 'Introduzione: perché programmare?' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -Altre risorse: - -\- Installare Python su Windows - -\- Installare Python su MacOS - -# --question-- - -## --text-- - -Chi dovrebbe imparare a programmare? - -## --answers-- - -Studenti universitari. - -### --feedback-- - -College students should learn to program, but there's a better answer. - ---- - -People who want to become software developers. - -### --feedback-- - -People who want to become software developers should learn to program, but there's a better answer. - ---- - -Everyone. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index 8a9c956e191..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: 'Iterazioni: cicli definiti' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -Quante righe scriverà il seguente codice? - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index 7052ad5b2ab..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: 'Iterazioni: idiomi dei cicli' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -Di seguito è riportato il codice per trovare il valore più piccolo in una lista. Una riga contiene un errore che causerà il mancato funzionamento del codice come previsto. Qual è la linea? - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index d9b71b7447b..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: 'Iterazioni: ulteriori modelli' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -Altre risorse: - -\- Esercizio - -# --question-- - -## --text-- - -Quale di queste righe darà False? - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 034e942a2cb..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: Cicli e iterazioni -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -Cosa verrà visualizzato nella console con il seguente codice?: - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -
                                                                0
-1
-2
                                                                - ---- - -
                                                                0
-1
-2
-3
                                                                - ---- - -
                                                                1
-2
                                                                - ---- - -
                                                                1
-2
-3
                                                                - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index 7589a2328e7..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: Creare un database relazionale -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -Quale comando SQL utilizzeresti per recuperare tutti gli utenti che hanno l'indirizzo email `quincy@freecodecamp.org`? - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index 1eee5774ce6..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: Ulteriori strutture condizionali -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -Altre risorse: - -\- Esercizio 1 - -\- Esercizio 2 - -# --question-- - -## --text-- - -Dato il seguente codice: - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -Quali righe dovrebbero essere racchiuse nel blocco `try`? - -## --answers-- - -1 - ---- - -3 - ---- - -3,4 - ---- - -4 - ---- - -Nessuna - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index d5ced5e2837..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: Protocollo di rete -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -Che tipo di richiesta HTTP viene solitamente utilizzata per accedere a un sito web? - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index a4945e0cb33..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: 'Networking: elaborazione del testo' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -Quale tipo di codifica viene utilizzata dalla maggior parte dei siti web? - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index 0245577244d..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: 'Networking: usare urllib in Python' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -Quale sarà l'output del seguente codice? - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -Solo i contenuti di "romeo.txt". - ---- - -Un'intestazione e il contenuto di "romeo.txt". - ---- - -Un'intestazione, un piè di pagina e il contenuto di "romeo.txt". - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index d595916480c..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: 'Networking: web scraping con Python' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -Altre risorse: - -\- Esercizio: socket1 - -\- Esercizio: urllib - -\- Esercizio: urllinks - -# --question-- - -## --text-- - -Quale libreria Python è utilizzata per analizzare documenti HTML ed estrarre dati da essi? - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index cff99d66296..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: Networking con Python -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -Quale libreria Python dà accesso ai socket TCP? - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index b04f7632e69..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: 'Networking: scrivi un browser web' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -Cosa crea il seguente codice?: - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -Un semplice web server. - ---- - -Un semplice client di posta. - ---- - -Un semplice elenco di cose da fare. - ---- - -Un semplice browser web. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index 68100ec991c..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: Ciclo di vita degli oggetti -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -Cosa scriverà il seguente programma? - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - -
                                                                -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 2
-Quincy party count 3
-
                                                                - ---- - -
                                                                -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 1
-Quincy party count 2
-
                                                                - ---- - -
                                                                -Quincy constructed
-Quincy party count 1
-Quincy party count 2
-Miya constructed
-Miya party count 1
-
                                                                - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index 6c5097e9796..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: 'Oggetti: una classe di esempio' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -Cosa scriverà il seguente programma? - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - -
                                                                -So far 1
-So far 2
-
                                                                - ---- - -
                                                                -0
-0
-
                                                                - ---- - -
                                                                -2
-2
-
                                                                - ---- - -
                                                                -2
-4
-
                                                                - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index dd88d6bad94..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: 'Oggetti: ereditarietà' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -Cos'è l'ereditarietà nella programmazione orientata agli oggetti? - -## --answers-- - -Una nuova classe creata quando una classe genitore viene estesa. - ---- - -Un'istanza costruita di una classe. - ---- - -La capacità di creare una nuova classe estendendo una classe esistente. - ---- - -Un metodo che viene chiamato nel momento in cui una classe viene utilizzata per costruire un oggetto. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index 19fafda207e..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Dizionari in Python -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -Quanto vale dict dopo l'esecuzione di questo codice? - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index c2664475bab..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Funzioni in Python -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -Qual è lo scopo della parola chiave "def" in Python? - -## --answers-- - -È slang che significa "Il seguente codice è davvero cool." - ---- - -Indica l'inizio di una funzione. - ---- - -Indica che la seguente sezione di codice indentata deve essere memorizzata per essere usata in un secondo momento. - ---- - -Indica l'inizio di una funzione, e la seguente sezione di codice indentato deve essere memorizzata per un uso successivo successivo. - ---- - -Niente di quanto sopra. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index 8ed26b7035d..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Liste in Python -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -Qual è il valore di x dopo aver eseguito questo codice? - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index ce55fe33913..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Oggetti Python -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -Quale delle seguenti frasi NON è vera per gli oggetti in Python? - -## --answers-- - -Gli oggetti vengono creati e usati. - ---- - -Gli oggetti sono fatti di codice e dati. - ---- - -Gli oggetti nascondono i dettagli. - ---- - -Gli oggetti sono uno dei cinque tipi di dati standard. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index b974e8c8d2b..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: Leggere i file -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -Che cosa si usa per indicare una nuova linea in una stringa? - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index 783a1f6d50e..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: 'Espressioni regolari: corrispondenza ed estrazione dei dati' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -Cosa scriverà il seguente programma? - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index 84d5b651286..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: 'Espressioni regolari: applicazioni pratiche' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -Come si cerca un "$" in un'espressione regolare? - -## --answers-- - -$ - ---- - -\\dollar\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index 8ebd49b36d1..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: Espressioni regolari -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -Quale espressione regolare corrisponde solo a un carattere di spazio bianco? - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index 1252a5cfc54..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: Progettazione di database relazionali -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -Qual è la migliore pratica per quante volte un pezzo di dati stringa dovrebbe essere memorizzato in un database? - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index bc81a20f0a4..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: Database relazionali e SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -Scarica SQLite -Scarica DB Browser per SQLite -Uso di SQLite - -# --question-- - -## --text-- - -Quale delle seguenti NON è una struttura di dati primaria in un database? - -## --answers-- - -index - ---- - -table - ---- - -row - ---- - -column - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index 1ec7d385f1e..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: 'Database Relazionali: operazione Join' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -Quando si utilizza una clausola JOIN in una dichiarazione SQL, cosa fa ON? - -## --answers-- - -Indica su quali tabelle eseguire il JOIN. - ---- - -Specifica i campi da usare per il JOIN. - ---- - -Indica come le due tabelle devono essere unite. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index 5ff841c53ae..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: 'Database Relazionali: relazioni molti-a-molti' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -Altre risorse: - -\- Esercizio: Email - -\- Esercizio: Roster - -\- Esercizio: Tracce - -\- Esercizio: Twfriends - -\- Esercizio: Twspider - -# --question-- - -## --text-- - -Qual è un esempio di una relazione molti a molti? - -## --answers-- - -insegnante a studente - ---- - -cliente a ordine - ---- - -libro a pagine - ---- - -città a paese - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index 12c6bcf29ef..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: 'Database relazionali: costruzione delle relazioni' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -Cosa fa il comando INSERT in SQL? - -## --answers-- - -Definisce una nuova riga elencando i campi che vogliamo includere seguiti dai valori che vogliamo inserire nella nuova riga. - ---- - -Definisce una nuova colonna elencando le righe che vogliamo includere seguite dai valori che vogliamo inserire nella nuova colonna. - ---- - -Definisce una nuova tabella elencando le righe e i campi che vogliamo includere seguiti dai valori che vogliamo inserire nella tabella. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index 3abe324eac8..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: Rappresentare le relazioni in un database relazionale -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -Cos'è una foreign key? - -## --answers-- - -Una chiave che non dovrebbe essere lì. - ---- - -Una chiave che utilizza caratteri non latini. - ---- - -Un numero che punta alla chiave primaria di una riga associata in una tabella diversa. - ---- - -Una chiave che il "mondo reale" potrebbe usare per cercare una riga. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index 25ed451a8a5..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: Stringhe e liste -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -Altre risorse: - -\- Esercizio - -# --question-- - -## --text-- - -Quanto vale n in questo codice? - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -mail - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index f6d3e57b976..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Stringhe in Python -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -Cosa scriverà il seguente codice? - -```python -for n in "banana": - print(n) -``` - -## --answers-- - -
                                                                -n
-n
-
                                                                - ---- - -
                                                                -0
-1
-
                                                                - ---- - -
                                                                -0
-1
-2
-3
-4
-5
-
                                                                - ---- - -
                                                                -b
-a
-n
-a
-n
-a
-
                                                                - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index 3dce0d308e7..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: La collezione di tuple -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -Cosa scriverà il seguente codice? - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - -
                                                                -k i
-k i
-k i
-
                                                                - ---- - -
                                                                -quincy 0
-beau 1
-kris 2
-
                                                                - ---- - -
                                                                -quincy 1
-beau 5
-kris 9
-
                                                                - ---- - -
                                                                -1 quincy
-5 beau
-9 kris
-
                                                                - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index d73aefa8edd..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: Usare i servizi web -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -Quali sono i due modi più comuni per inviare dati su Internet? - -## --answers-- - -JSON e TXT - ---- - -JSON e XML - ---- - -XML e TXT - ---- - -XML e PHP - ---- - -PHP e TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index 24a09d75ccd..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: 'Variabili, espressioni e istruzioni' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -Qual è il simbolo usato in un'istruzione di assegnazione? - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index 2985d8128dd..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: Visualizzare i dati con Python -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -La maggior parte dei dati deve essere \_\_\_\_\_\_ prima dell'uso. - -## --answers-- - -convertita in formato JSON - ---- - -graficata - ---- - -pulita - ---- - -memorizzata - ---- - -convertita in un brano - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index 92d2818e99c..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'Servizi Web: limitazione delle richieste API e sicurezza' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -Altre risorse: - -\- Esercizio: GeoJSON - -\- Esercizio: JSON - -\- Esercizio: Twitter - -\- Esercizio: XML - -# --question-- - -## --text-- - -Quando si fa una richiesta dall'API Twitter, quali informazioni devono essere sempre inviate con la richiesta? - -## --answers-- - -Nome utente Twitter - ---- - -intervallo di date - ---- - -termine di ricerca - ---- - -chiave - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index 68288f5c874..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'Servizi Web: API' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -Cosa significa API? - -## --answers-- - -Application Portable Intelligence - ---- - -Associate Programming International - ---- - -Application Program Interface - ---- - -Action Portable Interface - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index 3fc4b47a8b0..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'Servizi Web: JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -Cosa scriverà il seguente codice? - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[Error] - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index bdd1e7646eb..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'Servizi Web: approccio orientato ai servizi' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -Con un approccio per lo sviluppo di applicazioni web orientato ai servizi, dove si trovano i dati? - -## --answers-- - -Distribuiti in molti sistemi informatici collegati via Internet o nella rete interna. - ---- - -All'interno di diversi servizi sul server web principale. - ---- - -Su un server di database separato. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index dbdeb13d48c..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'Servizi Web: Schema XML' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -Che cos’è XSD? - -## --answers-- - -La specifica di schema W3C per XML. - ---- - -Lo schema standard JSON da MOZ. - ---- - -Extensible Situational Driver - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index 47fb04cafc0..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'Servizi Web: XML' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -Cosa c'è di sbagliato nel seguente XML?: - -```xml - - Chuck - - +1 734 303 4456 - - -``` - -## --answers-- - -Tag di chiusura dell'email mancante. - ---- - -La spaziatura causerà l'invalidità dell'XML. - ---- - -Tag di chiusura del telefono mancante. - ---- - -Il testo semplice dovrebbe essere codificato usando UTF-8. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md deleted file mode 100644 index a67f5802700..00000000000 --- a/curriculum/challenges/italian/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f065 -title: Lavorare con le liste -challengeType: 11 -videoId: lCnHfTHkhbE -bilibiliIds: - aid: 376965958 - bvid: BV1No4y1S7oi - cid: 376387989 -dashedName: working-with-lists ---- - -# --question-- - -## --text-- - -Quale metodo viene utilizzato per aggiungere un elemento alla fine di una lista? - -## --answers-- - -insert - ---- - -push - ---- - -append - ---- - -new - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md deleted file mode 100644 index 3d9e5c84f81..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f33310c1851c6c4da013250 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -È ora di aggiungere qualche contenuto del menu. Aggiungi un elemento `main` al di sotto dell'elemento `header` esistente. Conterrà delle informazioni sui prezzi del caffè e dei dessert offerti dal bar. - -# --hints-- - -Il codice dovrebbe avere un tag di apertura `
                                                                `. - -```js -assert(code.match(/
                                                                /i)); -``` - -Il codice dovrebbe avere un tag di chiusura `
                                                                `. - -```js -assert(code.match(/<\/main>/i)); -``` - -Non dovresti cambiare l'elemento `header`. Assicurati di non aver eliminato accidentalmente il tag di chiusura. - -```js -assert($('header').length === 1); -``` - -Il tag `main` dovrebbe essere dopo il tag `header`. - -```js -const main = document.querySelectorAll('main')[0]; -assert(main.previousElementSibling.tagName === 'HEADER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - ---fcc-editable-region-- -
                                                                -

                                                                CAMPER CAFE

                                                                -

                                                                Est. 2020

                                                                -
                                                                ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index 8a5dcb7b480..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Flexbox è un layout CSS monodimensionale che può controllare il modo in cui gli oggetti sono distanziati e allineati all'interno di un contenitore. - -Per usarlo, dai a un elemento la proprietà `display` con il valore `flex`. In questo modo, diventerà un contenitore flex. Qualsiasi figlio diretto del contenitore flex viene detto elemento flex. - -Crea un selettore `.gallery` e rendilo un contenitore flex. - -# --hints-- - -Dovresti avere un selettore `.gallery`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); -``` - -Il selettore `.gallery` dovrebbe avere una proprietà `display` con il valore `flex`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
                                                                -

                                                                css flexbox photo gallery

                                                                -
                                                                -
                                                                - - - - - - - - - -
                                                                - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; -} - -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { - width: 100%; - max-width: 350px; - height: 300px; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index 6e55c1cca40..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Inizia impostando la struttura HTML di base. Aggiungi una dichiarazione `` e un elemento `html` con un attributo `lang` con valore di `en`. All'interno dell'elemento `html`, aggiungi un elemento `head` e un elemento `body`. - -# --hints-- - -Il codice dovrebbe contenere il riferimento `DOCTYPE`. - -```js -assert(code.match(/`. - -```js -assert(code.match(/html\s*>/gi)); -``` - -La dichiarazione `DOCTYPE` dovrebbe essere all'inizio dell'HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -L'elemento `html` dovrebbe avere un attributo `lang` con valore di `en` - -```js -assert(code.match(//gi)); -``` - -L'elemento `html` dovrebbe avere un tag di chiusura. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Dovresti avere un tag `head` di apertura. - -```js -assert(code.match(//i)); -``` - -Dovresti avere un tag `head` di chiusura. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -Dovresti avere un tag `body` di apertura. - -```js -assert(code.match(//i)); -``` - -Dovresti avere un tag `body` di chiusura. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -Gli elementi `head` e `body` dovrebbero essere fratelli. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -L'elemento `head` dovrebbe essere all'interno dell'elemento `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -L'elemento `body` dovrebbe essere all'interno dell'elemento `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md deleted file mode 100644 index 026cef8a25f..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -All'interno dell'elemento `head`, aggiungi un tag `meta` con l'attributo `charset` impostato su `utf-8`. Aggiungi anche un elemento `title` con il testo `Picasso Painting`. - -# --hints-- - -Dovresti aggiungere solo un elemento `meta`. - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -L'elemento `meta` dovrebbe avere l'attributo `charset`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -L'attributo `charset` dovrebbe essere impostato su `utf-8`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -``` - -Dovresti aggiungere un solo elemento `title`. - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -L'elemento `title` dovrebbe avere il testo `Picasso Painting`. Fai attenzione all'ortografia e alle maiuscole/minuscole. - -```js -assert(document.querySelector('title')?.innerText === 'Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md deleted file mode 100644 index 3cc4cbf86f9..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -FontAwesome è una biblioteca di icone SVG, molte delle quali possono essere usate gratuitamente. Utilizzerai alcune di queste icone in questo progetto, quindi ti servirà il link a un foglio di stile esterno al tuo HTML. - -Aggiungi un elemento `link` con un `rel` di `stylesheet` e un `href` con il valore `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -# --hints-- - -Dovresti avere due elementi `link`. - -```js -assert(document.querySelectorAll('link').length === 2); -``` - -L'elemento `link` dovrebbe avere un `rel` con il valore `stylesheet`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); -``` - -L'elemento `link` dovrebbe avere un `href` con il valore `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index 53537399385..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Per iniziare il dipinto, assegna all'elemento `body` una proprietà `background-color` con il valore `rgb(184, 132, 46)`. - -# --hints-- - -Dovresti usare un selettore `body`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -L'elemento `body` dovrebbe avere la proprietà `background-color` impostata su `rgb (184, 132, 46)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index 23a4d515a70..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -All'interno del tag body, aggiungi un elemento `div`. Dagli un `id` di `back-wall`. - -# --hints-- - -Dovresti aggiungere esattamente 1 elemento `div`. - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -L'elemento `div` dovrebbe avere il valore `id` di `back-wall`. - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index 40fc7510cbc..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Usa un selettore id per assegnare all'elemento con l'id `back-wall` una proprietà `background-color` di `#8B4513`. - -# --hints-- - -Dovresti usare un selettore `#back-wall`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -Il selettore `#back-wall` dovrebbe avere un `background-color` di `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index ac1797bb571..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Assegna all'elemento `#back-wall` una proprietà `width` del `100%` e una proprietà `height` del `60%`. - -# --hints-- - -Dovresti impostare la proprietà `width` del selettore `#back-wall` al `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -Dovresti impostare la proprietà `height` del selettore `#back-wall` al `60%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index 2267ac67b47..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Tipicamente, l'HTML è renderizzato in modo top-down. Gli elementi in cima al codice sono posizionati nella parte superiore della pagina. Tuttavia, spesso è possibile che tu voglia spostare gli elementi in posizioni diverse. Puoi farlo grazie alla proprietà `position`. - -Imposta la proprietà `position` per l'elemento `#back-wall` sul valore `absolute`. Il valore `absolute` toglie l'elemento dal flusso top-down del documento e ti permette di spostarlo relativamente al suo contenitore. - -Puoi spostare manualmente il layout di un elemento con `top`, `left`, `right` e `bottom`. Assegna all'elemento `#back-wall` una proprietà `top` di `0` e una proprietà `left` di `0`. - - -# --hints-- - -Il selettore `#back-wall` dovrebbe avere la proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -Il selettore `#back-wall` dovrebbe avere la proprietà `top` impostata a `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -Il selettore `#back-wall` dovrebbe avere la proprietà `left` impostata a `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index 3902c38d3a2..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -La proprietà `z-index` viene utilizzata per creare dei "livelli" per gli elementi HTML. Se hai familiarità con gli strumenti di modifica delle immagini, potresti aver già lavorato con dei livelli. Questo è un concetto simile. - -Il valore corrisponde alla stratificazione dei livelli, quindi gli elementi con un valore `z-index` superiore appariranno sopra gli elementi con un valore `z-index` inferiore. Ciò può essere combinato con il posizionamento della lezione precedente per creare effetti unici. - -Poiché l'elemento `back-wall` dovrà apparire "dietro" gli altri elementi che creerai, assegna all'elemento `back-wall` un `z-index` di `-1`. - -# --hints-- - -Il selettore `#back-wall` dovrebbe avere una proprietà `z-index` impostata su `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index 778d92ab5f1..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Sotto l'elemento `#back-wall`, crea un `div` con un attributo `class` del valore di `characters`. Qui creerai le figure del tuo dipinto. - -# --hints-- - -Dovresti aggiungere solo un elemento `div`. - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -Il nuovo elemento `div` dovrebbe trovarsi dopo l'elemento `#back-wall`. - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -Il nuovo elemento `div` dovrebbe avere l'attributo `class` impostata su `characters`. - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index ec062ec11af..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -All'interno dell'elemento `.characters`, crea un altro `div` con un `id` del valore di `offwhite-character`. - -# --hints-- - -Dovresti creare solo 1 elemento `div` aggiuntivo. - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -Il nuovo elemento `div` dovrebbe essere annidato nell'elemento `.characters`. - -```js -assert(document.querySelector('.characters div')); -``` - -Il nuovo elemento `div` dovrebbe avere un `id` con il valore `offwhite-character`. - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index 28e1b373c27..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Crea quattro elementi `div` all'interno dell'elemento `offwhite-character`. Assegna a questi elementi `div` i seguenti valori `id`, in ordine: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. - -# --hints-- - -Dovresti aggiungere quattro elementi `div` all'interno dell'elemento `.offwhite-character`. - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -Il primo nuovo elemento `div` dovrebbe avere un `id` con il valore `white-hat`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -Il secondo nuovo elemento `div` dovrebbe avere un `id` con il valore `black-mask`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -Il terzo nuovo elemento `div` dovrebbe avere un `id` con il valore `gray-instrument`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -Il quarto nuovo elemento `div` dovrebbe avere un `id` con il valore `tan-table`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index 813f70fbb3c..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Questa figura ha bisogno di occhi. Crea due elementi `div` nell'elemento `#black-mask`. Assegna loro le classi `eyes left` e `eyes right`, in quest'ordine. - -# --hints-- - -Dovresti creare 2 elementi `div` all'interno dell'elemento `#black-mask`. - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -Il primo nuovo `div` dovrebbe avere le classi `eyes` e `left`. - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -Il secondo nuovo `div` dovrebbe avere le classi `eyes` e `right`. - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index 3948ffbd946..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Crea alcuni "pallini" per lo strumento. Aggiungi cinque elementi `div` all'interno dell'elemento `#gray-instrument`. Imposta l'attributo `class` di ciascuno su `black-dot`. - -# --hints-- - -Dovresti avere cinque nuovi elementi `div` all'interno dell'elemento `#gray-instrument`. - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -Tutti e cinque gli elementi `div` dovrebbero avere la classe `black-dot`. - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index 63ca70683af..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Usando un selettore di id, crea una regola per l'elemento con l'id `offwhite-character`. Dagli una proprietà `width` di `300px`, una proprietà `height` di `550px` e un `background-color` del valore di `GhostWhite`. - -# --hints-- - -Dovresti usare il selettore `#offwhite-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -Il selettore `#offwhite-character` dovrebbe avere una proprietà `width` impostata a `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -Il selettore `#offwhite-character` dovrebbe avere una proprietà `height` impostata a `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -Il selettore `#offwhite-character` dovrebbe avere una proprietà `background-color` impostata su `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index e2a6b6d5bac..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Sposta l'elemento `#offwhite-character` in posizione dandogli una `position` con il valore `absolute` una proprietà `top` del `20%` e una proprietà `left` del `17.5%`. - -# --hints-- - -Il selettore `#offwhite-character` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -Il selettore `#offwhite-character` dovrebbe avere una proprietà `top` impostata al `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -Il selettore `#offwhite-character` dovrebbe avere una proprietà `left` impostata al `17.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index 5ce1fbaafb8..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Usando un selettore di id, definisci lo stile dell'elemento con l'id `white-hat`. Assegnagli delle proprietà `width` e `height` con il valore `0` e una proprietà `border-style` del valore di `solid`. - -# --hints-- - -Dovresti usare un selettore `#white-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -Il selettore `#white-hat` dovrebbe avere una proprietà `width` impostata su `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -Il selettore `#white-hat` dovrebbe avere una proprietà `height` impostata su `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -Il selettore `#white-hat` dovrebbe avere una proprietà `border-style` impostata su `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index 60d6a5ea22c..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -C'è qualcosa che non va. Imposta la proprietà `border-width` su `0 120px 140px 180px` per dimensionare correttamente l'elemento. - -# --hints-- - -Il selettore `#white-hat` dovrebbe avere una proprietà `border-width` impostata a `0 120px 140px 180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index 5f06b3c0482..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Adesso hai una grande scatola. Assegna all'elemento delle proprietà `border-top-color`, `border-right-color` e `border-left-color` con il valore `transparent`. Imposta il `border-bottom-color` su `GhostWhite`. Così assomiglierà di più a un cappello. - -# --hints-- - -Il selettore `#white-hat` dovrebbe avere una proprietà `border-top-color` impostata su `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -Il selettore `#white-hat` dovrebbe avere una proprietà `border-right-color` impostata su `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -Il selettore `#white-hat` dovrebbe avere una proprietà `border-left-color` impostata su `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -Il selettore `#white-hat` dovrebbe avere una proprietà `border-bottom-color` impostata su `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index fc4b1688a45..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Dai al cappello una proprietà `position` del valore di `absolute`, una proprietà `top` con il valore `-140px` e una proprietà `left` di `0`. - -# --hints-- - -Il selettore `#white-hat` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -Il selettore `#white-hat` dovrebbe avere una proprietà `top` impostata a `-140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -Il selettore `#white-hat` dovrebbe avere una proprietà `left` impostata a `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index 819b1df436e..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Usando un selettore di id, crea una regola per l'elemento con l'id `black-mask`. Dagli una proprietà `width` del `100%`, una proprietà `height` di `50px` e un `background-color` con il valore `rgb(45, 31, 19)`. - -# --hints-- - -Dovresti avere un selettore `#black-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -Il selettore `#black-mask` dovrebbe avere una proprietà `width` impostata sul `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -Il selettore `#black-mask` dovrebbe avere una proprietà `height` impostata a `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -Il selettore `#black-mask` dovrebbe avere una proprietà `background-color` con il valore `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index de64ce902ee..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Dai alla maschera una proprietà `position` con il valore `absolute` e delle proprietà `top` e `left` del valore di `0`. - -# --hints-- - -Il selettore `#black-mask` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -Il selettore `#black-mask` dovrebbe avere una proprietà `top` impostata su `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -Il selettore `#black-mask` dovrebbe avere una proprietà `left` impostata su `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index 40709096ca1..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Per assicurarti di poter vedere la maschera, dai all'elemento una proprietà `z-index` di `1`. - -# --hints-- - -Il selettore `#black-mask` dovrebbe avere una proprietà `z-index` impostata su `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index 60842c3be55..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Usando un selettore di id, assegna all'elemento con l'id `gray-instrument` una proprietà `width` del `15%`, una proprietà `height` del `40%` e un `background-color` con il valore `rgb(167, 162, 117)`. - -# --hints-- - -Dovresti avere un selettore `#gray-instrument`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -Il selettore `#gray-instrument` dovrebbe avere una proprietà `width` impostata al `15%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -Il selettore `#gray-instrument` dovrebbe avere una proprietà `height` impostata al `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -Il selettore `#gray-instrument` dovrebbe avere una proprietà `background-color` con il valore `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index b6049616dc8..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Adesso spostalo con una proprietà `position` del valore di `absolute`, una proprietà `top` di `50px` e una proprietà `left` di `125px`. - -# --hints-- - -Il selettore `#gray-instrument` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -Il selettore `#gray-instrument` dovrebbe avere una proprietà `top` di `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -Il selettore `#gray-instrument` dovrebbe avere una proprietà `left` di `125px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index 957e8cf20d3..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Imposta la proprietà `z-index` a `1`. - -# --hints-- - -Il selettore `#gray-instrument` dovrebbe avere una proprietà `z-index` impostata a `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index 84d67ce573b..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Usa un selettore di classe per creare una regola per gli elementi di classe `black-dot`. Imposta `width` a `10px`, `height` a `10px` e `background-color` su `rgb(45, 31, 19)`. - -# --hints-- - -Dovresti avere un selettore `.black-dot`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -Il selettore `.black-dot` dovrebbe avere una proprietà `width` impostata su `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -Il selettore `.black-dot` dovrebbe avere una proprietà `height` impostata su `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -Il selettore `.black-dot` dovrebbe avere una proprietà `background-color` impostata su `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index 7c5c672f906..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Questi pallini sono un po' troppo quadrati. Dai alla classe `black-dot` un `border-radius` del `50%` per arrotondarli. - -# --hints-- - -Il selettore `.black-dot` dovrebbe avere una proprietà `border-radius` impostata al `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index ec5dfc5656c..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Sposta i pallini in posizione impostando `display` su `block`, `margin` su `auto` e `margin-top` al `65%`. - -# --hints-- - -Il selettore `.black-dot` dovrebbe avere una proprietà `display` impostata su `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -Il selettore `.black-dot` dovrebbe avere una proprietà `margin` impostata su `auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -Il selettore `.black-dot` dovrebbe avere una proprietà `margin-top` impostata al `65%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index db857e1de71..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Usa un selettore di id per definire lo stile dell'elemento con l'id `tan-table`. Dagli una proprietà `width` di`450px`, una proprietà `height` di `140px` e una proprietà `background-color` con il valore `#D2691E`. - -# --hints-- - -Dovresti avere un selettore `#tan-table`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -Il selettore `#tan-table` dovrebbe avere una proprietà `width` impostata a `450px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -Il selettore `#tan-table` dovrebbe avere una proprietà `height` impostata a `140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -Il selettore `#tan-table` dovrebbe avere una proprietà `background-color` con il valore `#D2691E`. - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index e625abb5bab..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Sposta l'elemento tan-table in posizione impostando `position` su `absolute`, `top` a `275px` e `left` a `15px`. - -# --hints-- - -Il selettore `#tan-table` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -Il selettore `#tan-table` dovrebbe avere una proprietà `top` impostata a `275px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -Il selettore `#tan-table` dovrebbe avere una proprietà `left` impostata a `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index 6d63a36bc27..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Dai all'elemento tan-table una proprietà `z-index` di `1`. - -# --hints-- - -Il selettore `#tan-table` dovrebbe avere una proprietà `z-index` impostata a `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index 7a53485632f..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Dopo l'elemento `div#offwhite-character`, aggiungi un `div` con l'`id` del valore di `black-character`. - -# --hints-- - -Dovresti aggiungere un nuovo elemento `div` all'interno dell'elemento `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -Il nuovo elemento `div` dovrebbe avere l'`id` impostato su `black-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index 9ffeeecb5ac..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -All'interno del nuovo elemento `#black-character`, aggiungi tre elementi `div` con i seguenti valori `id`, in ordine: `black-hat`, `gray-mask`, `white-paper`. - -# --hints-- - -Dovresti avere tre nuovi elementi `div` all'interno dell'elemento `#black-character`. - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -Il primo nuovo elemento `div` dovrebbe avere l'`id` impostato su `black-hat`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -Il secondo nuovo elemento `div` dovrebbe avere l'`id` impostato su `gray-mask`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -Il terzo nuovo elemento `div` dovrebbe avere l'`id` impostato su `white-paper`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index 43344e177d2..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -La maschera ha bisogno di occhi. All'interno dell'elemento `#gray-mask`, aggiungi due elementi `div`. Il primo dovrebbe avere l'attributo `class` impostato su `eyes left` e il secondo dovrebbe avere l'attributo `class` impostato su `eyes right`. - -# --hints-- - -Dovresti avere due elementi `div` all'interno dell'elemento `#gray-mask`. - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -Il primo nuovo elemento `div` dovrebbe avere l'attributo `class` impostato su `eyes left`. - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -Il secondo nuovo elemento `div` dovrebbe avere l'attributo `class` impostato su `eyes right`. - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index 6103d2181af..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -È ora di usare alcune icone FontAwesome . - -L'elemento `i` è usato per il testo idiomatico o il testo che è separato dal "normale" contenuto di testo. Può essere usato per il testo in _corsivo_, per i termini scientifici o per icone, come quelle fornite da FontAwesome. - -All'interno dell'elemento `#white-paper`, aggiungi quattro elementi `i`. Assegna loro un valore di `class` di `fas fa-music`. - -Questa classe speciale viene usata da FontAwesome per determinare quale icona caricare. `fas` indica la categoria delle icone (FontAwesome Solid, in questo caso), mentre `fa-music` seleziona l'icona specifica. - -# --hints-- - -Dovresti avere quattro nuovi elementi `i` all'interno dell'elemento `#white-paper`. - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -Tutti gli elementi `i` dovrebbero avere l'attributo `class` impostato su `fas fa-music`. - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index c9f19b25dbe..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Usa un selettore di id per creare una regola per l'elemento con l'id `black-character`. Imposta `width` a `300px`, `height` a `500px` e `background-color` su `rgb(45, 31, 19)`. - -# --hints-- - -Dovresti usare un selettore `#black-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -Il selettore `#black-character` dovrebbe avere una proprietà `width` impostata a `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -Il selettore `#black-character` dovrebbe avere una proprietà `height` impostata a `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -Il selettore `#black-character` dovrebbe avere una proprietà `background-color` con il valore `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index e39625a93a2..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Sposta l'elemento `#black-character` impostando `position` su `absolute`, `top` al `30%` e `left` al `59%`. - -# --hints-- - -Il selettore `#black-character` dovrebbe avere una proprietà `position` con il valore `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -Il selettore `#black-character` dovrebbe avere una proprietà `top` impostata al `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -Il selettore `#black-character` dovrebbe avere una proprietà `left` impostata al `59%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index 5e4afb37679..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Usa un selettore di id per creare una regola per l'elemento con l'id `black-hat`. Imposta `width` a `0`, `height` a `0` e `border-style` su `solid`. - -# --hints-- - -Dovresti avere un selettore `#black-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -Il selettore `#black-hat` dovrebbe avere una proprietà `width` impostata a `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -Il selettore `#black-hat` dovrebbe avere una proprietà `height` impostata a `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -Il selettore `#black-hat` dovrebbe avere una proprietà `border-style` impostata su `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index e6d2dcd6797..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Proprio come con l'elemento `#white-hat`, dovresti definire lo stile del bordo per l'elemento `#black-hat`. Imposta `border-top-color`, `border-right-color` e `border-bottom-color` su`transparent`. Imposta `border-left-color` su `rgb(45, 31, 19)`. - -# --hints-- - -Il selettore `#black-hat` dovrebbe avere una proprietà `border-top-color` impostata su `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -Il selettore `#black-hat` dovrebbe avere una proprietà `border-right-color` impostata su `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -Il selettore `#black-hat` dovrebbe avere una proprietà `border-bottom-color` impostata su `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -Il selettore `#black-hat` dovrebbe avere una proprietà `border-left-color` impostata su `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index 7dfa9c40623..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Ora posiziona l'elemento `#black-hat`. Imposta `position` su `absolute`, `top` a `-150px` e `left` a `0`. - -# --hints-- - -Il selettore `#black-hat` dovrebbe avere una proprietà `position` con il valore `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -Il selettore `#black-hat` dovrebbe avere una proprietà `top` impostata a `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -Il selettore `#black-hat` dovrebbe avere una proprietà `left` impostata a `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index e3e81c34df0..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Usando un selettore di id, definisci lo stile dell'elemento con l'id `gray-mask`. Imposta `width` a `150px`, `height` a `150px` e `background-color` a `rgb(167, 162, 117)`. - -# --hints-- - -Dovresti avere un selettore `#gray-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -Il selettore `#gray-mask` dovrebbe avere una proprietà `width` con il valore `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -Il selettore `#gray-mask` dovrebbe avere una proprietà `height` con il valore `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -Il selettore `#gray-mask` dovrebbe avere una proprietà `background-color` con il valore `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index 099c7aec1d0..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Posiziona l'elemento `#gray-mask` impostando `position` su `absolute`, `top` a `-10px` e `left` a `70px`. - -# --hints-- - -Il selettore `#gray-mask` dovrebbe avere una proprietà `position` con il valore `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -Il selettore `#gray-mask` dovrebbe avere una proprietà `top` con il valore `-10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -Il selettore `#gray-mask` dovrebbe avere una proprietà `left` impostata su `70px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index 5060f97bbf4..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Usando un selettore di id, crea una regola per l'id `white-paper`. Imposta `width` a `400px`, `height` a `100px` e `background-color` su `GhostWhite`. - -# --hints-- - -Dovresti avere un selettore `#white-paper`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -Il selettore `#white-paper` dovrebbe avere una proprietà `width` impostata su `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -Il selettore `#white-paper` dovrebbe avere una proprietà `height` impostata su `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -Il selettore `#white-paper` dovrebbe avere una proprietà `background-color` impostata su `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index 0929f6a73c2..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Posiziona `#white-paper` impostando `position` su `absolute`, `top` a `250px` e `left` a `-150px`. - -# --hints-- - -Il selettore `#white-paper` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -Il selettore `#white-paper` dovrebbe avere una proprietà `top` impostata su `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -Il selettore `#white-paper` dovrebbe avere una proprietà `left` impostata su `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index 1bc686cba03..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Imposta la proprietà `z-index` dell'elemento `#white-paper` a `1`. - -# --hints-- - -Il selettore `#white-paper` dovrebbe avere una proprietà `z-index` impostata a `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index 21e9610a4b9..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Le icone FontAwesome posseggono già il loro stile. Tuttavia, anche tu puoi agire sul loro stile cambiando cose come il colore e le dimensioni. Per ora, usa un selettore di classe per selezionare le icone con la classe `fa-music`. Imposta `display` su `inline-block`, `margin-top` all'`8%` e `margin-left` al `13%`. - -# --hints-- - -Dovresti avere un selettore `.fa-music`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -Il selettore `.fa-music` dovrebbe avere una proprietà `display` impostata su `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -Il selettore `.fa-music` dovrebbe avere una proprietà `margin-top` impostata all'`8%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -Il selettore `.fa-music` dovrebbe avere una proprietà `margin-left` impostata al `13%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index c3d4d95a37e..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Sotto l'elemento `#black-character`, aggiungi due nuovi elementi `div`. Saranno lo scialle. Assegna a entrambi un attributo `class` con il valore `blue`. Quindi dai al primo un `id` di `blue-left`, e al secondo un `id` di `blue-right`. - -# --hints-- - -Dovresti avere due nuovi elementi `div` all'interno dell'elemento `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -I due nuovi elementi `div` dovrebbero avere l'attributo `class` impostato su `blue`. - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -Il primo `div` dovrebbe avere un `id` di `blue-left`. - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -Il secondo `div` dovrebbe avere un `id` di `blue-right`. - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index 93b94461954..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Usa un selettore di classe per selezionare i nuovi elementi con la classe `blue`. Imposta il `background-color` su `#1E90FF`. - -# --hints-- - -Dovresti avere un selettore `.blue`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -Il selettore `.blue` dovrebbe avere una proprietà `background-color` impostata su `#1E90FF`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index c57caf2a825..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Seleziona l'elemento con l'id `blue-left` usando un selettore di id. Imposta `width` a `500px` e `height` a `300px`. - -# --hints-- - -Dovresti avere un selettore `#blue-left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -Il selettore `#blue-left` dovrebbe avere una proprietà `width` impostata a `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -Il selettore `#blue-left` dovrebbe avere una proprietà `height` impostata a `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index 845a74686fd..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Adesso, imposta `position` su `absolute`, `top` al `20%` e `left` al `20%`. - -# --hints-- - -Il selettore `#blue-left` dovrebbe avere una proprietà `position` con il valore `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -Il selettore `#blue-left` dovrebbe avere una proprietà `top` impostata al `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -Il selettore `#blue-left` dovrebbe avere una proprietà `left` impostata al `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index 0d7ae49ea21..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Poi seleziona l'elemento con l'id `blue-right` usando un selettore di id. Imposta `width` a `400px` e `height` a `300px`. - -# --hints-- - -Dovresti avere un selettore `#blue-right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -Il selettore `#blue-right` dovrebbe avere una proprietà `width` impostata su `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -Il selettore `#blue-right` dovrebbe avere una proprietà `height` impostata su `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index f4e83cb968b..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Posiziona correttamente l'elemento `#blue-right` impostando `position` su `absolute`, `top` al `50%` e `left` al `40%`. - -# --hints-- - -Il selettore `#blue-right` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -Il selettore `#blue-right` dovrebbe avere una proprietà `top` impostata al `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -Il selettore `#blue-right` dovrebbe avere una proprietà `left` impostata al `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index b5bb567d9ea..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Sotto gli elementi `.blue`, aggiungi un altro `div`. Dagli un `id` con il valore `orange-character`. - -# --hints-- - -Dovresti avere un nuovo elemento `div` all'interno del l'elemento `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -Il nuovo elemento `div` dovrebbe avere un `id` con il valore `orange-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index 869b9532342..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -All'interno dell'elemento `#orange-character`, aggiungi quattro elementi `div`. Dai loro i valori `id` di `black-round-hat`, `eyes-div`, `triangles` e `guitar` (in ordine). - -# --hints-- - -Dovresti avere quattro nuovi elementi `div` all'interno dell'elemento `#orange-character`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -Il primo nuovo elemento `div` dovrebbe avere un `id` impostato su `black-round-hat`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -Il secondo nuovo elemento `div` dovrebbe avere un `id` impostato su `eyes-div`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -Il terzo nuovo elemento `div` dovrebbe avere un `id` impostato su `triangles`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -Il quarto nuovo elemento `div` dovrebbe avere un `id` impostato su `guitar`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index 72a9a17c535..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -L'elemento `#eyes-div` dovrebbe contenere degli occhi. Aggiungi due elementi `div` al suo interno. Dai al primo un valore `class` di `eyes left`, e al secondo un valore `class` di `eyes right`. - -# --hints-- - -Dovresti avere due elementi `div` annidati nell'elemento `#eyes-div`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -Il primo nuovo `div` dovrebbe avere l'attributo `class` impostato su `eyes left`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -Il secondo nuovo `div` dovrebbe avere l'attributo `class` impostato su `eyes right`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index 7f9f60d45bd..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -All'interno del div `#triangles`, dovrai aggiungere gli elementi che diventeranno i tuoi triangoli. Crea trenta elementi `div` e dai a ciascuno di loro la classe `triangle`. - -# --hints-- - -Dovresti avere 30 elementi `div` all'interno dell'elemento `#triangles`. - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -Tutti i 30 nuovi elementi `div` dovrebbero avere l'attributo `class` impostato su `triangle`. - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index 0d811402ec7..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -All'interno dell'elemento `#guitar`, crea tre elementi `div`. Dai ai primi due una proprietà `class` con valore di `guitar`. Poi dai al primo un attributo `id` con valore di `guitar-left` e al secondo un `id` con valore di `guitar-right`. Aggiungi un `id` al terzo `div` con un valore di `guitar-neck`. - -Il terzo `div` non dovrebbe avere la classe `guitar`. - -# --hints-- - -Dovresti avere tre nuovi elementi `div` dentro l'elemento `#guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -Il primo nuovo `div` dovrebbe avere un attributo `class` impostato su `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -Il primo nuovo `div` dovrebbe avere un `id` impostato su `guitar-left`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -Il secondo nuovo `div` dovrebbe avere un attributo `class` impostato su `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -Il secondo nuovo `div` dovrebbe avere un `id` impostato su `guitar-right`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -Il terzo nuovo `div` dovrebbe avere un `id` impostato su `guitar-neck`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -Non dovresti dare al terzo `div` un attributo `class` con il valore `guitar`. - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index a5072ed192c..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Usa un'altra icona FontAwesome per l'elemento `.guitar`. All'interno degli elementi `#guitar-left` e `#guitar-right`, aggiungi un elemento `i` e assegnagli un attributo `class` con il valore `fas fa-bars`. - -# --hints-- - -All'interno dell'elemento `#guitar-left`, dovresti aggiungere un elemento `i`. - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -All'interno dell'elemento `#guitar-right`, dovresti aggiungere un elemento `i`. - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -I due nuovi elementi `i` dovrebbero avere l'attributo `class` impostato su `fas fa-bars`. - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - --fcc-editable-region-- -
                                                                - -
                                                                -
                                                                - -
                                                                - --fcc-editable-region-- -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index cd6144aca80..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Seleziona l'elemento `orange-character` con un selettore di id. Imposta `width` a `250px`, `height` a `550px` e `background-color` su `rgb(240, 78, 42)`. - -# --hints-- - -Dovresti avere un selettore `#orange-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -Il selettore `#orange-character` dovrebbe avere una proprietà `width` impostata a `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -Il selettore `#orange-character` dovrebbe avere una proprietà `height` impostata a `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -Il selettore `#orange-character` dovrebbe avere una proprietà `background-color` impostata su `rgb(240, 78, 42)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index f9e34706646..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Per l'elemento `#orange-character`, imposta `position` su `absolute`, `top` al `25%` e `left` al `40%`. - -# --hints-- - -Il selettore `#orange-character` dovrebbe avere una proprietà `position` con il valore `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -Il selettore `#orange-character` dovrebbe avere una proprietà `top` con il valore `25%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -Il selettore `#orange-character` dovrebbe avere una proprietà `left` con il valore `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index c739db0ac07..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Definisci lo stile dell'elemento con l'id `black-round-hat` usando un selettore di id. Imposta `width` a `180px`, `height` a `150px` e `background-color` su `rgb(45, 31, 19)`. - -# --hints-- - -Dovresti avere un selettore `#black-round-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -Il selettore `#black-round-hat` dovrebbe avere una proprietà `width` impostata a `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -Il selettore `#black-round-hat` dovrebbe avere una proprietà `height` impostata su `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -Il selettore `#black-round-hat` dovrebbe avere una proprietà `background-color` impostata su `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index 73afe91eab0..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -L'elemento `#black-round-hat` dovrebbe essere rotondo. Dagli una proprietà `border-radius` del `50%` per arrotondarlo. - -# --hints-- - -Il selettore `#black-round-hat` dovrebbe avere una proprietà `border-radius` impostata al `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index 02fa1e49c01..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Posiziona l'elemento `#black-round-hat` impostando `position` su `absolute`, `top` a `-100px` e `left` a `5px`. - -# --hints-- - -Il selettore `#black-round-hat` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -Il selettore `#black-round-hat` dovrebbe avere una proprietà `top` con il valore `-100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -Il selettore `#black-round-hat` dovrebbe avere una proprietà `left` con il valore `5px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index 90d43d1f0fe..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Posiziona sul livello corretto l'elemento `#black-round-hat` impostando `z-index` a `-1`. - -# --hints-- - -Il selettore `#black-round-hat` dovrebbe avere una proprietà `z-index` impostata a `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index 8cff1f9a625..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -Usa un selettore di id per creare una regola per l'elemento con l'id `eyes-div`. Imposta `width` a `180px` e `height` a `50px`. - -# --hints-- - -Dovresti creare un selettore `#eyes-div`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -Il selettore `#eyes-div` dovrebbe avere una proprietà `width` impostata su `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -Il selettore `#eyes-div` dovrebbe avere una proprietà `height` impostata su `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index c5737d67dea..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Adesso posiziona l'elemento `#eyes-div`impostando `position` su `absolute`, `top` a `-40px` e `left` a `20px`. - -# --hints-- - -Il selettore `#eyes-div` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -Il selettore `#eyes-div` dovrebbe avere una proprietà `top` impostata a `-40px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -Il selettore `#eyes-div` dovrebbe avere una proprietà `left` impostata a `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index 5b554ea1cdf..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Assegna all'elemento `#eyes-div` una proprietà `z-index` di `3`. - -# --hints-- - -Il selettore `#eyes-div` dovrebbe avere una proprietà `z-index` impostata a `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index 240fc636bef..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -Ora usa un selettore di classe per selezionare `guitar`. In questo modo, agirai sullo stile delle due "metà" della chitarra. Imposta `width` a `150px`, `height` a `120px`, `background-color` su `Goldenrod` e `border-radius` al `50%`. - -# --hints-- - -Dovresti creare un selettore `.guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -Il selettore `.guitar` dovrebbe avere una proprietà `width` impostata su `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -Il selettore `.guitar` dovrebbe avere una proprietà `height` impostata su `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -Il selettore `.guitar` dovrebbe avere una proprietà `background-color` impostata su `Goldenrod`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -Il selettore `.guitar` dovrebbe avere una proprietà `border-radius` impostata al `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index a80647e6f89..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Seleziona l'`id` con il valore `guitar-left`, imposta `position` su `absolute` e `left` a `0px`. - -# --hints-- - -Dovresti creare un nuovo selettore `#guitar-left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -Il selettore `#guitar-left` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index 5bd41421d94..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Seleziona l'`id` con il valore `guitar-right` e imposta `position` su `absolute`. Questa volta, imposta `left` a `100px`. - -# --hints-- - -Dovresti creare un nuovo selettore `#guitar-right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -Il selettore `#guitar-right` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -Il selettore `#guitar-right` dovrebbe avere una proprietà `left` impostata a `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index e986601d167..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Ora hai bisogno di sistemare le icone delle barre. Crea un selettore di classe per la classe `fa-bars`. Imposta `display` su `block`, `margin-top` al `30%` e `margin-left` al `40%`. - -# --hints-- - -Dovresti creare un selettore `.fa-bars`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -Il selettore `.fa-bars` dovrebbe avere una proprietà `display` impostata su `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -Il selettore `.fa-bars` dovrebbe avere una proprietà `margin-top` impostata al `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -Il selettore `.fa-bars` dovrebbe avere una proprietà `margin-left` impostata al `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index 059048dc5cd..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -Usa un selettore id per creare una regola per l'id `guitar-neck`. Imposta `width` a `200px`, `height` a `30px` e `background-color` su `#D2691E`. - -# --hints-- - -Dovresti creare un selettore `#guitar-neck`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -Il selettore `#guitar-neck` dovrebbe avere una proprietà `width` impostata a `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -Il selettore `#guitar-neck` dovrebbe avere una proprietà `height` impostata a `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -Il selettore `#guitar-neck` dovrebbe avere una proprietà `background-color` impostata su `#D2691E`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index a1fccae1d0a..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Ora sposta l'elemento `#guitar-neck` impostando `position` su `absolute`, `top` a `45px` e `left` a `200px`. - -# --hints-- - -Il selettore `#guitar-neck` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -Il selettore `#guitar-neck` dovrebbe avere una proprietà `top` impostata a `45px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -Il selettore `#guitar-neck` dovrebbe avere una proprietà `left` impostata a `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index dfb34743765..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Dai all'elemento `#guitar-neck` una proprietà `z-index` di `3`. - -# --hints-- - -Il selettore `#guitar-neck` dovrebbe avere una proprietà `z-index` impostata a `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index 423c11549c4..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -È tempo di definire lo stile degli elementi con la classe `eyes`. Usa un selettore di classe per impostare `width` a `35px`, `height` a `20px`, `background-color` su `#8B4513` e `border-radius` su `20px 50%`. - -# --hints-- - -Dovresti creare un selettore `.eyes`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -Il selettore `.eyes` dovrebbe avere una proprietà `width` impostata a `35px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -Il selettore `.eyes` dovrebbe avere una proprietà `height` impostata a `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -Il selettore `.eyes` dovrebbe avere una proprietà `background-color` impostata su `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -Il selettore `.eyes` dovrebbe avere una proprietà `border-radius` impostata su `20px 50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index 6f12dcfd677..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Seleziona l'attributo `class` con il valore `right` impostando `position` su `absolute`, `top` a `15px` e `right` a `30px`. - -# --hints-- - -Dovresti creare un selettore `.right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -Il selettore `.right` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -Il selettore `.right` dovrebbe avere una proprietà `top` impostata su `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -Il selettore `.right` dovrebbe avere una proprietà `right` impostata su `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index 5ab79e4301c..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Crea un selettore per l'attributo `class` con il valore `left`, impostando `position` su `absolute`, `top` a `15px` e `left` a `30px`. - -# --hints-- - -Dovresti creare un nuovo selettore `.left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -Il selettore `.left` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -Il selettore `.left` dovrebbe avere una proprietà `top` impostata su `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -Il selettore `.left` dovrebbe aver avuto una proprietà `left` impostata su `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index 9ac89beaaf2..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Ecco l'ultimo step. Le icone FontAwesome sono un po' troppo piccole. Selezionale tutte con un selettore di classe per `fas`, e imposta la proprietà `font-size` a `30px`. - -E con questo, il tuo Picasso è completo! - -# --hints-- - -Dovresti creare un selettore `.fas`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -Il selettore `.fas` dovrebbe avere una proprietà `font-size` impostata a `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index a65edecf101..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Vai avanti e collega il tuo file CSS, anche se non hai ancora scritto alcun CSS. - -Aggiungi un elemento `link` con un attributo `rel` di `stylesheet` e un `href` con il valore `styles.css`. - -# --hints-- - - -Il codice dovrebbe avere un elemento `link`. - -```js -assert.match(code, / link')); -``` - -L'elemento `link` dovrebbe avere un attributo `rel` con il valore `stylesheet`. - -```js -const link_element = document.querySelector('link'); -const rel = link_element.getAttribute("rel"); -assert.equal(rel, "stylesheet"); -``` - -L'elemento `link` dovrebbe avere un attributo `href` con il valore `styles.css`. - -```js -const link = document.querySelector('link'); -assert.equal(link.dataset.href, "styles.css"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index dc796a7a50b..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Regola il layout degli elementi `.triangle` con una proprietà `display` impostata su `inline-block`. - -# --hints-- - -Il selettore `.triangle` dovrebbe avere una proprietà `display` impostata su `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index 95143671eb3..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Assegna agli elementi `.triangle` il colore corretto. Imposta `border-top-color`, `border-bottom-color` e `border-left-color` su `transparent`. Imposta `border-right-color` su `Gold`. - -# --hints-- - -Il selettore `.triangle` dovrebbe avere una proprietà `border-top-color` impostata su `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -Il selettore `.triangle` dovrebbe avere una proprietà `border-bottom-color` impostata su `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -Il selettore `.triangle` dovrebbe avere una proprietà `border-left-color` impostata su `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -Il selettore `.triangle` dovrebbe avere una proprietà `border-right-color` impostata su `Gold`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index ebb2977a13b..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -Cambia lo stile del bordo degli elementi `.triangle`. Imposta `border-style` su `solid` e `border-width` su `42px 45px 45px 0`. - -# --hints-- - -Il selettore `.triangle` dovrebbe avere una proprietà `border-style` impostata su `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -Il selettore `.triangle` dovrebbe avere una proprietà `border-width` impostata su `42px 45px 45px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index f782e797fcb..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Crea un selettore di classe per gli elementi con la classe `triangle`. Imposta `width` a `0` e `height` a `0`. - -# --hints-- - -Dovresti creare un selettore `.triangle`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -Il selettore `.triangle` dovrebbe avere una proprietà `width` impostata a `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -Il selettore `.triangle` dovrebbe avere una proprietà `height` impostata a `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index 1332093fab5..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Seleziona l'elemento con l'id `triangles` usando un selettore di id. Imposta `width` a `250px` e `height` a `550px`. - -# --hints-- - -Dovresti aggiungere un selettore `#triangles`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -Il selettore `#triangles` dovrebbe avere una proprietà `width` impostata a `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -Il selettore `#triangles` dovrebbe avere una proprietà `height` impostata a `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index 11af33c93e5..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Ora usa un selettore di id per `guitar`. Imposta `width` al `100%` e `height` su `100px`. - -# --hints-- - -Dovresti creare un selettore `#guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -Il selettore `#guitar` dovrebbe avere una proprietà `width` impostata sul `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -Il selettore `#guitar` dovrebbe avere una proprietà `height` impostata su `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index b74d54ac5ef..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -Nello stesso selettore `#guitar`, imposta `position` su `absolute`, `top` a `120px` e `left` a `0px`. - -# --hints-- - -Il selettore `#guitar` dovrebbe avere una proprietà `position` impostata su `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -Il selettore `#guitar` dovrebbe avere una proprietà `top` impostata a `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -Il selettore `#guitar` dovrebbe avere una proprietà `left` impostata a `0px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index 872912b5b61..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -Assegna alla regola `#guitar` una proprietà `z-index` di `3`. - -# --hints-- - -Il selettore `#guitar` dovrebbe avere una proprietà `z-index` impostata su `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - -
                                                                -
                                                                - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index eebf9d3dcdb..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Imposta la proprietà `border-width` di `#black-hat` a `150px 0 0 300px`. - -# --hints-- - -Il selettore `#black-hat` dovrebbe avere una proprietà `border-width` impostata su `150px 0 0 300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                -
                                                                - - - - -
                                                                -
                                                                -
                                                                - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md deleted file mode 100644 index 0afae57b8a9..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f5c1cb7575c7551ed8a40 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -La dimensione maggiore del carattere del numero `230` lo sta facendo debordare. Per evitarlo, assegna a `.calories-info h1` una proprietà `overflow` impostata su `hidden`. - -# --hints-- - -Il selettore `.calories-info h1` dovrebbe avere una proprietà `overflow` con il valore `hidden`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                                -
                                                                -

                                                                Nutrition Facts

                                                                -
                                                                -

                                                                8 servings per container

                                                                -

                                                                Serving size 2/3 cup (55g)

                                                                -
                                                                -
                                                                -
                                                                -

                                                                Amount per serving

                                                                -

                                                                Calories 230

                                                                -
                                                                -
                                                                - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- -.calories-info h1 { - margin: -5px -2px; -} ---fcc-editable-region-- - -.calories-info span { - font-size: 1.2em; -} -``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md deleted file mode 100644 index 2606745495a..00000000000 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f6a7d4ba8037bc086c2c7 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Assegna al selettore `.divider` una proprietà `clear` con il valore `right`. Questo cancellerà la proprietà `float`, spingendo il divider e qualsiasi contenuto seguente sotto il testo di `float`. - -# --hints-- - -Il selettore `.divider` dovrebbe avere una proprietà `clear` con il valore `right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                                -
                                                                -

                                                                Nutrition Facts

                                                                -
                                                                -

                                                                8 servings per container

                                                                -

                                                                Serving size 2/3 cup (55g)

                                                                -
                                                                -
                                                                -
                                                                -

                                                                Amount per serving

                                                                -

                                                                Calories 230

                                                                -
                                                                -
                                                                -
                                                                -

                                                                % Daily Value *

                                                                -
                                                                -
                                                                -
                                                                - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - ---fcc-editable-region-- -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} ---fcc-editable-region-- - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md deleted file mode 100644 index 3618cb2a600..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 56533eb9ac21ba0edf2244e2 -title: Crea un cifrario di cesare -challengeType: 5 -forumTopicId: 16003 -dashedName: build-a-caesars-cipher ---- - -# --description-- - -Uno dei più semplici e più conosciuti cifrari è il cifrario di Cesare, noto anche come cifrario a scorrimento. In un cifrario a scorrimento i significati delle lettere sono spostati di un certo numero di posizioni. - -Un comune uso moderno è il cifrario ROT13, dove i valori delle letter sono shiftati di 13 posizioni. Così `A ↔ N`, `B ↔ O` e così via. - -Scrivi una funzione che prende una stringa cifrata con ROT13 come input e restituisce una stringa decodificata. - -Tutte le lettere saranno maiuscole. Non trasformare alcun carattere non alfabetico (cioè spazi, punteggiatura), ma passali come sono. - -# --hints-- - -`rot13("SERR PBQR PNZC")` dovrebbe decodificare la stringa `FREE CODE CAMP` - -```js -assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); -``` - -`rot13("SERR CVMMN!")` dovrebbe decodificare la stringa `FREE PIZZA!` - -```js -assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); -``` - -`rot13("SERR YBIR?")` dovrebbe restituire la stringa `FREE LOVE?` - -```js -assert(rot13('SERR YBIR?') === 'FREE LOVE?'); -``` - -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` dovrebbe restituire la stringa `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` - -```js -assert( - rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === - 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function rot13(str) { - return str; -} - -rot13("SERR PBQR PNZC"); -``` - -# --solutions-- - -```js -var lookup = { - 'A': 'N','B': 'O','C': 'P','D': 'Q', - 'E': 'R','F': 'S','G': 'T','H': 'U', - 'I': 'V','J': 'W','K': 'X','L': 'Y', - 'M': 'Z','N': 'A','O': 'B','P': 'C', - 'Q': 'D','R': 'E','S': 'F','T': 'G', - 'U': 'H','V': 'I','W': 'J','X': 'K', - 'Y': 'L','Z': 'M' -}; - -function rot13(encodedStr) { - var codeArr = encodedStr.split(""); // String to Array - var decodedArr = []; // Your Result goes here - // Only change code below this line - - decodedArr = codeArr.map(function(letter) { - if(lookup.hasOwnProperty(letter)) { - letter = lookup[letter]; - } - return letter; - }); - - // Only change code above this line - return decodedArr.join(""); // Array to String -} -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md deleted file mode 100644 index 5e44a3295a6..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: aa2e6f85cab2ab736c9a9b24 -title: Crea un contatore di cassa -challengeType: 5 -forumTopicId: 16012 -dashedName: build-a-cash-register ---- - -# --description-- - -Progetta una funzione per il cassetto di un registratore di cassa `checkCashRegister()` che accetta il prezzo di acquisto come primo argomento (`price`), il pagamento come secondo argomento (`cash`) e il cassetto dei contanti (cash-in-drawer, `cid`) come terzo argomento. - -`cid` è un array 2D che elenca la valuta disponibile. - -La funzione `checkCashRegister()` dovrebbe restituire sempre un oggetto con una chiave `status` e una chiave `change`. - -Restituisce `{status: "INSUFFICIENT_FUNDS", change: []}` se il cash-in-drawer è inferiore al cambio dovuto, o se non è possibile restituire il cambio esatto. - -Restituisce `{status: "CLOSED", change: [...]}` con il cid come valore per la chiave `change` se è uguale al cambio dovuto. - -Altrimenti, restituisce `{status: "OPEN", change: [...]}`, con il cambio dovuto in monete e banconote, ordinati in ordine dal valore più alto al più basso, come valore della chiave `change`. - -
                                                                Unità monetariaImporto
                                                                Penny$0.01 (PENNY)
                                                                Nichel$0.05 (NICKEL)
                                                                Dime$0.1 (DIME)
                                                                Quarter$0.25 (QUARTER)
                                                                Dollar$1 (ONE)
                                                                Five Dollars$5 (FIVE)
                                                                Ten Dollars$10 (TEN)
                                                                Twenty Dollars$20 (TWENTY)
                                                                One-hundred Dollars$100 (ONE HUNDRED)
                                                                - -Ecco qui sotto un esempio di array cash-in-drawer: - -```js -[ - ["PENNY", 1.01], - ["NICKEL", 2.05], - ["DIME", 3.1], - ["QUARTER", 4.25], - ["ONE", 90], - ["FIVE", 55], - ["TEN", 20], - ["TWENTY", 60], - ["ONE HUNDRED", 100] -] -``` - -# --hints-- - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` dovrebbe restituire un oggetto. - -```js -assert.deepEqual( - Object.prototype.toString.call( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]) - ), - '[object Object]' -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` dovrebbe restituire `{status: "OPEN", change: [["QUARTER", 0.5]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { status: 'OPEN', change: [['QUARTER', 0.5]] } -); -``` - -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` dovrebbe restituire `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. - -```js -assert.deepEqual( - checkCashRegister(3.26, 100, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { - status: 'OPEN', - change: [ - ['TWENTY', 60], - ['TEN', 20], - ['FIVE', 15], - ['ONE', 1], - ['QUARTER', 0.5], - ['DIME', 0.2], - ['PENNY', 0.04] - ] - } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` dovrebbe restituire `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` dovrebbe restituire `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 1], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` dovrebbe restituire `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { - status: 'CLOSED', - change: [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ] - } -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function checkCashRegister(price, cash, cid) { - let change; - return change; -} - -checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); -``` - -# --solutions-- - -```js -const denom = [ - { name: "ONE HUNDRED", val: 100 }, - { name: "TWENTY", val: 20 }, - { name: "TEN", val: 10 }, - { name: "FIVE", val: 5 }, - { name: "ONE", val: 1 }, - { name: "QUARTER", val: 0.25 }, - { name: "DIME", val: 0.1 }, - { name: "NICKEL", val: 0.05 }, - { name: "PENNY", val: 0.01 }, -]; - -function checkCashRegister(price, cash, cid) { - const output = { status: null, change: [] }; - let change = cash - price; - const register = cid.reduce( - function (acc, curr) { - acc.total += curr[1]; - acc[curr[0]] = curr[1]; - return acc; - }, - { total: 0 } - ); - if (register.total === change) { - output.status = "CLOSED"; - output.change = cid; - return output; - } - if (register.total < change) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - const change_arr = denom.reduce(function (acc, curr) { - let value = 0; - while (register[curr.name] > 0 && change >= curr.val) { - change -= curr.val; - register[curr.name] -= curr.val; - value += curr.val; - change = Math.round(change * 100) / 100; - } - if (value > 0) { - acc.push([curr.name, value]); - } - return acc; - }, []); - if (change_arr.length < 1 || change > 0) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - output.status = "OPEN"; - output.change = change_arr; - return output; -} -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md deleted file mode 100644 index c69be5f3035..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: aaa48de84e1ecc7c742e1124 -title: Crea un verificatore di palindromi -challengeType: 5 -forumTopicId: 16004 -dashedName: build-a-palindrome-checker ---- - -# --description-- - -Restituisci `true` se la stringa data è un palindromo. Altrimenti, restituisci `false`. - -Un palindromo è una parola o una frase che è scritta allo stesso modo sia in avanti che all'indietro, ignorando punteggiatura, maiuscole e minuscole e spaziatura. - -**Nota:** Dovrai rimuovere **tutti i caratteri non alfanumerici** (punteggiatura, spazi e simboli) e trasformare tutto in maiuscolo o in minuscolo per verificare la presenza di palindromi. - -Passeremo stringhe con diversi formati, come `racecar`, `RaceCar` e `race CAR` tra le altre. - -Passeremo anche stringhe con simboli speciali, come `2A3*3a2`, `2A3 3a2` e `2_A3*3#A2`. - -# --hints-- - -`palindrome("eye")` dovrebbe restituire un valore booleano. - -```js -assert(typeof palindrome('eye') === 'boolean'); -``` - -`palindrome("eye")` dovrebbe restituire `true`. - -```js -assert(palindrome('eye') === true); -``` - -`palindrome("_eye")` dovrebbe restituire `true`. - -```js -assert(palindrome('_eye') === true); -``` - -`palindrome("race car")` dovrebbe restituire `true`. - -```js -assert(palindrome('race car') === true); -``` - -`palindrome("not a palindrome")` dovrebbe restituire `false`. - -```js -assert(palindrome('not a palindrome') === false); -``` - -`palindrome("A man, a plan, a canal. Panama")` dovrebbe restituire `true`. - -```js -assert(palindrome('A man, a plan, a canal. Panama') === true); -``` - -`palindrome("never odd or even")` dovrebbe restituire `true`. - -```js -assert(palindrome('never odd or even') === true); -``` - -`palindrome("nope")` dovrebbe restituire `false`. - -```js -assert(palindrome('nope') === false); -``` - -`palindrome("almostomla")` dovrebbe restituire `false`. - -```js -assert(palindrome('almostomla') === false); -``` - -`palindrome("My age is 0, 0 si ega ym.")` dovrebbe restituire `true`. - -```js -assert(palindrome('My age is 0, 0 si ega ym.') === true); -``` - -`palindrome("1 eye for of 1 eye.")` dovrebbe restituire `false`. - -```js -assert(palindrome('1 eye for of 1 eye.') === false); -``` - -`palindrome("0_0 (: /-\ :) 0-0")` dovrebbe restituire `true`. - -```js -assert(palindrome('0_0 (: /- :) 0-0') === true); -``` - -`palindrome("five|\_/|four")` dovrebbe restituire `false`. - -```js -assert(palindrome('five|_/|four') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function palindrome(str) { - return true; -} - -palindrome("eye"); -``` - -# --solutions-- - -```js -function palindrome(str) { - var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); - var aux = string.split(''); - if (aux.join('') === aux.reverse().join('')){ - return true; - } - - return false; -} -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md deleted file mode 100644 index 45deb537a19..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: a7f4d8f2483413a6ce226cac -title: Crea un convertitore di numeri romani -challengeType: 5 -forumTopicId: 16044 -dashedName: build-a-roman-numeral-converter ---- - -# --description-- - -Converti il numero dato in un numero romano. - -| Numeri romani | Numeri arabi | -| ------------- | ------------ | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| C | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -Tutti i numeri romani nei risultati dovrebbero essere in maiuscolo. - -# --hints-- - -`convertToRoman(2)` dovrebbe restituire la stringa `II`. - -```js -assert.deepEqual(convertToRoman(2), 'II'); -``` - -`convertToRoman(3)` dovrebbe restituire la stringa `III`. - -```js -assert.deepEqual(convertToRoman(3), 'III'); -``` - -`convertToRoman(4)` dovrebbe restituire la stringa `IV`. - -```js -assert.deepEqual(convertToRoman(4), 'IV'); -``` - -`convertToRoman(5)` dovrebbe restituire la stringa `V`. - -```js -assert.deepEqual(convertToRoman(5), 'V'); -``` - -`convertToRoman(9)` dovrebbe restituire la stringa `IX`. - -```js -assert.deepEqual(convertToRoman(9), 'IX'); -``` - -`convertToRoman(12)` dovrebbe restituire la stringa `XII`. - -```js -assert.deepEqual(convertToRoman(12), 'XII'); -``` - -`convertToRoman(16)` dovrebbe restituire la stringa `XVI`. - -```js -assert.deepEqual(convertToRoman(16), 'XVI'); -``` - -`convertToRoman(29)` dovrebbe restituire la stringa `XXIX`. - -```js -assert.deepEqual(convertToRoman(29), 'XXIX'); -``` - -`convertToRoman(44)` dovrebbe restituire la stringa `XLIV`. - -```js -assert.deepEqual(convertToRoman(44), 'XLIV'); -``` - -`convertToRoman(45)` dovrebbe restituire la stringa `XLV`. - -```js -assert.deepEqual(convertToRoman(45), 'XLV'); -``` - -`convertToRoman(68)` dovrebbe restituire la stringa `LXVIII` - -```js -assert.deepEqual(convertToRoman(68), 'LXVIII'); -``` - -`convertToRoman(83)` dovrebbe restituire la stringa `LXXXIII` - -```js -assert.deepEqual(convertToRoman(83), 'LXXXIII'); -``` - -`convertToRoman(97)` dovrebbe restituire la stringa `XCVII` - -```js -assert.deepEqual(convertToRoman(97), 'XCVII'); -``` - -`convertToRoman(99)` dovrebbe restituire la stringa `XCIX` - -```js -assert.deepEqual(convertToRoman(99), 'XCIX'); -``` - -`convertToRoman(400)` dovrebbe restituire la stringa `CD` - -```js -assert.deepEqual(convertToRoman(400), 'CD'); -``` - -`convertToRoman(500)` dovrebbe restituire la stringa `D` - -```js -assert.deepEqual(convertToRoman(500), 'D'); -``` - -`convertToRoman(501)` dovrebbe restituire la stringa `DI` - -```js -assert.deepEqual(convertToRoman(501), 'DI'); -``` - -`convertToRoman(649)` dovrebbe restituire la stringa `DCXLIX` - -```js -assert.deepEqual(convertToRoman(649), 'DCXLIX'); -``` - -`convertToRoman(798)` dovrebbe restituire la stringa `DCCXCVIII` - -```js -assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); -``` - -`convertToRoman(891)` dovrebbe restituire la stringa `DCCCXCI` - -```js -assert.deepEqual(convertToRoman(891), 'DCCCXCI'); -``` - -`convertToRoman(1000)` dovrebbe restituire la stringa `M` - -```js -assert.deepEqual(convertToRoman(1000), 'M'); -``` - -`convertToRoman(1004)` dovrebbe restituire la stringa `MIV` - -```js -assert.deepEqual(convertToRoman(1004), 'MIV'); -``` - -`convertToRoman(1006)` dovrebbe restituire la stringa `MVI` - -```js -assert.deepEqual(convertToRoman(1006), 'MVI'); -``` - -`convertToRoman(1023)` dovrebbe restituire la stringa `MXXIII` - -```js -assert.deepEqual(convertToRoman(1023), 'MXXIII'); -``` - -`convertToRoman(2014)` dovrebbe restituire la stringa `MMXIV` - -```js -assert.deepEqual(convertToRoman(2014), 'MMXIV'); -``` - -`convertToRoman(3999)` dovrebbe restituire la stringa `MMMCMXCIX` - -```js -assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); -``` - -# --seed-- - -## --seed-contents-- - -```js -function convertToRoman(num) { - return num; -} - -convertToRoman(36); -``` - -# --solutions-- - -```js -function convertToRoman(num) { - var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; - var res = []; - ref.forEach(function(p) { - while (num >= p[1]) { - res.push(p[0]); - num -= p[1]; - } - }); - return res.join(''); -} -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md deleted file mode 100644 index 87971f86da5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: aff0395860f5d3034dc0bfc9 -title: Crea un validatore di numero telefonico -challengeType: 5 -forumTopicId: 16090 -dashedName: build-a-telephone-number-validator ---- - -# --description-- - -Restituisce `true` se la stringa passata ha il formato di un numero di telefono US valido. - -L'utente può compilare la casella di testo del modulo in qualsiasi modo scelga a condizione che abbia il formato di un numero US valido. Di seguito sono riportati esempi di formati validi per i numeri degli Stati Uniti (fare riferimento ai test di seguito per altre varianti): - -
                                                                555-555-5555
                                                                (555)555-5555
                                                                (555) 555-5555
                                                                555 555 5555
                                                                5555555555
                                                                1 555 555 5555
                                                                - -Per questa sfida ti verrà presentata una stringa come `800-692-7753` o `8oo-six427676;laskdjf`. Il tuo compito è quello di convalidare o rifiutare il numero di telefono degli Stati Uniti in base a qualsiasi combinazione dei formati forniti sopra. Il codice di area è obbligatorio. Se viene fornito il codice paese, è necessario confermare che il codice sia `1`. Restituisci `true` se la stringa è un numero di telefono US valido; altrimenti restituisci `false`. - -# --hints-- - -`telephoneCheck("555-555-5555")` dovrebbe restituire un booleano. - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` dovrebbe restituire `true`. - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` dovrebbe restituire `true`. - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` dovrebbe restituire `true`. - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` dovrebbe restituire `true`. - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` dovrebbe restituire `true`. - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` dovrebbe restituire `true`. - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` dovrebbe restituire `true`. - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` dovrebbe restituire `true`. - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` dovrebbe restituire `false`. - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index 2dc744304d7..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Hai dichiarato le variabili con la parola chiave `var`. Tuttavia, nel moderno JavaScript è una buona pratica usare invece la parola chiave `let`. Ciò corregge diversi comportamenti insoliti con `var` che possono rendere difficoltoso il debugging. - -Cambia tutte le parole chiave `var` in `let`. - -# --hints-- - -Non dovresti avere alcuna parola chiave `var` nel codice. - -```js -assert.notMatch(code, /var/); -``` - -Dovresti usare la parola chiave `let` per dichiarare la variabile `xp`. - -```js -assert.match(code, /let xp/); -``` - -Dovresti usare la parola chiave `let` per dichiarare la variabile `health`. - -```js -assert.match(code, /let health/); -``` - -Dovresti usare la parola chiave `let` per dichiarare la variabile `gold`. - -```js -assert.match(code, /let gold/); -``` - -Dovresti usare la parola chiave `let` per dichiarare la variabile `currentWeapon`. - -```js -assert.match(code, /let currentWeapon/); -``` - -Non dovresti cambiare il valore delle variabili. - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - - -
                                                                -
                                                                - XP: 0 - Health: 100 - Gold: 50 -
                                                                -
                                                                - - - -
                                                                -
                                                                - Monster Name: - Health: -
                                                                -
                                                                - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                                -
                                                                - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js ---fcc-editable-region-- -var xp = 0; -var health = 100; -var gold = 50; -var currentWeapon = 0; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md deleted file mode 100644 index 4e5861b9881..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 62a8f2bc37675e77d5835235 -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -JavaScript possiede un operatore condizionale chiamato operatore ternario. Può essere usato come un'espressione `if-else` su una riga. La sintassi è: `condition ? true : false`. - -Ecco un esempio di espressione `if-else` cambiata in una ternaria: - -```js -if (num > 5) { - bigger() -} else { - smaller() -} - -num > 5 ? bigger() : smaller(); -``` - -Cambia la nuova espressione `if-else` in una ternaria. - -# --hints-- - -Dovresti rimuovere `if` e `else` dal blocco `else if`. - -```js -const block = attack.toString().split("else if"); -assert.notMatch(block[1], /if/); -assert.notMatch(block[1], /else/); -``` - -Dovresti verificare se `fighting` è uguale a `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2/); -``` - -Usando la sintassi ternaria, dovresti chiamare `winGame` se `fighting` è uguale a `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); -``` - -Usando la sintassi ternaria, dovresti chiamare `defeatMonster` se `fighting` non è uguale a `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - -
                                                                -
                                                                - XP: 0 - Health: 100 - Gold: 50 -
                                                                -
                                                                - - - -
                                                                -
                                                                - Monster Name: - Health: -
                                                                -
                                                                - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                                -
                                                                - - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js -let xp = 0; -let health = 100; -let gold = 50; -let currentWeapon = 0; -let fighting; -let monsterHealth; -let inventory = ["stick"]; - -const button1 = document.querySelector('#button1'); -const button2 = document.querySelector("#button2"); -const button3 = document.querySelector("#button3"); -const text = document.querySelector("#text"); -const xpText = document.querySelector("#xpText"); -const healthText = document.querySelector("#healthText"); -const goldText = document.querySelector("#goldText"); -const monsterStats = document.querySelector("#monsterStats"); -const monsterName = document.querySelector("#monsterName"); -const monsterHealthText =document.querySelector("#monsterHealth"); -const weapons = [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]; -const monsters = [ - { - name: "slime", - level: 2, - health: 15 - }, - { - name: "fanged beast", - level: 8, - health: 60 - }, - { - name: "dragon", - level: 20, - health: 300 - } -] -const locations = [ - { - name: "town square", - "button text": ["Go to store", "Go to cave", "Fight dragon"], - "button functions": [goStore, goCave, fightDragon], - text: "You are in the town square. You see a sign that says \"Store\"." - }, - { - name: "store", - "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], - "button functions": [buyHealth, buyWeapon, goTown], - text: "You enter the store." - }, - { - name: "cave", - "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], - "button functions": [fightSlime, fightBeast, goTown], - text: "You enter the cave. You see some monsters." - }, - { - name: "fight", - "button text": ["Attack", "Dodge", "Run"], - "button functions": [attack, dodge, goTown], - text: "You are fighting a monster." - }, - { - name: "kill monster", - "button text": ["Go to town square", "Go to town square", "Go to town square"], - "button functions": [goTown, goTown, goTown], - text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' - }, - { - name: "lose", - "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], - "button functions": [restart, restart, restart], - text: "You die. ☠️" - } -]; - -// initialize buttons -button1.onclick = goStore; -button2.onclick = goCave; -button3.onclick = fightDragon; - -function update(location) { - monsterStats.style.display = "none"; - button1.innerText = location["button text"][0]; - button2.innerText = location["button text"][1]; - button3.innerText = location["button text"][2]; - button1.onclick = location["button functions"][0]; - button2.onclick = location["button functions"][1]; - button3.onclick = location["button functions"][2]; - text.innerText = location.text; -} - -function goTown() { - update(locations[0]); -} - -function goStore() { - update(locations[1]); -} - -function goCave() { - update(locations[2]); -} - -function buyHealth() { - if (gold >= 10) { - gold -= 10; - health += 10; - goldText.innerText = gold; - healthText.innerText = health; - } else { - text.innerText = "You do not have enough gold to buy health."; - } -} - -function buyWeapon() { - if (currentWeapon < weapons.length - 1) { - if (gold >= 30) { - gold -= 30; - currentWeapon++; - goldText.innerText = gold; - let newWeapon = weapons[currentWeapon].name; - text.innerText = "You now have a " + newWeapon + "."; - inventory.push(newWeapon); - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "You do not have enough gold to buy a weapon."; - } - } else { - text.innerText = "You already have the most powerful weapon!"; - button2.innerText = "Sell weapon for 15 gold"; - button2.onclick = sellWeapon; - } -} - -function sellWeapon() { - if (inventory.length > 1) { - gold += 15; - goldText.innerText = gold; - let currentWeapon = inventory.shift(); - text.innerText = "You sold a " + currentWeapon + "."; - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "Don't sell your only weapon!"; - } -} - -function fightSlime() { - fighting = 0; - goFight(); -} - -function fightBeast() { - fighting = 1; - goFight(); -} - -function fightDragon() { - fighting = 2; - goFight(); -} - -function goFight() { - update(locations[3]); - monsterHealth = monsters[fighting].health; - monsterStats.style.display = "block"; - monsterName.innerText = monsters[fighting].name; - monsterHealthText.innerText = monsterHealth; -} - ---fcc-editable-region-- -function attack() { - text.innerText = "The " + monsters[fighting].name + " attacks."; - text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; - health -= monsters[fighting].level; - monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; - healthText.innerText = health; - monsterHealthText.innerText = monsterHealth; - if (health <= 0) { - lose(); - } else if (monsterHealth <= 0) { - if (fighting === 2) { - winGame(); - } else { - defeatMonster(); - } - } -} ---fcc-editable-region-- - -function dodge() { - text.innerText = "You dodge the attack from the " + monsters[fighting].name; -} - -function defeatMonster() { - gold += Math.floor(monsters[fighting].level * 6.7); - xp += monsters[fighting].level; - goldText.innerText = gold; - xpText.innerText = xp; - update(locations[4]); -} - -function lose() { - update(locations[5]); -} - -function restart() { - xp = 0; - health = 100; - gold = 50; - currentWeapon = 0; - inventory = ["stick"]; - goldText.innerText = gold; - healthText.innerText = health; - xpText.innerText = xp; - goTown(); -} -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md new file mode 100644 index 00000000000..d178d5a5a2b --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -0,0 +1,682 @@ +--- +id: 659b0093d7db5a1a1122b7bd +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +```js +const animals = ["dog", "cat", "horse"]; +animals.indexOf("cat") // 1 +``` + +Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`. + +# --hints-- + +You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/) +``` + +You should pass in `userData.currentSong` into the `indexOf()` method. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +

                                                                freeCodeCamp

                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                + song cover art +
                                                                +
                                                                +
                                                                +

                                                                +

                                                                +
                                                                +
                                                                + + + + + +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +

                                                                Playlist

                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                +
                                                                  +
                                                                  +
                                                                  + + + +``` + +```css +:root { + /* colors */ + --primary-color: #dfdfe2; + --secondary-color: #ffffff; + --app-background-color: #4d4d62; + --background-color: #1b1b32; + --foreground-color: #3b3b4f; + --highlight-color: #f1be32; + + /* font sizes */ + --root-font-size: 16px; + font-size: var(--root-font-size); + + /* font-families */ + --font-headline: "Roboto Mono", monospace; + --font-family: "Lato", sans-serif; +} + +*, +*::after, +*::before { + box-sizing: border-box; +} + +body { + background-color: var(--app-background-color); + color: var(--primary-color); + font-family: var(--font-family); +} + +h1 { + font-size: 1.125rem; + line-height: 1.6; +} + +h2 { + font-size: var(--root-font-size); +} + +ul { + margin: 0; +} + +.container { + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; +} + +.player, +.playlist { + width: 450px; + background-color: var(--background-color); + border: 3px solid var(--foreground-color); +} + +.player { + height: 260px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +.player-bar, +.playlist-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + width: 100%; + height: 30px; + background-color: var(--foreground-color); +} + +.parallel-lines { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + padding: 0 5px; +} + +.parallel-lines > div { + height: 2px; + width: 100%; + min-width: 75px; + background-color: var(--highlight-color); +} + +.fcc-title, +.playlist-title { + color: var(--secondary-color); + margin: 0 10px; + font-family: var(--font-headline); +} + +.player-content { + display: flex; + background-color: var(--foreground-color); + width: 430px; + height: 200px; + column-gap: 13px; + align-items: center; + justify-content: center; +} + +#player-album-art { + background-color: var(--secondary-color); + border: 6px solid var(--background-color); +} + +#player-album-art img { + width: 150px; + display: block; +} + +.player-display { + display: flex; + flex-direction: column; + row-gap: 20px; + padding: 14px; + background-color: var(--background-color); + height: 153px; + width: 226px; +} + +.player-display-song-artist { + height: 80px; +} + +.player-buttons svg { + fill: var(--primary-color); +} + +.playing > svg { + fill: var(--highlight-color); +} + +.player-buttons { + display: flex; + justify-content: space-around; +} + +button { + background: transparent; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: var(--root-font-size); + outline-color: var(--highlight-color); + text-align: center; +} + +.playlist-song { + outline-color: var(--highlight-color); +} + +.playlist li:not(:last-child) { + border-bottom: 1px solid var(--background-color); +} + +button:focus, +.playlist-song:focus { + outline-style: dashed; + outline-width: 2px; +} + +/* Playlist */ +.playlist { + height: auto; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +#playlist-songs { + width: 430px; + height: 100%; + background-color: var(--foreground-color); + display: flex; + flex-direction: column; + row-gap: 8px; + padding: 8px 9px; + visibility: visible; + justify-content: start; + list-style: none; +} + +.playlist-song { + display: flex; + height: 55px; + justify-content: space-between; + align-items: center; + padding: 5px; +} + +[aria-current="true"] { + background-color: var(--background-color); +} + +[aria-current="true"] p { + color: var(--highlight-color); +} + +.playlist-song-info { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + column-gap: 7px; + padding: 5px 0; + font-family: var(--font-family); +} + +#player-song-title, +#player-song-artist { + margin: 0; +} + +#player-song-artist { + color: var(--highlight-color); + font-size: 0.75rem; +} + +#player-song-title { + font-size: 1.125rem; +} + +.playlist-song-title { + font-size: 0.85rem; + width: 241px; + text-align: left; +} + +.playlist-song-artist { + font-size: 0.725rem; + width: 80px; +} + +.playlist-song-duration { + font-size: 0.725rem; + margin: auto; + font-family: var(--font-headline); + width: 30px; +} + +.playlist-song-delete { + padding: 0; + width: 20px; + height: 20px; +} + +.playlist-song-delete, +.playlist-song-delete { + fill: var(--foreground-color); +} + +.playlist-song-delete:hover circle, +.playlist-song-delete:focus circle { + fill: #ff0000; +} + +@media (max-width: 700px) { + .player, + .playlist { + width: 300px; + } + + .player { + height: 340px; + } + + #playlist-songs { + height: 280px; + padding: 5px 6px; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-color: var(--background-color) var(--secondary-color); + scrollbar-width: thin; + } + + #playlist-songs::-webkit-scrollbar { + width: 5px; + } + + #playlist-songs::-webkit-scrollbar-track { + background: var(--background-color); + } + + #playlist-songs::-webkit-scrollbar-thumb { + background: var(--secondary-color); + } + + h1 { + font-size: 0.813rem; + } + + h2 { + font-size: 0.75rem; + } + + .player-bar, + .playlist-bar, + .player-content, + #playlist-songs { + width: 280px; + } + + .playlist-song { + justify-content: space-between; + } + + .playlist-song-title { + width: 140px; + } + + .playlist-song-artist { + width: 40px; + } + + .playlist-song-duration > button { + padding: 0; + } + + .player-content { + display: inline; + position: relative; + justify-items: center; + height: 100%; + } + + #player-album-art { + z-index: -100; + height: 280px; + box-shadow: none; + background: #000; + } + + #player-album-art img { + width: 100%; + opacity: 0.6; + } + + .player-display-song-artist { + padding: 0 10px; + } + + .player-display-song-artist > p { + white-space: pre-wrap; + } + + .player-display { + position: absolute; + width: 100%; + z-index: 1000; + background-color: transparent; + top: 0; + height: 280px; + justify-content: space-between; + text-align: center; + } +} +``` + +```js +const playlistSongs = document.getElementById("playlist-songs"); +const playButton = document.getElementById("play"); +const pauseButton = document.getElementById("pause"); +const nextButton = document.getElementById("next"); +const previousButton = document.getElementById("previous"); +const shuffleButton = document.getElementById("shuffle"); + +const allSongs = [ + { + id: 0, + title: "Scratching The Surface", + artist: "Quincy Larson", + duration: "4:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3", + }, + { + id: 1, + title: "Can't Stay Down", + artist: "Quincy Larson", + duration: "4:15", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3", + }, + { + id: 2, + title: "Still Learning", + artist: "Quincy Larson", + duration: "3:51", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3", + }, + { + id: 3, + title: "Cruising for a Musing", + artist: "Quincy Larson", + duration: "3:34", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3", + }, + { + id: 4, + title: "Never Not Favored", + artist: "Quincy Larson", + duration: "3:35", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3", + }, + { + id: 5, + title: "From the Ground Up", + artist: "Quincy Larson", + duration: "3:12", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3", + }, + { + id: 6, + title: "Walking on Air", + artist: "Quincy Larson", + duration: "3:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3", + }, + { + id: 7, + title: "Can't Stop Me. Can't Even Slow Me Down.", + artist: "Quincy Larson", + duration: "3:52", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3", + }, + { + id: 8, + title: "The Surest Way Out is Through", + artist: "Quincy Larson", + duration: "3:10", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3", + }, + { + id: 9, + title: "Chasing That Feeling", + artist: "Quincy Larson", + duration: "2:43", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3", + }, +]; + +const audio = new Audio(); +let userData = { + songs: [...allSongs], + currentSong: null, + songCurrentTime: 0, +}; + +const playSong = (id) => { + const song = userData?.songs.find((song) => song.id === id); + audio.src = song.src; + audio.title = song.title; + + if (userData?.currentSong === null || userData?.currentSong.id !== song.id) { + audio.currentTime = 0; + } else { + audio.currentTime = userData.songCurrentTime; + } + userData.currentSong = song; + playButton.classList.add("playing"); + + audio.play(); +}; + +const pauseSong = () => { + userData.songCurrentTime = audio.currentTime; + + playButton.classList.remove("playing"); + audio.pause(); +}; + +const renderSongs = (array) => { + const songsHTML = array + .map((song)=> { + return ` +
                                                                • + + +
                                                                  • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +const getCurrentSongIndex = () => { + +} +--fcc-editable-region-- + +playButton.addEventListener("click", () => { + if (userData?.currentSong === null) { + playSong(userData?.songs[0].id); + } else { + playSong(userData?.currentSong.id); + } +}); + +pauseButton.addEventListener("click", pauseSong); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md deleted file mode 100644 index aed04c281b1..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 63ec14d1c216aa063f0be4af -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Costruirai un'applicazione per il carrello degli acquisti. L'HTML e il CSS ti sono stati già forniti, ma dovrai creare il codice JavaScript per rendere la pagina interattiva. - -Per iniziare, dovrai ottenere alcuni elementi dal DOM. Inizia usando `document.getElementById()` per ottenere gli elementi `#cart-container`, `#products-container` e `#dessert-card-container`. Salvali in variabili chiamate rispettivamente `cartContainer`, `productsContainer` e `dessertCards`. - -Dal momento che non cambieranno, ricordati di usare `const` per dichiararle. - -# --hints-- - -Dovresti usare `document.getElementById()` per selezionare l'elemento `#cart-container`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -Dovresti assegnare l'elemento `#cart-container` a una variabile chiamata `cartContainer`. Ricordati di usare `const` per dichiarare la variabile. - -```js -assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -Dovresti usare `document.getElementById()` per selezionare l'elemento `#products-container`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -Dovresti assegnare l'elemento `#products-container` a una variabile chiamata `productsContainer`. Ricordati di usare `const` per dichiarare la variabile. - -```js -assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -Dovresti usare `document.getElementById()` per selezionare l'elemento `#dessert-card-container`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -Dovresti assegnare l'elemento `#dessert-card-container` a una variabile chiamata `dessertCards`. Ricordati di usare `const` per dichiarare la variabile. - -```js -assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md deleted file mode 100644 index 2e348a26e55..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 63ec19978a066607e23439f8 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Ora devi ottenere i due pulsanti. Continuando con questo modello, ottieni gli elementi `#cart-btn` e `#clear-cart-btn`. Salvali in variabili chiamate rispettivamente `cartBtn` e `clearCartBtn`. - -# --hints-- - -Dovresti usare `document.getElementById()` per selezionare l'elemento `#cart-btn`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -Dovresti assegnare l'elemento `#cart-btn` a una variabile chiamata `cartBtn`. Ricordati di usare `const` per dichiarare la variabile. - -```js -assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -Dovresti usare `document.getElementById()` per selezionare l'elemento `#clear-cart-btn`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -Dovresti assegnare l'elemento `#clear-cart-btn` a una variabile chiamata `clearCartBtn`. Ricordati di usare `const` per dichiarare la variabile. - -```js -assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md deleted file mode 100644 index 490670beb2d..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 63ec1a16f930b108b8a76806 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Il prossimo passo è ottenere i totali. Ottieni gli elementi `#total-items`, `#subtotal`, `#taxes` e `#total`. Salvali in variabili chiamate rispettivamente `totalNumberOfItems`, `cartSubTotal`, `cartTaxes` e `cartTotal`. - -# --hints-- - -Dovresti usare `document.getElementById()` per selezionare l'elemento `#total-items`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -Dovresti assegnare l'elemento `#total-items` a una variabile chiamata `totalNumberOfItems`. Ricordati di usare `const` per dichiarare la variabile. - -```js -assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -Dovresti usare `document.getElementById()` per selezionare l'elemento `#subtotal`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -Dovresti assegnare l'elemento `#subtotal` a una variabile chiamata `cartSubTotal`. Ricordati di usare `const` per dichiarare la variabile. - -```js -assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -Dovresti usare `document.getElementById()` per selezionare l'elemento `#taxes`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -Dovresti assegnare l'elemento `#taxes` a una variabile chiamata `cartTaxes`. Ricordati di usare `const` per dichiarare la variabile. - -```js -assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -Dovresti usare `document.getElementById()` per selezionare l'elemento `#total`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -Dovresti assegnare l'elemento `#total` a una variabile chiamata `cartTotal`. Ricordati di usare `const` per dichiarare la variabile. - -```js -assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md deleted file mode 100644 index d2907c8c705..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 63ec1bbf5584390a7d08d41f -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -L'ultimo elemento da ottenere è l'elemento `#show-hide-cart`. Salvalo in una variabile chiamata `showHideCartSpan`. - -Quindi, usa `let` per dichiarare una variabile chiamata `isCartShowing` e impostala su `false`. - -# --hints-- - -Dovresti usare `document.getElementById()` per selezionare l'elemento `#show-hide-cart`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -Dovresti assegnare l'elemento `#show-hide-cart` a una variabile chiamata `showHideCartSpan`. Ricordati di usare `const` per dichiarare la variabile. - -```js -assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -Dovresti usare `let` per dichiarare una variabile chiamata `isCartShowing`. - -```js -assert.match(code, /let\s+isCartShowing/); -``` - -Dovresti impostare la variabile `isCartShowing` su `false`. - -```js -assert.match(code, /let\s+isCartShowing\s*=\s*false/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md deleted file mode 100644 index 9a47cc12698..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 63ec1cb59f2a4c0be5b6dfa0 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Un carrello degli acquisti non ha molto senso senza prodotti. Dichiara una variabile `products` e impostala su un array vuoto. Usare un array ti consente di memorizzare più prodotti. - -# --hints-- - -Dovresti dichiarare una variabile `products` con `const`. - -```js -assert.match(code, /const\s+products/); -``` - -Dovresti impostare una variabile `products` su un array vuoto. - -```js -assert.match(code, /const\s+products\s*=\s*\[\s*\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md deleted file mode 100644 index 16053ac413c..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 63ec20a06fff670d37befbd9 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Ora devi iniziare ad aggiungere prodotti. Prima di farlo, devi considerare la struttura di dati di un prodotto. Un prodotto avrà bisogno di un identificatore unico per distinguerlo dagli altri prodotti, un prezzo, in modo che la gente sappia quanto costa, e un nome, così la gente sappia cosa sta comprando. Dovresti anche aggiungere una categoria a ogni prodotto. - -Aggiungi un oggetto all'array `products`. Dai a quest'oggetto una proprietà `id` impostata sul numero `1`, una proprietà `name` impostata su `Vanilla Cupcakes (6 Pack)`, una proprietà `price` impostata sul numero `12.99` e una proprietà `category` impostata su `Cupcake`. - -# --hints-- - -L'array dei prodotti dovrebbe avere un valore. - -```js -assert.equal(products.length, 1); -``` - -L'array dei prodotti dovrebbe avere un oggetto come primo valore. - -```js -assert.isObject(products[0]); -``` - -L'array dei prodotti dovrebbe avere un oggetto con una proprietà `id` impostata sul numero `1`. - -```js -assert.equal(products[0].id, 1); -``` - -L'array dei prodotti dovrebbe avere un oggetto con una proprietà `name` impostata su `Vanilla Cupcakes (6 Pack)`. - -```js -assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)'); -``` - -L'array dei prodotti dovrebbe avere un oggetto con una proprietà `price` impostata sul numero `12.99`. - -```js -assert.equal(products[0].price, 12.99); -``` - -L'array dei prodotti dovrebbe avere un oggetto con una proprietà `category` impostata su `Cupcake`. - -```js -assert.equal(products[0].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md deleted file mode 100644 index 6780069d3c1..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md +++ /dev/null @@ -1,472 +0,0 @@ ---- -id: 63ec3287b182ec0efe8a3135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Seguendo la stessa struttura di dati, aggiungi i prodotti di questa tabella (in ordine) all'array `products`. Incrementa l'`id` per ogni prodotto. - -| `name` | `price` | `category` | -| ------------------------------ | ------- | ----------- | -| `French Macaroon` | `3.99` | `Macaroon` | -| `Pumpkin Cupcake` | `3.99` | `Cupcake` | -| `Chocolate Cupcake` | `5.99` | `Cupcake` | -| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` | -| `Strawberry Ice Cream` | `2.99` | `Ice Cream` | -| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` | -| `Strawberry Pretzel` | `4.99` | `Pretzel` | -| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` | -| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` | -| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` | -| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` | - -# --hints-- - -Il secondo oggetto nell'array `products` dovrebbe avere una proprietà `id` impostata sul numero `2`. - -```js -assert.equal(products[1].id, 2); -``` - -Il secondo oggetto nell'array `products` dovrebbe avere una proprietà `name` impostata su `French Macaroon`. - -```js -assert.equal(products[1].name, 'French Macaroon'); -``` - -Il secondo oggetto nell'array `products` dovrebbe avere una proprietà `price` impostata sul numero `3.99`. - -```js -assert.equal(products[1].price, 3.99); -``` - -Il secondo oggetto nell'array `products` dovrebbe avere una proprietà `category` impostata su `Macaroon`. - -```js -assert.equal(products[1].category, 'Macaroon'); -``` - -Il terzo oggetto nell'array `products` dovrebbe avere una proprietà `id` impostata sul numero `3`. - -```js -assert.equal(products[2].id, 3); -``` - -Il terzo oggetto nell'array `products` dovrebbe avere una proprietà `name` impostata su `Pumpkin Cupcake`. - -```js -assert.equal(products[2].name, 'Pumpkin Cupcake'); -``` - -Il terzo oggetto nell'array `products` dovrebbe avere una proprietà `price` impostata sul numero `3.99`. - -```js -assert.equal(products[2].price, 3.99); -``` - -Il terzo oggetto nell'array `products` dovrebbe avere una proprietà `category` impostata su `Cupcake`. - -```js -assert.equal(products[2].category, 'Cupcake'); -``` - -Il quarto oggetto nell'array `products` dovrebbe avere una proprietà `id` impostata sul numero `4`. - -```js -assert.equal(products[3].id, 4); -``` - -Il quarto oggetto nell'array `products` dovrebbe avere una proprietà `name` impostata su `Chocolate Cupcake`. - -```js -assert.equal(products[3].name, 'Chocolate Cupcake'); -``` - -Il quarto oggetto nell'array `products` dovrebbe avere una proprietà `price` impostata sul numero `5.99`. - -```js -assert.equal(products[3].price, 5.99); -``` - -Il quarto oggetto nell'array `products` dovrebbe avere una proprietà `category` impostata su `Cupcake`. - -```js -assert.equal(products[3].category, 'Cupcake'); -``` - -Il quinto oggetto nell'array `products` dovrebbe avere una proprietà `id` impostata sul numero `5`. - -```js -assert.equal(products[4].id, 5); -``` - -Il quinto oggetto nell'array `products` dovrebbe avere una proprietà `name` impostata su `Chocolate Pretzels (4 Pack)`. - -```js -assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)'); -``` - -Il quinto oggetto nell'array `products` dovrebbe avere una proprietà `price` impostata sul numero `10.99`. - -```js -assert.equal(products[4].price, 10.99); -``` - -Il quinto oggetto nell'array `products` dovrebbe avere una proprietà `category` impostata su `Pretzel`. - -```js -assert.equal(products[4].category, 'Pretzel'); -``` - -Il sesto oggetto nell'array `products` dovrebbe avere una proprietà `id` impostata sul numero `6`. - -```js -assert.equal(products[5].id, 6); -``` - -Il sesto oggetto nell'array `products` dovrebbe avere una proprietà `name` impostata su `Strawberry Ice Cream`. - -```js -assert.equal(products[5].name, 'Strawberry Ice Cream'); -``` - -Il sesto oggetto nell'array `products` dovrebbe avere una proprietà `price` impostata sul numero `2.99`. - -```js -assert.equal(products[5].price, 2.99); -``` - -Il sesto oggetto nell'array `products` dovrebbe avere una proprietà `category` impostata su `Ice Cream`. - -```js -assert.equal(products[5].category, 'Ice Cream'); -``` - -Il settimo oggetto nell'array `products` dovrebbe avere una proprietà `id` impostata sul numero `7`. - -```js -assert.equal(products[6].id, 7); -``` - -Il settimo oggetto nell'array `products` dovrebbe avere una proprietà `name` impostata su `Chocolate Macaroons (4 Pack)`. - -```js -assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)'); -``` - -Il settimo oggetto nell'array `products` dovrebbe avere una proprietà `price` impostata sul numero `9.99`. - -```js -assert.equal(products[6].price, 9.99); -``` - -Il settimo oggetto nell'array `products` dovrebbe avere una proprietà `category` impostata su `Macaroon`. - -```js -assert.equal(products[6].category, 'Macaroon'); -``` - -L'ottavo oggetto nell'array `products` dovrebbe avere una proprietà `id` impostata sul numero `8`. - -```js -assert.equal(products[7].id, 8); -``` - -L'ottavo oggetto nell'array `products` dovrebbe avere una proprietà `name` impostata su `Strawberry Pretzel`. - -```js -assert.equal(products[7].name, 'Strawberry Pretzel'); -``` - -L'ottavo oggetto nell'array `products` dovrebbe avere una proprietà `price` impostata sul numero `4.99`. - -```js -assert.equal(products[7].price, 4.99); -``` - -L'ottavo oggetto nell'array `products` dovrebbe avere una proprietà `category` impostata su `Pretzel`. - -```js -assert.equal(products[7].category, 'Pretzel'); -``` - -Il nono oggetto nell'array `products` dovrebbe avere una proprietà `id` impostata sul numero `9`. - -```js -assert.equal(products[8].id, 9); -``` - -Il nono oggetto nell'array `products` dovrebbe avere una proprietà `name` impostata su `Butter Pecan Ice Cream`. - -```js -assert.equal(products[8].name, 'Butter Pecan Ice Cream'); -``` - -Il nono oggetto nell'array `products` dovrebbe avere una proprietà `price` impostata sul numero `2.99`. - -```js -assert.equal(products[8].price, 2.99); -``` - -Il nono oggetto nell'array `products` dovrebbe avere una proprietà `category` impostata su `Ice Cream`. - -```js -assert.equal(products[8].category, 'Ice Cream'); -``` - -Il decimo oggetto nell'array `products` dovrebbe avere una proprietà `id` impostata sul numero `10`. - -```js -assert.equal(products[9].id, 10); -``` - -Il decimo oggetto nell'array `products` dovrebbe avere una proprietà `name` impostata su `Rocky Road Ice Cream`. - -```js -assert.equal(products[9].name, 'Rocky Road Ice Cream'); -``` - -Il decimo oggetto nell'array `products` dovrebbe avere una proprietà `price` impostata sul numero `2.99`. - -```js -assert.equal(products[9].price, 2.99); -``` - -Il decimo oggetto nell'array `products` dovrebbe avere una proprietà `category` impostata su `Ice Cream`. - -```js -assert.equal(products[9].category, 'Ice Cream'); -``` - -L'undicesimo oggetto nell'array `products` dovrebbe avere una proprietà `id` impostata sul numero `11`. - -```js -assert.equal(products[10].id, 11); -``` - -L'undicesimo oggetto nell'array `products` dovrebbe avere una proprietà `name` impostata su `Vanilla Macaroons (5 Pack)`. - -```js -assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)'); -``` - -L'undicesimo oggetto nell'array `products` dovrebbe avere una proprietà `price` impostata sul numero `11.99`. - -```js -assert.equal(products[10].price, 11.99); -``` - -L'undicesimo oggetto nell'array `products` dovrebbe avere una proprietà `category` impostata su `Macaroon`. - -```js -assert.equal(products[10].category, 'Macaroon'); -``` - -Il dodicesimo oggetto nell'array `products` dovrebbe avere una proprietà `id` impostata sul numero `12`. - -```js -assert.equal(products[11].id, 12); -``` - -Il dodicesimo oggetto nell'array `products` dovrebbe avere una proprietà `name` impostata su `Lemon Cupcakes (4 Pack)`. - -```js -assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)'); -``` - -Il dodicesimo oggetto nell'array `products` dovrebbe avere una proprietà `price` impostata sul numero `12.99`. - -```js -assert.equal(products[11].price, 12.99); -``` - -Il dodicesimo oggetto nell'array `products` dovrebbe avere una proprietà `category` impostata su `Cupcake`. - -```js -assert.equal(products[11].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md deleted file mode 100644 index 9d2b213fe81..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 63ec3427fc3e9214c9ed2a14 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Ora che hai l'elenco dei prodotti, puoi usare JavaScript per inserirli nell'HTML. Con questo approccio, se decidi di aggiungere altri prodotti, l'HTML rispecchierà automaticamente le aggiunte. - -Inizia chiamando il metodo `.forEach` sull'array `products`. Usa la sintassi freccia per creare una funzione callback vuota. - -# --hints-- - -Dovresti chiamare il metodo `.forEach` sull'array `products`. - -```js -assert.match(code, /products\.forEach\(/); -``` - -Dovresti usare la sintassi freccia per creare una funzione callback vuota. - -```js -assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/) -``` - -Dovresti passare la funzione callback vuota al metodo `.forEach`. - -```js -assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md deleted file mode 100644 index ec0caf99a9b..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 63ec36f6133df7160be3ec66 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Ricorda che puoi usare la destrutturazione per estrarre più valori da un array o da un oggetto in una dichiarazione singola. - -Per il primo parametro della funzione callback, destruttura le proprietà `name`, `id`, `price` e `category` dall'oggetto passatole. - -# --hints-- - -Dovresti usare la destrutturazione per dichiarare i parametri `name`, `id`, `price` e `category`. Per questo test, l'ordine conta. - -```js -assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/); -``` - -La destrutturazione dovrebbe essere il primo parametro della funzione callback. - -```js -assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - () => {} -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md deleted file mode 100644 index ebc9c952e01..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 63ec47b454495519739486a7 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Devi visualizzare i prodotti disponibili nell'HTML. Inizia usando l'operatore di assegnazione composta per aggiungere una stringa template literal vuota alla proprietà `innerHTML` della variabile `dessertCards`. - -# --hints-- - -Dovresti accedere alla proprietà `innerHTML` dell'elemento `dessertCards`. - -```js -assert.match(code, /dessertCards\.innerHTML/); -``` - -Dovresti usare l'operatore di assegnazione composta sulla proprietà `innerHTML`. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/); -``` - -Dovresti aggiungere una stringa template literal vuota alla proprietà `innerHTML`. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md deleted file mode 100644 index d3083c7bcbb..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 63ee5d38a5d29d0696f8d820 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Nel template literal, crea un elemento `div` con la classe `dessert-card`. In quel `div`, crea un elemento `h2` e dagli il testo della variabile `name`. - -# --hints-- - -Dovresti creare un elemento `div`. - -```js -assert.isAtLeast(document.querySelectorAll('div')?.length, 12); -``` - -L'elemento `div` dovrebbe avere la classe `dessert-card`. - -```js -assert.equal(document.querySelectorAll('.dessert-card')?.length, 12); -``` - -Dovresti creare un elemento `h2`. - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.length, 12); -``` - -L'elemento `h2` dovrebbe avere il testo della variabile `name`. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)'); -``` - -L'elemento `h2` dovrebbe essere all'interno dell'elemento `div`. - -```js -assert.equal(document.querySelectorAll('div h2')?.length, 12); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` - - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md deleted file mode 100644 index 0639c639ddc..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63ee5d8f9e7168076e932fe2 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Dopo l'elemento `h2`, crea due elementi `p`. Dai al primo una `class` con il valore `dessert-price` e il testo della variabile `price` con il segno del dollaro all'inizio. Dai al secondo una `class` con il valore `product-category` e il testo `Category:` seguito dal valore della variabile `category`. - -# --hints-- - -Dovresti creare due elementi `p`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children.length, 3); -assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2) -``` - -Gli elementi `p` dovrebbero trovarsi dopo l'elemento `h2`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2'); -assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P'); -assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P'); -``` - -Il primo elemento `p` dovrebbe avere una `class` con il valore `dessert-price`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price'); -``` - -Il primo elemento `p` dovrebbe avere il testo della variabile `price` con il segno del dollaro all'inizio. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99'); -``` - -Il secondo elemento `p` dovrebbe avere una `class` con il valore `product-category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category'); -``` - -Il secondo elemento `p` dovrebbe avere il testo `Category:` seguito dal valore della variabile `category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  - -
                                                                  - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md deleted file mode 100644 index fa87c83f5a8..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 63ee5e0f08e82208364c4128 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Infine, dopo gli elementi `p`, crea un elemento `button`. Dagli un `id` impostato con il valore della variabile `id`, una `class` con il valore `btn add-to-cart-btn` e usa `Add to cart` per il testo. - -# --hints-- - -Dovresti creare un elemento `button`. - -```js -assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12); -``` - -L'elemento `button` dovrebbe trovarsi dopo gli elementi `p`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P'); -assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling); -``` - -L'elemento `button` dovrebbe avere un `id` impostato sul valore della variabile `id`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.id, '1'); -``` - -L'elemento `button` dovrebbe avere una `class` con il valore `btn add-to-cart-btn`. - -```js -assert.include(document.querySelector('.dessert-card button')?.className, 'btn'); -assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn'); -``` - -L'elemento `button` dovrebbe avere il testo `Add to cart`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md deleted file mode 100644 index a19759db335..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 63ee5ea8be892e0955ab346c -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Hai già familiarità con l'attributo HTML `class`, ma anche JavaScript ha una classe. In JavaScript, una classe è come un modello per creare oggetti. Permette di definire un insieme di proprietà e metodi e instanziare (o creare) nuovi oggetti con tali proprietà e metodi. - -La parola chiave `class` viene usata per dichiarare una classe. Ecco un esempio di dichiarazione della classe `Computer`: - -```js -class Computer {}; -``` - -Dichiara una classe `ShoppingCart`. - -# --hints-- - -Dovresti dichiarare una classe `ShoppingCart`. - -```js -assert.match(code, /ShoppingCart/); -``` - -Dovresti usare la parola chiave `class` per dichiarare la classe `ShoppingCart`. - -```js -assert.match(code, /class\s+ShoppingCart\s*/); -``` - -La classe `ShoppingCart` dovrebbe essere vuota. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md deleted file mode 100644 index b5af30e7b80..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 63ee5fc113bcb20a5db9214b -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Le classi hanno un metodo speciale `constructor` che viene chiamato quando si crea una nuova istanza di una classe. Il metodo `constructor` è un ottimo posto per inizializzare le proprietà della classe. Ecco un esempio di classe con un metodo `constructor`: - -```js -class Computer { - constructor() { - } -} -``` - -Aggiungi un metodo `constructor` vuoto alla classe `ShoppingCart`. - -# --hints-- - -Dovresti aggiungere un metodo `constructor` vuoto alla classe `ShoppingCart`. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/) -``` - -Il metodo `constructor` dovrebbe essere vuoto. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md deleted file mode 100644 index 0c203067fe0..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 63ee611d478dca0b77f6a393 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -La parola chiave `this` in JavaScript viene usata per fare riferimento all'oggetto corrente. A seconda del posto in cui `this` viene usata, cambia ciò a cui fa riferimento. Nel caso di una classe, si riferisce all'istanza dell'oggetto in costruzione. Puoi usare la parola chiave `this` per impostare le proprietà dell'oggetto che viene istanziato. Ecco un esempio: - -```js -class Computer { - constructor() { - this.ram = 16; - } -} -``` - -Nel costruttore, usa la parola chiave `this` per impostare la proprietà `items` su un array vuoto. Inoltre, imposta la proprietà `total` su `0` e la proprietà `taxRate` su `8.25`. - -# --hints-- - -Dovresti usare la parola chiave `this` per impostare la proprietà `items` della classe su un array vuoto. - -```js -assert.match(code, /this\.items/); -const cart = new ShoppingCart(); -assert.isArray(cart.items); -assert.isEmpty(cart.items); -``` - -Dovresti usare la parola chiave `this` per impostare la proprietà `total` della classe su `0`. - -```js -assert.match(code, /this\.total/); -const cart = new ShoppingCart(); -assert.equal(cart.total, 0); -``` - -Dovresti usare la parola chiave `this` per impostare la proprietà `taxRate` della classe su `8.25`. - -```js -assert.match(code, /this\.taxRate/); -const cart = new ShoppingCart(); -assert.equal(cart.taxRate, 8.25); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - - } -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md deleted file mode 100644 index 66953afefa2..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 63ee7c664f9b65137d925c8a -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -La classe `ShoppingCart` ha bisogno della possibilità di aggiungere elementi. Crea un metodo `addItem` vuoto che prende due parametri: `id` e `products`. La creazione di un metodo ha quest'aspetto: - -```js -class Computer { - constructor() { - this.ram = 16; - } - - addRam(amount) { - this.ram += amount; - } -} -``` - -Il primo parametro, `id`, è l'`id` del prodotto che l'utente ha aggiunto al carrello. Il secondo parametro, `products`, è un array di oggetti prodotto. Utilizzando un parametro invece di fare riferimento direttamente all'array `products` esistente, questo metodo sarà più flessibile qualora volessi aggiungere altre liste di prodotti in futuro. - -# --hints-- - -La classe `ShoppingCart` dovrebbe avere un metodo `addItem`. - -```js -const cart = new ShoppingCart(); -assert.isFunction(cart.addItem); -``` - -Il metodo `addItem` dovrebbe prendere due parametri: `id` e `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/); -``` - -Il metodo `addItem` dovrebbe essere vuoto. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md deleted file mode 100644 index fbb64c3f8d0..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 63eea5cea403a81a68ae493c -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Devi trovare il prodotto che l'utente sta aggiungendo al carrello. Ricorda che gli array hanno un metodo `.find()`. Nella funzione `addItem`, dichiara una variabile `product` e assegnale il valore della chiamata del metodo `.find()` sull'array `products`. - -Per la callback di `.find()`, passa una funzione che prende un singolo parametro `item` e restituisce se la proprietà `id` di `item` è strettamente uguale al parametro `id` passato a `addItem`. - -# --hints-- - -Dovresti dichiarare una variabile `product` nella funzione `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=/); -``` - -Dovresti chiamare il metodo `.find()` sull'array `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(/); -``` - -Dovresti passare una funzione callback al metodo `.find()`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/); -``` - -La funzione callback dovrebbe prendere un unico parametro. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/); -``` - -La funzione callback dovrebbe restituire se la proprietà `id` di `item` è strettamente uguale al parametro `id` passato a `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/); -``` - -Dovresti assegnare il valore del metodo `.find()` alla variabile `product`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md deleted file mode 100644 index e9773beaadf..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63eea817673c8e1c22927fa6 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Usa `const` e la destrutturazione per estrarre le variabili `name` e `price` da `product`. - -# --hints-- - -Dovresti usare la destrutturazione per ottenere le variabili `name` e `price`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/); -``` - -Dovresti usare `const` per dichiarare le variabili `name` e `price`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/); -``` - -Dovresti usare la destrutturazione per ottenere le variabili `name` e `price` da `product`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md deleted file mode 100644 index d0f38a236a7..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 63eea8e1e143ae1d098c8c9d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Ora devo aggiungere `product` all'array `items` del carrello. Ricorda di usare la parola chiave `this`. - -# --hints-- - -Dovresti chiamare il metodo `push` sull'array `items`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.push\(/); -``` - -Ricorda che devi utilizzare la parola chiave `this` per accedere all'array `items`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.push\(/); -``` - -Dovresti usare `push` per aggiungere la variabile `product` all'array `items`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.deepEqual(cart.items, [products[0]]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md deleted file mode 100644 index f66e95eb38f..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 63eeb8e86becbf1e75c2cb0d -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Ora hai bisogno del totale di ogni prodotto che l'utente ha nel carrello. Dichiara una variabile `totalCountPerProduct` e assegnale un oggetto vuoto. - -# --hints-- - -Dovresti dichiarare una variabile `totalCountPerProduct` nella funzione `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/); -``` - -Dovresti usare `const` per dichiarare `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/); -``` - -Dovresti assegnare un oggetto vuoto a `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md deleted file mode 100644 index d883f9fa4f3..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63eedebb0ec0231ff1cede1a -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Usa il metodo `.forEach()` per iterare sull'array `items`. Passagli una funzione callback vuota che prende un singolo parametro `dessert`. - -# --hints-- - -Dovresti usare il metodo `.forEach()` sull'array `items`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.forEach\(/); -``` - -Ricordati di utilizzare la parola chiave `this` per accedere all'array `items`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(/); -``` - -Dovresti passare una funzione callback al metodo `.forEach()`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/); -``` - -La funzione callback dovrebbe prendere un unico parametro. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/); -``` - -La funzione callback dovrebbe essere vuota. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md deleted file mode 100644 index a4bde443a36..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 63efdbc22a0c56070beabed7 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Nella callback di `forEach` devi aggiornare l'oggetto `totalCountPerProduct`. Usando l'`id` del `dessert` corrente come proprietà, aggiorna il valore della proprietà in modo che sia il valore corrente più uno. Non utilizzare l'operatore di assegnazione composta. - -# --hints-- - -Dovresti usare la notazione con punto per accedere alla proprietà `id` di `dessert`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /dessert\.id/); -``` - -Dovresti usare la notazione con parentesi per accedere alla proprietà di `totalCountPerProduct` che corrisponde a `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -Dovresti usare l'operatore di assegnazione per aggiornare il valore della proprietà di `totalCountPerProduct` che corrisponde a `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/); -``` - -Dovresti aggiornare il valore di `totalCountPerProduct` in modo che sia il valore attuale più uno. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md deleted file mode 100644 index 5cac070ded5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 63efe370bbfc4a08d500118e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Ora hai un piccolo bug. Quando provi ad accedere a una proprietà di un oggetto e la proprietà non esiste, ottieni `undefined`. Questo significa che se il dessert non è già presente nell'oggetto `totalCountPerProduct`, finisci per cercare di aggiungere `1` a `undefined`, il cui risultato è `NaN`. - -Per risolvere questo problema, puoi usare l'operatore `||` per impostare il valore a `0` se non esiste. Racchiudi tra parentesi il `totalCountPerProduct[data.id]` di destra e aggiungi `|| 0` alla fine dell'espressione. - -# --hints-- - -Dovresti racchiudere tra parentesi il `totalCountPerProduct[data.id]` di destra. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -Dovresti usare l'operatore `||`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/); -``` - -Dovresti usare `0` come valore di ripiego. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/); -``` - -Dovresti comunque aggiungere `1` al valore. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1; - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md deleted file mode 100644 index fc06c5f2945..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 63eff02f00e69a0b2ac10b43 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Ora devi prepararti ad aggiornare il display con il nuovo prodotto aggiunto dall'utente. Dichiara una variabile `currentProductCount` e assegnale il valore della proprietà dell'oggetto `totalCountPerProduct` corrispondente all'`id` di `product`. - -# --hints-- - -Dovresti dichiarare una variabile `currentProductCount` nella funzione `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=/); -``` - -Dovresti usare `const` per dichiarare `currentProductCount`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCount\s*=/); -``` - -Dovresti assegnare il valore di `totalCountPerProduct[product.id]` a `currentProductCount`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md deleted file mode 100644 index e91721b82e6..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 63eff98ffb1d5a0d24ec79cb -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Non hai ancora scritto il codice per generare l'HTML, ma se un prodotto è già stato aggiunto al carrello dell'utente, ci sarà un elemento corrispondente di cui avrai bisogno. - -Usa `.getElementById()` per ottenere l'elemento corrispondente - imposterai il valore di `id` su `product-count-for-id${product.id}`, quindi usa un template literal per richiamare quel valore. - -Assegna la query a una variabile `currentProductCountSpan`. - -# --hints-- - -Dovresti dichiarare una variabile `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/); -``` - -Dovresti usare `const` per dichiarare `currentProductCountSpan`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/); -``` - -Dovresti usare `document.getElementById()` per selezionare l'elemento corrispondente. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /document\.getElementById\(/); -``` - -Dovresti usare un template literal per richiamare il valore di `id`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/); -``` - -Dovresti assegnare il valore di `document.getElementById()` a `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md deleted file mode 100644 index d317619f139..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63effe558c87a70e7072e447 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Il comportamento del metodo `addItem` deve variare se il prodotto è già nel carrello oppure no. Crea un operatore ternario che controlla se il prodotto corrente è già nel carrello. Usa `undefined` sia per le espressioni truthy che falsy per evitare un errore di sintassi. - -# --hints-- - -Dovresti controllare se `currentProductCount` è maggiore di `1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/); -``` - -Dovresti usare un operatore ternario con la condizione `currentProductCount > 1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/); -``` - -Dovresti usare `undefined` come espressione truthy. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -Dovresti usare `undefined` come espressione falsy. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md deleted file mode 100644 index aacf9462f9a..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 63f0165121a9181342d5bc66 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Per l'espressione truthy, rimuovendo `undefined`, devi aggiornare il `textContent` di `currentProductCountSpan` in modo che sia `currentProductCount` seguito da una `x`. Usa un template literal per questo. - -# --hints-- - -Dovresti rimuovere `undefined` dall'espressione truthy. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -Dovresti accedere alla proprietà `textContent` di `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/); -``` - -Dovresti usare la sintassi template literal per aggiornare `textContent` in `${currentProductCount}x`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 ? undefined : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md deleted file mode 100644 index 5980b083a63..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 63f017b4ad028a148eb713c0 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Per l'espressione falsy, dovrai aggiungere del nuovo HTML a `productsContainer`. Inizia rimuovendo `undefined`, poi usa l'operatore di addizione composta e la sintassi template literal per aggiungere un `div` con `class` impostato su `product` e l'`id` impostato sul `dessert${id}` della proprietà `innerHTML` di `productsContainer`. - -# --hints-- - -Dovresti rimuovere `undefined` dall'espressione falsy. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /undefined/); -``` - -Dovresti usare l'operatore di assegnazione composta per aggiungere HTML a `productsContainer`. Ricorda che l'HTML va nella proprietà `innerHTML`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/); -``` - -Dovresti usare la sintassi template literal per aggiungere HTML a `productsContainer`. - -```js -assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/); -``` - -Dovresti aggiungere un `div` a `productsContainer`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.tagName, "DIV"); -``` - -L'elemento `div` dovrebbe avere un attributo `class` impostato su `product`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.className, "product"); -``` - -L'elemento `div` dovrebbe avere un attributo `id` impostato su `dessert${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.id, "dessert1"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md deleted file mode 100644 index beea8210a44..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 63f01861f813e01564c95315 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -All'interno del `div`, aggiungi due elementi `p`. Imposta il testo del secondo elemento `p` con il valore della variabile `price`. - -# --hints-- - -Dovresti aggiungere due elementi `p` all'interno dell'elemento `div`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children.length, 2); -assert.equal(div?.children[0].tagName, 'P'); -assert.equal(div?.children[1].tagName, 'P'); -``` - -Il secondo elemento `p` dovrebbe avere il testo della variabile `price`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children[1].textContent, '12.99'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  - -
                                                                  - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md deleted file mode 100644 index d03ae167dad..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 63f018f04e487e164dc27bd9 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Nel primo elemento `p`, aggiungi un elemento `span`. Dai allo `span` la classe `product-count` e un `id` di `product-count-for-id${id}`. Poi, dopo lo span, dai all'elemento `p` il testo della variabile `name`. - -# --hints-- - -Il primo elemento `p` dovrebbe avere un elemento `span`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children.length, 1); -assert.equal(p.children[0].tagName, 'SPAN'); -``` - -L'elemento `span` dovrebbe avere una `class` con il valore `product-count`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].className, 'product-count'); -``` - -L'elemento `span` dovrebbe avere un `id` di `product-count-for-id${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].id, 'product-count-for-id1'); -``` - -Il primo elemento `p` dovrebbe avere il testo della variabile `name`. Dovrebbe essere fuori dallo span. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md deleted file mode 100644 index 1ec581573ce..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 63f01c9791a0aa1751c73760 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -La classe `ShoppingCart` ha ancora bisogno di altre funzionalità, ma prima devi poter testare il codice che hai scritto finora. Dovrai instanziare un nuovo oggetto `ShoppingCart` e assegnarlo a una variabile. Ecco un esempio che mostra come istanziare la classe `Computer` dagli esempi precedenti: - -```js -const myComputer = new Computer(); -``` - -Dichiara una variabile `cart` e assegnale un nuovo oggetto `ShoppingCart`. Nota l'uso della parola chiave `new` per istanziare l'oggetto. - -# --hints-- - -Dovresti usare la parola chiave `const` per dichiarare la variabile `cart`. - -```js -assert.match(code, /const\s+cart\s*=/); -``` - -Dovresti usare la parola chiave `new` per istanziare un nuovo oggetto `ShoppingCart`. - -```js -assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/); -``` - -Dovresti assegnare il nuovo oggetto `ShoppingCart` alla variabile `cart`. - -```js -assert.isTrue(cart instanceof ShoppingCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } -}; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md deleted file mode 100644 index 5f1b4f10521..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f0224ceb16dc196d2c860a -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Devi ottenere tutti i pulsanti di `Add to cart` che hai precedentemente aggiunto al DOM. Dichiara una variabile `addToCartBtns` e assegnale il valore della chiamata del metodo `getElementsByClassName()` sull'oggetto `document`, passando la stringa `add-to-cart-btn`. - -# --hints-- - -Dovresti usare `const` per dichiarare la variabile `addToCartBtns`. - -```js -assert.match(code, /const\s+addToCartBtns\s*=/); -``` - -Dovresti chiamare il metodo `getElementsByClassName()` sull'oggetto `document`. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/); -``` - -Dovresti passare la stringa `add-to-cart-btn` al metodo `getElementsByClassName()`. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/); -``` - -Dovresti assegnare il valore restituito dal metodo `getElementsByClassName()` alla variabile `addToCartBtns`. - -```js -assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } -}; - -const cart = new ShoppingCart(); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md deleted file mode 100644 index 1b8cb28efee..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f026d041bc6c1a3d5cba0f -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Devi iterare sui pulsanti nella variabile `addToCartBtns`. Tuttavia, `.getElementsByClassName()` restituisce una collezione, che non ha un metodo `forEach`. - -Usa l'operatore spread sulla variabile `addToCartBtns` per convertirla in un array. Quindi, utilizza il metodo `forEach` per iterare sull'array. Non passare ancora una funzione callback. - -# --hints-- - -Dovresti usare l'operatore spread sulla variabile `addToCartBtns`. - -```js -assert.match(code, /\.\.\.addToCartBtns/); -``` - -Dovresti espandere la variabile `addToCartBtns` in un array. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/); -``` - -Dovresti usare il metodo `forEach` sull'array che hai creato. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/); -``` - -Non dovresti passare una funzione callback al metodo `forEach`. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md deleted file mode 100644 index db552aa00cc..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0284532742c1b26c7a052 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Aggiungi la funzione callback al metodo `forEach`. Dovrebbe prendere un parametro `btn`. Poi, nella callback, aggiungi un event listener al `btn`. L'event listener dovrebbe essere in ascolto per l'evento `click` e dovrebbe prendere un'altra callback con un parametro `event`. La seconda callback dovrebbe essere vuota. - -# --hints-- - -Dovresti usare la sintassi freccia per aggiungere una funzione callback al metodo `forEach` che richiede un parametro `btn`. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/); -``` - -Dovresti aggiungere un event listener alla variabile `btn`. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/); -``` - -Dovresti ascoltare l'evento `click` sulla variabile `btn`. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/); -``` - -Dovresti aggiungere una funzione callback vuota all'event listener. Ricordati di darle un parametro `event`. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md deleted file mode 100644 index 7b4983eff55..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0289df84a581bbdbd29b7 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Nella callback dell'event listener, chiama il metodo `.addItem()` sull'oggetto `cart` e passagli `event.target.id`. Ricorda che l'`id` è una stringa, quindi dovrai convertirla in un numero. - -Passa l'array `products` come secondo argomento. - -# --hints-- - -La callback dell'event listener dovrebbe chiamare il metodo `.addItem()` sull'oggetto `cart`. - -```js -assert.match(code, /cart\.addItem\(/); -``` - -Il metodo `.addItem()` dovrebbe essere chiamato con `event.target.id` come primo argomento. Ricordati di convertire l'`id` in un numero usando `Number()`. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/); -``` - -Il metodo `.addItem()` dovrebbe essere chiamato con l'array `products` come secondo argomento. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - - }) - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md deleted file mode 100644 index 8377430abba..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 63f0295e673b661ccb299e8a -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Ti serve un modo per accedere al numero totale di articoli nel carrello. Il modo migliore per farlo è aggiungere un altro metodo alla classe `ShoppingCart`, invece di accedere direttamente all'array `items`. - -Aggiungi un metodo `getCounts` alla classe `ShoppingCart`. Dovrebbe restituire il numero di oggetti nell'array `items`. - -# --hints-- - -La classe `ShoppingCart` dovrebbe avere un metodo `getCounts`. - -```js -assert.isFunction(cart.getCounts); -``` - -Ricordati di utilizzare la parola chiave `this` per accedere all'array `items`. - -```js -const afterCounts = code.split('getCounts')[1]; -assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/); -``` - -Il metodo `getCounts` dovrebbe restituire il numero di elementi nell'array `items`. - -```js -assert.equal(cart.getCounts(), 0); -cart.addItem(1, products); -assert.equal(cart.getCounts(), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md deleted file mode 100644 index 62f433316b4..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 63f029b96b9e9e1df93be951 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Ora puoi aggiornare il numero totale di articoli sulla pagina web. Assegna il valore del metodo `.getCounts()` dell'oggetto `cart` al `textContent` della variabile `totalNumberOfItems`. - -# --hints-- - -Dovresti accedere alla proprietà `textContent` della variabile `totalNumberOfItems`. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent/) -``` - -Dovresti assegnare il valore del metodo `.getCounts()` dell'oggetto `cart` al `textContent` della variabile `totalNumberOfItems`. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md deleted file mode 100644 index f7516dc7310..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 63f02a4ef92d711ec1ff618c -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Devi anche aggiornare il prezzo totale del carrello quando l'utente aggiunge un articolo. Crea un metodo `calculateTotal` nella classe `ShoppingCart`. - -In questo metodo, dichiara una variabile `subTotal` e usa il metodo `reduce` sull'array `items` per calcolare la somma della proprietà `price` di ogni elemento nell'array. Usa `total` e `item` come parametri per la callback. - -Ricordati di impostare il valore iniziale nel metodo `reduce`. - -# --hints-- - -Dovresti creare un metodo `calculateTotal` nella classe `ShoppingCart`. - -```js -assert.isFunction(cart.calculateTotal); -``` - -Il metodo `calculateTotal` dovrebbe avere una variabile `subTotal` dichiarata con `const`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+subTotal\s*=/); -``` - -Il metodo `calculateTotal` dovrebbe utilizzare il metodo `reduce` sull'array `items`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/); -``` - -La callback di `reduce` dovrebbe utilizzare `total` e `item` come primo e secondo parametro. Ricorda di utilizzare la sintassi della funzione freccia. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/); -``` - -La callback di `reduce` dovrebbe restituire la somma di `total` e `item.price`. Utilizza un return implicito. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/); -``` - -La callback di `reduce` dovrebbe avere un valore iniziale di `0`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md deleted file mode 100644 index 855aad48a18..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f02b22cce1c11fe9604381 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Parte del costo totale è costituito da una tassa, quindi è necessario calcolare anche quest'ultima. Crea un metodo `calculateTaxes` nella classe `ShoppingCart`. Questo metodo dovrebbe prendere un parametro `amount`. - -# --hints-- - -Dovresti creare un metodo `calculateTaxes` nella classe `ShoppingCart`. - -```js -assert.isFunction(cart.calculateTaxes); -``` - -Il metodo `calculateTaxes` dovrebbe prendere un parametro `amount`. - -```js -assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md deleted file mode 100644 index f8230b2ec51..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f02bdeb9b428208b97eb6b -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Il metodo `calculateTaxes` dovrebbe restituire il valore di `taxRate` (diviso per 100, per convertirlo in percentuale) moltiplicato per il parametro `amount`. - -Per chiarezza, racchiudi il calcolo `taxRate / 100` tra parentesi. - -# --hints-- - -Dovresti dividere `taxRate` per 100 nel metodo `calculateTaxes`. Ricordati di usare la parola chiave `this`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/); -``` - -Dovresti racchiudere il calcolo `this.taxRate / 100` tra parentesi. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/); -``` - -Dovresti moltiplicare il parametro `amount` per `taxRate` diviso 100 nel metodo `calculateTaxes`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/); -``` - -Il metodo `calculateTaxes` dovrebbe restituire il valore di `taxRate` (diviso per 100, per convertirlo in percentuale) moltiplicato per il parametro `amount`. - -```js -console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md deleted file mode 100644 index a778b74d361..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 63f02c6e18773921ba50aa53 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -A causa del modo in cui i computer memorizzano e lavorano con i numeri, i calcoli che comportano numeri decimali possono portare a qualche comportamento strano. Ad esempio, `0.1 + 0.2` non è uguale a `0.3`. Questo perché i computer memorizzano i numeri decimali come frazioni binarie e alcune non possono essere rappresentate esattamente come frazioni decimali. - -Vogliamo ripulire il risultato numerico del calcolo. Racchiudi il calcolo tra parentesi (non includere l'istruzione `return`!) e chiama su di esso il metodo `.toFixed()`. Passa al metodo `.toFixed()` il numero `2` come argomento. Questo arrotonderà il numero a due decimali e restituirà una stringa. - -# --hints-- - -Dovresti racchiudere il calcolo tra parentesi. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/) -``` - -Dovresti chiamare il metodo `.toFixed()` sul calcolo. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/) -``` - -Dovresti passare al metodo `.toFixed()` il numero `2` come argomento. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return (this.taxRate / 100) * amount; - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md deleted file mode 100644 index eb99b9976cc..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 63f0311f5ea9382388d6124f -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Il problema con `.toFixed()` che restituisce una stringa è che vuoi essere in grado di eseguire calcoli con l'aliquota fiscale. Per risolvere questo problema, puoi passare la chiamata `.toFixed()` (incluso il calcolo) alla funzione `parseFloat()`. Questo riconvertirà la stringa fissa in un numero, preservando le posizioni decimali esistenti. - -Passa la chiamata `.toFixed()` a `parseFloat()`. - -# --hints-- - -Dovresti passare l'intero calcolo (esclusa l'istruzione `return`) a `parseFloat()`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return ((this.taxRate / 100) * amount).toFixed(2); - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md deleted file mode 100644 index adef6dbeb8a..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f033fdb1fbcc254999fcc3 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Il carrello attualmente non è visibile nella pagina web. Per renderlo visibile, inizia aggiungendo un event listener alla variabile `cartBtn`, in ascolto per l'evento click. La callback non ha bisogno di alcun parametro. - -# --hints-- - -Dovresti aggiungere un event listener alla variabile `cartBtn`. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/); -``` - -Dovresti ascoltare l'evento `click` sulla variabile `cartBtn`. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/); -``` - -Dovresti aggiungere una funzione callback vuota (usando la sintassi freccia) all'event listener. Ricorda che non ha bisogno di alcun parametro. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md deleted file mode 100644 index b7d8c4cb792..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f03446c2ed3e264be6c7fc -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Inizia invertendo il valore di `isCartShowing`. Ricorda che puoi usare l'operatore logico `!` per invertire il valore di un booleano. Assegna il valore invertito a `isCartShowing`. - -# --hints-- - -Dovresti invertire il valore di `isCartShowing`. - -```js -assert.match(code, /!isCartShowing/); -``` - -Dovresti assegnare il valore invertito di `isCartShowing` a `isCartShowing`. - -```js -assert.match(code, /isCartShowing\s*=\s*!isCartShowing/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md deleted file mode 100644 index 11b8eccddd4..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f0348a54a177272071a595 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Ora assegna al `textContent` della variabile `showHideCartSpan` il risultato di un'espressione ternaria che controlla se `isCartShowing` è vero. Se lo è, imposta il `textContent` su `Hide`, altrimenti impostalo su `Show`. - -# --hints-- - -Dovresti utilizzare l'operatore di assegnazione sulla proprietà `textContent` della variabile `showHideCartSpan`. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/) -``` - -Dovresti usare la sintassi ternaria per controllare se `isCartShowing` è vero. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/) -``` - -Dovresti impostare il `textContent` della variabile `showHideCartSpan` su `Hide` se `isCartShowing` è vero. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/) -``` - -Dovresti impostare il `textContent` della variabile `showHideCartSpan` su `Show` se `isCartShowing` è falso. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md deleted file mode 100644 index 3c8d1198411..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 63f034d012f74627ce538d3a -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Infine, aggiorna la proprietà `display` dell'oggetto `style` della variabile `cartContainer` in un altro ternario che controlla se `isCartShowing` è vero. Se lo è, imposta `display` su `block`, altrimenti impostalo su `none`. - -Ora dovresti essere in grado di vedere il carrello e aggiungergli articoli. - -# --hints-- - -Dovresti accedere alla proprietà `display` della proprietà `style` della variabile `cartContainer`. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/) -``` - -Dovresti usare l'operatore di assegnazione sulla proprietà `display` della proprietà `style` della variabile `cartContainer`. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/) -``` - -Dovresti usare la sintassi ternaria per controllare se `isCartShowing` è vero. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/) -``` - -Dovresti impostare la proprietà `display` dell'oggetto `style` della variabile `cartContainer` su `block` se `isCartShowing` è vero. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/) -``` - -Dovresti impostare la proprietà `display` dell'oggetto `style` della variabile `cartContainer` su `none` se `isCartShowing` è falso. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md deleted file mode 100644 index 172b2acd1a5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f03686c5ea863533ec71f4 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Dichiara una variabile `tax` e assegnale il valore della chiamata del nuovo metodo `.calculateTaxes()`, passando `subTotal` come argomento. - -# --hints-- - -Usa `const` per dichiarare una variabile chiamata `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+tax\s*=/); -``` - -Assegna il valore della chiamata del nuovo metodo `.calculateTaxes()`, passando `subTotal` come argomento alla variabile `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md deleted file mode 100644 index 1c26e1a37ed..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f036ec91fdf238c90665f5 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Aggiorna il valore di `total` con la somma dei valori di `subTotal` e `tax`. - -# --hints-- - -Dovresti aggiornare il valore di `total`. Ricorda di usare la parola chiave `this`. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total/); -``` - -Dovresti aggiornare il valore di `total` con la somma dei valori di `subTotal` e `tax`. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md deleted file mode 100644 index fe4af7b4f83..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 63f0370b340915399d31e5eb -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Stai per aggiornare anche l'HTML in questo metodo. Imposta il `textContent` di `cartSubTotal` in modo che sia il valore di `subTotal` con un numero fisso di 2 decimali. Usa la sintassi del template literal per aggiungere il segno del dollaro all'inizio del valore. - -# --hints-- - -Dovresti accedere alla proprietà `textContent` dell'elemento `cartSubTotal`. - -```js -assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/); -``` - -Dovresti chiamare il metodo `.toFixed()` sulla variabile `subTotal`, passando `2` come argomento. - -```js -assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/); -``` - -Dovresti usare la sintassi del template literal per aggiungere il segno del dollaro prima della chiamata `.toFixed()`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -Dovresti impostare il `textContent` dell'elemento `cartSubTotal` sulla stringa template. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md deleted file mode 100644 index 53dd4624dcb..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 63f0374d5351223a747c301d -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Seguendo lo stesso modello di `cartSubTotal`, aggiorna `cartTaxes` per visualizzare il valore di `tax` e `cartTotal` per visualizzare la proprietà `total`. - -# --hints-- - -Dovresti accedere alla proprietà `textContent` dell'elemento `cartTaxes`. - -```js -assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/); -``` - -Dovresti chiamare il metodo `.toFixed()` sulla variabile `tax`, passando `2` come argomento. - -```js -assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/); -``` - -Dovresti usare la sintassi del template literal per aggiungere il segno del dollaro prima della chiamata `.toFixed()`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -Dovresti impostare il `textContent` dell'elemento `cartTaxes` sulla stringa template `tax.toFixed`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -Dovresti accedere alla proprietà `textContent` dell'elemento `cartTotal`. - -```js -assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/); -``` - -Dovresti chiamare il metodo `.toFixed()` sulla variabile `total`, passando `2` come argomento. Ricordati di usare la parola chiave `this`. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/); -``` - -Dovresti usare la sintassi del template literal per aggiungere il segno del dollaro prima della chiamata `.toFixed()`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -Dovresti impostare il `textContent` dell'elemento `cartTotal` sulla stringa template `total.toFixed`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md deleted file mode 100644 index 99d93e00601..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f0378e173e3c3b7638b528 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Infine, restituisci il valore della proprietà `total`. Ricordati di usare la parola chiave `this`. - -# --hints-- - -Il metodo `calculateTotal` dovrebbe restituire il valore della proprietà `total`. - -```js -assert.equal(cart.calculateTotal(), 0); -cart.addItem(1, products); -assert.approximately(cart.calculateTotal(), 14.06, 0.1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md deleted file mode 100644 index 67277ca3fa5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f038a0ae041d3c5b0cdf23 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -L'ultima funzionalità è permettere agli utenti di svuotare il carrello. Aggiungi un metodo `clearCart()` alla classe `ShoppingCart`. - -# --hints-- - -La classe `ShoppingCart` dovrebbe avere un metodo `clearCart`. - -```js -assert.isFunction(cart.clearCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md deleted file mode 100644 index e341029c615..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -id: 63f038e671d3f73d5a041973 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -La prima cosa che dovresti fare è controllare se l'array `items` è vuoto. Se lo è mostra all'utente un `alert` con il testo `Your shopping cart is already empty`, poi aggiungi un return alla funzione. - -Ricorda che `0` è un valore falsy, quindi puoi usare l'operatore `!` per controllare se l'array è vuoto. - -Dopo aver mostrato l'alert, aggiungi un return alla funzione per interromperne l'esecuzione. - -# --hints-- - -Dovresti creare un'istruzione `if` che controlla se l'array `items` è vuoto, utilizzando l'operatore di negazione. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/); -``` - -L'istruzione `if` dovrebbe mostrare all'utente un `alert` con il testo `Your shopping cart is already empty`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/); -``` - -L'istruzione `if` nella funzione dovrebbe avere un return. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md deleted file mode 100644 index 4ff81c3fc2d..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 63f039dbcef7673e4e758fa3 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -I browser hanno una funzione `confirm()` integrata che mostra un prompt di conferma all'utente. `confirm()` accetta una stringa, che è il messaggio visualizzato dall'utente. Restituisce `true` se l'utente conferma e `false` se l'utente annulla. - -Dichiara una variabile `isCartCleared` e assegnale il valore della chiamata `confirm()` con la stringa `"Are you sure you want to clear all items from your shopping cart?"`. - -# --hints-- - -Dovresti usare la parola chiave `const` per dichiarare la variabile `isCartCleared`. - -```js -const afterClearCart = code.split('clearCart()')[1]; -assert.match(afterClearCart, /const\s+isCartCleared\s*=/); -``` - -Dovresti chiamare la funzione `confirm()`. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(/); -``` - -Dovresti passare la stringa `Are you sure you want to clear all items from your shopping cart?` alla funzione `confirm()`. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -Dovresti assegnare il valore del metodo `confirm()` alla variabile `isCartCleared`. - -```js -assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md deleted file mode 100644 index c0368816c3d..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -id: 63f03a7143a6ef3f7f3344f0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Vuoi svuotare il carrello solo se l'utente conferma il prompt. Crea un'istruzione `if` che controlla se l'utente ha confermato il prompt. - -Nell'istruzione `if`, imposta la proprietà `items` su un array vuoto, quindi imposta la proprietà `total` a `0`. - -# --hints-- - -Dovresti creare un'istruzione `if` che verifica se l'utente ha confermato il prompt. Ricorda che puoi controllare direttamente se `isCartCleared` è truthy. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/); -``` - -L'istruzione `if` dovrebbe reimpostare la proprietà `items` su un array vuoto. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/); -``` - -L'istruzione `if` dovrebbe impostare la proprietà `total` a `0`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md deleted file mode 100644 index 31efa71428b..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f03ac2b428b2404a5a7518 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Devi anche iniziare a ripulire l'HTML. Reimposta la proprietà `innerHTML` di `productsContainer` su una stringa vuota. - -# --hints-- - -Nell'istruzione `if` dovresti reimpostare la proprietà `innerHTML` di `productsContainer` su una stringa vuota. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md deleted file mode 100644 index 64e7f1abd2e..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 63f03af535682e4138fdb915 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Imposta il `textContent` degli elementi `totalNumberOfItems`, `cartSubTotal`, `cartTaxes` e `cartTotal` sul numero `0`. - -# --hints-- - -Dovresti impostare il `textContent` dell'elemento `totalNumberOfItems` su `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/); -``` - -Dovresti impostare il `textContent` dell'elemento `cartSubTotal` su `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/); -``` - -Dovresti impostare il `textContent` dell'elemento `cartTaxes` su `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/); -``` - -Dovresti impostare il `textContent` dell'elemento `cartTotal` su `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTotal\.textContent\s*=\s*0/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md deleted file mode 100644 index fcea08e6ad9..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md +++ /dev/null @@ -1,744 +0,0 @@ ---- -id: 63f03b1ed5ab15420c057463 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -L'ultimo step è rendere più funzionale il pulsante per svuotare il carrello. Aggiungi un event listener `click` a `clearCartBtn`. Per la callback, puoi passare direttamente `cart.clearCart`. - -Tuttavia, non funzionerà, perché il contesto di `this` sarà l'elemento `clearCartBtn`. Devi associare il metodo `clearCart` all'oggetto `cart`. - -Puoi farlo passando `cart.clearCart.bind(cart)` come callback. - -E con questo, il progetto del carrello degli acquisti è completo! - -# --hints-- - -Dovresti aggiungere un event listener all'elemento `clearCartBtn`. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(/); -``` - -L'event listener dovrebbe essere in ascolto per l'evento `click`. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/); -``` - -L'event listener dovrebbe prendere `cart.clearCart.bind(cart)` come callback. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - -clearCartBtn.addEventListener("click", cart.clearCart.bind(cart)); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md deleted file mode 100644 index 3db8a2593bd..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f6721d5110af243ef8f3d9 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Ora chiama il metodo `.calculateTotal()` all'interno del loop `forEach`. - -# --hints-- - -Dovresti chiamare `cart.calculateTotal()` all'interno del loop `forEach`. - -```js -const afterForEach = code.split('[...addToCartBtns].forEach(')[1]; -assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                  -

                                                                  Desserts Page

                                                                  -
                                                                  -
                                                                  - -
                                                                  - -
                                                                  -

                                                                  Total number of items: 0

                                                                  -

                                                                  Subtotal: $0

                                                                  -

                                                                  Taxes: $0

                                                                  -

                                                                  Total: $0

                                                                  -
                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                  -

                                                                  ${name}

                                                                  -

                                                                  $${price}

                                                                  -

                                                                  Category: ${category}

                                                                  - -
                                                                  - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                  -

                                                                  - ${name} -

                                                                  -

                                                                  ${price}

                                                                  -
                                                                  - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md deleted file mode 100644 index a2ce162457c..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9a -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. - -In JavaScript, you can access the DOM by referencing the global `document` object. - -To view the DOM, log it to the console with `console.log(document)`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast
                                                                  - Lunch
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md deleted file mode 100644 index aab244748d6..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9b -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -In our HTML document, we have a form element with an `id` attribute: `
                                                                  ` - -To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. - -The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  - -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - - -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md deleted file mode 100644 index 31afd7303fc..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9c -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. - -Forms have an `onsubmit` event that can execute a function when the form is submitted. - -For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. - -Assign a function named `calculate` to the `onsubmit` event of your form. - -You will create the `calculate` function later. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md deleted file mode 100644 index bcd3b1bc287..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9d -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. Here is an example of an empty function called `square`: - -```js -function square() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(typeof calculate === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md deleted file mode 100644 index 8a02a67b570..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9e -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -By default, `onsubmit` will pass the event object as a parameter to the function it calls. People usually call it `e`, short for event. Update the `calculate()` function to accept `e` as parameter. - -Here is an example of an empty function called `square` that takes a `number` as a parameter: - -```js -function square(number) {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md deleted file mode 100644 index 0cd5d1525fd..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9f -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. - -Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md deleted file mode 100644 index ee8e8356f0d..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da0 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. - -To access elements with a certain class name, we use the `getElementsByClassName()` method. - -Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md deleted file mode 100644 index 9b80e0f827c..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da1 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md deleted file mode 100644 index c5a2856f2c3..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da2 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -To make the document objects easier to handle, let's turn them into an array. Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md deleted file mode 100644 index 40f6a846fd5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da3 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md deleted file mode 100644 index 725bff25987..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da4 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md deleted file mode 100644 index fead88a0598..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da5 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. - -The `map()` method allows us to do exactly that. - -Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .toString() - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md deleted file mode 100644 index 714497fddbb..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da6 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Now we need to provide a function to `map()` that will be performed on each item of the array. - -This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: - -```js -function(meal){} -``` - -Enter in the above function as an argument in between the parentheses of the `.map()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md deleted file mode 100644 index 7d58167b80c..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da7 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. - -If you want, console log `total` to see what results you are getting. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md deleted file mode 100644 index 4a199951818..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da8 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md deleted file mode 100644 index 6058cea614a..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da9 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md deleted file mode 100644 index 46dfade8b55..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daa -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. - -Chain the `reduce()` method to the `Array.from()` expression. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md deleted file mode 100644 index 065b5dce513..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dab -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: - -```js -function(accumulator, currentValue) { /* code to run */ } -``` - -or using arrow functions: - -```js -(accumulator, currentValue) => { /* code to run */ } -``` - -Insert the above callback function as an argument in the `.reduce()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md deleted file mode 100644 index 448c7702610..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dac -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. - -Here is an example of a `reduce()` method with an empty object as its initial value: - -```js -arr.reduce((accumulator, currentValue) => { - /* code to run */ -}, {}); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md deleted file mode 100644 index 4134f0401a2..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dad -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. - -We can use the reduce function as follows: - -```js -arr.reduce((accumulator, currentValue) => { - return accumulator + currentValue; -}, 0); -``` - -At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, since `arr[0] = 1 = currentValue`. - -At `arr[1]`, the function is `(1, 3) => 1 + 3`, - -Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. - -In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md deleted file mode 100644 index c9d4f5bd8ad..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 5e302e80e003129199103c78 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` - -You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. - -When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md deleted file mode 100644 index b36ed2d97b6..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5e302e8ce003129199103c79 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Now let's simplify the `reduce()` callback function by refactoring it. - -Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. - -So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. - -Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md deleted file mode 100644 index 8825fbe6dd0..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dae -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. - -Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. - -If you inspect the Female radio button you will notice its id: `` - -Create a variable named `maxCalories` and set it equal to the document element with the id of `female`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md deleted file mode 100644 index 1e19c715fcf..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daf -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` - -Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md deleted file mode 100644 index 21d83417535..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db0 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. - -For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: - -```js -if (5 - 3 === 4) { - return 'Yes'; -} else { - return 'No'; -} -``` - -`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md deleted file mode 100644 index abe960e3120..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db1 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Now that we have `total` and `maxCalories`, we need to find out the difference between them. - -Create a variable named `difference` and set it equal to `total - maxCalories` - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md deleted file mode 100644 index ad3abc0bfe5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db2 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. - -To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). - -If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. - -Use the same ternary syntax that you used to determine `maxCalories`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md deleted file mode 100644 index 2dbdd8b547b..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db3 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
                                                                  `. - -We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. - -Create a variable named `output` and set it equal to this division element with the `id` of `output`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md deleted file mode 100644 index 87062f28e7f..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db4 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Now it's time to create the HTML elements that we will add inside of `output`. - -To create an element, use `createElement()`. For example: - -```js -const myHeading1 = document.createElement('h1') -``` - -Create an `h3` element and assign it to a variable named `result`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md deleted file mode 100644 index 90ad3c91cb4..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db5 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Next, we will create a text node that we will later append to the `result` element. - -JavaScript has a function called `createTextNode()` to accomplish this. For example: - -```js -const myText = document.createTextNode("Hello world!") -``` - -Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md deleted file mode 100644 index b93248efe69..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db6 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -We can now use the `difference` variable that we created above. - -Insert the `difference` variable inside the parentheses of `.createTextNode()` - -If you want to see what the text currently looks like, try `console.log(resultText)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md deleted file mode 100644 index fd08248b5f0..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db7 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Notice how if `total` is less than `maxCalories`, `difference` is a negative number. - -We want to show the absolute value of the difference so it displays "300" rather than "-300". - -Wrap the `difference` in a `Math.abs()` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md deleted file mode 100644 index f066a2b3607..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db8 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md deleted file mode 100644 index d2e8c9a31c3..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db9 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Next we want to add the text from the `surplusOrDeficit` variable that we previously created. - -Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md deleted file mode 100644 index 1311c2ac849..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dba -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. - -Some people consider this a little cumbersome and prefer to use template literals instead. - -Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. - -For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. - -Convert the data inside of `createTextNode()` to be a template literal. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md deleted file mode 100644 index 923d7d02e23..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbb -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: - -```js -result.appendChild(resultText); -``` - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md deleted file mode 100644 index 09da32b6cb5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbc -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Similarly, append the `result` to the `output` element with the `appendChild()` method. - -Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md deleted file mode 100644 index ccb8660bf13..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbd -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Next, let's create and add a horizontal rule (`hr`) element to the output. - -Create an `hr` element and assign it to a variable named `line`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md deleted file mode 100644 index e0f9bd9c47c..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbe -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Add the `line` to the `output` element using the `appendChild()` method. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md deleted file mode 100644 index 4c4b069fb43..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbf -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Let's create a few more HTML elements to add to the `output`. - -Create an `h4` element and assign it to a variable named `recommended`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md deleted file mode 100644 index 0becd375fa5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc0 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Create a text node and assign it to a variable named `recommendedText`. - -This is similar to how your created the `resultText` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md deleted file mode 100644 index fd2d846ab52..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc1 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. - -Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". - -This is similar to template literal syntax previously used to create `resultText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md deleted file mode 100644 index 9e9d9c9c3f2..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc2 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Append the `recommendedText` node to the `recommended` element. - -This is similar to how the `resultText` is appended to `result` previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md deleted file mode 100644 index 9264e8ac9cf..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc3 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Append the `recommended` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md deleted file mode 100644 index 0fd8978f093..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc4 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. - -Create an `h4` element and assign it to a variable named `consumed`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md deleted file mode 100644 index 6bb2536f422..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc5 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. - -For example: - -```js -consumed.innerHTML = `Hello world`; -``` - -Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md deleted file mode 100644 index 29d043f4c6e..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc6 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Append the `consumed` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md deleted file mode 100644 index c34dcad8f68..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc7 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Now it's time to add some styling which can be added directly as attributes or classes. - -In our CSS file, we have a styling rule for any elements with the class name `green-text`. - -On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. - -Now if you submit the form again and inspect the `result` element, you will see it as `

                                                                  ` and notice that the text is now green. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md deleted file mode 100644 index 7298971ffec..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc8 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. - -For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. - -Set the `class` attribute of the `output` element equal to a class named `bordered-class`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md deleted file mode 100644 index 1b0bd348910..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc9 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. - -Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. - -The `calculate()` function is now finished! - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                  -
                                                                  -

                                                                  Calorie Counter

                                                                  -
                                                                  - Sex -
                                                                  - - - -
                                                                  - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - Breakfast -
                                                                  - Lunch -
                                                                  - Dinner -
                                                                  - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md deleted file mode 100644 index 56bbb142804..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dca -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. - -In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: - -```html - - - - -
                                                                  -

                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md deleted file mode 100644 index db8f9bc95c1..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcb -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -We want a function to run every time the user clicks the "Add Entry" button. - -Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: - -```js -function() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md deleted file mode 100644 index 886f041422c..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcc -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Inside the function, create an `input` document element and assign it to a variable named `foodInput`. - -This is similar to how you created the `result` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md deleted file mode 100644 index 6860d68731d..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcd -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Set the `placeholder` property of the `foodInput` equal to `'food name'`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md deleted file mode 100644 index 89e37a9f626..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dce -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. - -In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. - -Add the class name `food-control` to the `foodInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md deleted file mode 100644 index e0ab30e27b5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcf -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Notice that parent container of all of the inputs has an `id` of `entries`: `
                                        `. - -Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. - -This is similar to the other `appendChild()` methods that you have used previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md deleted file mode 100644 index ea1faf6c59c..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md deleted file mode 100644 index 594af428356..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd1 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. - -This is similar to how to set the class of the `output` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md deleted file mode 100644 index 962a0309894..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd2 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -The `calorieInput` element should only accept numbers that are 0 or above. - -Set the `min` attribute of `calorieInput` to `0`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md deleted file mode 100644 index eac60b49fce..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd3 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. - -We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md deleted file mode 100644 index 7ffb7021744..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd4 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. - -To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md deleted file mode 100644 index 8e15285d2a9..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd5 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. - -The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md deleted file mode 100644 index df36314c4ae..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd6 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. - -Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md deleted file mode 100644 index 1e5b3e9b048..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd7 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. - -# --hints-- - -See description above for instructions. - -```js -assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md deleted file mode 100644 index 7a941b6559c..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd8 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Create a variable named `clearOutput` and set it equal to a blank arrow function: - -```js -const clearOutput = () => {} -``` - -This is similar to `function clearOutput () {}`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearOutput === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md deleted file mode 100644 index e6a2d2c6337..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd9 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -We need to remove the contents inside of element with the `id` of `output`. - -In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md deleted file mode 100644 index f8984120835..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dda -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. - -Remove the `bordered-class` class. For example: - -```js -document.getElementById('my-div').classList.remove('my-class') -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md deleted file mode 100644 index 93a258c395b..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddb -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. - -In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/clearOutput\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md deleted file mode 100644 index 6a07e9aa83b..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddc -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearForm === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md deleted file mode 100644 index 88284a00280..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddd -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. - -Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. - -This is similar to how you declared the `total` variable previously in the `calculate` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md deleted file mode 100644 index 9cc201d5194..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dde -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. - -Add `foodInputs.forEach()`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md deleted file mode 100644 index 8044dac1e60..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddf -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -We need to provide a callback function in the parentheses of `forEach()`. - -This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. - -In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md deleted file mode 100644 index dd34b193b4c..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de0 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. - -Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. - -This is similar to how you declared the `foodInputs` variable previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md deleted file mode 100644 index 652c8f99281..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de1 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md deleted file mode 100644 index b3cf00545fa..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de2 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. - -Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md deleted file mode 100644 index ead4dfe0e77..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de3 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Congratulations! Have fun playing with your completed calorie counter. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                        -
                                        -

                                        Calorie Counter

                                        -
                                        - Sex -
                                        - - - -
                                        - - -
                                        -
                                        -
                                        -
                                        - Breakfast -
                                        - Lunch -
                                        - Dinner -
                                        - - - -
                                        -
                                        -
                                        - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md deleted file mode 100644 index 08bc2a4aa43..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 5d79253297c0ebb149ea9fed -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -In functional programming, we prefer immutable values over mutable values. - -Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. - -Start by creating an empty `infixToFunction` object using `const`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md deleted file mode 100644 index 3159f1d2410..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 5d7925323be8848dbc58a07a -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md deleted file mode 100644 index c5dbbab705c..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792532f631702ae6d23e11 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now return the sum of `x` and `y` using the `return` keyword. - -# --hints-- - -See description above for instructions. - -```js -assert(add(1, 2) === 3 && add(100, 2000) === 2100); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md deleted file mode 100644 index 0a9d327d798..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5d7925329445167ecc2ac9c9 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. - -Assign `add` to a new variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md deleted file mode 100644 index 4e85d64fbe2..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792532b07918c3a5904913 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: - -```js -function(x) { - return x -} -``` - -First, remove the `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md deleted file mode 100644 index a9aa387addd..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792533cc8b18b6c133edc7 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: - -```js -const fn = function(x) { - return x; -} - -fn(); -``` - -Assign the anonymous function to the variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md deleted file mode 100644 index 68c44b16619..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 5d7925337954ed57a565a135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. - -Rewrite `addVar` using ES6's arrow syntax: - -```js -const fn = (x, y) => x; -``` - -Note that the value is returned implicitly. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md deleted file mode 100644 index 676f6c6f4ff..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d79253352e33dd59ec2f6de -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Add the key `+` to `infixToFunction` and assign it the value `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(infixToFunction['+'].toString() === addVar.toString()); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md deleted file mode 100644 index c44846417a5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792533d31e4f7fad33011d -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md deleted file mode 100644 index 2096072d738..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d792533e7707b9645d7b540 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Remove the now redundant `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof addVar === 'undefined'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md deleted file mode 100644 index 526e706eb08..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 5d79253378595ec568f70ab6 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Add similar definitions for `-`, `*` and `/` in `infixToFunction`. - -# --hints-- - -See description above for instructions. - -```js -assert( - infixToFunction['-'](10, 2) === 8 && - infixToFunction['*'](10, 10) === 100 && - infixToFunction['/'](100, 10) === 10 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md deleted file mode 100644 index 37432637ac6..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5d7925330918ae4a2f282e7e -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md deleted file mode 100644 index 3d09b3967f2..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5d792533ed00e75d129e1b18 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). - -Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. - -This is how you would pass the `-` function: - -```js -str.replace(regex, infixToFunction["-"]) -``` - -# --hints-- - -See description above for instructions. - -```js -assert(infixEval('ab', /(a)b/) === 'aba'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md deleted file mode 100644 index 0926459ef14..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5d792533a5c42fb4d1a4b70d -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md deleted file mode 100644 index 23968d2e070..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5d79253358e8f646cbeb2bb0 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Change the `"+"` in the call to `infixToFunction` to `fn`. - -`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md deleted file mode 100644 index f3dd1211e6a..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5d792533bb38fab70b27f527 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". - -Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). - -# --hints-- - -See description above for instructions. - -```js -const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; -assert( - infixEval('23+35', regex) === '58' && - infixEval('100-20', regex) === '80' && - infixEval('10*10', regex) === '100' && - infixEval('120/6', regex) === '20' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md deleted file mode 100644 index e295114e777..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5d79253386060ed9eb04a070 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. - -To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. - -Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md deleted file mode 100644 index 1af15a10b8e..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d792533717672657b81aa69 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -When defining an arrow function with a single argument, the parentheses can be omitted: - -```js -const greeting = name => `Hello !`; -``` - -Define a function `highPrecedence` which takes a single argument `str` and returns it. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('a') === 'a'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md deleted file mode 100644 index 5c2d8560932..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5d7925335ab63018dcec11fe -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Arrow functions can have multiple statements: - -```js -const fn = (x, y) => { - const result = x + y; - return result; // explicit return statement required -}; -``` - -Use this syntax for the `highPrecedence` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md deleted file mode 100644 index 1ddd40ce5d8..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5d7925330f300c342315066d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md deleted file mode 100644 index 3bfba3454a9..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5d792533aa6443215c9b16bf -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md deleted file mode 100644 index 333b8bcb122..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925334c5e22586dd72962 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -The ternary operator has the following syntax: - -```js -const result = condition ? valueIfTrue : valueIfFalse; -const result = 1 === 1 ? 1 : 0; // 1 -const result = 9 > 10 ? "Yes" : "No"; // "No" -``` - -Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2') === '' && - highPrecedence('2+2') === '2+2' && - code.includes('?') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md deleted file mode 100644 index c5f666b8a05..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5d79253307ecd49e030bdcd1 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. - -Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2*2') === '8' && - highPrecedence('2*2') === '4' && - highPrecedence('2+2') === '2+2' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md deleted file mode 100644 index c837d8e94e1..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5d792534257122211d3043af -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. - -# --hints-- - -See description above for instructions. - -```js -assert(spreadsheetFunctions['']('x') === 'x'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md deleted file mode 100644 index 58109dce7a4..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925346f4f2da6df4354a6 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md deleted file mode 100644 index 313db4427d6..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5d792534cac2dbe0a719ea7a -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Set `noHigh` to `highPrecedence(str)` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md deleted file mode 100644 index bc94c78c155..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d792534857332d07ccba3ad -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md deleted file mode 100644 index 7972802a8b8..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5d792534d586ef495ea9df90 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Set `str2` to `infixEval(noHigh, infix)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md deleted file mode 100644 index f957c47d628..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5d79253410532e13d13fe574 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - applyFn - .toString() - .replace(/\s/g, '') - .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md deleted file mode 100644 index 42b80301fc6..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d7925342415527083bd6667 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: - -```js -"a b c".split(" "); // ["a", "b", "c"]; -``` - -Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md deleted file mode 100644 index 33e85a097cc..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d792534c3d26890ac1484d4 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: - -```js -[1, 2, 3].map(x => x + 1); // [2, 3, 4] -``` - -In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md deleted file mode 100644 index abb91060f5e..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d792534b92f3d1cd4410ce3 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md deleted file mode 100644 index bb2f8da03a5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 5d7925341193948dfe6d76b4 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md deleted file mode 100644 index f32c582d3ef..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d792534cf81365cfca58794 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md deleted file mode 100644 index a460b595da1..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d7925348ee084278ff15556 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. - -Now return `str2.replace(regex, "")` at the end of `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md deleted file mode 100644 index 45e848ecbeb..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d7925348a6a41c32f7a4e3e -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md deleted file mode 100644 index 7394c7c6472..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d792534408c5be896b0a46e -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. - -Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md deleted file mode 100644 index c86fe809104..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 5d792534f0eda837510e9192 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md deleted file mode 100644 index bfa91d4503f..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d7925346b911fce161febaf -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md deleted file mode 100644 index 24d94216931..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d79253483eada4dd69258eb -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -`range` should set `arr` to `[start]` and should then return `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constarr=[start]') && - JSON.stringify(range(1)) === '[1]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md deleted file mode 100644 index 4307ef2889a..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d7925342b2b993ef18cd45f -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md deleted file mode 100644 index 0fa8e6fe0fb..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5d7925341747ad42b12f8e68 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. - -The `concat` method returns a new array instead of modifying an existing one: - -```js -[1,2,3].concat(4); // [1, 2, 3, 4] -[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] -``` - -Use `concat` instead of `push` to return the result of adding `end` to `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(1, 2)) === '[1,2]' && - code.includes('concat') && - !code.includes('push') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md deleted file mode 100644 index 448578598f5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: 5d792535b0b3c198ee3ed6f9 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -The `concat` method can also accept arrays: - -```js -[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] -[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] -``` - -Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md deleted file mode 100644 index 6e89d44a236..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d7925357a0533eb221b005d -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('arr') && - code.replace(/\s/g, '').includes('[start].concat([end])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md deleted file mode 100644 index 0d876da26b6..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d792535591db67ee15b4106 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(3, 2)) === '[]' && - JSON.stringify(range(1, 3)) === '[1,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md deleted file mode 100644 index ee94e71d4a4..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d792535f1f7adf77de5831d -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md deleted file mode 100644 index 497b63c634b..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925353d2c505eafd50cd9 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Remove the curly braces and `return` keyword from `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md deleted file mode 100644 index 862a0002f2f..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d79253539b5e944ba3e314c -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md deleted file mode 100644 index 9845839bbeb..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535a4f1cbff7a8b9a0b -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Make `charRange` return `range(start, end)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md deleted file mode 100644 index 43167394a7b..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535e3304f15a8890162 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md deleted file mode 100644 index f5bb024255e..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 5d792535a40ea5ac549d6804 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md deleted file mode 100644 index 8369854b752..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925358c220e5b2998909e -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Now, pass `x` to `String.fromCharCode` in the arrow function. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md deleted file mode 100644 index 6253e20d545..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5d7925357729e183a49498aa -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md deleted file mode 100644 index 03ceaf96068..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253555aa652afbb68086 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md deleted file mode 100644 index 27b4b66f7f2..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253582be306d339564f6 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md deleted file mode 100644 index 72223dddb2c..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d7925352047e5c54882c436 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md deleted file mode 100644 index 1870ab8b951..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 5d79253568e441c0adf9db9f -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md deleted file mode 100644 index b394d603ed4..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925356ab117923b80c9cd -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md deleted file mode 100644 index e79d2b6f857..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d792535e54a8cd729a0d708 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md deleted file mode 100644 index 3d6a5a955b7..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -id: 5d7925353b307724a462b06b -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Finally, return `fn("A")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md deleted file mode 100644 index 994e931f57f..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d792536735f71d746ee5d99 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. - -Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md deleted file mode 100644 index b06f86f5495..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d792536ad340d9dff2e4a96 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Now, remove the curly braces and return statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md deleted file mode 100644 index d1492aa5cbf..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925369614afd92d01fed5 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md deleted file mode 100644 index 8d17549a291..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d792536504e68254fe02236 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. - -Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md deleted file mode 100644 index 1c388711e2f..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536c8d2f0fdfad768fe -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -You can add more arguments by simply adding another arrow with another argument name: - -```js -const manyArguments = a => b => c => d => [a, b, c, d] -``` - -Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md deleted file mode 100644 index 45e6af501cc..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d79253639028b8ec56afcda -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md deleted file mode 100644 index 19bbc068cd3..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d792536834f2fd93e84944f -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -You call curried functions like this: - -```js -const result = add(1)(2); -``` - -Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md deleted file mode 100644 index e220cf656e5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536ddff9ea73c90a994 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. - -Change `x => elemValue(n)(x)` to `elemValue(n)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md deleted file mode 100644 index eaff17e3511..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d7925361596f84067904f7f -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('const fn') && - code.includes('varRangeExpanded') && - evalFormula('A1:J133') === '3' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md deleted file mode 100644 index 03ec1f65ba2..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dd8a4daf255488ac -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md deleted file mode 100644 index b1139d99d92..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536449c73004f265fb1 -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md deleted file mode 100644 index a481e918c67..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d79253685fc69b8fe60a0d2 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. - -This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md deleted file mode 100644 index 64e48966f02..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dc6e3ab29525de9e -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md deleted file mode 100644 index 57da365160d..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536cfd0fd893c630abb -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.includes('varRegex') && - code.includes('varExpanded') && - evalFormula('aC12bc') === 'abc' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md deleted file mode 100644 index 2dc9ec5c8ab..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 5d7925366a5ff428fb483b40 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md deleted file mode 100644 index 0516f1f77e6..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5d7925365d4035eeb2e395fd -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md deleted file mode 100644 index a1022f45c6a..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 5d7925364c106e9aaf05a16f -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. - -Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(evalFormula('(2+2)*2') === '8'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md deleted file mode 100644 index 5617221e798..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: 5d792536970cd8e819cc8a96 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -You can define arrow functions without arguments: - -```js -const two = () => 2; -``` - -Define an empty arrow function without arguments and assign it to `window.onload`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('window.onload=()=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md deleted file mode 100644 index 06b401c7e8e..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5d792536e33baeaa60129e0a -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md deleted file mode 100644 index 59443f50dc9..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 5d7925379e2a488f333e2d43 -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Now define a function `createLabel` which takes an argument `name` and has an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md deleted file mode 100644 index 3a3a6f126c8..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5d7925379000785f6d8d9af3 -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Inside `createLabel`, assign `document.createElement("div")` to `label`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md deleted file mode 100644 index a9a1dcc5726..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 5d79253791391b0acddd0ac5 -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Add the following code to `createLabel`: - -```js -label.className = "label"; -label.textContent = name; -container.appendChild(label); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md deleted file mode 100644 index 780a9dab7fe..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373104ae5ae83f20a5 -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -The `forEach` method takes a function and calls it with each element of the array. - -Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md deleted file mode 100644 index ccfac003142..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373b7127cfaeb50c26 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). - -# --hints-- - -See description above for instructions. - -```js -assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md deleted file mode 100644 index 5216d89d1d9..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d792537cb3a5cd6baca5e1a -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md deleted file mode 100644 index 544000db907..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 5d79253742f3313d55db981f -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md deleted file mode 100644 index bf8bee8395a..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 5d7925379e0180a438ce7f95 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md deleted file mode 100644 index d57aa617713..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d792537c80984dfa5501b96 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Inside `letters.forEach`, assign `document.createElement("input")` to `input`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md deleted file mode 100644 index 4568ec50b24..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925377b54d8a76efb5657 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Add the following code to `letters.forEach`: - -```js -input.type = "text"; -input.id = y + x; -input.onchange = update; -container.appendChild(input); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md deleted file mode 100644 index 6543d3124fb..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925371398513549bb6395 -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md deleted file mode 100644 index 378c01975ac..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d792537ea3eaf302bf2d359 -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md deleted file mode 100644 index 93968d4e378..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 5d792537533b1c7843bfd029 -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -The `includes` method works on a string and checks if the argument is its substring. - -Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md deleted file mode 100644 index dcc989ea328..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537dc0fe84345d4f19e -title: Step 93 -challengeType: 0 -dashedName: step-93 ---- - -# --description-- - -Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md deleted file mode 100644 index ce97294c369..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537b6cadae0f4b0cda1 -title: Step 94 -challengeType: 0 -dashedName: step-94 ---- - -# --description-- - -The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. - -Use the `slice` method to log the first two letters of `value` to the console. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md deleted file mode 100644 index 1eaf868ad16..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 5d79253770083fb730c93a93 -title: Step 95 -challengeType: 0 -dashedName: step-95 ---- - -# --description-- - -You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. - -Change the call to `slice` to log all characters except the first instead. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md deleted file mode 100644 index cd6f2405a86..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d792537fef76b226b63b93b -title: Step 96 -challengeType: 0 -dashedName: step-96 ---- - -# --description-- - -Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md deleted file mode 100644 index fb91f29be96..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d79253760fca25ccbbd8990 -title: Step 97 -challengeType: 0 -dashedName: step-97 ---- - -# --description-- - -The array destructuring syntax can be used to extract values from arrays: - -```js -const [x, y] = [1, 2]; // in variables -const fn = ([x, y]) => x + y // in functions -``` - -Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && - spreadsheetFunctions['random']([1, 2]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md deleted file mode 100644 index c933b24aaac..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d7925374321824cba309875 -title: Step 98 -challengeType: 0 -dashedName: step-98 ---- - -# --description-- - -Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( - code.replace(/\s/g, '') - ) && spreadsheetFunctions['random']([1, 1]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md deleted file mode 100644 index 2a5ee766e3d..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md +++ /dev/null @@ -1,276 +0,0 @@ ---- -id: 5d7925381e8565a5c50ba7f1 -title: Step 99 -challengeType: 0 -dashedName: step-99 ---- - -# --description-- - -In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. - -You can check if this is the case by comparing a call to a function with another call (with the same arguments): - -```js -console.log(f(2) === f(2)); // always true for pure functions -``` - -Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md deleted file mode 100644 index 2f419cf2876..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925383f1b77db7f1ff59e -title: Step 100 -challengeType: 0 -dashedName: step-100 ---- - -# --description-- - -This is (probably) false, so `random` is certainly impure. - -The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. - -Call `window.onload()` in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md deleted file mode 100644 index 176257a88b5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d792538de9fa3f298bcd5f6 -title: Step 101 -challengeType: 0 -dashedName: step-101 ---- - -# --description-- - -Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md deleted file mode 100644 index ad427105522..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -id: 5d7925385b74f69642e1fea5 -title: Step 102 -challengeType: 0 -dashedName: step-102 ---- - -# --description-- - -Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. - -Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md deleted file mode 100644 index 231159b2b34..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d7925380ea76d55b2c97d7b -title: Step 103 -challengeType: 0 -dashedName: step-103 ---- - -# --description-- - -This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. - -Remove the `console.log` statement. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.includes('console.log')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md deleted file mode 100644 index 36fd2f83b90..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d792538be4fe331f1a6c008 -title: Step 104 -challengeType: 0 -dashedName: step-104 ---- - -# --description-- - -Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. - -But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. - -Change these calls to `""` - the function is now pure but doesn't work. - -# --hints-- - -See description above for instructions. - -```js -const nos = code.replace(/\s/g, ''); -assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md deleted file mode 100644 index 4b9e711aae6..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 5d792538d169f33142175b95 -title: Step 105 -challengeType: 0 -dashedName: step-105 ---- - -# --description-- - -To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. - -Add an argument `cells` to `evalFormula`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md deleted file mode 100644 index 39584a049ae..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538e48b5a2c6e5bbe12 -title: Step 106 -challengeType: 0 -dashedName: step-106 ---- - -# --description-- - -When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md deleted file mode 100644 index 1ab52bf8124..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d7925387f3e9da5ec856dbe -title: Step 107 -challengeType: 0 -dashedName: step-107 ---- - -# --description-- - -Update the recursive call to `evalFormula` by passing in `cells` as the second argument. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md deleted file mode 100644 index 11e0b2d0bbc..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253824ae9b4a6e6f3108 -title: Step 108 -challengeType: 0 -dashedName: step-108 ---- - -# --description-- - -Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. - -# --hints-- - -See description above for instructions. - -```js -assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md deleted file mode 100644 index d4c961be237..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 5d7925383f122a279f4c54ad -title: Step 109 -challengeType: 0 -dashedName: step-109 ---- - -# --description-- - -The `find` method returns the first element of an array that satisfies the function passed to it. - -Chain `find` onto `cells` and pass it `cell => cell === id`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md deleted file mode 100644 index abdc6794679..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d7925387b682e962f209269 -title: Step 110 -challengeType: 0 -dashedName: step-110 ---- - -# --description-- - -In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md deleted file mode 100644 index 4baca0e6cc3..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538de774217b173288e -title: Step 111 -challengeType: 0 -dashedName: step-111 ---- - -# --description-- - -Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md deleted file mode 100644 index a2c5b9b1bef..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253891d93585323d1f3c -title: Step 112 -challengeType: 0 -dashedName: step-112 ---- - -# --description-- - -Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md deleted file mode 100644 index 637af181723..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925384e34e944ecb4612d -title: Step 113 -challengeType: 0 -dashedName: step-113 ---- - -# --description-- - -Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md deleted file mode 100644 index d12140aa462..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d792538631844ad0bdfb4c3 -title: Step 114 -challengeType: 0 -dashedName: step-114 ---- - -# --description-- - -`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. - -Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md deleted file mode 100644 index c966a9161ed..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -id: 5d792538e2a8d20cc580d481 -title: Step 115 -challengeType: 0 -dashedName: step-115 ---- - -# --description-- - -The `slice` method can also work on arrays. - -Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md deleted file mode 100644 index 5483ee8a3e9..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 5d792538f5004390d6678554 -title: Step 116 -challengeType: 0 -dashedName: step-116 ---- - -# --description-- - -You can also pass in a negative argument to `slice` to specify that index from the end: - -```js -[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] -``` - -Use a negative index to add a function `lasttwo` which returns the last two elements of an array. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md deleted file mode 100644 index 3e61d996f85..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 5d792539dd4fd4c96fd85f7e -title: Step 117 -challengeType: 0 -dashedName: step-117 ---- - -# --description-- - -The `%` operator returns the remainder: - -```js -4 % 3; // 1 -5 % 3; // 2 -6 % 3; // 0 -``` - -Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. - -# --hints-- - -See description above for instructions. - -```js -assert(isEven(20) && !isEven(31)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md deleted file mode 100644 index 8c4b6a9e314..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md +++ /dev/null @@ -1,292 +0,0 @@ ---- -id: 5d79253949802f8587c8bbd3 -title: Step 118 -challengeType: 0 -dashedName: step-118 ---- - -# --description-- - -The `filter` method keeps only the elements of an array that satisfy the function passed to it: - -```js -[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] -``` - -Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && - code.includes('filter') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md deleted file mode 100644 index c441a9459d8..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 5d7925395888767e9304c082 -title: Step 119 -challengeType: 0 -dashedName: step-119 ---- - -# --description-- - -The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. - -The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. - -For example, here's how to multiply all the value in an array: - -```js -[2, 3, 4].reduce((a, x) => a * x); // 24 -``` - -Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md deleted file mode 100644 index 787472aea1d..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 5d7925393b30099e37a34668 -title: Step 120 -challengeType: 0 -dashedName: step-120 ---- - -# --description-- - -The `includes` method checks if an element is in an array. - -Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md deleted file mode 100644 index f032db3ac16..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 5d7925398157757b23730fdd -title: Step 121 -challengeType: 0 -dashedName: step-121 ---- - -# --description-- - -The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: - -```js -[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] -// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array -// now it first tries [].concat(1) which works -``` - -Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md deleted file mode 100644 index 6b5714247b5..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d792539de4b9ac14dd40409 -title: Step 122 -challengeType: 0 -dashedName: step-122 ---- - -# --description-- - -Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === - '[1,3,5,7,9]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md deleted file mode 100644 index 8f15f9adfd4..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539534f1bf991bb987f -title: Step 123 -challengeType: 0 -dashedName: step-123 ---- - -# --description-- - -ES6 introduced a shorthand object literal syntax: - -```js -const a = 10; -const myObject = { a }; -console.log(myObject); // { a: 10 } -``` - -First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. - -# --hints-- - -See description above for instructions. - -```js -assert(sum([1, 2, 3]) === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md deleted file mode 100644 index eef96f2d471..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d7925394089b762f93ffa52 -title: Step 124 -challengeType: 0 -dashedName: step-124 ---- - -# --description-- - -Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. - -This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. - -# --hints-- - -See description above for instructions. - -```js -assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md deleted file mode 100644 index cb3b30d8c4f..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539ec758d45a6900173 -title: Step 125 -challengeType: 0 -dashedName: step-125 ---- - -# --description-- - -The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. - -As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md deleted file mode 100644 index 621e4cc4fbc..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md +++ /dev/null @@ -1,308 +0,0 @@ ---- -id: 5d7925398d525f61a9ff3a79 -title: Step 126 -challengeType: 0 -dashedName: step-126 ---- - -# --description-- - -The spread operator allow you to pass multiple arguments instead of an array: - -```js -const arr = [1, 2, 3]; -const sum3 = (a, b, c) => a + b + c; -sum3(...arr); // 6 -``` - -Use the spread operator to add `range` to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && - code.includes('...') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md deleted file mode 100644 index 8d27ee2bf76..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 5d792539a222f385c5c17d2b -title: Step 127 -challengeType: 0 -dashedName: step-127 ---- - -# --description-- - -Now define a `median` function which takes an argument `nums` (in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md deleted file mode 100644 index 08ffbd94e4a..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d7925398a7184b41b12a0e0 -title: Step 128 -challengeType: 0 -dashedName: step-128 ---- - -# --description-- - -The `sort` method sorts an array alphabetically: - -```js -["B", "C", "A"].sort(); // ["A", "B", "C"] -``` - -Assign the sorted `nums` to `sorted` in `median`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md deleted file mode 100644 index 49b025f4b1e..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d7925399afb905c34730a75 -title: Step 129 -challengeType: 0 -dashedName: step-129 ---- - -# --description-- - -But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: - -```js -[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] -``` - -If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. - -Use `sort` to sort `nums` in ascending order. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md deleted file mode 100644 index cad2f5aa466..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d792539728d1aa7788e2c9b -title: Step 130 -challengeType: 0 -dashedName: step-130 ---- - -# --description-- - -Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. - -You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md deleted file mode 100644 index df39b579f78..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d79253939434a2724c0ec41 -title: Step 131 -challengeType: 0 -dashedName: step-131 ---- - -# --description-- - -Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md deleted file mode 100644 index 1e4f1aca372..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 5d792539b9e1d3c54d8fe94a -title: Step 132 -challengeType: 0 -dashedName: step-132 ---- - -# --description-- - -Add a return statement to `median` so that it returns `isEven(length)`. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md deleted file mode 100644 index 4cf66a6dd6a..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5d792539b2e0bd8f9e8213e4 -title: Step 133 -challengeType: 0 -dashedName: step-133 ---- - -# --description-- - -Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. - -Note that the `middle` variable is close to the middle but is not actually the middle. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md deleted file mode 100644 index 2428ff3a79d..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 5d792539239148965a1a59a5 -title: Step 134 -challengeType: 0 -dashedName: step-134 ---- - -# --description-- - -Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.median([1, 20, 3]) === 3 && - spreadsheetFunctions.median([27, 7, 20, 10]) === 15 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md deleted file mode 100644 index ff91ae909fd..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d792539e1446045d0df6d28 -title: Step 135 -challengeType: 0 -dashedName: step-135 ---- - -# --description-- - -The `some` method checks if any element of the array satisfies the provided testing function. - -Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.someeven([1, 5, 4, 3]) && - !spreadsheetFunctions.someeven([3, 5, 9]) && - code.includes('.some') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md deleted file mode 100644 index ddede0016d6..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a2febbb77098730b9 -title: Step 136 -challengeType: 0 -dashedName: step-136 ---- - -# --description-- - -The `every` method checks if all elements of an array satisfy the provided testing function. - -Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && - !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && - code.includes('.every') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md deleted file mode 100644 index c475cf8ba22..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d79253a98bd9fdf7ce68d0a -title: Step 137 -challengeType: 0 -dashedName: step-137 ---- - -# --description-- - -We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. - -While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. - -Replace the body of `range` with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md deleted file mode 100644 index 52e294c3655..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 5d79253a1e9abf29de64c177 -title: Step 138 -challengeType: 0 -dashedName: step-138 ---- - -# --description-- - -The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. - -Make `range` return an array of `undefined` with size `end - start + 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md deleted file mode 100644 index ce1e1c87c73..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a8b29d78984369e4b -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -The `fill` method takes an argument and replaces all elements of the array with that argument. - -Use it on the array in `range` to replace everything with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md deleted file mode 100644 index 9630c3210b7..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 5d79253ad297a31cbe073718 -title: Step 140 -challengeType: 0 -dashedName: step-140 ---- - -# --description-- - -The function in the `map` method can actually take a second argument: the index of the element. - -This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). - -Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md deleted file mode 100644 index 7531f12a5a3..00000000000 --- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5dc10b8b93704f41d279eb5b -title: Step 141 -challengeType: 0 -dashedName: step-141 ---- - -# --description-- - -Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                        -
                                        -
                                        -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md new file mode 100644 index 00000000000..d522cf2c5ab --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md @@ -0,0 +1,388 @@ +--- +id: 659ebe52d74b132a1d75c891 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug. + +The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function. +# --hints-- + +You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`. + +```js +assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn localStorage by Building a Todo App + + + + +
                                        +

                                        Todo App

                                        +
                                        + + + +
                                        +

                                        Discard unsaved changes?

                                        +
                                        + + +
                                        +
                                        +                                         +
                                        +
                                        +
                                        + + + + +``` + +```css +:root { + --white: #fff; + --light-grey: #f5f6f7; + --dark-grey: #0a0a23; + --yellow: #f1be32; + --golden-yellow: #feac32; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--dark-grey); +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + color: var(--light-grey); + margin: 20px 0 40px 0; +} + +.todo-app { + background-color: var(--white); + width: 300px; + height: 350px; + border: 5px solid var(--yellow); + border-radius: 8px; + padding: 15px; + position: relative; + display: flex; + flex-direction: column; + gap: 10px; +} + +.btn { + cursor: pointer; + width: 100px; + margin: 10px; + color: var(--dark-grey); + background-color: var(--golden-yellow); + background-image: linear-gradient(#fecc4c, #ffac33); + border-color: var(--golden-yellow); + border-width: 3px; +} + +.btn:hover { + background-image: linear-gradient(#ffcc4c, #f89808); +} + +.large-btn { + width: 80%; + font-size: 1.2rem; + align-self: center; + justify-self: center; +} + +.close-task-form-btn { + background: none; + border: none; + cursor: pointer; +} + +.close-icon { + width: 20px; + height: 20px; +} + +.task-form { + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--white); + border-radius: 5px; + padding: 15px; + width: 300px; + height: 350px; + flex-direction: column; + justify-content: space-between; + overflow: auto; +} + +.task-form-header { + display: flex; + justify-content: flex-end; +} + +.task-form-body { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.task-form-footer { + display: flex; + justify-content: center; +} + +.task-form-label, +#title-input, +#date-input, +#description-input { + display: block; +} + +.task-form-label { + margin-bottom: 5px; + font-size: 1.3rem; + font-weight: bold; +} + +#title-input, +#date-input, +#description-input { + width: 100%; + margin-bottom: 10px; + padding: 2px; +} + +#confirm-close-dialog { + padding: 10px; + margin: 10px auto; + border-radius: 15px; +} + +.confirm-close-dialog-btn-container { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.discard-message-text { + font-weight: bold; + font-size: 1.5rem; +} + +#tasks-container { + height: 100%; + overflow-y: auto; +} + +.task { + margin: 5px 0; +} + +.hidden { + display: none; +} + +@media (min-width: 576px) { + .todo-app, + .task-form { + width: 400px; + height: 450px; + } + + .task-form-label { + font-size: 1.5rem; + } + + #title-input, + #date-input { + height: 2rem; + } + + #title-input, + #date-input, + #description-input { + padding: 5px; + margin-bottom: 20px; + } +} +``` + +```js +const taskForm = document.getElementById("task-form"); +const confirmCloseDialog = document.getElementById("confirm-close-dialog"); +const openTaskFormBtn = document.getElementById("open-task-form-btn"); +const closeTaskFormBtn = document.getElementById("close-task-form-btn"); +const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); +const cancelBtn = document.getElementById("cancel-btn"); +const discardBtn = document.getElementById("discard-btn"); +const tasksContainer = document.getElementById("tasks-container"); +const titleInput = document.getElementById("title-input"); +const dateInput = document.getElementById("date-input"); +const descriptionInput = document.getElementById("description-input"); + +const taskData = []; +let currentTask = {}; + +const addOrUpdateTask = () => { + --fcc-editable-region-- + + --fcc-editable-region-- + const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); + const taskObj = { + id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, + title: titleInput.value, + date: dateInput.value, + description: descriptionInput.value, + }; + + if (dataArrIndex === -1) { + taskData.unshift(taskObj); + } else { + taskData[dataArrIndex] = taskObj; + } + + updateTaskContainer() + reset() +}; + +const updateTaskContainer = () => { + tasksContainer.innerHTML = ""; + + taskData.forEach( + ({ id, title, date, description }) => { + (tasksContainer.innerHTML += ` +
                                        +

                                        Title: ${title}

                                        +

                                        Date: ${date}

                                        +

                                        Description: ${description}

                                        + + +
                                        + `) + } + ); +}; + + +const deleteTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + buttonEl.parentElement.remove(); + taskData.splice(dataArrIndex, 1); +} + +const editTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + currentTask = taskData[dataArrIndex]; + + titleInput.value = currentTask.title; + dateInput.value = currentTask.date; + descriptionInput.value = currentTask.description; + + addOrUpdateTaskBtn.innerText = "Update Task"; + + taskForm.classList.toggle("hidden"); +} + +const reset = () => { + titleInput.value = ""; + dateInput.value = ""; + descriptionInput.value = ""; + taskForm.classList.toggle("hidden"); + currentTask = {}; +} + +openTaskFormBtn.addEventListener("click", () => + taskForm.classList.toggle("hidden") +); + +closeTaskFormBtn.addEventListener("click", () => { + const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; + if (formInputsContainValues) { + confirmCloseDialog.showModal(); + } else { + reset(); + } +}); + +cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); + +discardBtn.addEventListener("click", () => { + confirmCloseDialog.close(); + reset() +}); + +taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + addOrUpdateTask(); +}); +``` diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md deleted file mode 100644 index 34a20cd7101..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e0e72c65bc8e73dfe1e -videoId: LGQuIIv2RVA -title: Elementi e Tag Domanda A -challengeType: 15 -dashedName: elements-and-tags-question-a ---- - -# --description-- - -Quasi tutti gli elementi di una pagina HTML sono solo porzioni di contenuto racchiuse tra tag HTML di apertura e chiusura. - -I tag di apertura comunicano al browser l'inizio di un elemento HTML. Sono costituiti da una parola chiave racchiusa tra parentesi angolate `<>`. Ad esempio, il tag di apertura di un paragrafo ha questo aspetto: `

                                        `. - -I tag di chiusura comunicano al browser dove finisce un elemento. Sono molto simili ai tag di apertura; l'unica differenza è che hanno una barra obliqua prima della parola chiave. Ad esempio, il tag di chiusura di un paragrafo ha questo aspetto: `

                                        `. - -Un elemento paragrafo completo ha questo aspetto: - -diagramma di un elemento - -Puoi pensare agli elementi come a contenitori per del contenuto. I tag di apertura e chiusura dicono al browser quale contenuto è racchiuso nell'elemento. Il browser può quindi utilizzare tali informazioni per determinare come interpretare e formattare il contenuto. - -Esistono alcuni elementi HTML che non hanno un tag di chiusura. Questi elementi spesso hanno questo aspetto: `
                                        ` o ``, ma alcuni possono essere anche usati senza la barra obliqua di chiusura, come `
                                        ` o ``. Sono detti tag a chiusura automatica o elementi vuoti poiché non racchiudono alcun contenuto. Ne incontrerai alcuni nelle lezioni successive, ma per la maggior parte, gli elementi hanno sia il tag di apertura che di chiusura. - -L'HTML possiede un'ampia lista di tag predefiniti che puoi usare per creare tutti i diversi tipi di elementi. È importante usare i tag corretti per i contenuti. Usare i tag corretti può avere un grosso impatto su due aspetti dei tuoi siti: come vengono valutati dai motori di ricerca e quanto sono accessibili agli utenti che per usare internet fanno affidamento a tecnologie assistive, come i lettori di schermo. - -L'utilizzo degli elementi corretti per il contenuto è chiamato HTML semantico. In seguito esplorerai questo aspetto in modo molto più approfondito. - -# --question-- - -## --assignment-- - -Guarda il video di Kevin Powell [Introduction to HTML](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) - -## --text-- - -Cosa sono i tag HTML? - -## --answers-- - -I tag HTML dicono al browser quale contenuto è racchiuso in un elemento. - ---- - -I tag HTML dicono al browser quando caricare il contenuto. - ---- - -I tag HTML dicono al browser quale contenuto è racchiuso nell'elemento successivo. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md deleted file mode 100644 index 88613e0fbaf..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 637f4e1672c65bc8e73dfe1f -title: Elementi e Tag Domanda B -challengeType: 15 -dashedName: elements-and-tags-question-b ---- - -# --description-- - -Quasi tutti gli elementi di una pagina HTML sono solo porzioni di contenuto racchiuse tra tag HTML di apertura e chiusura. - -I tag di apertura comunicano al browser l'inizio di un elemento HTML. Sono costituiti da una parola chiave racchiusa tra parentesi angolate <>. Ad esempio, il tag di apertura di un paragrafo ha questo aspetto: `

                                        `. - -I tag di chiusura comunicano al browser dove finisce un elemento. Sono molto simili ai tag di apertura; l'unica differenza è che hanno una barra obliqua prima della parola chiave. Ad esempio, il tag di chiusura di un paragrafo ha questo aspetto: `

                                        `. - -Un elemento paragrafo completo ha questo aspetto: - -diagramma di un elemento - -Puoi pensare agli elementi come a contenitori per del contenuto. I tag di apertura e chiusura dicono al browser quale contenuto è racchiuso nell'elemento. Il browser può quindi utilizzare tali informazioni per determinare come interpretare e formattare il contenuto. - -Esistono alcuni elementi HTML che non hanno un tag di chiusura. Questi elementi spesso hanno questo aspetto: `
                                        ` o ``, ma alcuni possono essere anche usati senza la barra obliqua di chiusura, come `
                                        ` o ``. Sono detti tag a chiusura automatica o elementi vuoti poiché non racchiudono alcun contenuto. Ne incontrerai alcuni nelle lezioni successive, ma per la maggior parte, gli elementi hanno sia il tag di apertura che di chiusura. - -L'HTML possiede un'ampia lista di tag predefiniti che puoi usare per creare tutti i diversi tipi di elementi. È importante usare i tag corretti per i contenuti. Usare i tag corretti può avere un grosso impatto su due aspetti dei tuoi siti: come vengono valutati dai motori di ricerca e quanto sono accessibili agli utenti che per usare internet fanno affidamento a tecnologie assistive, come i lettori di schermo. - -L'utilizzo degli elementi corretti per il contenuto è chiamato HTML semantico. In seguito esplorerai questo aspetto in modo molto più approfondito. - -# --question-- - -## --text-- - -Quali sono i tre componenti della maggior parte degli elementi HTML? - -## --answers-- - -Tag di apertura, tag a chiusura automatica e contenuto. - ---- - -Tag di apertura, tag di chiusura e contenuto. - ---- - -Tag di apertura, tag di chiusura e attributo. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md deleted file mode 100644 index 8ee06c82fea..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e1c72c65bc8e73dfe20 -title: Boilerplate HTML Domanda A -challengeType: 15 -dashedName: html-boilerplate-question-a ---- - -# --description-- - -Per spiegare un boilerplate HTML, prima di tutto hai bisogno di un file HTML su cui lavorare. - -Crea una nuova cartella sul tuo computer e chiamala `html-boilerplate`. All'interno di questa cartella crea un nuovo file e chiamalo `index.html`. - -Probabilmente hai già familiarità con molti tipi diversi di file, ad esempio file doc, pdf e immagini. - -Per far sapere al computer che vuoi creare un file HTML devi aggiungere dopo il nome del file l'estensione `.html` come hai fatto quando hai creato il file `index.html`. - -Vale la pena notare che hai chiamato il tuo file HTML index. Dovresti sempre chiamare il file HTML che conterrà la homepage dei tuoi siti web `index.html`. Questo perché quando gli utenti arriveranno su un sito i server web cercheranno, per impostazione predefinita, una pagina index.html - e non averne una causerà grandi problemi. - -## DOCTYPE - -Ogni pagina HTML inizia con una dichiarazione doctype. Lo scopo della dichiarazione doctype è dire al browser quale versione di HTML dovrebbe usare per renderizzare il documento. L'ultima versione di HTML è HTML5 e il doctype per questa versione è semplicemente ``. - -I doctype per le versioni di HTML precedenti erano un po 'più complicati. Ad esempio, questa è la dichiarazione doctype per HTML4: - -```html - -``` - -Tuttavia, probabilmente non ti troverai mai a usare delle vecchie versioni di HTML, quindi utilizza sempre ``. - -Apri nel tuo editor di testo il file `index.html` creato precedentemente e aggiungi `` nella prima riga. - -# --question-- -## --text-- - -Qual è lo scopo della dichiarazione `DOCTYPE`? - -## --answers-- - -Indica al browser quale versione di HTML usare per renderizzare il documento. - ---- - -Indica al browser che il documento utilizza JavaScript. - ---- - -Indica al browser il titolo del documento. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md deleted file mode 100644 index f706065b9f7..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 637f4e2872c65bc8e73dfe21 -title: Boilerplate HTML Domanda B -challengeType: 15 -dashedName: html-boilerplate-question-b ---- - -# --description-- - -Dopo aver dichiarato il doctype, devi costituire l'elemento ``. Si tratta di quello che è conosciuto come elemento radice (root) del documento, da cui discende ogni altro elemento. - -Ciò diventerà più importante in seguito quando imparerai a manipolare HTML con JavaScript. Per ora sappi che l'elemento `html` dovrebbe essere incluso in ogni documento HTML. - -Tornando al file `index.html`, aggiungi l'elemento `` digitando i suoi tag di apertura e chiusura, in questo modo: - -```html - - - -``` - -## Cos'è l'attributo lang? -`lang` specifica la lingua del contenuto di testo dell'elemento. Questo attributo è utilizzato principalmente per migliorare l'accessibilità della pagina web. Permette alle tecnologie assistive, come i lettori di schermo, di adattarsi in base alla lingua e di utilizzare la pronuncia corretta. - -# --question-- - -## --text-- - -Cos'è l'elemento `html`? - -## --answers-- - -È l'elemento radice del documento e dice al browser quale versione di HTML dovrebbe usare. - ---- - -È l'elemento radice del documento e tutti gli altri elementi dovrebbero discendere da esso. - ---- - -È l'elemento radice del documento e tutti gli altri elementi dovrebbero essere posizionati dopo di esso. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md deleted file mode 100644 index 641ac8ca6b7..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e2f72c65bc8e73dfe22 -title: Boilerplate HTML Domanda C -challengeType: 15 -dashedName: html-boilerplate-question-c ---- - -# --description-- - -L'elemento `` contiene importanti metadati sulle pagine web e le cose necessarie per renderizzarle correttamente nel browser. All'interno dell'``, non dovresti usare nessun elemento che mostri del contenuto nella pagina web. - -## L'elemento meta charset -Il tag `meta` per la codifica dei caratteri (`charset`) della pagina web dovrebbe sempre essere nell'elemento `head`: ``. - -Impostare la codifica è molto importante perché assicura che la pagina web mostri correttamente nel browser simboli speciali e caratteri provenienti da lingue diverse. - -## L'elemento title -Un altro elemento che dovresti sempre includere nell'head di un documento HTML è l'elemento `title`: - -```html -My First Webpage -``` - -L'elemento `title` viene utilizzato per dare alle pagine web un titolo leggibile che viene visualizzato nella scheda della pagina web nel browser. - -Se non includi un elemento `title`, il titolo della pagina web diventa per impostazione predefinita il nome del file. Nel tuo caso sarà `index.html`, che non è molto significativo per gli utenti; ciò potrebbe rendere molto difficile trovare la pagina web se un utente ha molte schede aperte nel browser. - -Ci sono molti altri elementi che possono andare all'interno dell'`head` di un documento HTML. Tuttavia, per ora è fondamentale conoscere solo i due elementi che hai affrontato qui. Introdurrai altri elementi da inserire nell'`head` per tutto il resto del curriculum. - -Tornando al file `index.html`, aggiungi un elemento `head` con un elemento `meta` `charset` e un `title` al suo interno. L'elemento head va all'interno dell'elemento HTML e dovrebbe essere sempre il primo elemento sotto il tag di apertura ``: - - -```html - - - - - - My First Webpage - - -``` - -# --question-- - -## --text-- - -Qual è lo scopo dell'elemento `head`? - -## --answers-- - -L'elemento `head` viene utilizzato per mostrare tutti gli elementi che vengono visualizzati sulla pagina web. - ---- - -L'elemento `head` viene utilizzato per mostrare informazioni importanti sulla pagina web e viene utilizzato per renderizzare correttamente le pagine web tramite elementi `meta`. - ---- - -L'elemento `head` viene utilizzato per mostrare il contenuto dell'intestazione in cima alla pagina web. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md deleted file mode 100644 index e49e25ef71c..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e3672c65bc8e73dfe23 -videoId: V8UAEoOvqFg -title: Boilerplate HTML Domanda D -challengeType: 15 -dashedName: html-boilerplate-question-d ---- - -# --description-- - -L'ultimo elemento necessario per completare il boilerplate HTML è l'elemento ``. È qui che si troverà tutto il contenuto da mostrare agli utenti - testo immagini, elenchi, link e via dicendo. - -Per completare il boilerplate, aggiungi un elemento `body` al file `index.html`. Anche l'elemento `body` va all'interno dell'elemento `html` e si trova sempre al di sotto dell'elemento `head`, così: - -# --question-- - -## --assignment-- - -Guarda e segui passo passo il fantastico video di Kevin Powell Building your first web page. - ---- - -Crea un po' di una memoria muscolare eliminando il contenuto del file `index.html` e cercando di scrivere di nuovo tutto il boilerplate a memoria. Non preoccuparti se devi sbirciare il contenuto della lezione se le prime volte resti bloccato. Continua finché non riesci a farlo un paio di volte a memoria. - ---- - -Controlla il tuo boilerplate con questo [validatore HTML](https://www.freeformatter.com/html-validator.html). I validatori garantiscono che il tuo markup sia corretto e sono uno strumento di apprendimento eccellente, in quanto forniscono un feedback sugli errori di sintassi che potresti commettere senza rendertene conto, come tag di chiusura mancanti e spazi aggiuntivi nel tuo HTML. - -## --text-- - -Che cos'è l'elemento `body`? - -## --answers-- - -È dove vengono visualizzate tutte le informazioni importanti di una pagina web come i tag `title` e `meta`. - ---- - -È il posto in cui dire al browser come renderizzare correttamente la pagina. - ---- - -È dove tutti i contenuti come immagini, testi e link saranno mostrati sulla pagina. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md deleted file mode 100644 index a3a7eb63a15..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 6374f208de18c50e48ba767b -title: Introduzione a HTML e CSS Domanda A -challengeType: 15 -dashedName: introduction-to-html-and-css-question-a ---- - -# --description-- - -HTML e CSS sono due linguaggi che lavorano insieme per creare tutto ciò che si vede quando si guarda qualcosa su internet. L'HTML è costituito dai dati grezzi di cui è fatta una pagina web. Tutto il testo, i collegamenti, le caselle, gli elenchi e i pulsanti sono creati in HTML. Il CSS è ciò che aggiunge stile a questi semplici elementi. L'HTML mette le informazioni su una pagina web e il CSS le posiziona, dà loro colore, ne cambia il carattere e le rende fantastiche! - -Molte risorse utili in circolazione continuano a riferirsi a HTML e CSS come linguaggi di programmazione, ma se si vuole essere tecnici, etichettarli in questo modo non è molto accurato. Questo perché si occupano solo di presentare informazioni. Non sono utilizzati per programmare la logica. JavaScript, che imparerai nella prossima sezione, è un linguaggio di programmazione perché è usato per aggiungere funzionalità alle pagine web. Tuttavia, c'è un bel po' di roba che si può fare con solo HTML e CSS e avrai sicuramente bisogno di entrambi. Durante tutto il nostro curriculum, le seguenti lezioni si concentreranno sul darti gli strumenti necessari per farcela una volta raggiunto il contenuto JavaScript. - -# --question-- - -## --assignment-- - -Leggi l'articolo the HTML vs CSS vs JavaScript. Si tratta di una rapida panoramica delle relazioni tra HTML, CSS e JavaScript. - -## --text-- - -Quale delle seguenti affermazioni è vera? - -## --answers-- - -Il CSS è usato per creare la struttura di base di una pagina web e l'HTML viene utilizzato per aggiungere stile. - ---- - -L'HTML viene utilizzato per creare la struttura di base di una pagina web e il CSS viene utilizzato per aggiungere stile. - ---- - -HTML e CSS vengono utilizzati per aggiungere stile a una pagina web e JavaScript viene utilizzato per creare la struttura di base. - - -## --video-solution-- - -2 - - diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md deleted file mode 100644 index 4c14fa931e0..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 6376327e2724a688c04636e3 -title: Introduzione a HTML e CSS Domanda B -challengeType: 15 -dashedName: introduction-to-html-and-css-question-b ---- - -# --description-- - - -HTML e CSS sono due linguaggi che lavorano insieme per creare tutto ciò che si vede quando si guarda qualcosa su internet. L'HTML è costituito dai dati grezzi di cui è fatta una pagina web. Tutto il testo, i collegamenti, le caselle, gli elenchi e i pulsanti sono creati in HTML. Il CSS è ciò che aggiunge stile a questi semplici elementi. L'HTML mette le informazioni su una pagina web e il CSS le posiziona, dà loro colore, ne cambia il carattere e le rende fantastiche! - -Molte risorse utili in circolazione continuano a riferirsi a HTML e CSS come linguaggi di programmazione, ma se si vuole essere tecnici, etichettarli in questo modo non è molto accurato. Questo perché si occupano solo di presentare informazioni. Non sono utilizzati per programmare la logica. JavaScript, che imparerai nella prossima sezione, è un linguaggio di programmazione perché è usato per aggiungere funzionalità alle pagine web. Tuttavia, c'è un bel po' di roba che si può fare con solo HTML e CSS e avrai sicuramente bisogno di entrambi. Durante tutto il nostro curriculum, le seguenti lezioni si concentreranno sul darti gli strumenti necessari per farcela una volta raggiunto il contenuto JavaScript. - -# --question-- - -## --text-- - -Tra HTML e CSS, che dovresti usare per aggiungere paragrafi di testo su una pagina web? - -## --answers-- - -CSS - ---- - -JavaScript - ---- - -HTML - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md deleted file mode 100644 index 5ee8021f189..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 637633162724a688c04636e4 -title: Introduzione a HTML e CSS Domanda C -challengeType: 15 -dashedName: introduction-to-html-and-css-question-c ---- - -# --description-- - -HTML e CSS sono due linguaggi che lavorano insieme per creare tutto ciò che si vede quando si guarda qualcosa su internet. L'HTML è costituito dai dati grezzi di cui è fatta una pagina web. Tutto il testo, i collegamenti, le caselle, gli elenchi e i pulsanti sono creati in HTML. Il CSS è ciò che aggiunge stile a questi semplici elementi. L'HTML mette le informazioni su una pagina web e il CSS le posiziona, dà loro colore, ne cambia il carattere e le rende fantastiche! - -Molte risorse utili in circolazione continuano a riferirsi a HTML e CSS come linguaggi di programmazione, ma se si vuole essere tecnici, etichettarli in questo modo non è molto accurato. Questo perché si occupano solo di presentare informazioni. Non sono utilizzati per programmare la logica. JavaScript, che imparerai nella prossima sezione, è un linguaggio di programmazione perché è usato per aggiungere funzionalità alle pagine web. Tuttavia, c'è un bel po' di roba che si può fare con solo HTML e CSS e avrai sicuramente bisogno di entrambi. Durante tutto il nostro curriculum, le seguenti lezioni si concentreranno sul darti gli strumenti necessari per farcela una volta raggiunto il contenuto JavaScript. -# --question-- - -## --text-- - -Tra HTML e CSS, che dovresti usare per cambiare il carattere e il colore di sfondo di un pulsante? - -## --answers-- - -Dovresti usare CSS per cambiare il colore di sfondo e il carattere di un pulsante. - ---- - -Dovresti usare JavaScript per cambiare il colore di sfondo e il carattere di un pulsante. - ---- - -Dovresti usare HTML per cambiare il colore di sfondo e il carattere di un pulsante. - -## --video-solution-- - -1 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md deleted file mode 100644 index d1238368a27..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 637633672724a688c04636e5 -title: Introduzione a HTML e CSS Domanda D -challengeType: 15 -dashedName: introduction-to-html-and-css-question-d ---- - -# --description-- - -HTML e CSS sono due linguaggi che lavorano insieme per creare tutto ciò che si vede quando si guarda qualcosa su internet. L'HTML è costituito dai dati grezzi di cui è fatta una pagina web. Tutto il testo, i collegamenti, le caselle, gli elenchi e i pulsanti sono creati in HTML. Il CSS è ciò che aggiunge stile a questi semplici elementi. L'HTML mette le informazioni su una pagina web e il CSS le posiziona, dà loro colore, ne cambia il carattere e le rende fantastiche! - -Molte risorse utili in circolazione continuano a riferirsi a HTML e CSS come linguaggi di programmazione, ma se si vuole essere tecnici, etichettarli in questo modo non è molto accurato. Questo perché si occupano solo di presentare informazioni. Non sono utilizzati per programmare la logica. JavaScript, che imparerai nella prossima sezione, è un linguaggio di programmazione perché è usato per aggiungere funzionalità alle pagine web. Tuttavia, c'è un bel po' di roba che si può fare con solo HTML e CSS e avrai sicuramente bisogno di entrambi. Durante tutto il nostro curriculum, le seguenti lezioni si concentreranno sul darti gli strumenti necessari per farcela una volta raggiunto il contenuto JavaScript. - -# --question-- - -## --text-- - -Qual è la differenza tra HTML, CSS e JavaScript? - -## --answers-- - -L'HTML è per la creazione di elementi interattivi, il CSS è per l'aspetto estetico, e JavaScript è per la creazione della struttura di una pagina web. - ---- - -Il CSS è per l'aspetto estetico, JavaScript è per la creazione di elementi interattivi, e l'HTML è per la creazione della struttura di una pagina web. - ---- - -JavaScript è per l'aspetto estetico, il CSS è per creare la struttura, e l'HTML è per creare gli elementi interattivi di una pagina web. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md deleted file mode 100644 index 2834e6c799b..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f704072c65bc8e73dfe36 -videoId: tsEQgGjSmkM -title: Link e Immagini Domanda A -challengeType: 15 -dashedName: links-and-images-question-a ---- - -# --description-- - -Per prendere la mano con l'utilizzo di link e immagini, in questa lezione avrai bisogno di un progetto HTML su cui lavorare. - -- Crea una nuova cartella chiamata `odin-links-and-images`. - -- All'interno di questa cartella crea un nuovo file chiamato `index.html`. - -- Inserisci il solito boilerplate HTML. - -- Infine, aggiungi il seguente `h1` al `body`: `

                                        Homepage

                                        ` - -## Elementi di ancoraggio -Per creare un link in HTML, si utilizza l'elemento di ancoraggio. Un elemento di ancoraggio viene definito racchiudendo in un tag `` il testo o un altro elemento HTML che si desidera trasformare in un link. Aggiungi quanto segue al `body` della pagina `index.html` che hai creato e aprila nel browser: - -```html -click me -``` - -Potresti aver notato che se fai clic su questo link non accade nulla. Questo perché un tag di ancoraggio da solo non sa a cosa vuoi collegarti. Occorre fornirgli una destinazione verso cui andare. E lo si fa utilizzando un attributo HTML. - -Un attributo HTML fornisce informazioni aggiuntive a un elemento HTML e va sempre nel tag di apertura dell'elemento. Di solito, un attributo è composto da due parti: un nome e un valore; tuttavia, non tutti gli attributi richiedono un valore. Nel tuo caso, devi aggiungere un attributo `href` (hyperlink reference) al tag di ancoraggio di apertura. Il valore dell'attributo `href` corrisponde alla destinazione del collegamento. - -Aggiungi il seguente attributo `href` all'elemento di ancoraggio che hai creato in precedenza e riprova a cliccarlo, non dimenticare di aggiornare il browser in modo che le nuove modifiche possano essere applicate. - -```html -click me -``` - -Per impostazione predefinita, qualsiasi testo avvolto con un tag di ancoraggio senza un attributo `href` apparirà come del testo semplice. Se l'attributo `href` è presente, il browser darà al testo un colore blu e lo sottolineerà per indicare che è un link. - -Vale la pena notare che è possibile utilizzare tag di ancoraggio per linkare qualsiasi tipo di risorsa su internet, non solo altri documenti HTML. È possibile linkare video, file pdf, immagini e così via, ma per la maggior parte dei casi avrai a che fare con altri documenti HTML. - -# --question-- - -## --assignment-- - -Guarda il video HTML links di Kevin Powell qui sopra. - -## --text-- - -Che tag HTML viene utilizzato per creare un link? - -## --answers-- - -`` - ---- - -`

                                        ` - ---- - -`

                                          ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md deleted file mode 100644 index 47fa6a4a4ab..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f703572c65bc8e73dfe35 -title: Link e Immagini Domanda B -challengeType: 15 -dashedName: links-and-images-question-b ---- - -# --description-- - -Per prendere la mano con l'utilizzo di link e immagini, in questa lezione avrai bisogno di un progetto HTML su cui lavorare. - -- Crea una nuova cartella chiamata `odin-links-and-images`. - -- All'interno di questa cartella crea un nuovo file chiamato `index.html`. - -- Inserisci il solito boilerplate HTML. - -- infine, aggiungi il seguente `h1` al `body`: `

                                          Homepage

                                          ` - -## Elementi di ancoraggio -Per creare un link in HTML, si utilizza l'elemento di ancoraggio. Un elemento di ancoraggio viene definito racchiudendo in un tag `                                          ` il testo o un altro elemento HTML che si desidera trasformare in un link. Aggiungi quanto segue al `body` della pagina `index.html` che hai creato e aprila nel browser: - -```html -click me -``` - -Potresti aver notato che se fai clic su questo link non accade nulla. Questo perché un tag di ancoraggio da solo non sa a cosa vuoi collegarti. Occorre fornirgli una destinazione verso cui andare. E lo si fa utilizzando un attributo HTML. Un attributo HTML fornisce informazioni aggiuntive a un elemento HTML e va sempre nel tag di apertura dell'elemento. Di solito, un attributo è composto da due parti: un nome e un valore; tuttavia, non tutti gli attributi richiedono un valore. Nel tuo caso, devi aggiungere un attributo `href` (hyperlink reference) al tag di ancoraggio di apertura. Il valore dell'attributo `href` corrisponde alla destinazione del collegamento. Aggiungi il seguente attributo `href` all'elemento di ancoraggio che hai creato in precedenza e riprova a cliccarlo, non dimenticare di aggiornare il browser in modo che le nuove modifiche possano essere applicate. - -```html -click me -``` - -Per impostazione predefinita, qualsiasi testo avvolto con un tag di ancoraggio senza un attributo `href` apparirà come del testo semplice. Se l'attributo `href` è presente, il browser darà al testo un colore blu e lo sottolineerà per indicare che è un link. Vale la pena notare che è possibile utilizzare tag di ancoraggio per linkare qualsiasi tipo di risorsa su internet, non solo altri documenti HTML. È possibile linkare video, file pdf, immagini e così via, ma per la maggior parte dei casi avrai a che fare con altri documenti HTML. - -# --question-- -## --text-- - -Cos'è un attributo? -## --answers-- - -Un attributo HTML fornisce informazioni aggiuntive a un elemento HTML e va sempre nel tag di chiusura dell'elemento. - ---- - -Un attributo HTML viene utilizzato per dire al browser cosa contiene l'elemento. - ---- - -Un attributo HTML fornisce informazioni aggiuntive a un elemento HTML e va sempre nel tag di apertura dell'elemento. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md deleted file mode 100644 index f587116f75c..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 637f703072c65bc8e73dfe34 -title: Link e Immagini Domanda C -challengeType: 15 -dashedName: links-and-images-question-c ---- - -# --description-- - -Per prendere la mano con l'utilizzo di link e immagini, in questa lezione avrai bisogno di un progetto HTML su cui lavorare. - -- Crea una nuova cartella chiamata `odin-links-and-images`. - -- All'interno di questa cartella crea un nuovo file chiamato `index.html`. - -- Inserisci il solito boilerplate HTML. - -- infine, aggiungi il seguente `h1` al `body`: `

                                          Homepage

                                          ` - -## Elementi di ancoraggio -Per creare un link in HTML, si utilizza l'elemento di ancoraggio. Un elemento di ancoraggio viene definito racchiudendo in un tag `` il testo o un altro elemento HTML che si desidera trasformare in un link. Aggiungi quanto segue al `body` della pagina `index.html` che hai creato e aprila nel browser: - -```html -click me -``` - -Potresti aver notato che se fai clic su questo link non accade nulla. Questo perché un tag di ancoraggio da solo non sa a cosa vuoi collegarti. Occorre fornirgli una destinazione verso cui andare. E lo si fa utilizzando un attributo HTML. Un attributo HTML fornisce informazioni aggiuntive a un elemento HTML e va sempre nel tag di apertura dell'elemento. Di solito, un attributo è composto da due parti: un nome e un valore; tuttavia, non tutti gli attributi richiedono un valore. Nel tuo caso, devi aggiungere un attributo `href` (hyperlink reference) al tag di ancoraggio di apertura. Il valore dell'attributo `href` corrisponde alla destinazione del collegamento. Aggiungi il seguente attributo `href` all'elemento di ancoraggio che hai creato in precedenza e riprova a cliccarlo, non dimenticare di aggiornare il browser in modo che le nuove modifiche possano essere applicate. - -```html -click me -``` - -Per impostazione predefinita, qualsiasi testo avvolto con un tag di ancoraggio senza un attributo `href` apparirà come del testo semplice. Se l'attributo `href` è presente, il browser darà al testo un colore blu e lo sottolineerà per indicare che è un link. Vale la pena notare che è possibile utilizzare tag di ancoraggio per linkare qualsiasi tipo di risorsa su internet, non solo altri documenti HTML. È possibile linkare video, file pdf, immagini e così via, ma per la maggior parte dei casi avrai a che fare con altri documenti HTML. - -# --question-- - -## --text-- - -Quale attributo dice ai link dove andare? - -## --answers-- - -`src` - ---- - -`href` - ---- - -`link` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md deleted file mode 100644 index ba6b0a2709a..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 637f702872c65bc8e73dfe33 -videoId: ta3Oxx7Yqbo -title: Link e Immagini Domanda D -challengeType: 15 -dashedName: links-and-images-question-d ---- - -# --description-- - - -Generalmente, ci sono due tipi di link che puoi creare: - -- Link a pagine o altri siti web su internet - -- Link a pagine situate sul tuo sito web - - -## Link assoluti -I link alle pagine di altri siti web su internet sono chiamati link assoluti. Un tipico link assoluto è costituito dalle seguenti parti: `protocol://domain/path`. Un link assoluto conterrà sempre il protocollo e il dominio della destinazione. - -Hai già visto un link assoluto in azione. Il link alla pagina About di The Odin Project che hai creato in precedenza era un link assoluto, in quanto contiene il protocollo e il dominio. - -`https://www.theodinproject.com/about` - -## Link relativi -I link ad altre pagine all'interno del tuo sito web sono chiamati link relativi. I link relativi non includono il nome del dominio, poiché si tratta di un'altra pagina sullo stesso sito e si suppone che il nome del dominio sia lo stesso della pagina su cui è stato creato il collegamento. - -I link relativi includono solo il percorso del file all'altra pagina, rispetto alla pagina in cui si sta creando il collegamento. Piuttosto astratto, quindi vediamo come funziona con un esempio. - -All'interno della cartella `odin-links-and-images`, crea un altro file HTML chiamato `about.html` e incolla al suo interno il seguente codice: - -```html - - - - - Odin Links and Images - - - -

                                          About Page

                                          - - -``` - -Tornando alla pagina `index`, aggiungi il seguente elemento di ancoraggio per creare un link alla pagina `about`: - -```html - -

                                          Homepage

                                          - click me - - About - -``` - -Apri il file `index.html` nel browser e clicca sul link ad about per assicurarti che tutto sia collegato correttamente. Cliccare sul link dovrebbe portarti alla pagina `about` che hai appena creato. - -Questo funziona perché le pagine `index` e `about` sono nella stessa cartella. Ciò vuol dire che puoi usare semplicemente il suo nome (`about.html`) come valore di `href` del link. - -Ma di solito è bene organizzare le cartelle di un sito un po' meglio. Normalmente dovresti avere solo il file `index.html` nella cartella root e tutti gli altri file HTML nella propria cartella. - -Crea una cartella chiamata `pages` all'interno della cartella `odin-links-and-images` e sposta il file `about.html` nella nuova cartella. - -Ricarica la pagina `index` nel browser e poi clicca sul link ad `about`. Adesso non funzionerà. Questo perché la posizione del file della pagina `about` è cambiata. - -Per risolvere questo problema, devi solo aggiornare il valore `href` del link ad `about` includendo la cartella `pages/` dato che questa è la nuova posizione del file `about.html` relativa al file `index.html`. - -```html - -

                                          Homepage

                                          - About - -``` - -Ricarica la pagina `index` nel browser e prova a cliccare ancora sul link ad `about`, adesso dovrebbe essere tornato in funzione. - -In molti casi, sarà sufficiente; tuttavia, con questo approccio potresti ancora imbatterti in problemi inaspettati. Anteporre `./` al link preverrà tali errori nella maggior parte dei casi. Aggiungendo `./` stai specificando al tuo codice che dovrebbe iniziare a cercare il file o la cartella rispetto alla cartella **attuale**. - -```html - -

                                          Homepage

                                          - About - -``` - -# --question-- - -## --assignment-- - -Guarda il video HTML File Structure di Kevin Powell qui sopra. - -## --text-- - -Qual è la differenza tra un link assoluto e un link relativo? - -## --answers-- - -Un link assoluto è un link a un'altra pagina del sito corrente. Un link relativo è un link a un altro sito web. - ---- - -Un link assoluto è un link a un altro sito web. Un link relativo è un link un'altra pagina sul sito web corrente. - ---- - -Non c'è differenza tra i link assoluti e relativi. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md deleted file mode 100644 index 927d2c69afa..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 637f702372c65bc8e73dfe32 -videoId: 0xoztJCHpbQ -title: Link e Immagini Domanda E -challengeType: 15 -dashedName: links-and-images-question-e ---- - -# --description-- - -I siti web sarebbero abbastanza noiosi se si potesse visualizzare solo del testo. Fortunatamente l'HTML fornisce una grande varietà di elementi per la visualizzazione di contenuti di ogni sorta. Tra questi il più utilizzato è l'elemento immagine. - -Per visualizzare un'immagine in HTML si utilizza l'elemento ``. A differenza degli altri elementi che hai incontrato, l'elemento `` è a chiusura automatica. Gli elementi HTML vuoti, o a chiusura automatica, non necessitano di un tag di chiusura. - -Invece di racchiudere il contenuto tra un tag di apertura e uno di chiusura, incorpora un'immagine nella pagina usando un attributo `src` che indica al browser dove si trova il file dell'immagine. L'attributo `src` funziona in modo simile all'attributo `href` per i tag di ancoraggio. Può incorporare un'immagine usando sia percorsi assoluti che relativi. - -Ad esempio, utilizzando un percorso assoluto è possibile visualizzare un'immagine situata sul sito di The Odin Project: - - - -Per utilizzare le immagini che hai sui tuoi siti web, puoi usare un percorso relativo. - -- Crea una nuova cartella chiamata `images` all'interno del progetto `odin-links-and-images`. - -- Poi scarica [questa immagine](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e spostala nella cartella `images` che hai appena creato. - -- Rinomina l'immagine in `dog.jpg`. - -Infine aggiungi l'immagine al file `index.html`: - -```html - -

                                          Homepage

                                          - click me - - About - - - -``` - -Salva il file `index.html` e aprilo in un browser per vedere Charles in tutta la sua gloria. - - -## Cartelle genitori - -E se volessi utilizzare l'immagine del cane nella pagina `about`? Dovresti salire di un livello dalla cartella pages fino alla sua cartella genitore in modo da poter accedere alla cartella images. - -Per passare alla cartella genitore devi usare due punti nel percorso relativo, così: `../.` Vediamo come funziona: all'interno del `body` del file `about.html`, aggiungi la seguente immagine sotto l'intestazione che hai aggiunto precedentemente: - -```html - -``` - -Analizziamo questo passaggio: - -- Prima di tutto, stai passando alla cartella genitore della cartella pages, che è `odin-links-and-images`. - -- Poi, dalla cartella genitore puoi passare alla cartella `images`. - -- Infine, puoi accedere al file `dog.jpg`. - -Usando la metafora che abbiamo utilizzato prima, usare `../` nel percorso è un po' come uscire dalla stanza in cui ti trovi per andare nel corridoio e poter accedere a un'altra stanza. - -## Attributo `Alt` - -Oltre all'attributo `src`, ogni elemento di immagine dovrebbe avere anche un attributo `alt` (testo alternativo). - -L'attributo `alt` viene usato per descrivere un'immagine. Viene usato al posto dell'immagine nel caso questa non possa essere caricata. Viene utilizzato anche dai lettori di schermo per descrivere l'immagine agli utenti ipovedenti. - -Ecco come risulta l'esempio che hai usato precedentemente del logo di The Odin Project con un attributo `alt` incluso: - - -# --question-- - -## --assignment-- - -Guarda il video HTML Images di Kevin Powell qui sopra. - -## --text-- - -Quale tag è usato per mostrare un'immagine? - -## --answers-- - -`` - ---- - -`` - ---- - -`` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md deleted file mode 100644 index 53643179ddc..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701c72c65bc8e73dfe31 -title: Link e Immagini Domanda F -challengeType: 15 -dashedName: links-and-images-question-f ---- - -# --description-- - -I siti web sarebbero abbastanza noiosi se si potesse visualizzare solo del testo. Fortunatamente l'HTML fornisce una grande varietà di elementi per la visualizzazione di contenuti di ogni sorta. Tra questi il più utilizzato è l'elemento immagine. - -Per visualizzare un'immagine in HTML si utilizza l'elemento ``. A differenza degli altri elementi che hai incontrato, l'elemento `` è a chiusura automatica. Gli elementi HTML vuoti, o a chiusura automatica, non necessitano di un tag di chiusura. - -Invece di racchiudere il contenuto tra un tag di apertura e uno di chiusura, incorpora un'immagine nella pagina usando un attributo `src` che indica al browser dove si trova il file dell'immagine. L'attributo `src` funziona in modo simile all'attributo `href` per i tag di ancoraggio. Può incorporare un'immagine usando sia percorsi assoluti che relativi. - -Ad esempio, utilizzando un percorso assoluto è possibile visualizzare un'immagine situata sul sito di The Odin Project: - - - -Per utilizzare le immagini che hai sui tuoi siti web, puoi usare un percorso relativo. - -- Crea una nuova cartella chiamata `images` all'interno del progetto `odin-links-and-images`. - -- Poi scarica [questa immagine](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e spostala nella cartella images che hai appena creato. - -- Rinomina l'immagine in `dog.jpg`. - -Infine aggiungi l'immagine al file `index.html`: - -```html - -

                                          Homepage

                                          -                                           click me - - About - - - -``` - -Salva il file `index.html` e aprilo in un browser per vedere Charles in tutta la sua gloria. - - -## Cartelle genitori - -E se volessi utilizzare l'immagine del cane nella pagina `about`? Dovresti salire di un livello dalla cartella pages fino alla sua cartella genitore in modo da poter accedere alla cartella images. - -Per passare alla cartella genitore devi usare due punti nel percorso relativo, così: `../.` Vediamo come funziona: all'interno del `body` del file `about.html`, aggiungi la seguente immagine sotto l'intestazione che hai aggiunto precedentemente: - -```html - -``` - -Analizziamo questo passaggio: - -- Prima di tutto, stai passando alla cartella genitore della cartella pages, che è `odin-links-and-images`. - -- Poi, dalla cartella genitore puoi passare alla cartella `images`. - -- Infine, puoi accedere al file `dog.jpg`. - -Usando la metafora che abbiamo utilizzato prima, usare `../` nel percorso è un po' come uscire dalla stanza in cui ti trovi per andare nel corridoio e poter accedere a un'altra stanza. - -## Attributo alt - -Oltre all'attributo `src`, ogni elemento di immagine dovrebbe avere anche un attributo `alt` (testo alternativo). - -L'attributo `alt` viene usato per descrivere un'immagine. Viene usato al posto dell'immagine nel caso questa non possa essere caricata. Viene utilizzato anche dai lettori di schermo per descrivere l'immagine agli utenti ipovedenti. - -Ecco come risulta l'esempio che hai usato precedentemente del logo di The Odin Project con un attributo alt incluso: - - -# --question-- - -## --text-- - -Di quali due attributi hanno sempre bisogno le immagini? - -## --answers-- - -`href` e `alt` - ---- - -`name` e `href` - ---- - -`alt` e `src` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md deleted file mode 100644 index 92a557776b8..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701572c65bc8e73dfe30 -title: Link e Immagini Domanda G -challengeType: 15 -dashedName: links-and-images-question-g ---- - -# --description-- - -I siti web sarebbero abbastanza noiosi se si potesse visualizzare solo del testo. Fortunatamente l'HTML fornisce una grande varietà di elementi per la visualizzazione di contenuti di ogni sorta. Tra questi il più utilizzato è l'elemento immagine. - -Per visualizzare un'immagine in HTML si utilizza l'elemento ``. A differenza degli altri elementi che hai incontrato, l'elemento `` è a chiusura automatica. Gli elementi HTML vuoti, o a chiusura automatica, non necessitano di un tag di chiusura. - -Invece di racchiudere il contenuto tra un tag di apertura e uno di chiusura, incorpora un'immagine nella pagina usando un attributo `src` che indica al browser dove si trova il file dell'immagine. L'attributo `src` funziona in modo simile all'attributo `href` per i tag di ancoraggio. Può incorporare un'immagine usando sia percorsi assoluti che relativi. - -Ad esempio, utilizzando un percorso assoluto è possibile visualizzare un'immagine situata sul sito di The Odin Project: - - - -Per utilizzare le immagini che hai sui tuoi siti web, puoi usare un percorso relativo. - -- Crea una nuova cartella chiamata `images` all'interno del progetto `odin-links-and-images`. - -- Poi scarica [questa immagine](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e spostala nella cartella images che hai appena creato. - -- Rinomina l'immagine in `dog.jpg`. - -Infine aggiungi l'immagine al file `index.html`: - -```html - -

                                          Homepage

                                          - click me - - About - - - -``` - -Salva il file `index.html` e aprilo in un browser per vedere Charles in tutta la sua gloria. - - -## Cartelle genitori - -E se volessi utilizzare l'immagine del cane nella pagina `about`? Dovresti salire di un livello dalla cartella pages fino alla sua cartella genitore in modo da poter accedere alla cartella images. - -Per passare alla cartella genitore devi usare due punti nel percorso relativo, così: `../.` Vediamo come funziona: all'interno del `body` del file `about.html`, aggiungi la seguente immagine sotto l'intestazione che hai aggiunto precedentemente: - -```html - -``` - -Analizziamo questo passaggio: - -- Prima di tutto, stai passando alla cartella genitore della cartella pages, che è `odin-links-and-images`. - -- Poi, dalla cartella genitore puoi passare alla cartella `images`. - -- Infine, puoi accedere al file `dog.jpg`. - -Usando la metafora che abbiamo utilizzato prima, usare `../` nel percorso è un po' come uscire dalla stanza in cui ti trovi per andare nel corridoio e poter accedere a un'altra stanza. - -## Attributo alt - -Oltre all'attributo `src`, ogni elemento di immagine dovrebbe avere anche un attributo `alt` (testo alternativo). - -L'attributo `alt` viene usato per descrivere un'immagine. Viene usato al posto dell'immagine nel caso questa non possa essere caricata. Viene utilizzato anche dai lettori di schermo per descrivere l'immagine agli utenti ipovedenti. - -Ecco come risulta l'esempio che hai usato precedentemente del logo di The Odin Project con un attributo alt incluso: - - -# --question-- - -## --text-- - -Come si accede a una cartella genitore in un percorso? - -## --answers-- - -`../` - ---- - -`./` - ---- - -`.../` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md deleted file mode 100644 index a2a7fb89808..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 637f700b72c65bc8e73dfe2f -title: Link e Immagini Domanda H -challengeType: 15 -dashedName: links-and-images-question-h ---- - -# --description-- - -I siti web sarebbero abbastanza noiosi se si potesse visualizzare solo del testo. Fortunatamente l'HTML fornisce una grande varietà di elementi per la visualizzazione di contenuti di ogni sorta. Tra questi il più utilizzato è l'elemento immagine. - -Per visualizzare un'immagine in HTML si utilizza l'elemento ``. A differenza degli altri elementi che hai incontrato, l'elemento `` è a chiusura automatica. Gli elementi HTML vuoti, o a chiusura automatica, non necessitano di un tag di chiusura. - -Invece di racchiudere il contenuto tra un tag di apertura e uno di chiusura, incorpora un'immagine nella pagina usando un attributo `src` che indica al browser dove si trova il file dell'immagine. L'attributo `src` funziona in modo simile all'attributo `href` per i tag di ancoraggio. Può incorporare un'immagine usando sia percorsi assoluti che relativi. - -Ad esempio, utilizzando un percorso assoluto è possibile visualizzare un'immagine situata sul sito di The Odin Project: - - - -Per utilizzare le immagini che hai sui tuoi siti web, puoi usare un percorso relativo. - -- Crea una nuova cartella chiamata `images` all'interno del progetto `odin-links-and-images`. - -- Poi scarica [questa immagine](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e spostala nella cartella images che hai appena creato. - -- Rinomina l'immagine in `dog.jpg`. - -Infine aggiungi l'immagine al file `index.html`: - -```html - -

                                          Homepage

                                          - click me - - About - - - -``` - -Salva il file `index.html` e aprilo in un browser per vedere Charles in tutta la sua gloria. - - -## Cartelle genitori - -E se volessi utilizzare l'immagine del cane nella pagina `about`? Dovresti salire di un livello dalla cartella pages fino alla sua cartella genitore in modo da poter accedere alla cartella images. - -Per passare alla cartella genitore devi usare due punti nel percorso relativo, così: `../.` Vediamo come funziona: all'interno del `body` del file `about.html`, aggiungi la seguente immagine sotto l'intestazione che hai aggiunto precedentemente: - -```html - -``` - -Analizziamo questo passaggio: - -- Prima di tutto, stai passando alla cartella genitore della cartella pages, che è `odin-links-and-images`. - -- Poi, dalla cartella genitore puoi passare alla cartella `images`. - -- Infine, puoi accedere al file `dog.jpg`. - -Usando la metafora che abbiamo utilizzato prima, usare `../` nel percorso è un po' come uscire dalla stanza in cui ti trovi per andare nel corridoio e poter accedere a un'altra stanza. - -## Attributo alt - -Oltre all'attributo `src`, ogni elemento di immagine dovrebbe avere anche un attributo `alt` (testo alternativo). - -L'attributo `alt` viene usato per descrivere un'immagine. Viene usato al posto dell'immagine nel caso questa non possa essere caricata. Viene utilizzato anche dai lettori di schermo per descrivere l'immagine agli utenti ipovedenti. - -Ecco come risulta l'esempio che hai usato precedentemente del logo di The Odin Project con un attributo alt incluso: - - -# --question-- - -## --assignment-- - -Leggi dei quattro principali formati immagine che possono essere usati sul web. - -## --text-- - -Quali sono i quattro principali formati di immagine che è possibile utilizzare per le immagini sul web? - -## --answers-- - -TIFF, GIF, PNG e SVG. - ---- - -JPG, PNG, GIF e SVG. - ---- - -JPG, PDF, SVG e GIF. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md deleted file mode 100644 index 7651763f0a2..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e3e72c65bc8e73dfe24 -videoId: kcHKFZBVtf4 -title: Capire le Liste Ordinate e Non Ordinate Domanda A -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-a ---- - -# --description-- - -Se vuoi creare una lista di elementi in cui l'ordine non conta, come una lista della spesa in cui gli elementi possono essere comprati in qualsiasi ordine, allora puoi usare una lista non ordinata. - -Le liste non ordinate (unordered list) vengono create usando l'elemento `
                                            ` e ogni elemento della lista viene creato usando l'elemento list item `
                                          • `. - -Ogni elemento della lista in una lista non ordinata inizia con un punto di elenco: - - - -Se invece vuoi creare una lista di elementi in cui l'ordine conta, come delle istruzioni passo passo per una ricetta o la top 10 dei tuoi show televisivi preferiti, allora puoi usare una lista ordinata. - -Le liste ordinate (ordered list) vengono create utilizzando l'elemento `
                                              `. Ogni elemento al loro interno viene sempre creato con un elemento list item `
                                            1. `. Però ogni elemento di una lista ordinata inizia con un numero: - - - -# --question-- - -## --assignment-- - -Guarda i primi tre minuti del video di Kevin Powell sulle liste ordinate e non ordinate qui sopra. - ---- - -Crea una lista della spesa non ordinata dei tuoi cibi preferiti. - ---- - -Crea una lista ordinata delle attività da portare a termine oggi. - ---- - -Crea una lista non ordinata di luoghi che vorresti visitare un giorno. - ---- - -Crea una lista ordinata dei tuoi 5 videogiochi o film preferiti di tutti i tempi. - -## --text-- - -Che tag HTML viene utilizzato per creare una lista non ordinata? - -## --answers-- - -`
                                            2. ` - ---- - -`
                                                ` - ---- - -`
                                                  ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md deleted file mode 100644 index 07c11e42d6d..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e4672c65bc8e73dfe25 -title: Capire le Liste Ordinate e Non Ordinate Domanda B -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-b ---- - -# --description-- - -Se vuoi creare una lista di elementi in cui l'ordine non conta, come una lista della spesa in cui gli elementi possono essere comprati in qualsiasi ordine, allora puoi usare una lista non ordinata. - -Le liste non ordinate (unordered list) vengono create usando l'elemento `
                                                    ` e ogni elemento della lista viene creato usando l'elemento list item `
                                                  • `. - -Ogni elemento della lista in una lista non ordinata inizia con un punto di elenco: - - - -Se invece vuoi creare una lista di elementi in cui l'ordine conta, come delle istruzioni passo passo per una ricetta o la top 10 dei tuoi show televisivi preferiti, allora puoi usare una lista ordinata. - -Le liste ordinate (ordered list) vengono create utilizzando l'elemento `
                                                      `. Ogni elemento al loro interno viene sempre creato con un elemento list item `
                                                    1. `. Però ogni elemento di una lista ordinata inizia con un numero: - - - -# --question-- - -## --text-- - -Che tag HTML viene utilizzato per creare una lista ordinata? - -## --answers-- - -`
                                                        ` - ---- - -`
                                                      1. ` - ---- - -`
                                                          ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md deleted file mode 100644 index e9e0bc6cad4..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e5172c65bc8e73dfe26 -title: Capire le Liste Ordinate e Non Ordinate Domanda C -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-c ---- - -# --description-- - -Se vuoi creare una lista di elementi in cui l'ordine non conta, come una lista della spesa in cui gli elementi possono essere comprati in qualsiasi ordine, allora puoi usare una lista non ordinata. - -Le liste non ordinate (unordered list) vengono create usando l'elemento `
                                                            ` e ogni elemento della lista viene creato usando l'elemento list item `
                                                          • `. - -Ogni elemento della lista in una lista non ordinata inizia con un punto di elenco: - - - -Se invece vuoi creare una lista di elementi in cui l'ordine conta, come delle istruzioni passo passo per una ricetta o la top 10 dei tuoi show televisivi preferiti, allora puoi usare una lista ordinata. - -Le liste ordinate (ordered list) vengono create utilizzando l'elemento `
                                                              `. Ogni elemento al loro interno viene sempre creato con un elemento list item `
                                                            1. `. Però ogni elemento di una lista ordinata inizia con un numero: - - - -# --question-- - -## --text-- - -Quale tag HTML viene utilizzato per creare elementi di lista sia in liste non ordinata che in liste ordinate? - -## --answers-- - -`
                                                                ` - ---- - -`
                                                              1. ` - ---- - -`
                                                                  ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md deleted file mode 100644 index 0a89917e261..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 637f4e5872c65bc8e73dfe27 -videoId: yqcd-XkxZNM -title: Lavorare con il Testo Domanda A -challengeType: 15 -dashedName: working-with-text-question-a ---- - -# --description-- - -Cosa ti aspetteresti che il seguente testo dia come output in una pagina HTML? - -```html - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. - -``` - -Sembrano due paragrafi di testo, quindi potresti aspettarti che appariranno in questo modo. Tuttavia non è così, come si può vedere nell'output qui sotto: - - - -Quando il browser incontra nuove righe come quella nel tuo HTML, le comprime in un unico spazio. Il risultato di questa compressione è che tutto il testo viene ammassato insieme in una sola lunga riga. - -Se vuoi creare dei paragrafi in HTML, devi utilizzare l'elemento paragrafo, che aggiungerà una nuova riga dopo ciascuno dei paragrafi. Un elemento di paragrafo è definito racchiudendo il contenuto di testo con un tag `

                                                                  `. - -Cambiando l'esempio precedente in modo da utilizzare elementi di paragrafo si risolve il problema: - - - -# --question-- - -## --assignment-- - -Guarda e segui il video HTML Paragraph and Headings di Kevin Powell qui sopra. - -## --text-- - -Come si crea un paragrafo in HTML? - -## --answers-- - -`

                                                                  This is a paragraph

                                                                  ` - ---- - -`

                                                                  This is a paragraph

                                                                  ` - ---- - -`This is a paragraph` - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md deleted file mode 100644 index 4d3a7fa094f..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 637f4e5f72c65bc8e73dfe28 -title: Lavorare con il Testo Domanda B -challengeType: 15 -dashedName: working-with-text-question-b ---- - -# --description-- - -Le intestazioni sono diverse dagli altri elementi di testo HTML: vengono visualizzate più grandi e più in grassetto rispetto al resto del testo per mostrare che sono intestazioni. - -Esistono 6 diversi livelli di intestazioni partendo da `

                                                                  ` fino a `

                                                                  `. Il numero all'interno del tag di intestazione rappresenta il suo livello. L'intestazione più grande e più importante è `h1`, mentre `h6` è la più piccola, corrispondente al livello più basso. - -Le intestazioni sono definite come paragrafi. Ad esempio, per creare un'intestazione `h1`, racchiudiamo il testo di intestazione in un tag `

                                                                  `. - - - -Usare il giusto livello di intestazione è importante, in quanto i livelli forniscono una gerarchia al contenuto. Un'intestazione `h1` dovrebbe sempre essere utilizzata per l'intestazione generale della pagina, e quelle di livello inferiore devono essere utilizzate come intestazioni per il contenuto in sezioni più piccole della pagina. - -# --question-- -## --text-- - -Quanti livelli di intestazione ci sono e qual è la differenza tra loro? - -## --answers-- - -Esistono 5 diversi livelli di intestazione. `h5` è l'intestazione più piccola e meno importante, mentre `h1` è la più grande e la più importante. - ---- - -Esistono 6 diversi livelli di intestazione. `h6` è l'intestazione più grande e più importante, mentre `h1` è la più piccola e la meno importante. - ---- - -Esistono 6 diversi livelli di intestazione. `h1` è l'intestazione più grande e più importante, mentre `h6` è la più piccola e la meno importante. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md deleted file mode 100644 index f6694109b95..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 637f4e6672c65bc8e73dfe29 -videoId: gW6cBZLUk6M -title: Lavorare con il Testo Domanda C -challengeType: 15 -dashedName: working-with-text-question-c ---- - -# --description-- - -L'elemento `` fa sì che il testo sia in grassetto. Contrassegna il testo come importante anche semanticamente; ciò influisce su strumenti, come i lettori di schermo, su cui gli utenti ipovedenti fanno affidamento per utilizzare un sito web. In alcuni lettori di schermo il tono della voce cambierà per comunicare l'importanza del testo all'interno di un elemento `strong`. Per definire un elemento `strong` si racchiude il contenuto di testo in un tag ``. - -Puoi usare `strong` da solo: - - - -Ma probabilmente ti ritroverai a usare l'elemento `strong` molto più spesso in combinazione con altri elementi di testo, come questo: - - - -A volte si vuole rendere il testo in grassetto senza dargli un significato importante. Imparerai come farlo nelle lezioni CSS più avanti nel curriculum. - -# --question-- - -## --assignment-- - -Guarda il video HTML Bold and Italic Text di Kevin Powell qui sopra. - -## --text-- - -Quale elemento dovresti usare per rendere il testo in grassetto e dargli importanza? - -## --answers-- - -`This is an important message` - ---- - -`

                                                                  This is an important message

                                                                  ` - ---- - -`This is an important message` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md deleted file mode 100644 index 054cf5f3664..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 637f4e6e72c65bc8e73dfe2a -title: Lavorare con il Testo Domanda D -challengeType: 15 -dashedName: working-with-text-question-d ---- - -# --description-- - -L'elemento `em` fa sì che il testo sia in corsivo. Dà enfasi al testo anche semanticamente, influenzando anche in questo caso cose come i lettori di schermo. Per definire un elemento di enfasi si racchiude il contenuto di testo in un tag ``. - -Puoi usare `em` da solo: - - -Ancora una volta, come l'elemento `strong`, ti troverai per lo più a usare l'elemento `em` con altri elementi di testo: - - - -# --question-- -## --text-- - -Quale elemento dovresti usare per dare enfasi a del testo rendendolo in corsivo? - -## --answers-- - -`This is an italic message` - ---- - -`This is an italic message` - ---- - -`This is an italic message` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md deleted file mode 100644 index 013f29e5a27..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e7972c65bc8e73dfe2b -title: Lavorare con il Testo Domanda E -challengeType: 15 -dashedName: working-with-text-question-e ---- - -# --description-- - -Potresti aver notato che in tutti gli esempi di questa lezione gli elementi che si trovano all'interno di altri elementi sono indentati. Ciò viene detto annidare gli elementi. - -Quando si annidano elementi all'interno di altri elementi, si crea una relazione genitore-figlio tra loro. Gli elementi annidati sono i figli e l'elemento dentro al quale sono annidati è il genitore. - -Nell'esempio seguente, l'elemento `body` è il genitore e `p` è il figlio: - -```html - - - - -

                                                                  Lorem ipsum dolor sit amet.

                                                                  - - -``` - -Proprio come nelle relazioni umane, gli elementi HTML genitori possono avere molti figli. Gli elementi allo stesso livello di annidamento sono considerati fratelli. - -Ad esempio, i due elementi `p` nel seguente codice sono fratelli, poiché sono entrambi figli del tag `body` e tra loro sono allo stesso livello di annidamento: - -```html - - - - -

                                                                  Lorem ipsum dolor sit amet.

                                                                  -

                                                                  Ut enim ad minim veniam.

                                                                  - - -``` - -L'indentazione si utilizza per rendere il livello di annidamento chiaro e leggibile a te stesso come ad altri sviluppatori che lavoreranno con il tuo HTML in futuro. Si raccomanda di indentare ogni elemento figlio di due spazi. - -Il genitore, il figlio e le relazioni di fratellanza tra gli elementi diventeranno molto più importanti in seguito quando inizierai a definire lo stile del tuo HTML con CSS e ad aggiungere un comportamento con JavaScript. Per ora, tuttavia, è importante conoscere soltanto la distinzione tra come sono correlati gli elementi e la terminologia utilizzata per descrivere le loro relazioni. - -# --question-- - -## --text-- - -Quale relazione hanno due elementi se sono allo stesso livello di annidamento? - -## --answers-- - -Gli elementi sono reciprocamente genitori. - ---- - -Gli elementi sono reciprocamente figli. - ---- - -Gli elementi sono fratelli. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md deleted file mode 100644 index 6e9e3caf1a6..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f4e8072c65bc8e73dfe2c -title: Lavorare con il Testo Domanda F -challengeType: 15 -dashedName: working-with-text-question-f ---- - -# --description-- - -Potresti aver notato che in tutti gli esempi di questa lezione gli elementi che si trovano all'interno di altri elementi sono indentati. Ciò viene detto annidare gli elementi. - -Quando si annidano elementi all'interno di altri elementi, tra loro si crea una relazione genitore-figlio. Gli elementi annidati sono i figli e l'elemento dentro al quale sono annidati è il genitore. - -Nell'esempio seguente, l'elemento body è il genitore e paragrafo è il figlio: - -```html - - - - -

                                                                  Lorem ipsum dolor sit amet.

                                                                  - - -``` - -Proprio come nelle relazioni umane, gli elementi HTML genitori possono avere molti figli. Gli elementi allo stesso livello di annidamento sono considerati fratelli. - -Ad esempio, i due paragrafi nel seguente codice sono fratelli, poiché sono entrambi figli del tag body e tra loro sono allo stesso livello di annidamento: - -```html - - - - -

                                                                  Lorem ipsum dolor sit amet.

                                                                  -

                                                                  Ut enim ad minim veniam.

                                                                  - - -``` - -L'indentazione si utilizza per rendere il livello di annidamento chiaro e leggibile a te stesso come ad altri sviluppatori che lavoreranno con il tuo HTML in futuro. Si raccomanda di indentare ogni elemento figlio di due spazi. - -Il genitore, il figlio e le relazioni di fratellanza tra gli elementi diventeranno molto più importanti in seguito quando inizierai a definire lo stile del tuo HTML con CSS e ad aggiungere un comportamento con JavaScript. Per ora, tuttavia, è importante conoscere soltanto la distinzione tra come sono correlati gli elementi e la terminologia utilizzata per descrivere le loro relazioni. - -# --question-- - -## --text-- - -Che relazione hanno un elemento e un elemento annidato al suo interno? - -## --answers-- - -L'elemento all'interno dell'altro elemento è chiamato elemento genitore. - ---- - -L'elemento all'interno dell'altro elemento è chiamato elemento figlio. - ---- - -L'elemento all'interno dell'altro elemento è chiamato elemento fratello. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md deleted file mode 100644 index 0c2be4e19cb..00000000000 --- a/curriculum/challenges/italian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e8772c65bc8e73dfe2d -title: Lavorare con il Testo Domanda G -challengeType: 15 -dashedName: working-with-text-question-g ---- - -# --description-- - -I commenti HTML non sono visibili al browser; ci permettono di commentare il codice in modo che altri sviluppatori o il futuro te possano leggerli e avere del contesto su qualcosa che potrebbe non essere chiaro nel codice. - -Scrivere un commento HTML è semplice: racchiudi semplicemente il commento tra i tag ``. Ad esempio: - -```html -

                                                                  View the html to see the hidden comments

                                                                  - - - -

                                                                  Some paragraph text

                                                                  - - -``` - -# --question-- - -## --assignment-- - -Per fare un po' di lavoro pratico con del testo in HTML, crea una semplice pagina di un articolo di blog che fa uso di diverse intestazioni, paragrafi e di testo in grassetto e in corsivo. Mentre costruisci i tuoi siti puoi usare [Lorem Ipsum](https://loremipsum.io) per generare del testo fittizio al posto del testo reale. - -## --text-- - -Come si creano i commenti in HTML? - -## --answers-- - -`/* This is an HTML comment */` - ---- - -`` - ---- - -`<-- This is an HTML comment --!>` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md deleted file mode 100644 index 38d6c0a78f6..00000000000 --- a/curriculum/challenges/italian/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5900f36e1000cf542c50fe80 -title: 'Problema 1: multipli di 3 e 5' -challengeType: 1 -forumTopicId: 301722 -dashedName: problem-1-multiples-of-3-and-5 ---- - -# --description-- - -Se elenchiamo tutti i numeri naturali sotto il 10 che sono multipli di 3 o 5, otteniamo 3, 5, 6 e 9. La somma di questi multipli è 23. - -Trova la somma di tutti i multipli di 3 e 5 sotto al valore del parametro `number` inserito. - -# --hints-- - -`multiplesOf3and5(10)` dovrebbe restituire un numero. - -```js -assert(typeof multiplesOf3and5(10) === 'number'); -``` - -`multiplesOf3and5(49)` dovrebbe restituire 543. - -```js -assert.strictEqual(multiplesOf3and5(49), 543); -``` - -`multiplesOf3and5(1000)` dovrebbe restituire 233168. - -```js -assert.strictEqual(multiplesOf3and5(1000), 233168); -``` - -`multiplesOf3and5(8456)` dovrebbe restituire 16687353. - -```js -assert.strictEqual(multiplesOf3and5(8456), 16687353); -``` - -`multiplesOf3and5(19564)` dovrebbe restituire 89301183. - -```js -assert.strictEqual(multiplesOf3and5(19564), 89301183); -``` - -# --seed-- - -## --seed-contents-- - -```js -function multiplesOf3and5(number) { - - return true; -} - -multiplesOf3and5(1000); -``` - -# --solutions-- - -```js -const multiplesOf3and5 = (number) => { - var total = 0; - - for(var i = 0; i < number; i++) { - if(i % 3 == 0 || i % 5 == 0) { - total += i; - } - } - return total; -}; -``` diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md deleted file mode 100644 index a8abd3ff027..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 651dd5ae6ffb500e3f2ce47c -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -```js -console.log('with code'); -``` - -*** - -Making a statement based on her assumption. - -### --feedback-- - -No, that's not correct - -*** - -Expressing a possibility. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md deleted file mode 100644 index 27f5dcb5e42..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5d86ffb500e3f2ce47d -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md deleted file mode 100644 index a79f83d6f5a..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd5f41d697d0aab7833b5 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md deleted file mode 100644 index 13028d7c28a..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 651dd3e06ffb500e3f2ce478 -title: "Dialogue: Introducing" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-introducing ---- - -# --description-- - -What the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md deleted file mode 100644 index 3d67f522c07..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543abeff5f028dba112f278 -title: "I am: I'm" -challengeType: 19 -dashedName: i-am-im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, the verb `to be` is used to talk about identities, characteristics, and more. The contraction `I'm` is a combination of `I` and `am`. Here, Tom uses it to introduce himself. - -# --question-- - -## --text-- - -Which operation correctly expands the contraction `I'm`? - -## --answers-- - -`I is` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I am` - -*** - -`I was` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I have` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md deleted file mode 100644 index a2aa6a8f717..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 6543abf5f5f028dba112f279 -title: I'm -challengeType: 22 -dashedName: im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -The word `I'm` is a contraction of `I am`. Contractions are a way to shorten common combinations of words, especially with verbs. - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, that's right! _ Tom McKenzie.` - -## --blanks-- - -`I'm` diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md deleted file mode 100644 index 3b8b7cff0bd..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 6537e6ece93e5724eeb27c54 -title: Name and Job Title -challengeType: 19 -dashedName: name-and-job-title -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, we often mention our job or role in a company by saying, `I'm [Name], the [Job title].` This lets others know our position or role. - -# --question-- - -## --text-- - -What is Maria's job role at the company? - -## --answers-- - -`Graphic Designer` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Member` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Lead` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`CEO` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md deleted file mode 100644 index 2a3c405b6ad..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 651dd5386ffb500e3f2ce47a -title: Right -challengeType: 22 -dashedName: right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, to check or confirm something people sometimes use tag questions. For example, `You are a programmer, right?` Here, `right?` is used as a tag to check or confirm the previous statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, _?` - -## --blanks-- - -`are` - -### --feedback-- - -Pay attention to the verb in the sentence. - -*** - -`right` - -### --feedback-- - -Pay attention to the verb in the sentence. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md deleted file mode 100644 index 2ae09721cbf..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 6543aa3df5f028dba112f275 -title: Team Lead -challengeType: 22 -dashedName: team-lead -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -A `team lead` is a person who leads or manages a team. In the dialogue, Maria introduces herself as the team lead, meaning she has a leadership role. - -# --fillInTheBlank-- - -## --sentence-- - -`I'm Maria, the _ _.` - -## --blanks-- - -team - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -lead - -### --feedback-- - -Focus on the term Maria used to describe herself. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md deleted file mode 100644 index 3349bcfead9..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 6543aae6f5f028dba112f277 -title: "That's Right: 2" -challengeType: 22 -dashedName: thats-right-2 -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -Placeholder Description \_\_\_ \_\_ - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, _ _! I'm Tom McKenzie. It's a pleasure to meet you.` - -## --blanks-- - -`that's` - -*** - -`right` diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md deleted file mode 100644 index e85982fd561..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543aaa9f5f028dba112f276 -title: That's Right -challengeType: 19 -dashedName: thats-right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -When someone makes a correct assumption or guess about you, you can confirm it using phrases like `that's right`. It's a way of agreeing or saying yes to what is said. - -# --question-- - -## --text-- - -Which phrase does Tom use to confirm Maria's statement about him? - -## --answers-- - -`that's wrong` - -### --feedback-- - -`That's wrong` is used to disagree. - -*** - -`that's okay` - -### --feedback-- - -`that's okay` usually shows acceptance, not confirmation. - -*** - -`that's right` - -*** - -`that's left` - -### --feedback-- - -`that's left` refers to a direction, not confirmation. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md deleted file mode 100644 index dd254987129..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 651dd5296ffb500e3f2ce479 -title: You Are -challengeType: 22 -dashedName: you-are -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, when making introductions or identifying someone, you use the verb `to be`. In this case, `You are` is used to address the person Maria is talking to and affirmatively identify their occupation. - -Maria is introducing herself and confirming Tom's job role. `Are` is used in the present affirmative to make a statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, right?` - -## --blanks-- - -are - -### --feedback-- - -The verb `to be` is an irregular verb. When conjugated with the pronoun `you`, `be` becomes `are`. For example: `You are an English learner.` diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md new file mode 100644 index 00000000000..a041fbddef7 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md @@ -0,0 +1,15 @@ +--- +id: 655c0feadb1dd77f6cda623f +title: "Dialogue 1: A Job Interview" +challengeType: 21 +videoId: nLDychdBwUg +dashedName: dialogue-1-a-job-interview +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md new file mode 100644 index 00000000000..97f3f3245d8 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md @@ -0,0 +1,54 @@ +--- +id: 657b0f0be03b2137ed88b36c +title: Task 1 +challengeType: 19 +dashedName: task-1 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `interview` is a formal meeting where someone asks questions to learn about another person's experience, skills, or opinions. In job interviews, like in the dialogue, the interviewer asks about the candidate's previous job experiences. + +# --question-- + +## --text-- + +What is the purpose of Anna's meeting with the candidate? + +## --answers-- + +To discuss a new project at Acme Tech + +### --feedback-- + +The dialogue is about an interview, not a project discussion. + +--- + +To give a presentation on web development + +### --feedback-- + +The dialogue focuses on an interview, not a presentation. + +--- + +To have a casual conversation about programming + +### --feedback-- + +This is a formal interview, not a casual conversation. + +--- + +To conduct an interview about the candidate's job experience + +## --video-solution-- + +4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md new file mode 100644 index 00000000000..301a777a900 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md @@ -0,0 +1,50 @@ +--- +id: 657b106ced8c653be6b3218f +title: Task 2 +challengeType: 22 +dashedName: task-2 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Thanks for coming in for this interview. _ you _ me about your _ job experiences?` + +## --blanks-- + +`Can` + +### --feedback-- + +This word is used to ask if someone is able to do something. + +--- + +`tell` + +### --feedback-- + +This word is used when asking someone to give information. + +--- + +`previous` + +### --feedback-- + +This word is used to describe something that happened before now. + + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md new file mode 100644 index 00000000000..ad5202d23d2 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md @@ -0,0 +1,58 @@ +--- +id: 657b108cf870283d22b21e8e +title: Task 3 +challengeType: 19 +dashedName: task-3 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the simple present tense is used to describe habitual or usual actions. However, when you are talking about past roles or experiences, like in an interview, you should use the simple past tense. + +The simple past tense often involves changing verbs. For example, `is` becomes `was` for singular subjects and `are` becomes `were` for plural subjects. + +For example, `I am a teacher` in the present becomes `I was a teacher` for past experiences. Similarly, `They are engineers` changes to `They were engineers` when speaking about the past. + +# --question-- + +## --text-- + +What was the candidate's position at Acme Tech? + +## --answers-- + +`A project manager` + +### --feedback-- + +The candidate stated they were a programmer, not a project manager. + +--- + +`A database analyst` + +### --feedback-- + +The candidate mentioned being a programmer, which is different from a database analyst. + +--- + +`A programmer` + +--- + +`A software tester` + +### --feedback-- + +The candidate specifically mentioned their role as a programmer, not a software tester. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md new file mode 100644 index 00000000000..f757d7077f1 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md @@ -0,0 +1,38 @@ +--- +id: 657b110ad8afcc3f8e586362 +title: Task 4 +challengeType: 22 +dashedName: task-4 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that have been completed in the past. It involves changing verbs to show that the action happened before now. In this challenge, you'll practice using the simple past form of verb `to be`. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ there for three years. I _ responsible for developing web applications and maintaining the company's database.` + +## --blanks-- + +`was` + +### --feedback-- + +The first `was` indicates the completion of the time period the candidate spent at their previous job. + +--- + +`was` + +### --feedback-- + +The second `was` is used to describe past responsibility, indicating what the candidate used to do in their previous job. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md new file mode 100644 index 00000000000..a2258172744 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md @@ -0,0 +1,49 @@ +--- +id: 657b115008a62d41c0d7482f +title: Task 5 +challengeType: 19 +dashedName: task-5 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the context of programming and technology, the term `web applications` refers to software programs that run on a web server and are accessed through a web browser. They are an essential part of modern technology, allowing users to perform functions or access services over the internet. + +# --question-- + +## --text-- + +What does `web applications` refer to in the context of programming? + +## --answers-- + +Mobile apps that are downloaded from app stores + +### --feedback-- + +While mobile apps are a type of application, `web applications` specifically refer to those accessed through a web browser. + +--- + +Programs that run on a web server and are accessed via a web browser + +--- + +Physical hardware used in networking + +### --feedback-- + +Web applications are software, not physical hardware. + +--- + +Websites that only provide information without user interaction + +### --feedback-- + +Web applications are interactive and functional, not just informational. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md new file mode 100644 index 00000000000..6c2c5ba78bf --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md @@ -0,0 +1,49 @@ +--- +id: 657b119f0ce64343420bb850 +title: Task 6 +challengeType: 19 +dashedName: task-6 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `database` is a structured collection of data, typically stored electronically in a computer system. It is used to organize, store, and retrieve large amounts of information efficiently. In programming, `database` is essential for managing data that applications need to function. + +# --question-- + +## --text-- + +What is a `database` in the context of programming? + +## --answers-- + +A structured collection of data stored electronically + +--- + +A tool for designing websites + +### --feedback-- + +While important in web development, a database is not a tool for designing websites, but for storing data. + +--- + +A programming language used to create applications + +### --feedback-- + +A database is not a programming language; it's a system for storing and managing data. + +--- + +A type of computer virus + +### --feedback-- + +A database is a safe and structured way to store data, not a computer virus. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md new file mode 100644 index 00000000000..03e329649a9 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md @@ -0,0 +1,40 @@ +--- +id: 657b11e082e48a44eb4bfc09 +title: Task 7 +challengeType: 22 +dashedName: task-7 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's response and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ also part of the _ update team.` + +## --blanks-- + +`was` + +### --feedback-- + +This word is a past tense verb. You use it to talk about something that happened in the past. + +--- + +`software` + +### --feedback-- + +This word refers to computer programs. It's an important term in technology and programming. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md new file mode 100644 index 00000000000..67343b31705 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -0,0 +1,57 @@ +--- +id: 657b11f87368cf463ea4fe46 +title: Task 8 +challengeType: 19 +dashedName: task-8 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. For example: + + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. + `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + +# --question-- + +## --text-- + +How does Anna ask about specific projects in the past tense? + +## --answers-- + +`Where there any specific projects you'd like to mention?` + +### --feedback-- + +`Where` is used for locations. The correct form for asking about past events is `Were`. + +--- + +`Were there any specific projects you'd like to mention?` + +--- + +`Was there any specific projects you'd like to mention?` + +### --feedback-- + +`Was` is used with singular nouns. Since `projects` is plural, `Were` is the correct choice. + +--- + +`Are there any specific projects you'd like to mention?` + +### --feedback-- + +`Are` is present tense. The question is about past projects, so `Were` is needed. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md new file mode 100644 index 00000000000..e6bc643d065 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md @@ -0,0 +1,55 @@ +--- +id: 657b1240ef768447b80817ad +title: Task 9 +challengeType: 19 +dashedName: task-9 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense, as reviewed earlier, is used for actions completed in the past. In this context, `we were involved in` combines the simple past tense (`were`) with the expression `involved in`, which means being a part of something, especially in an active or important role. For example, `They were involved in organizing the event` means they played an important role in organizing it. + +# --question-- + +## --text-- + +How does the candidate describe their role in the project? + +## --answers-- + +`We had involvement in the development of the e-commerce platform.` + +### --feedback-- + +Although this phrase communicates involvement, the more common expression in English is `were involved in`. + +--- + +`We were engaged in the development of the e-commerce platform.` + +### --feedback-- + +`engaged in` is similar but not the exact phrase used by the candidate. `Involved in` specifically indicates an active participation. + +--- + +`We were involved in the development of the e-commerce platform.` + +--- + +`We participated in the development of the e-commerce platform.` + +### --feedback-- + +While `participated in` suggests involvement, the specific phrase used here is `involved in`. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md new file mode 100644 index 00000000000..f51e04c012a --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md @@ -0,0 +1,49 @@ +--- +id: 657b12ae08dd7049b300c901 +title: Task 10 +challengeType: 19 +dashedName: task-10 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +An `e-commerce platform` refers to a software application that allows businesses to manage their online sales operations. It typically includes features for displaying products, processing orders, and handling customer transactions. This term is essential in the world of online business, as it enables companies to sell goods and services over the internet. + +# --question-- + +## --text-- + +What is an `e-commerce platform` in the context of online business? + +## --answers-- + +A platform for social media marketing + +### --feedback-- + +While e-commerce platforms may use social media for marketing, they are primarily used for online sales operations. + +--- + +A software application for managing online sales + +--- + +A tool for website design and development + +### --feedback-- + +An e-commerce platform is specifically for managing online sales, not just website design. + +--- + +A system for email communication with customers + +### --feedback-- + +Though communication might be a feature, an e-commerce platform's main function is to manage online sales. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md new file mode 100644 index 00000000000..092c2b7ff32 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md @@ -0,0 +1,41 @@ +--- +id: 657b12e7c306334b7c320221 +title: Task 11 +challengeType: 22 +dashedName: task-11 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's statement and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for the checkout process, and it _ a successful implementation.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense of `are` used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense of `is` used for singular subjects or situations. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md new file mode 100644 index 00000000000..5a555480e1c --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md @@ -0,0 +1,49 @@ +--- +id: 657b13088693ef4ce21ce0e4 +title: Task 12 +challengeType: 19 +dashedName: task-12 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `checkout process` refers to the steps involved in completing a purchase, whether in a physical store or online. In a physical store, this usually involves taking items to a cashier, paying, and receiving a receipt. In online shopping, it includes adding items to a cart, entering shipping and payment details, and finalizing the order. + +# --question-- + +## --text-- + +What does the `checkout process` typically involve? + +## --answers-- + +Signing up for a store's loyalty program + +### --feedback-- + +While loyalty programs are part of customer engagement, the checkout process is specifically about completing a transaction. + +--- + +Arranging items on shelves in a store + +### --feedback-- + +Arranging items is a part of store management, not related to the checkout process of completing a purchase. + +--- + +Conducting market research + +### --feedback-- + +Market research is important for business strategy, but it's separate from the checkout process, which is directly involved in sales transactions. + +--- + +Completing a purchase through payment and receipt of goods + +## --video-solution-- + +4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md new file mode 100644 index 00000000000..db7a9bbed14 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md @@ -0,0 +1,49 @@ +--- +id: 657b133afcef714e542b557a +title: Task 13 +challengeType: 19 +dashedName: task-13 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Implementation` in a technical or business context refers to the process of putting a plan or design into effect. In software development, for instance, implementation involves the actual coding and setup of a software application based on designed specifications. It is a critical phase where ideas or plans are turned into a functioning reality. + +# --question-- + +## --text-- + +What does `implementation` mean in a project context? + +## --answers-- + +The planning stage of a project + +### --feedback-- + +Planning is the phase where strategies are formed, not the actual execution or implementation of those plans. + +--- + +The analysis of project results + +### --feedback-- + +Analysis is about evaluating outcomes, whereas implementation is about executing or carrying out the project plans. + +--- + +The process of team formation + +### --feedback-- + +Team formation is part of project setup, but implementation specifically refers to executing the planned tasks of the project. + +--- + +The execution of a plan or design + +## --video-solution-- + +4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md new file mode 100644 index 00000000000..1fa977ff3c0 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md @@ -0,0 +1,49 @@ +--- +id: 657b135e9029fb4f8141e40c +title: Task 14 +challengeType: 22 +dashedName: task-14 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. This is a great way to practice and remember these words. + +# --fillInTheBlank-- + +## --sentence-- + +`Anna: That's excellent. _ there any specific projects you'd like to mention?` + +`Candidate: Yes, in one of my team's projects, we were _ in the development of an e-commerce platform. We were responsible for the _ process, and it was a successful implementation.` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past tense form of `are`. The first letter should be capitalized. + +--- + +`involved` + +### --feedback-- + +This word means participating actively in something. + +--- + +`checkout` + +### --feedback-- + +This term refers to the process of completing a purchase. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md new file mode 100644 index 00000000000..94904516eba --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md @@ -0,0 +1,54 @@ +--- +id: 657b138d33db9e50f116b5f0 +title: Task 15 +challengeType: 19 +dashedName: task-15 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and answer the question. + +# --question-- + +## --text-- + +How does Anna ask about the candidate's educational background in computer science? + +## --answers-- + +`Are you educated in computer science?` + +### --feedback-- + +`Are you` is present tense, but Anna's question is about the candidate's past education. + +--- + +`Do you study computer science?` + +### --feedback-- + +`Do you study` is present tense. The question is about past education. + +--- + +`Were you educated in computer science?` + +--- + +`Have you studied computer science?` + +### --feedback-- + +`Have you studied` is a different form, asking if they have ever studied it at any time. `Were you educated` specifically asks about formal education in the past. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md new file mode 100644 index 00000000000..6044644f850 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md @@ -0,0 +1,49 @@ +--- +id: 657b1431076b365555784189 +title: Task 16 +challengeType: 19 +dashedName: task-16 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `bachelor's degree` is an undergraduate academic degree awarded by colleges and universities upon completion of a course of study. In the term `bachelor's degree`, the use of the noun (`bachelor`) followed by the `'s` indicates possession or association. This form is commonly used to show that something belongs to or is related to the noun, as in `today's news` or `teacher's guide`. + +# --question-- + +## --text-- + +What does `bachelor's degree` refer to? + +## --answers-- + +An undergraduate academic degree + +--- + +A type of professional certification + +### --feedback-- + +A bachelor's degree is an academic qualification, not a professional certification. + +--- + +A high school diploma + +### --feedback-- + +A bachelor's degree is a higher education qualification, more advanced than a high school diploma. + +--- + +A master's program entry requirement + +### --feedback-- + +While a bachelor's degree may be required for a master's program, it itself refers to an undergraduate degree. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md new file mode 100644 index 00000000000..299109790e0 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md @@ -0,0 +1,56 @@ +--- +id: 657b145976723b56a97b8dda +title: Task 17 +challengeType: 19 +dashedName: task-17 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `I was introduced to` uses the simple past tense form `was` of the verb `be`, combined with the past participle `introduced`. This structure, `be` followed by a verb suffixed with `-ed`, is often used to describe actions that happened to the subject in the past. For example: + +`At college, I was introduced to many programing languages` + +# --question-- + +## --text-- + +What does the candidate mean by saying `I was introduced to various programming languages and software development principles`? + +## --answers-- + +I taught myself various programming languages and principles + +### --feedback-- + +`I was introduced to` implies being formally taught or shown by someone else, not self-teaching. + +--- + +I learned about various programming languages and principles in my studies + +--- + +I have extensive experience with various programming languages and principles + +### --feedback-- + +The phrase indicates initial exposure to these topics, not necessarily extensive experience. + +--- + +I developed various programming languages and principles + +### --feedback-- + +Being introduced to something means learning about it for the first time, not creating or developing it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md new file mode 100644 index 00000000000..2e11e13fa69 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md @@ -0,0 +1,49 @@ +--- +id: 657b149630b3ea5873269a38 +title: Task 18 +challengeType: 19 +dashedName: task-18 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `various` is an adjective used to describe a number of different types or kinds of something, emphasizing diversity or variety. It is often used to indicate that there are several distinct items or examples being referred to. For example, saying `various books` means books of different kinds or genres. + +# --question-- + +## --text-- + +What does `various` imply when talking about programming languages and software development principles? + +## --answers-- + +Different types or kinds + +--- + +A specific type or kind + +### --feedback-- + +The term `various` implies diversity, not specificity. + +--- + +Only one type + +### --feedback-- + +`Various` indicates a number of different types, not just one. + +--- + +Irrelevant or unrelated types + +### --feedback-- + +`Various` does mean different types, but these are usually relevant and related to the context. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md new file mode 100644 index 00000000000..b217384d87c --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md @@ -0,0 +1,38 @@ +--- +id: 657b14d8353d665a187fe771 +title: Task 19 +challengeType: 22 +dashedName: task-19 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this challenge, you'll practice filling in key terms from the dialogue. These terms are commonly used in job interviews and are essential for understanding the context of the discussion. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Sure, I was a programmer at Acme Tech. I was there for three years. I was responsible for developing web _ and maintaining the company's _. I was also part of the software update team.` + +## --blanks-- + +`applications` + +### --feedback-- + +These are programs designed to perform specific tasks or functions. + +--- + +`database` + +### --feedback-- + +This is a collection of information organized for easy access, management, and updating. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md new file mode 100644 index 00000000000..5d81b22a9e7 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md @@ -0,0 +1,62 @@ +--- +id: 657b153ac677705c7059530d +title: Task 20 +challengeType: 19 +dashedName: task-20 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `could you tell me` is a polite way to ask someone for information. It's commonly used in formal or professional situations, like job interviews or meetings. +In English, some verbs have irregular past forms, meaning they do not follow the regular pattern of adding `-ed` to make the past tense. `Can` is one such verb, and its irregular simple past form is `could`. + +The existence of irregular forms, like `could`, often comes from the way language has evolved over time. These forms do not follow the regular patterns and need to be memorized. + +For example: + +- Present: `I can speak English.` +- Past: `I could speak English when I was six.` + +# --question-- + +## --text-- + +What does the phrase `could you tell me` in Anna's sentence express? + +## --answers-- + +A polite request for information + +--- + +A command to do something immediately + +### --feedback-- + +The phrase `could you tell me` is used for polite requests, not direct commands. + +--- + +A suggestion for future action + +### --feedback-- + +This phrase is asking for information now, not suggesting something for the future. + +--- + +An offer to help someone + +### --feedback-- + +This phrase is more about asking for information than offering help. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md new file mode 100644 index 00000000000..ecf0d666af0 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md @@ -0,0 +1,54 @@ +--- +id: 657b15dbcafe4d5f39a5de82 +title: Task 21 +challengeType: 19 +dashedName: task-21 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `previous` is used to describe something that happened before the current time or situation. It's often used to refer to past experiences, jobs, or events. + +# --question-- + +## --text-- + +In the context of Anna's question, what does `previous` refer to? + +## --answers-- + +Past roles and responsibilities + +--- + +Future roles and responsibilities + +### --feedback-- + +`Previous` refers to something that has already happened, not something in the future. + +--- + +Current roles and responsibilities + +### --feedback-- + +`Previous` means something that happened before now, not what is happening currently. + +--- + +Unrelated roles and responsibilities + +### --feedback-- + +`Previous` specifically relates to roles and responsibilities that were held before, not those unrelated. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md new file mode 100644 index 00000000000..8497f67b9bb --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md @@ -0,0 +1,53 @@ +--- +id: 657b160d6a8662610fe6a523 +title: Task 22 +challengeType: 22 +dashedName: task-22 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that were completed in the past. Regular verbs in the past tense usually end with `-ed`, while irregular verbs have unique past forms. For example, as you learned in previous tasks, `was` and `were` are the past forms of `is` and `are`. + +Examples of simple past tense: + +- `I worked at a company.` (`work` becomes `worked`) +- `I was happy.` (`is` becomes `was`) +- `We were busy.` (`are` becomes `were`) + +# --fillInTheBlank-- + +## --sentence-- + +`Hello! Certainly. I _ at Mock Corporation for five years. I _ part of a team of software engineers, and we _ responsible for developing and maintaining various applications.` + +## --blanks-- + +`worked` + +### --feedback-- + +Think of the past tense of `work`, a regular verb that follows the usual `-ed` ending pattern. + +--- + +`was` + +### --feedback-- + +Recall the past tense form of `is`, which changes to a completely different word in its irregular past form. + +--- + +`were` + +### --feedback-- + +Consider the past tense of `are`, an irregular verb that also changes to a different word in the past. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md new file mode 100644 index 00000000000..8e1b26a3bce --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md @@ -0,0 +1,46 @@ +--- +id: 657b163c9da40e62b904be1f +title: Task 23 +challengeType: 22 +dashedName: task-23 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the past simple interrogative. In questions, the simple past tense often begins with a past tense verb, followed by the subject and the rest of the sentence. This structure is used to ask about past events or states. + +# --fillInTheBlank-- + +## --sentence-- + +`That's great to hear. _ the members of the team _ _ any specific achievements or projects?` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past form of `are` used to ask about a past state or condition. + +--- + +`involved` + +### --feedback-- + +Think of a word that means `participated in` or `engaged with`. + +--- + +`in` + +### --feedback-- + +A preposition that often follows `involved` to indicate participation or inclusion. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md new file mode 100644 index 00000000000..bc7924edcf6 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md @@ -0,0 +1,54 @@ +--- +id: 657b18e71067d6680b9ac5d3 +title: Task 24 +challengeType: 19 +dashedName: task-24 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `redesign` means to design something again or differently. It's often used in the context of improving or updating the design of an existing product, service, or structure. In software and web development, redesigning is a common practice to enhance functionality, user experience, or aesthetics. + +# --question-- + +## --text-- + +What does `redesign` imply in Candidate2's statement about the website project? + +## --answers-- + +To design for the first time + +### --feedback-- + +`Redesign` implies working on something that already exists, not creating it for the first time. + +--- + +To remove the design + +### --feedback-- + +`Redesign` means to change or improve the existing design, not to remove it. + +--- + +To change or improve an existing design + +--- + +To copy a design + +### --feedback-- + +`Redesign` involves making changes or improvements, not copying a design as it is. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md new file mode 100644 index 00000000000..ed588a90563 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md @@ -0,0 +1,54 @@ +--- +id: 657b1985ae17886b05b382b1 +title: Task 25 +challengeType: 19 +dashedName: task-25 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `performance` in a technical context often refers to how well a system or component operates, especially in terms of speed, efficiency, and reliability. For websites and software, performance can relate to how quickly pages load, the responsiveness of the application, or the stability of the system under various conditions. + +# --question-- + +## --text-- + +What does `performance` refer to in Candidate2's statement about the website? + +## --answers-- + +A live presentation + +### --feedback-- + +While `performance` can mean a presentation, in this context, it relates to the functioning of the website. + +--- + +Artistic display + +### --feedback-- + +In a technical context, `performance` refers to operational effectiveness, not an artistic aspect. + +--- + +Financial success + +### --feedback-- + +`Performance` in this context is about the website's operational aspects, not its financial success. + +--- + +How well the website operates + +## --video-solution-- + +4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md new file mode 100644 index 00000000000..98e6bda774a --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md @@ -0,0 +1,54 @@ +--- +id: 657b19bf7b32af6caf763ef7 +title: Task 26 +challengeType: 19 +dashedName: task-26 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `collaborative effort` refers to a situation where people work together as a team to achieve a common goal. This kind of teamwork is essential in many work environments, especially on projects where different skills and perspectives are needed. + +# --question-- + +## --text-- + +What does `collaborative effort` imply in the context of Candidate2's statement? + +## --answers-- + +Working independently + +### --feedback-- + +`Collaborative effort` means working together as a team, not independently. + +--- + +Teamwork to achieve a goal + +--- + +Avoiding responsibility + +### --feedback-- + +`Collaborative effort` involves taking shared responsibility, not avoiding it. + +--- + +Focusing on individual skills + +### --feedback-- + +`Collaborative effort` emphasizes teamwork over individual skills. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md new file mode 100644 index 00000000000..56a621b07c6 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md @@ -0,0 +1,38 @@ +--- +id: 657b1a03df3ec46eca276046 +title: Task 27 +challengeType: 22 +dashedName: task-27 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. + +# --fillInTheBlank-- + +## --sentence-- + +`Yes, our team _ involved in a project to _ the company's website.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`redesign` + +### --feedback-- + +This word means to design something again in a different way. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md new file mode 100644 index 00000000000..66d49e9e89f --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md @@ -0,0 +1,55 @@ +--- +id: 657b1a27dc6daf6ffd52ff1f +title: Task 28 +challengeType: 19 +dashedName: task-28 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the noun suffixed with `'s` followed by a second noun structure is used to show possession or belonging. If the first noun is singular, as in `Sarah's laptop`, it indicates that the laptop belongs to Sarah. However, if the first noun is plural, the structure changes to noun suffixed with `'`, as in `teachers' office`, indicating an office for teachers. + +# --question-- + +## --text-- + +What does `master's degree` in the context of the dialogue refer to? + +## --answers-- + +A degree for school teachers + +### --feedback-- + +`Master's degree` refers to an advanced academic degree, not specifically for teachers. + +--- + +A primary level educational degree + +### --feedback-- + +`Master's degree` is a higher education qualification, beyond the primary level. + +--- + +A degree in mastering skills + +### --feedback-- + +While it implies expertise, `master's degree` specifically refers to an academic qualification. + +--- + +An advanced academic degree + +## --video-solution-- + +4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md new file mode 100644 index 00000000000..bf63c3e8d24 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md @@ -0,0 +1,49 @@ +--- +id: 657b1a637e4dc571f8f4d3d7 +title: Task 29 +challengeType: 19 +dashedName: task-29 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `appreciate` is often used to express gratitude or to acknowledge the value or importance of something or someone's actions. It's a way of showing that you recognize and are thankful for someone's help, effort, or achievement. + +# --question-- + +## --text-- + +In a work meeting, your colleague says, `I really appreciate your help on this project.` What is your colleague expressing? + +## --answers-- + +Dissatisfaction with your work + +### --feedback-- + +`Appreciate` means to be grateful or thankful, not to show dissatisfaction. + +--- + +Indifference to your contribution + +### --feedback-- + +`Appreciate` is used to express positive recognition, not indifference. + +--- + +Gratitude for your contribution + +--- + +A need for more assistance + +### --feedback-- + +`Appreciate` here indicates satisfaction with the help received, not a request for more assistance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md new file mode 100644 index 00000000000..4fa33c1c2d0 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md @@ -0,0 +1,47 @@ +--- +id: 657b1a9581015573806e1e20 +title: Task 30 +challengeType: 22 +dashedName: task-30 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words you learned. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for implementing new features and ensuring the website's performance. It _ a _ effort, and we were able to deliver the project on time.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense form of `are`, used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`collaborative` + +### --feedback-- + +This word means working together as a team. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md new file mode 100644 index 00000000000..6013cb50f86 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md @@ -0,0 +1,39 @@ +--- +id: 657b1cc072206e7ac3db88b8 +title: Task 31 +challengeType: 22 +dashedName: task-31 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the missing words correctly. This is a great way to practice what you've learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I have a _ degree in computer science. My studies _ quite intensive, and I was introduced to many different methodologies.` + +## --blanks-- + +`master's` + +### --feedback-- + +This term, using the `noun's noun` structure, refers to an advanced academic degree. + +--- + +`were` + +### --feedback-- + +This is the past tense form of `are` used for plural subjects or things. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md new file mode 100644 index 00000000000..1c7c7b4603c --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md @@ -0,0 +1,30 @@ +--- +id: 657b1d080265ba7c4f96bf79 +title: Task 32 +challengeType: 22 +dashedName: task-32 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task helps you review the word you learned. Listen to the dialogue and complete the sentence correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`Impressive! We _ candidates with strong educational backgrounds and practical experience.` + +## --blanks-- + +`appreciate` + +### --feedback-- + +This word means to recognize the value or importance of something or someone's actions. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md new file mode 100644 index 00000000000..28e4211c290 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md @@ -0,0 +1,15 @@ +--- +id: 657b1d4ec0e2587e8bcc95f7 +title: "Dialogue 3: Two Workmates Talk About Their Backgrounds" +challengeType: 21 +dashedName: dialogue-3-two-workmates-talk-about-their-backgrounds +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md new file mode 100644 index 00000000000..df8ebc66d25 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md @@ -0,0 +1,54 @@ +--- +id: 657b1da0b27fef8117827ce5 +title: Task 33 +challengeType: 19 +dashedName: task-33 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned about the simple past tense. Now, you can explore it further. The simple past tense is often formed by adding `-ed` to a verb. But, when a verb ends with an `e`, you just add a `d`. For example, `notice` becomes `noticed`. + +# --question-- + +## --text-- + +What does `noticed` in Sarah's sentence indicate? + +## --answers-- + +Sarah observed something in the past + +--- + +Sarah is planning to observe something + +### --feedback-- + +The simple past tense `noticed` indicates a completed action in the past, not a future plan. + +--- + +Sarah continuously observes something + +### --feedback-- + +The simple past tense `noticed` is used for actions that were completed, not ongoing actions. + +--- + +Sarah never observes anything + +### --feedback-- + +`Noticed` implies that Sarah did observe something, not never observing. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md new file mode 100644 index 00000000000..5a1ba6afbfc --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md @@ -0,0 +1,30 @@ +--- +id: 657b1dfec76149836ea5c7d0 +title: Task 34 +challengeType: 22 +dashedName: task-34 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you will focus on the past simple negative. It's created by adding `not` after the auxiliary verb `was` or `were`. For example, `was` becomes `wasn't` (`was not`) and `were` becomes `weren't` (`were not`). This form is used to describe something that did not happen in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`It _ exactly tech-related, but I learned a lot about problem-solving and critical thinking.` + +## --blanks-- + +`wasn't` + +### --feedback-- + +This word is used to make a negative statement in the past tense. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md new file mode 100644 index 00000000000..da30e71e20a --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md @@ -0,0 +1,49 @@ +--- +id: 657b1e2fad2ffe84ab420a56 +title: Task 35 +challengeType: 19 +dashedName: task-35 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You're already familiar with `wasn't` and `weren't` for past simple negative. Now, let's explore `didn't`, a contraction of `did not`. It's used with the base form of verbs (the infinitive without `to`) to express that an action did not happen in the past. For example, `didn't go` means the action of going did not occur. + +# --question-- + +## --text-- + +Imagine you are reading a story about a character who planned to attend a concert but couldn't. How would you describe this situation? + +## --answers-- + +The character enjoyed the concert + +### --feedback-- + +Using `didn't` suggests the character did not go to the concert, contradicting the idea of enjoying it. + +--- + +The character didn't attend the concert + +--- + +The character always goes to concerts + +### --feedback-- + +This expression refers to a regular habit, not a specific event in the past. + +--- + +The character is looking forward to the next concert + +### --feedback-- + +This option is about future anticipation. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md new file mode 100644 index 00000000000..938a8118ce2 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md @@ -0,0 +1,54 @@ +--- +id: 657b1e66159fec86336a737b +title: Task 36 +challengeType: 19 +dashedName: task-36 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned the basics of the simple past tense. Now you can dive deeper into it. Typically, the simple past tense is formed by adding `-ed` to regular verbs. For instance, the verb `play` becomes `played` in the simple past. This tense is used to describe actions that were completed at a specific time in the past. + +# --question-- + +## --text-- + +What does `I played` in Sophie's sentence suggest about her experience with coding? + +## --answers-- + +She casually experimented with coding in the past + +--- + +She is currently playing a coding game + +### --feedback-- + +`Played` is in the past tense, indicating a past action, not something happening currently. + +--- + +She plans to start coding soon + +### --feedback-- + +`Played` implies she already has some experience with coding, not that she is planning to start. + +--- + +She never tried coding + +### --feedback-- + +Using `played` confirms she did engage in coding, contradicting the idea of never trying it. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md new file mode 100644 index 00000000000..2bd70b3d732 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md @@ -0,0 +1,49 @@ +--- +id: 657b1e9a62603587747f7f45 +title: Task 37 +challengeType: 19 +dashedName: task-37 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In English, when forming questions in the simple past tense, you often use `did`. This is followed by the subject and the base form of the verb (without `ed`). For example, `Did you enjoy` is a past simple interrogative phrase where `did` is the auxiliary verb, `you` is the subject, and `enjoy` is the base form of the verb. + +# --question-- + +## --text-- + +What does a question like `Did you enjoy the concert last night?` ask about? + +## --answers-- + +Are you going to enjoy the concert? + +### --feedback-- + +This implies a future event. The question with `did` is asking about a past experience. + +--- + +Do you enjoy concerts in general? + +### --feedback-- + +This is asking about general preferences, not a specific past event. + +--- + +Did you have a good experience at the concert last night? + +--- + +Will you enjoy future concerts? + +### --feedback-- + +The question is about a past event, not future experiences. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md new file mode 100644 index 00000000000..430fa995037 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md @@ -0,0 +1,42 @@ +--- +id: 657b1ee1de7216896b5b4361 +title: Task 38 +challengeType: 22 +dashedName: task-38 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blank correctly. This task is a review. Remember, the simple past tense is used to talk about actions or situations in the past, and the negative form is used to describe things that did not happen. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: That's interesting! So, you _ work on many programming projects during your studies?` + +`Sophie: No, not really. I _ around with coding, but most of my projects involved circuit designs and electrical systems. It was a bit different.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used here to talk about something that was not done in the past. + +--- + +`played` + +### --feedback-- + +This word suggests that Sophie casually engaged in coding for pleasure or interest. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md new file mode 100644 index 00000000000..dfcc68a881a --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md @@ -0,0 +1,40 @@ +--- +id: 657b1f0585d48f8ac0b19654 +title: Task 39 +challengeType: 22 +dashedName: task-39 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you'll focus on answering questions in the simple past tense. When responding to a past simple interrogative (a question), you can answer affirmatively with `did` or negatively with `didn't`. For example, `Did you go to the party?` can be answered with `I did` (affirmative) or `I didn't` (negative). Listen to the dialogue and fill in the blanks correctly to practice this structure. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: I see. _ you enjoy your time there, even if it wasn't entirely tech-focused? Sophie: I _.` + +## --blanks-- + +`Did` + +### --feedback-- + +This word is used to form a past simple interrogative question. The first letter should be capitalized. + +--- + +`did` + +### --feedback-- + +This response is an affirmative answer to the past simple interrogative question. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md new file mode 100644 index 00000000000..92e4b28c489 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md @@ -0,0 +1,49 @@ +--- +id: 657b1f598f63008c8bdb20b8 +title: Task 40 +challengeType: 19 +dashedName: task-40 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the simple past tense, some verbs are irregular and don't follow the regular `-ed` ending pattern. One example of this is the verb `meet`, which becomes `met` in the past tense. This is important to remember when talking about past events. + +# --question-- + +## --text-- + +During a class reunion, an old friend tells you, `We met for the first time in art class.` What is your friend referring to with `met`? + +## --answers-- + +We are meeting right now in art class + +### --feedback-- + +The use of `met` indicates a past event, not something happening currently. + +--- + +Our first encounter was in the past, specifically in art class + +--- + +We will meet for the first time soon + +### --feedback-- + +`Met` indicates a past action, not a future arrangement. + +--- + +We have never been in art class together + +### --feedback-- + +`Met` suggests a past meeting. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md new file mode 100644 index 00000000000..e3cdc339c1f --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md @@ -0,0 +1,49 @@ +--- +id: 657b1f981cd42e8dc3b282d9 +title: Task 41 +challengeType: 19 +dashedName: task-41 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn another special case in this task. It's the past tense form of `have`. Unlike regular verbs that add `-ed` for the past tense, `have` becomes `had`. This irregular form is used for both singular and plural subjects in the past tense, making it a unique and important verb to remember. + +# --question-- + +## --text-- + +What does `had` imply in a sentence like `They had a meeting yesterday?` + +## --answers-- + +They possessed or experienced something in the past + +--- + +They are having a meeting right now + +### --feedback-- + +`Had` is used for past actions, indicating the meeting occurred in the past, not at the present moment. + +--- + +They will have a meeting tomorrow + +### --feedback-- + +`Had` indicates a past action, not a future plan. + +--- + +They never have meetings + +### --feedback-- + +Using `had` confirms that the meeting took place in the past. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md new file mode 100644 index 00000000000..9f86ab82bcb --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md @@ -0,0 +1,47 @@ +--- +id: 657b1fe950c0df90346e5d12 +title: Task 42 +challengeType: 22 +dashedName: task-42 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the words `met`, `had`, and `wasn't`. You have already learned these words. Listen to the dialogue and fill in the blanks with the correct words. This exercise is a good way to practice and reinforce your understanding of these words in context. + +# --fillInTheBlank-- + +## --sentence-- + +`I did. It was challenging, but I _ some fantastic people. We _ a bunch of fun coding marathons, although I _ always a very strong programmer.` + +## --blanks-- + +`met` + +### --feedback-- + +This word is used here to describe encountering people in the past. + +--- + +`had` + +### --feedback-- + +This word is used to express possession or experiences in the past. + +--- + +`wasn't` + +### --feedback-- + +This word is the negative form in the past tense, indicating something that was not the case. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md new file mode 100644 index 00000000000..2ee4e256d2a --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md @@ -0,0 +1,39 @@ +--- +id: 657b201372864e91d4f5bb53 +title: Task 43 +challengeType: 22 +dashedName: task-43 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +When a verb ends in a consonant followed by `y`, you should change the `y` to `i` and add `ed` for the past tense. For example, `carry` becomes `carried`. Note that this rule applies when the `y` follows a consonant, not a vowel, so the simple past form of `convey` is `conveyed`. For regular verbs, you simply add `ed` to form the past tense. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ at a small college as well and _ in information technology.` + +## --blanks-- + +`studied` + +### --feedback-- + +The past simple tense of `study` is formed by changing `y` to `i` and adding `ed`. + +--- + +`majored` + +### --feedback-- + +This word follows the regular past simple tense formation by just adding `ed`. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md new file mode 100644 index 00000000000..67255d1bac6 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md @@ -0,0 +1,26 @@ +--- +id: 657b20338e0802931673c1e1 +title: Task 44 +challengeType: 22 +dashedName: task-44 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + +# --description-- + +You've learned that for verbs ending in `e`, you simply add `d` to form the simple past tense. Choose the correct form of `love` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she really _ the beach vacation.` + +## --blanks-- + +`loved` + +### --feedback-- + +To form the simple past, add `d` to the base form of the verb, `love`. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md new file mode 100644 index 00000000000..4d89a2935c0 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md @@ -0,0 +1,54 @@ +--- +id: 657b20985d315095e5c3851d +title: Task 45 +challengeType: 19 +dashedName: task-45 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this context, `got` is a special case in the simple past tense. It's the past tense of `get`. Unlike regular verbs that typically add `-ed` for the past tense, `get` changes to `got`. + +# --question-- + +## --text-- + +In the context of Sarah's statement, what does `got` imply about her experience? + +## --answers-- + +She is getting the opportunity now + +### --feedback-- + +`Got` indicates a past opportunity, not something happening currently. + +--- + +She had the opportunity in the past + +--- + +She will get the opportunity in the future + +### --feedback-- + +`Got` refers to a past experience, not a future possibility. + +--- + +She never gets such opportunities + +### --feedback-- + +`Got` in this context suggests she did have this opportunity. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md new file mode 100644 index 00000000000..ac32d364daa --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md @@ -0,0 +1,50 @@ +--- +id: 657b21e28a01039cb27b4f13 +title: Task 46 +challengeType: 19 +dashedName: task-46 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `exactly` is used to emphasize the truth or accuracy of a statement or description. It can mean `precisely` or `just`. For example, if someone says, `It's exactly what I needed`, they mean that it is precisely or perfectly what was required. `Exactly` often highlights that something is correct in every detail. + +# --question-- + +## --text-- + +What does `exactly` imply in a sentence like `This is exactly the kind of work I enjoy`? + +## --answers-- + +This is somewhat similar to the work I enjoy + +### --feedback-- + +`Exactly` indicates a perfect match, not just a similarity. + +--- + +This is the opposite of the work I enjoy + +### --feedback-- + +`Exactly` implies a perfect match, not an opposite. + +--- + +I am not sure if this is the work I enjoy + +### --feedback-- + +Using `exactly` shows certainty, not uncertainty. + +--- + +This is precisely the type of work that I find enjoyable + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md new file mode 100644 index 00000000000..36c267c651b --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md @@ -0,0 +1,35 @@ +--- +id: 657b221b2ab0ac9e18a173ef +title: Task 47 +challengeType: 22 +dashedName: task-47 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Let's look at `exactly` and `exact`. You use `exactly` to show something is just right or very true. It is an adverb. For example, `You did it exactly right!`. + +`Exact` is an adjective, and it describes something very correct or precise, like in `the exact time`. + +# --fillInTheBlank-- + +## --sentence-- + +`She knew the _ time of the meeting. She arrived _ at 3 pm.` + +## --blanks-- + +`exact` + +### --feedback-- + +This word is an adjective, describing the noun `time`. + +--- + +`exactly` + +### --feedback-- + +This word is an adverb, showing that her arrival time was very precise. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md new file mode 100644 index 00000000000..82dcdea8fbb --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -0,0 +1,39 @@ +--- +id: 657b223e41ce6b9f9a01d214 +title: Task 48 +challengeType: 22 +dashedName: task-48 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You'll review the past simple negative in this task. It's formed using `was` or `were` with `not`, like `weren't` (`were not`) or `wasn't` (`was not`). It's used to talk about things that did not happen or were not true in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`They _ _ big projects.` + +## --blanks-- + +`weren't` + +### --feedback-- + +It's the negative form of `were` in the past tense, used to say something was not true or did not happen. + +--- + +`exactly` + +### --feedback-- + +This word is used to emphasize the statement, suggesting the projects were not precisely big. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md new file mode 100644 index 00000000000..06ce8ba3d76 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md @@ -0,0 +1,15 @@ +--- +id: 657b227f7ad32ea17e2cdf28 +title: "Dialogue 4: A Developer with a Different Background" +challengeType: 21 +dashedName: dialogue-4-a-developer-with-a-different-background +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md new file mode 100644 index 00000000000..abee49452c1 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md @@ -0,0 +1,56 @@ +--- +id: 657b2310b8cd52a4f15c1818 +title: Task 49 +challengeType: 19 +dashedName: task-49 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `unconventional` is used to describe something that's not based on or conforming to what is generally done or believed. It often implies a method or approach that is different from the norm. + +# --question-- + +## --text-- + +What does `unconventional` imply about Alice's background in tech? + +## --answers-- + +Her background is different from the usual way people get into tech + +--- + +Her background is exactly the same as most people in tech + +### --feedback-- + +`Unconventional` means not following the usual conventions, which contradicts being the same as most people. + +--- + +She doesn't have any background in tech + +### --feedback-- + +`Unconventional` suggests a different approach, not the absence of a background. + +--- + +She followed a very traditional path into tech + +### --feedback-- + +`Unconventional` indicates a non-traditional path, not a very traditional one. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md new file mode 100644 index 00000000000..47917952aff --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md @@ -0,0 +1,39 @@ +--- +id: 657b2340be1593a6517fe77b +title: Task 50 +challengeType: 22 +dashedName: task-50 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple negative, `did not` (contracted to `didn't`) is followed by the base form of a verb. This structure is used to express that an action did not happen in the past. In this dialogue, Alice is describing her educational background related to technology. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ _ tech at a traditional university.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used in the past simple negative to indicate that an action was not done. + +--- + +`study` + +### --feedback-- + +The base form of the verb is used after the contraction in negative past simple sentences. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md new file mode 100644 index 00000000000..e19667245f9 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md @@ -0,0 +1,54 @@ +--- +id: 657b236aa1eb9fa7b209aa03 +title: Task 51 +challengeType: 19 +dashedName: task-51 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `mostly` is used to indicate that something is true to a large extent but not completely. It suggests that while other factors or methods may be involved, the primary aspect is what is mentioned. + +# --question-- + +## --text-- + +In Alice's statement, what does `mostly` suggest about her way of learning? + +## --answers-- + +She only learned through formal education + +### --feedback-- + +`Mostly` implies a greater emphasis on self-teaching rather than exclusive formal education. + +--- + +She didn't learn anything on her own + +### --feedback-- + +The use of `mostly` indicates a significant amount of self-learning, not an absence of it. + +--- + +She learned equally through self-teaching and formal courses + +### --feedback-- + +`Mostly` suggests a greater emphasis on one method over an equal balance. + +--- + +Her learning was primarily through her own efforts, with some formal courses + +## --video-solution-- + +4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md new file mode 100644 index 00000000000..10f6121949b --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md @@ -0,0 +1,36 @@ +--- +id: 657b23a413d28da927e087ca +title: Task 52 +challengeType: 22 +dashedName: task-52 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +This task reviews how an adverb is often formed by adding `-ly` to an adjective. + + +# --fillInTheBlank-- + +## --sentence-- + +`She completed _ of her work before lunch. The office is _ quiet in the mornings.` + +## --blanks-- + +`most` + +### --feedback-- + +This word is used as an adjective to describe the quantity of work completed. + +--- + +`mostly` + +### --feedback-- + +This word is used as an adverb to describe the general state of the office. + + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md new file mode 100644 index 00000000000..8f0a554d33f --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md @@ -0,0 +1,50 @@ +--- +id: 657b23bc0e32f9aa9c62eb82 +title: Task 53 +challengeType: 19 +dashedName: task-53 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `self-taught` refers to acquiring knowledge or skills without direct teaching from a traditional teacher or educational institution. It involves learning independently. The word `taught` is the past participle of `teach`. When someone is `self-taught`, it means they have taught themselves. + +# --question-- + +## --text-- + +What does `self-taught` imply when someone says, `I am self-taught in programming`? + +## --answers-- + +They were taught programming by a professional teacher + +### --feedback-- + +`Self-taught` indicates learning independently, not being taught by a professional teacher. + +--- + +They have no knowledge of programming + +### --feedback-- + +`Self-taught` means they have acquired knowledge or skills, not that they lack them. + +--- + +They learned programming on their own, without formal education + +--- + +They are planning to learn programming in the future + +### --feedback-- + +`Self-taught` refers to learning that has already taken place, not future plans. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md new file mode 100644 index 00000000000..daa0ed7fa3b --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md @@ -0,0 +1,27 @@ +--- +id: 657b23f03b449aac2c517089 +title: Task 54 +challengeType: 22 +dashedName: task-54 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `took` is a special case in the simple past tense. It's the past tense of `take`. Unlike regular verbs that follow the standard `-ed` ending for the past tense, `take` changes to `took`. This irregular form is important to know because it's commonly used to talk about actions that happened in the past. Choose the correct past tense form of `take` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she _ a photography class.` + +## --blanks-- + +`took` + +### --feedback-- + +This word is the past tense form of `take`. It's used to talk about actions that happened in the past. + + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md new file mode 100644 index 00000000000..aa093ae629c --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md @@ -0,0 +1,49 @@ +--- +id: 657b242d06512dadaea55056 +title: Task 55 +challengeType: 19 +dashedName: task-55 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The verb `attend` means to be present at an event or place. It's often used regarding schools, colleges, meetings, or events. It implies regular participation or presence at a specific place or event. + +# --question-- + +## --text-- + +If a friend tells you, `I'm going to attend the new art workshop downtown`, what are they planning to do? + +## --answers-- + +They are planning to teach at the art workshop + +### --feedback-- + +`Attend` suggests participating as a learner or member, not as a teacher. + +--- + +They might visit the workshop once + +### --feedback-- + +`Attend` implies regular or scheduled participation, not a one-time visit. + +--- + +They are not interested in art workshops + +### --feedback-- + +Saying they will `attend` indicates interest and intent to participate, not a lack of interest. + +--- + +They plan to regularly participate in the art workshop + +## --video-solution-- + +4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md new file mode 100644 index 00000000000..4dd651ea958 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md @@ -0,0 +1,39 @@ +--- +id: 657b24542024c8af092cd6c4 +title: Task 56 +challengeType: 22 +dashedName: task-56 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple, negative sentences are formed using `did not`, contracted to `didn't`, followed by the base form of the main verb. Listen to the dialogue and fill in the blanks with these words. + +# --fillInTheBlank-- + +## --sentence-- + +`So, you _ _ a regular college or anything like that?` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used to form a negative statement in the past tense. + +--- + +`attend` + +### --feedback-- + +The word means being present at an event or place. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md new file mode 100644 index 00000000000..15b9abab580 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md @@ -0,0 +1,48 @@ +--- +id: 657b24774d8cdab052ffe2a6 +title: Task 57 +challengeType: 22 +dashedName: task-57 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and fill in the blanks correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ study tech at a traditional university. I'm _, and I _ a lot of online courses.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used to form a negative statement in the past tense. + +--- + +`self-taught` + +### --feedback-- + +This word describes acquiring knowledge or skills independently. + +--- + +`took` + +### --feedback-- + +This word is the past tense form of a verb meaning to have completed an action. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md new file mode 100644 index 00000000000..b7c7a773588 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md @@ -0,0 +1,40 @@ +--- +id: 657b24a500800cb1c6945da9 +title: Task 58 +challengeType: 22 +dashedName: task-58 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`No, not at all. I _ at a different job, but I got really interested in programming and tech, so I _ learning in my free time.` + +## --blanks-- + +`was` + +### --feedback-- + +Use `to be` in the past tense. + +--- + +`started` + +### --feedback-- + +Use the verb `start`in the past tense. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md new file mode 100644 index 00000000000..14bccd55f81 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md @@ -0,0 +1,41 @@ +--- +id: 657b2be1b19500c63fc1a467 +title: Task 59 +challengeType: 22 +dashedName: task-59 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`That's impressive! _ you _ learning on your own?` + +## --blanks-- + +`Did` + +### --feedback-- + +Auxiliary verb for questions. This word should be capitalized. + +--- + +`enjoy` + +### --feedback-- + +A verb used to describe you are having fun. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md new file mode 100644 index 00000000000..f55f7908a4f --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md @@ -0,0 +1,38 @@ +--- +id: 657b2c040bb5f6c77fa5df80 +title: Task 60 +challengeType: 22 +dashedName: task-60 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You'll be filling in blanks with words you're already familiar with. + +# --fillInTheBlank-- + +## --sentence-- + +`Absolutely. It _ challenging, but I _ it.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of the verb `to be`, used for singular subjects. + +--- + +`loved` + +### --feedback-- + +This is the past tense form of a verb expressing a strong liking or enjoyment. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md new file mode 100644 index 00000000000..dc14016d020 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md @@ -0,0 +1,38 @@ +--- +id: 657b2d618b8851cc5baf9490 +title: Task 61 +challengeType: 22 +dashedName: task-61 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Listen to the audio and complete the sentence. + + +# --fillInTheBlank-- + +Fill in the blank with correct words. + + +## --sentence-- + +`Yes, I did. I built a few small web applications, just to practice. It _ a great way to apply what I _.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `to be`, used here for a singular subject. + +--- + +`learned` + +### --feedback-- + +This is the past tense form of `learn`, indicating the acquisition of knowledge or skills in the past. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md new file mode 100644 index 00000000000..b2433b84777 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md @@ -0,0 +1,54 @@ +--- +id: 657b2d9cb974dace59024964 +title: Task 62 +challengeType: 19 +dashedName: task-62 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `got` in this context is a versatile term and can have several meanings. In its simplest form, it's the past tense of `get`, which can mean to receive, arrive, become, or reach, depending on the context. In Tom's statement, `got` refers to the progress or level Alice reached through self-study. + +# --question-- + +## --text-- + +What does `got` imply in Tom's statement about Alice's progress? + +## --answers-- + +She received something while studying + +### --feedback-- + +While `got` can mean receiving, in this context it refers to the extent or level of progress. + +--- + +She achieved or reached a significant level in her studies + +--- + +She needs to get more resources for studying + +### --feedback-- + +`Got` here refers to past progress, not a current need for more resources. + +--- + +She didn't make any progress in her studies + +### --feedback-- + +`Got` in this sentence clearly indicates significant progress, not a lack of it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md new file mode 100644 index 00000000000..3ea0498bbbe --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md @@ -0,0 +1,15 @@ +--- +id: 657b2dd7745fdcd03e5160f4 +title: "Dialogue 5: Anna Talks About her Experience" +challengeType: 21 +dashedName: dialogue-5-anna-talks-about-her-experience +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md new file mode 100644 index 00000000000..8a3ff270f80 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -0,0 +1,54 @@ +--- +id: 657b2e0666d4a9d1b851f90e +title: Task 63 +challengeType: 19 +dashedName: task-63 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `tech recruiter` refers to a professional role focused on recruiting candidates for technology-related positions. This role involves understanding the tech industry, identifying qualified candidates, and matching them with suitable tech job openings. + +# --question-- + +## --text-- + +What is Tom asking about when he mentions `Tech recruiter` in his question? + +## --answers-- + +The technical skills needed to be a recruiter + +### --feedback-- + +`Tech recruiter` here refers to the job role, not the specific skills required for the job. + +--- + +The technology used by recruiters + +### --feedback-- + +While technology is involved, `Tech recruiter` refers to the profession itself, not the tools used. + +--- + +The person's career path in becoming a technology recruitment specialist + +--- + +Recruiting people to learn technology + +### --feedback-- + +`Tech recruiter` is about hiring for tech roles, not recruiting people to learn technology. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md new file mode 100644 index 00000000000..340203d5990 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md @@ -0,0 +1,49 @@ +--- +id: 657b2ec6c054efd71e503a27 +title: Task 64 +challengeType: 19 +dashedName: task-64 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `actually` is often used to express a fact or reality, sometimes contrasting with what was thought, believed, or said before. It adds emphasis to a statement to clarify a truth or correct a previous assumption or statement. + +# --question-- + +## --text-- + +What does `actually` imply in a sentence like `I actually prefer working remotely`? + +## --answers-- + +The truth is contrary to what might have been assumed or stated before + +--- + +I never work remotely + +### --feedback-- + +`Actually` in this context is used to express a real preference. + +--- + +I always work in an office setting + +### --feedback-- + +Using `actually` here is meant to reveal a preference for remote work, not office work. + +--- + +I don't have any work preferences + +### --feedback-- + +`Actually` suggests a specific preference, contradicting the idea of having none. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md new file mode 100644 index 00000000000..51c4c579915 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md @@ -0,0 +1,33 @@ +--- +id: 657b2eeb31e435d89ecce6f3 +title: Task 65 +challengeType: 22 +dashedName: task-65 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn about `actual` in this task. It's a describing word (adjective). It means what something is really like. For example, `the actual color` means the real color. You often add `-ly` to an adjective to form an adverb. This rule helps change many describing words into words that tell people how something is said or done. Here, you add `-ly` to `actual` and it's the adverb `actually`. + +# --fillInTheBlank-- + +## --sentence-- + +`The _ size of the room was quite small. She _ likes small cozy spaces.` + +## --blanks-- + +`actual` + +### --feedback-- + +This word describes the real size of the room. + +--- + +`actually` + +### --feedback-- + +This word is used to say she really likes small spaces. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md new file mode 100644 index 00000000000..101e280ee29 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md @@ -0,0 +1,54 @@ +--- +id: 657b2f0b3bcfe7d9f4151854 +title: Task 66 +challengeType: 19 +dashedName: task-66 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The terms `therapist` and `counselor` refer to professionals who provide guidance and support to people dealing with emotional, psychological, or mental health issues. Both play a vital role in helping individuals work through personal challenges. In Anna's statement, these terms describe the career paths she was considering. + +# --question-- + +## --text-- + +In Anna's statement, what does `therapist or counselor` refer to? + +## --answers-- + +Jobs in the technology industry + +### --feedback-- + +`Therapist or counselor` refers to mental health and emotional support roles, not technology-related jobs. + +--- + +Career paths in mental health and emotional support + +--- + +Educational courses she wanted to take + +### --feedback-- + +While these roles require education, the terms directly refer to the job roles, not the courses. + +--- + +Hobbies that she was interested in + +### --feedback-- + +`Therapist or counselor` are professional career paths, not hobbies. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md new file mode 100644 index 00000000000..40c9c66ce5e --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md @@ -0,0 +1,49 @@ +--- +id: 657b2f3bf7a2cbdb58d959d5 +title: Task 67 +challengeType: 19 +dashedName: task-67 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `last` is used to refer to the most recent past occurrence of a period or event. For example, `last year` means the year before this one, `last month` refers to the month before the current one, and `last week` points to the week before this week. Understanding time expressions like `last year`, `last month`, `last week`, or `last day` helps in talking about events that happened in the recent past. + +# --question-- + +## --text-- + +When someone mentions in a discussion about changes, `I switched careers last year.` What does `last year` indicate about the timing of their career change? + +## --answers-- + +They are planning to switch careers in the near future + +### --feedback-- + +This suggests a future action, but `last year` indicates the change already occurred in the past. + +--- + +They have been considering a career change for a long time + +### --feedback-- + +Though they might have considered it for a long time, `last year` specifically identifies when the change took place. + +--- + +The career change is happening currently + +### --feedback-- + +`Last year` refers to a completed action in the past, not something happening in the present. + +--- + +The career switch happened in the previous year + +## --video-solution-- + +4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md new file mode 100644 index 00000000000..796bb1e6c39 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md @@ -0,0 +1,49 @@ +--- +id: 657b2f6cb66826dcbac08094 +title: Task 68 +challengeType: 19 +dashedName: task-68 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Organizational psychology` is a field of psychology that studies how people interact within groups, particularly in workplace settings. It focuses on understanding workplace dynamics, employee behavior, and organizational structure to improve the work environment and increase productivity. + +# --question-- + +## --text-- + +What does `organizational psychology` typically involve? + +## --answers-- + +It deals with organizing office spaces + +### --feedback-- + +While organization is a part of the field, `organizational psychology` primarily focuses on people and behavior, not physical space. + +--- + +It's about the psychology of organizing events + +### --feedback-- + +`Organizational psychology` is not specifically about event planning but rather about behavior in workplace groups. + +--- + +It's the study of how people behave and interact in workplace groups + +--- + +It focuses on individual psychological treatment + +### --feedback-- + +`Organizational psychology` looks at group dynamics in workplaces, not individual therapy. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md new file mode 100644 index 00000000000..e185bc5a457 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md @@ -0,0 +1,38 @@ +--- +id: 657b2fa89ddc20de629ca21f +title: Task 69 +challengeType: 22 +dashedName: task-69 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will fill in the blanks with words you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ studied psychology in college. My plan was to become a _ or counselor.` + +## --blanks-- + +`actually` + +### --feedback-- + +This word is used to emphasize the accuracy or truth of a statement. + +--- + +`therapist` + +### --feedback-- + +This word refers to a professional role focused on mental health and emotional support. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md new file mode 100644 index 00000000000..ecc1ceb6792 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md @@ -0,0 +1,46 @@ +--- +id: 657b2fc9c0f96bdfddfce4d9 +title: Task 70 +challengeType: 22 +dashedName: task-70 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this exercise, you will explore the phrase `pique one's interest`. This phrase means to stimulate or arouse someone's curiosity or interest in something. It's often used when something catches your attention and makes you want to learn more about it. Alongside this phrase, you will fill in the blanks with familiar words that you've already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ a course in organizational _, and it _ my interest in the workplace and employee dynamics.` + +## --blanks-- + +`took` + +### --feedback-- + +This word refers to the action of participating in or completing a course. + +--- + +`psychology` + +### --feedback-- + +This word describes the study of the mind and behavior, particularly in a workplace setting in this context. + +--- + +`piqued` + +### --feedback-- + +This word means to arouse or stimulate interest or curiosity. You should correctly use its simple past tense. diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md new file mode 100644 index 00000000000..acc29551124 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md @@ -0,0 +1,49 @@ +--- +id: 657b2fea728c2be14a8a98c4 +title: Task 71 +challengeType: 19 +dashedName: task-71 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Employee dynamics` refers to the way employees interact and work together in a workplace. It's an example of using one noun (`employee`) to describe another noun (`dynamics`). This type of descriptive noun helps give more specific information about the subject. Other examples include `race car`, where `race` describes the type of car, and `garden hose`, where `garden` describes the type of hose. + +# --question-- + +## --text-- + +What does `employee dynamics` refer to in a workplace context? + +## --answers-- + +The dynamics of machines used by employees + +### --feedback-- + +`Employee dynamics` specifically refers to interactions and relationships among employees, not machinery. + +--- + +The interactions and relationships among employees + +--- + +The employment status of workers + +### --feedback-- + +`Employee dynamics` is about how employees work together, not their employment status. + +--- + +The dynamics of hiring new employees + +### --feedback-- + +`Employee dynamics` refers to existing employee interactions, not the hiring process. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md new file mode 100644 index 00000000000..bcbb031c907 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md @@ -0,0 +1,54 @@ +--- +id: 657b3026ff79fbe2dda6cb39 +title: Task 72 +challengeType: 19 +dashedName: task-72 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `That's a cool twist` is often used to express that something is interestingly unexpected or surprisingly different. The word `twist` here refers to a change or development in a situation or story that is unusual or unexpected. `Cool` in this context means it's positively received. + +# --question-- + +## --text-- + +What is Tom expressing when he says `That's a cool twist`? + +## --answers-- + +He finds the unexpected change or development interesting + +--- + +He thinks the situation is confusing + +### --feedback-- + +While a `twist` can be surprising, Tom's use of `cool` suggests he finds it interesting rather than confusing. + +--- + +He is unhappy with the new development + +### --feedback-- + +`Cool twist` usually indicates a positive reaction, not dissatisfaction. + +--- + +He expected the development all along + +### --feedback-- + +The term `twist` implies that the development was unexpected. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md new file mode 100644 index 00000000000..6a30241c1a2 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md @@ -0,0 +1,55 @@ +--- +id: 657b306fe94f29e4b4aa9105 +title: Task 73 +challengeType: 19 +dashedName: task-73 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `not right away` is used to indicate that something didn't happen immediately or at the earliest opportunity. It suggests that there was a delay or a period before the action or change took place. This phrase helps to set the timeline of events or actions. + +# --question-- + +## --text-- + +What does Anna mean when she says `not right away`? + +## --answers-- + +She immediately started working in HR at a tech company + +### --feedback-- + +`Not right away` indicates a delay or period before taking action, not immediate action. + +--- + +She started working in a different role before moving to HR at a tech company + +--- + +She has never worked in HR + +### --feedback-- + +The statement implies she did work in HR, just not immediately. + +--- + +She was always focused on training and development + +### --feedback-- + +`Not right away` suggests a progression or change over time, not a constant focus. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md new file mode 100644 index 00000000000..b21bdf5b3e6 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md @@ -0,0 +1,49 @@ +--- +id: 657b30ac03b523e6640deaf1 +title: Task 74 +challengeType: 22 +dashedName: task-74 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will practice filling in the blanks with words that you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`Tom: That's a cool _. _ you immediately start working as a tech recruiter after college? Anna: Not right away. I _ in a general HR role at a non-tech company first, focusing on training and development.` + + +## --blanks-- + +`twist` + +### --feedback-- + +It refers to an interesting or unexpected change in a situation. + +--- + +`Did` + +### --feedback-- + +The auxiliary verb used to form a question in the past simple tense. The first letter should be capitalized. + +--- + +`worked` + +### --feedback-- + +Past tense form of `work`, indicating an action completed in the past. + diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md new file mode 100644 index 00000000000..f843ccf34aa --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md @@ -0,0 +1,54 @@ +--- +id: 657b30e1b9f035e7e656fd01 +title: Task 75 +challengeType: 19 +dashedName: task-75 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `employee` is someone who works for a company or a person. When you talk about `employees' well-being`, you are talking about the health and happiness of all the people who work there. The `'s` after `employees` means that the well-being belongs to the employees. It's like `the cat's toy` (one cat) and `the cats' toy` (more than one cat). + +# --question-- + +## --text-- + +What does Anna mean by saying `employees' well-being.` + +## --answers-- + +It's about the health of the company + +### --feedback-- + +`Employees'` means the people who work, not the company. + +--- + +One worker's health and happiness + +### --feedback-- + +`Employees'` with an `'s` shows it's about all workers, not just one. + +--- + +Where the employees work + +### --feedback-- + +`Well-being` is about health and happiness, not a place. + +--- + +The health and happiness of all the workers + +## --video-solution-- + +4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md new file mode 100644 index 00000000000..8e17e595d98 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md @@ -0,0 +1,54 @@ +--- +id: 657b315533e4edeba65111b8 +title: Task 76 +challengeType: 19 +dashedName: task-76 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +A `psychologist` is a professional who studies the human mind and behavior. They often help people understand and manage their emotions, behaviors, and mental processes. In Anna's statement, she refers to becoming a psychologist, indicating her professional choice related to studying and working with psychology. + +# --question-- + +## --text-- + +What does `psychologist` mean in Anna's statement? + +## --answers-- + +It means someone who studies physics + +### --feedback-- + +`Psychologist` refers to a person who studies the mind and behavior, not physics. + +--- + +It's a type of medical doctor + +### --feedback-- + +While related to health, a psychologist is different from a medical doctor and focuses on mental processes. + +--- + +A professional who studies and works with the human mind and behavior + +--- + +A teacher at a school + +### --feedback-- + +A psychologist may teach, but their primary role is studying and working with the mind and behavior, not general teaching. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md new file mode 100644 index 00000000000..40eee7185d9 --- /dev/null +++ b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md @@ -0,0 +1,15 @@ +--- +id: 657b46c9be150f577f5a1086 +title: "Dialogue 2: Another Job Interview" +challengeType: 21 +dashedName: dialogue-2-another-job-interview +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md deleted file mode 100644 index 0a0f3472141..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0feadb1dd77f6cda623f -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md deleted file mode 100644 index e1563f9b06b..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0f39ee87517d584d81f9 -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md deleted file mode 100644 index 7aa1e30008d..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5a46ffb500e3f2ce47b -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -*** - -Giving a job description. - -*** - -Making a statement based on her assumption. - -*** - -Expressing a possibility. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md deleted file mode 100644 index 2ee50fe5647..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5e46ffb500e3f2ce47e -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md b/curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md deleted file mode 100644 index adc4b41f091..00000000000 --- a/curriculum/challenges/italian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd6071d697d0aab7833b6 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md deleted file mode 100644 index 1a079fd532f..00000000000 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: bd7158d8c242eddfaeb5bd13 -title: 個人ポートフォリオのウェブページを作成する -challengeType: 14 -forumTopicId: 301143 -dashedName: build-a-personal-portfolio-webpage ---- - -# --description-- - -**目標:** https://personal-portfolio.freecodecamp.rocks と似た機能を持つアプリを作成します - -**ユーザーストーリー:** - -1. あなたのポートフォリオには `id` が `welcome-section` に設定されているウェルカムセクションが 1 つあります -1. そのウェルカムセクションにはテキストを含む `h1` 要素が 1 つあります -1. あなたのポートフォリオには `id` が `projects` に設定されているプロジェクトセクションが 1 つあります -1. プロジェクトセクションには、プロジェクトを入れるために、`class` の値が `project-tile` である要素が少なくとも 1 つあります -1. プロジェクトセクションには、プロジェクトへのリンクが少なくとも 1 つ含まれます -1. あなたのポートフォリオには id が `navbar` に設定されているナビゲーションバーが 1 つあります -1. ナビゲーションバーには、クリックするとページ上の別のセクションに移動できるリンクが少なくとも 1 つあります -1. あなたのポートフォリオには、id が `profile-link` のリンクが 1 つあり、あなたの GitHub または freeCodeCamp のプロフィールを新しいタブで開きます -1. あなたのポートフォリオにはメディアクエリが少なくとも 1 つ必要です -1. ウェルカムセクションの高さはビューポートの高さと等しくなっています -1. ナビゲーションバーは常にビューポートの上部に表示されます - -上記のユーザーストーリーを満たし、以下のすべてのテストが通るようにして、このプロジェクトを完成させてください。 あなた独自のアレンジを加えましょう。 ハッピーコーディング！ - -**注:** スタイルシートをリンクして CSS を適用するため、HTML のコード内に必ず `` を追加してください。 - -# --hints-- - -ポートフォリオには `id` が `welcome-section` であるウェルカムセクションが 1 つ必要です。 - -```js -const el = document.getElementById('welcome-section') -assert(!!el); -``` - -`#welcome-section` 要素内には `h1` 要素が必要です。 - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1').length, - 0, - 'Welcome section should contain an h1 element ' -); -``` - -空の `h1` 要素を `#welcome-section` 要素内に入れないようにしてください。 - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, - 0, - 'h1 element in welcome section should contain your name or camper ' + - 'name ' -); -``` - -`id` が `projects` であるプロジェクトセクションが 1 つ必要です。 - -```js -const el = document.getElementById('projects') -assert(!!el); -``` - -ポートフォリオにはクラスの値が `project-tile` に設定されている要素が少なくとも 1 つ必要です。 - -```js -assert.isAbove( - document.querySelectorAll('#projects .project-tile').length, - 0 -); -``` - -`#projects` 要素には `a` 要素を少なくとも 1 つ入れる必要があります。 - -```js -assert.isAbove(document.querySelectorAll('#projects a').length, 0); -``` - -ポートフォリオには `id` が `navbar` であるナビゲーションバーが 1 つ必要です。 - -```js -const el = document.getElementById('navbar'); -assert(!!el); -``` - -`#navbar` 要素には `href` 属性の値が `#` で始まる `a` 要素を少なくとも 1 つ入れる必要があります。 - -```js -const links = [...document.querySelectorAll('#navbar a')].filter( - (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#' -); - -assert.isAbove( - links.length, - 0, - 'Navbar should contain an anchor link ' -); -``` - -ポートフォリオには `id` が `profile-link` である `a` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.tagName === 'A') -``` - -`#profile-link` 要素は値が `_blank` に設定されている `target` 属性をもつ必要があります。 - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.target === '_blank') -``` - -ポートフォリオはメディアクエリを少なくとも 1 つ使用する必要があります。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -`#navbar` 要素は常にビューポートの上部にある必要があります。 - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const navbar = document.getElementById('navbar'); - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - "Navbar's parent should be body and it should be at the top of " + - 'the viewport ' - ); - - window.scroll(0, 500); - - await timeout(1); - - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - 'Navbar should be at the top of the viewport even after ' + - 'scrolling ' - ); - window.scroll(0, 0); -})(); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Personal Portfolio - - - - - -
                                                                  -
                                                                  -
                                                                  -

                                                                  It's me!

                                                                  - -

                                                                  Naomi Carrigan

                                                                  -

                                                                  Welcome to my portfolio page!

                                                                  -
                                                                  -
                                                                  -

                                                                  Projects

                                                                  -

                                                                  Here's what I've worked on!

                                                                  -

                                                                  - - - - -

                                                                  -
                                                                  -

                                                                  Contact me!

                                                                  -

                                                                  Use the links below to get in touch.

                                                                  -

                                                                  FreeCodeCamp.org | GitHub | Facebook | LinkedIn -

                                                                  - - - -``` - -```css -nav{ - position: fixed; - width: 100%; - text-align: right; - font-size: 24pt; - top: 0%; - right: 5px; - background-color: #000000; - color: #ffffff; -} -@media (max-width: 500px){ - nav{ - display: none; - } -} -a{ - color: #ffffff; -} -main{ - text-align: center; - background-color: black; - font-family:Pacifico -} -h1{ - font-size: 48pt; -} -h2{ - font-size: 24pt; -} -p{ - font-size: 12pt; -} -#welcome-section{ - background-color:#251a4a; - color: #FFFFFF; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#projects{ - background-color: #060a9c; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#contact{ - background-color: #03300b; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -``` diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md deleted file mode 100644 index e84fc02a690..00000000000 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: プロダクトのランディングページを作成する -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**目標:** https://product-landing-page.freecodecamp.rocks と似た機能を持つアプリを作成します - -**ユーザーストーリー:** - -1. このプロダクトランディングページには、`id="header"` を持つ `header` 要素があります -1. `header` 要素内に、`id="header-img"` を持つ画像があります (ロゴのような画像を表示すると良いでしょう) -1. `#header` の要素内には、`id="nav-bar"` を持つ `nav` 要素があります -1. `nav` 要素内に少なくとも 3 つ、クリック可能な `nav-link` クラスの要素があります -1. `nav` 要素内の `.nav-link` ボタンをクリックすると、ランディングページの対応するセクションに移動します -1. `id="video"` を持つ、プロダクトに関する埋め込み動画を見ることができます -1. このプロダクトランディングページには、`id="form"` を持つ `form` 要素があります -1. フォーム内には、E メールアドレスが入力可能な `id="email"` を持つ `input` 欄があります -1. `#email` 入力欄には、その用途をユーザーに知らせるためのプレイスホルダーテキストが表示されます -1. `#email` 入力欄は、入力されたテキストがメールアドレスであるか確認するために HTML5 のバリデーションを使用します -1. フォーム内には、`id="submit"` を持つ送信ボタンの `input` があります -1. `#submit` 要素をクリックすると、email の情報が静的ページに送信されます (このモック URL を使用してください: `https://www.freecodecamp.com/email-submit`) -1. ナビゲーションバーは常にビューポートの上部に表示されます -1. このプロダクトランディングページには、少なくとも 1 つのメディアクエリが必要です -1. このプロダクトランディングページでは、少なくとも 1 つの CSS フレックスボックスが使用されている必要があります - -上記のユーザーストーリーを満たし、以下のすべてのテストが通るようにして、このプロジェクトを完成させてください。 あなた独自のアレンジを加えましょう。 ハッピーコーディング！ - -**注:** スタイルシートをリンクして CSS を適用するため、HTML のコード内に必ず `` を追加してください。 - -# --hints-- - -`id` が `header` である `header` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -`id` が `header-img` である `img` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -`#header-img` は `#header` の子孫要素である必要があります。 - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -`#header-img` には `src` 属性が必要です。 - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -`#header-img` の `src` の値は (`http` から始まる) 有効な URL である必要があります。 - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -`id` が `nav-bar` である `nav` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -`#nav-bar` は `#header` の子孫要素である必要があります。 - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -`#nav-bar` の中に最低 3 つの `.nav-link` 要素が必要です。 - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -各 `.nav-link` 要素には `href` 属性が必要です。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -各 `.nav-link` 要素は、ランディングページ内の対応する要素にリンクされている必要があります (対応する要素の id (例えば `#footer`) が値に設定された `href` を持つ必要があります) 。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -`id` が `video` である、`video` または `iframe` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -`#video` には `src` 属性が必要です。 - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -`id` が `form` である `form` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -`id` の値が `email` に設定されている `input` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -`#email` は `#form` の子孫要素である必要があります。 - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -`#email` は、プレイスホルダーテキストが設定された `placeholder` 属性を持つ必要があります。 - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -`#email` は、`type` を `email` に設定することによって、HTML5 のバリデーションが使用されている必要があります。 - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -`id` が `submit` である `input` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -`#submit` は `#form` の子孫要素である必要があります。 - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -`#submit` は `type` が `submit` に設定されている必要があります。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -`#form` の `action` 属性には `https://www.freecodecamp.com/email-submit` を設定する必要があります。 - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -`#email` の `name` 属性は `email` である必要があります。 - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -`#nav-bar` は常にビューポートの上部にある必要があります。 - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const header = document.getElementById('header'); - const headerChildren = header.children; - const navbarCandidates = [header, ...headerChildren]; - - // Return smallest top position of all navbar candidates - const getNavbarPosition = (candidates = []) => { - return candidates.reduce( - (min, candidate) => - Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)), - Infinity - ); - }; - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the viewport ' - ); - - window.scroll(0, 500); - await timeout(1); - - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the ' + - 'viewport even after scrolling ' - ); - - window.scroll(0, 0); -})(); -``` - -プロダクトランディングページには、少なくとも 1 つのメディアクエリが使われている必要があります。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -プロダクトランディングページには、少なくとも 1 つの CSS フレックスボックスが使われている必要があります。 - -```js -const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display) -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media') -const usesFlex = cssRules.find(rule => hasFlex(rule)) -const usesFlexMedia = mediaRules.find(mediaRule => { - return [...mediaRule.cssRules].find(rule => hasFlex(rule)) -}) -assert(usesFlex || usesFlexMedia) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Product Landing Page - - - -
                                                                  -

                                                                  - Pokemon Daycare Service -

                                                                  -
                                                                  -

                                                                  What we offer

                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  Guaranteed friendly and loving staff!
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - Comfortable environment for Pokemon to explore and play! -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - Multiple membership plans to fit your lifestyle! -
                                                                  -
                                                                  -
                                                                  -
                                                                  -

                                                                  Check us out!

                                                                  - A sneak peek into our facility: -
                                                                  - -
                                                                  -
                                                                  -

                                                                  Membership Plans

                                                                  -
                                                                  -
                                                                  - Basic Membership
                                                                  -
                                                                    -
                                                                  • One Pokemon
                                                                    • -
                                                                  • Food and berries provided
                                                                    • -
                                                                  - $9.99/month -
                                                                  -
                                                                  - Silver Membership
                                                                  -
                                                                    -
                                                                  • Up to Three Pokemon
                                                                    • -
                                                                  • Food and berries provided
                                                                    • -
                                                                  • Grooming and accessories included
                                                                    • -
                                                                  - $19.99/month -
                                                                  -
                                                                  - Gold Membership
                                                                  -
                                                                    -
                                                                  • Up to six Pokemon!
                                                                    • -
                                                                  • Food and berries provided
                                                                    • -
                                                                  • Grooming and accessories included
                                                                    • -
                                                                  • Personal training for each Pokemon
                                                                    • -
                                                                  • Breeding and egg hatching
                                                                    • -
                                                                  - $29.99/month -
                                                                  -
                                                                  -
                                                                  -
                                                                  -

                                                                  Sign up for our newsletter!

                                                                  - - -
                                                                  - -
                                                                  - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md deleted file mode 100644 index 1bfd10e0767..00000000000 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: アンケートフォームを作成する -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**目標:** https://survey-form.freecodecamp.rocks と似た機能を持つアプリを作成します - -**ユーザーストーリー:** - -1. `id` の値が `title` に設定されている `h1` 要素内に、ページタイトルがあります -1. `id` の値が `description` に設定されている `p` 要素内に、簡単な説明が記載されています -1. `id` の値が `survey-form` に設定されている `form` 要素が 1 つあります -1. その form 要素の中では、`id` の値が `name`、`type` の値が `text` である `input` 欄への名前の入力が**必須**となっています -1. その form 要素の中では、`id` の値が `email` である `input` 欄へのメールアドレスの入力が**必須**となっています -1. メールアドレスを不正なフォーマットで入力すると、HTML5 のバリデーションエラーが表示されます -1. フォームの中で、`id` の値が `number` に設定されている `input` の欄内に数値を入力できます -1. 数値入力欄は数値でない値を受け付けないように、数値以外の値が入力できないか、HTML5 のバリデーションエラーが表示されるようになっています (ブラウザによって動作が異なります) -1. `min` と `max` 属性で定義した範囲外の数字を入力すると、HTML5 のバリデーションエラーが表示されます -1. 名前、メールアドレス、数値の入力欄にそれぞれ対応して、各欄の目的を説明する `label` 要素がフォーム内にあり、それぞれ以下の id が設定されています: `id="name-label"`、`id="email-label"`、`id="number-label"` -1. 名前、メールアドレス、数値の入力欄には、各欄の説明や指示を示すプレイスホルダーテキストが表示されます -1. form 要素内には、`id` の値が `dropdown` に設定されている `select` ドロップダウン要素が 1 つあり、選択肢が少なくとも 2 つあります -1. form 要素内では、`name` 属性を使用してグループ化した 2 つ以上のラジオボタンのグループから、オプションを 1 つ選択できます -1. フォーム要素内では、一連のチェックボックスから複数の欄を選択することができ、各チェックボックスには `value` 属性が設定されています -1. form 要素内には、追加のコメント用に `textarea` が用意されています -1. form 要素内には、すべての入力内容を送信するために、`id` の値が `submit` に設定されたボタンが用意されています - -上記のユーザーストーリーを満たし、以下のすべてのテストが通るようにして、このプロジェクトを完成させてください。 あなた独自のアレンジを加えましょう。 ハッピーコーディング！ - -**注:** スタイルシートをリンクして CSS を適用するため、HTML のコード内に必ず `` を追加してください。 - -# --hints-- - -`id` の値が `title` に設定されている `h1` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -`#title` が空でないようにしてください。 - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -`id` が `description` である `p` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -`#description` が空でないようにしてください。 - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -`id` の値が `survey-form` に設定されている `form` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -`id` の値が `name` に設定されている `input` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -`#name` の `type` の値は `text` に設定されている必要があります。 - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -`#name` の入力が必須である必要があります。 - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -`#name` は `#survey-form` の子孫要素である必要があります。 - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -`id` の値が `email` に設定されている `input` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -`#email` の `type` の値は `email` に設定されている必要があります。 - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -`#email` の入力が必須である必要があります。 - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -`#email` は `#survey-form` の子孫要素である必要があります。 - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -`id` の値が `number` に設定されている `input` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -`#number` は `#survey-form` の子孫要素である必要があります。 - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -`#number` の `type` の値は `number` に設定されている必要があります。 - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -`#number` は数値が設定された `min` 属性をもつ必要があります。 - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -`#number` は数値が設定された `max` 属性をもつ必要があります。 - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -`id` の値が `name-label` に設定されている `label` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -`id` の値が `email-label` に設定されている `label` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -`id` の値が `number-label` に設定されている `label` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -`#name-label` には入力欄について説明するテキストを含める必要があります。 - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -`#email-label` には入力欄について説明するテキストを含める必要があります。 - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -`#number-label` には入力欄について説明するテキストを含める必要があります。 - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -`#name-label` は `#survey-form` の子孫要素である必要があります。 - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -`#email-label` は `#survey-form` の子孫要素である必要があります。 - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -`#number-label` は `#survey-form` の子孫要素である必要があります。 - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -`#name` は `placeholder` 属性とその値をもつ必要があります。 - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -`#email` は `placeholder` 属性とその値をもつ必要があります。 - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -`#number` は `placeholder` 属性とその値をもつ必要があります。 - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -`id` の値が `dropdown` に設定されている `select` 欄が 1 つ必要です。 - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -`#dropdown` は少なくとも 2 つの選択可能な (無効化されていない) `option` 要素をもつ必要があります。 - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -`#dropdown` は `#survey-form` の子孫要素である必要があります。 - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -`type` の値が `radio` (ラジオボタン) に設定されている `input` 要素が少なくとも 2 つ必要です。 - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -少なくとも 2 つのラジオボタンが `#survey-form` の子孫要素として必要です。 - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -すべてのラジオボタンには `value` 属性とその値が必要です。 - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -すべてのラジオボタンには `name` 属性とその値が必要です。 - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -ラジオボタンの各グループには少なくとも 2 つのラジオボタンが必要です。 - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -`type` の値が `checkbox` (チェックボックス) に設定されている `input` 要素が `#survey-form` の子孫要素として少なくとも 2 つ必要です。 - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -`#survey-form` 内のすべてのチェックボックスには `value` 属性とその値が必要です。 - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -少なくとも 1 つの `textarea` 要素が `#survey-form` の子孫要素として必要です。 - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -`id` の値が `submit` に設定されている、`input` または `button` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -`#submit` は `type` が `submit` に設定されている必要があります。 - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -`#submit` は `#survey-form` の子孫要素である必要があります。 - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Survey Form - - -

                                                                  Survey Form

                                                                  -

                                                                  The card below was built as a sample survey form for freeCodeCamp.

                                                                  -
                                                                  -

                                                                  Join the Togepi Fan Club!

                                                                  -

                                                                  - Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -

                                                                  -
                                                                  - - - - -

                                                                  Who is your favourite Pokemon?

                                                                  - - - -

                                                                  Which communications do you want to receive?

                                                                  - - - -

                                                                  Any other information you would like to share?

                                                                  - -

                                                                  - Please note: This form is a proof of concept. Submitting the form - will not actually transmit your data. -

                                                                  - -
                                                                  -
                                                                  - - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md deleted file mode 100644 index dbf854522e1..00000000000 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: 技術ドキュメントページを作成する -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**目標:** https://technical-documentation-page.freecodecamp.rocks と似た機能を持つアプリを作成します - -**ユーザーストーリー:** - -1. `id="main-doc"` を持ち、ページのメインコンテンツ (技術ドキュメント) が入る `main` 要素があります -1. `#main-doc` 要素内には、それぞれのクラスが `main-section` である `section` 要素が複数あります。 最低でも 5 個必要です -1. 各 `.main-section` 内の最初の要素は、そのセクションの主なトピックを説明するテキストが入った `header` 要素となっています。 -1. クラスが `main-section` の各 `section` 要素には、それぞれの `header` のテキストに対応する `id` も設定されています。 すべてのスペースはアンダースコアに置き換える必要があります (例: "JavaScript and Java" というヘッダーを含む section には、対応する `id="JavaScript_and_Java"` が必要です) -1. `.main-section` 要素には、(それぞれではなく) 合計で少なくとも 10 個の `p` 要素が含まれます -1. `.main-section` 要素には、(それぞれではなく) 合計で少なくとも 5 個の `code` 要素が含まれます -1. `.main-section` 要素には、(それぞれではなく) 合計で少なくとも 5 個の `li` 要素が含まれます -1. `id="navbar"` を持つ `nav` 要素が 1 つあります -1. ナビゲーションバー (navbar) の要素には、技術ドキュメントのトピックを説明するテキストが入った `header` 要素が 1 つ含まれています -1. さらに、ナビゲーションバーには `nav-link` のクラスを持つリンク (`a`) 要素が含まれています。 このリンクは、クラス `main-section` の各要素に対応して 1 つずつ存在します -1. `#navbar` 内の `header` 要素は、ナビゲーションバーのどのリンク (`a`) 要素よりも前に置かれなければなりません -1. `nav-link` クラスの各要素には、各 `section` 内の `header` テキストに対応するテキストが含まれていなければなりません (例えば、もし "Hello world" セクション / ヘッダーがあるならば、ナビゲーションバーには "Hello world" というテキストを含む要素が必要です) -1. ナビゲーションバーの要素をクリックすると、ページは `#main-doc` 要素内の対応するセクションに移動します (例えば、"Hello world" のテキストを含む `.nav-link` 要素をクリックしたならば、その id を持ち、対応するヘッダーを含む `section` 要素に移動しなければなりません) -1. 通常サイズのデバイス (ノート PC、デスクトップ) 上では、`id="navbar"` を持つ要素は画面の左側に表示され、常にユーザーから見える状態にしなければなりません -1. この技術ドキュメントには、少なくとも 1 つのメディアクエリが使われている必要があります - -上記のユーザーストーリーを満たし、以下のすべてのテストが通るようにして、このプロジェクトを完成させてください。 あなた独自のアレンジを加えましょう。 ハッピーコーディング！ - -**注:** スタイルシートをリンクして CSS を適用するため、HTML のコード内に必ず `` を追加してください。 - -# --hints-- - -`id` の値が `main-doc` に設定されている `main` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -クラスが `main-section` である `section` 要素が少なくとも 5 つ必要です。 - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -`.main-section` の要素はすべて `section` 要素である必要があります。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -`#main-doc` の子孫要素として、少なくとも 5 つの `.main-section` 要素が必要です。 - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -各 `.main-section` の最初の子要素は `header` 要素である必要があります。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -どの `header` 要素も空でないようにしてください。 - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -すべての `.main-section` 要素が `id` を持つようにしてください。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -各 `.main-section` が、その最初の子要素のテキストに対応する `id` を持つように、子要素のテキストのスペースをアンダースコア (`_`) に置き換えた id を設定してください。 - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -`.main-section` の要素内に、(合計で) 少なくとも 10 個の `p` 要素が必要です。 - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -`.main-section` の子孫要素として、(合計で) 少なくとも 5 個の `code` 要素が必要です。 - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -`.main-section` の子孫要素として、(合計で) 少なくとも 5 個の `li` 要素が必要です。 - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -`id` が `navbar` である `nav` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -`#navbar` 内に `header` 要素が 1 つだけあるようにしてください。 - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -クラスが `nav-link` である `a` 要素が少なくとも 1 つ必要です。 - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -`.nav-link` の要素はすべてアンカー (`a`) 要素である必要があります。 - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -`.nav-link` の要素はすべて `#navbar` の中にある必要があります。 - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -`.nav-link` の要素と `.main-section` の要素の数が同じである必要があります。 - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -`#navbar` 内の `header` 要素は、同じく `#navbar` 内にあるどのリンク (`a`) 要素よりも前に置かれなければなりません。 - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -各 `.nav-link` には、関連する `section` の `header` テキストに対応するテキストが必要です (例えば、もし "Hello world" セクション / ヘッダーがあるならば、`#navbar` には "Hello world" というテキストを含む `.nav-link` が必要です)。 - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -各 `.nav-link` には、対応する `.main-section` へとリンクする `href` 属性が必要です (例えば、"Hello world" のテキストを含む `.nav-link` 要素をクリックしたならば、その id を持つ `section` 要素に移動しなければなりません)。 - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -`#navbar` は常にウィンドウの左端にある必要があります。 - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -技術ドキュメントのプロジェクトに、少なくとも 1 つのメディアクエリが使われている必要があります。 - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Technical Documentation Page - - - -
                                                                  -
                                                                  -
                                                                  Introduction
                                                                  -

                                                                  - Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -

                                                                  -
                                                                  -
                                                                  -
                                                                  Definitions
                                                                  -

                                                                  - To start with, let's define some of the more common terms used in - algebra: -

                                                                  -
                                                                    -
                                                                  • - Variable: A variable is an unknown value, usually represented - by a letter. -
                                                                    • -
                                                                  • - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. -
                                                                    • -
                                                                  • - Equation: An equation is a mathematical argument in which two - expressions result in the same value. -
                                                                    • -
                                                                  -
                                                                  -
                                                                  -
                                                                  Examples
                                                                  -

                                                                  - Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.

                                                                  - x + 5 = 12

                                                                  - In this above example, we have: -

                                                                  -
                                                                    -
                                                                  • Variable: The variable in the example is "x".
                                                                    • -
                                                                  • - Expression: There are two expressions in this example. They - are "x+5" and "12". -
                                                                    • -
                                                                  • - Equation: The entire example, "x+5=12", is an equation. -
                                                                    • -
                                                                  -
                                                                  -
                                                                  -
                                                                  Solving Equations
                                                                  -

                                                                  - The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".

                                                                  - x + 5 = 12

                                                                  - In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
                                                                  For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.

                                                                  - x + 5 - 5 = 12 - 5

                                                                  - The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:

                                                                  - x = 7

                                                                  - We now have our solution to this equation! -

                                                                  -
                                                                  -
                                                                  -
                                                                  Solving Equations II
                                                                  -

                                                                  - Let us look at a slightly more challenging equation.

                                                                  - 3x + 4 = 13

                                                                  - Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:

                                                                  - 3x = 9

                                                                  - "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.

                                                                  - x = 3

                                                                  - And now we have our solution! -

                                                                  -
                                                                  -
                                                                  -
                                                                  Solving Equations III
                                                                  -

                                                                  - Now we are getting in to more complex operations. Here is another - equation for us to look at:

                                                                  - x^2 - 8 = 8

                                                                  - Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.

                                                                  - x^2 = 16

                                                                  - But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
                                                                  - An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -

                                                                  - x = √9

                                                                  - Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:

                                                                  - x = 3 -

                                                                  -
                                                                  -
                                                                  -
                                                                  System of Equations
                                                                  -

                                                                  - As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:

                                                                  - y = 3x

                                                                  - An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
                                                                  - Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:

                                                                  - y = 3x | y - 6 = x - A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:

                                                                  - 3x - 6 = x

                                                                  - Now we can solve for "x"! We start by adding 6 to each side.

                                                                  - 3x = x + 6

                                                                  - We still need to get "x" by itself, so we subtract "x" from both sides - and get:

                                                                  - 2x = 6

                                                                  - If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!

                                                                  - x = 3

                                                                  - However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:

                                                                  - y = 3x

                                                                  - We have a value for "x" now, so let's see what happens if we put that - value in.

                                                                  - y = 3*3

                                                                  - We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:

                                                                  - x = 3 and y = 9

                                                                  -

                                                                  -
                                                                  -
                                                                  -
                                                                  Try it Yourself!
                                                                  -

                                                                  Coming Soon!

                                                                  -

                                                                  Keep an eye out for new additions!

                                                                  -
                                                                  -
                                                                  -
                                                                  More Information
                                                                  -

                                                                  Check out the following links for more information!

                                                                  - -
                                                                  -
                                                                  - - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md deleted file mode 100644 index 4b26eadbe06..00000000000 --- a/curriculum/challenges/japanese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: トリビュートページを作成する -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**目標:** https://tribute-page.freecodecamp.rocks と似た機能を持つアプリを作成します - -**ユーザーストーリー:** - -1. トリビュートページには `id` が `main` に設定された `main` 要素が 1 つあり、その中に他のすべての要素が含まれます -1. `id` の値が `title` に設定されている要素が 1 つあり、それにはトリビュートページで取り上げる対象者 (例: "Dr. Norman Borlaug") を説明する文字列 (すなわちテキスト) が記載されています -1. `id` の値が `img-div` に設定されている `figure` 要素または `div` 要素のどちらかがあります -1. `#img-div` の要素内には、`id="image"` を持つ `img` 要素があります -1. `#img-div` の要素内には、`id="img-caption"` を持つ要素があり、そこには `#img-div` 内に表示されている画像を説明するテキストが含まれます -1. `id="tribute-info"` を持つ要素が 1 つあり、これにはトリビュートページの対象者を説明するテキストが含まれます -1. `id="tribute-link"` を持つ `a` 要素が 1 つあり、トリビュートページの対象者に関する追加情報を含む外部サイトへのリンクとなっています。 ヒント: リンクを新しいタブで開くためには、要素に `target` 属性を与え、その値に `_blank` を設定しなければなりません -1. `#image` に `max-width` と `height` プロパティを使用して、元のサイズを超えることなく、親要素の幅に応じてサイズが変更されるようにします -1. `img` 要素は親要素に対し (水平方向の) 中央に配置されています - -上記のユーザーストーリーを満たし、以下のすべてのテストが通るようにして、このプロジェクトを完成させてください。 あなた独自のアレンジを加えましょう。 ハッピーコーディング！ - -**注:** スタイルシートをリンクして CSS を適用するため、HTML のコード内に必ず `` を追加してください。 - -# --hints-- - -`id` の値が `main` に設定されている `main` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -`#img-div`、`#image`、`#img-caption`、`#tribute-info`、および `#tribute-link` は、すべて `#main` の子孫要素である必要があります。 - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -`id` が `title` の要素が 1 つ必要です。 - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -`#title` が空でないようにしてください。 - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -`id` の値が `img-div` に設定されている、`figure` または `div` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -`id` の値が `image` に設定されている `img` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -`#image` は `#img-div` の子孫要素である必要があります。 - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -`id` の値が `img-caption` に設定されている、`figcaption` または `div` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -`#img-caption` は `#img-div` の子孫要素である必要があります。 - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -`#img-caption` が空でないようにしてください。 - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -`id` が `tribute-info` の要素が 1 つ必要です。 - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -`#tribute-info` が空でないようにしてください。 - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -`id` の値が `tribute-link` に設定されている `a` 要素が 1 つ必要です。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -`#tribute-link` は `href` 属性とその値をもつ必要があります。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -`#tribute-link` は、値が `_blank` に設定されている `target` 属性をもつ必要があります。 - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -`img` 要素の `display` の値は `block` に設定されている必要があります。 - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -`#image` の `max-width` の値は `100%` に設定されている必要があります。 - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -`#image` の `height` の値は `auto` に設定されている必要があります。 - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -`#image` は親要素内の中央に配置する必要があります。 - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - - Tribute Page - - -

                                                                  Tribute Page

                                                                  -

                                                                  The below card was designed as a tribute page for freeCodeCamp.

                                                                  -
                                                                  -
                                                                  - An image of Togepi -
                                                                  Togepi, happy as always.
                                                                  -
                                                                  -

                                                                  Togepi

                                                                  -
                                                                  -
                                                                  -

                                                                  - Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -

                                                                  -

                                                                  - Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -

                                                                  -
                                                                  -

                                                                  Battle Information

                                                                  -
                                                                    -
                                                                  • Type: Fairy
                                                                    • -
                                                                  • Evolutions: Togepi -> Togetic -> Togekiss
                                                                    • -
                                                                  • Moves: Growl, Pound, Sweet Kiss, Charm
                                                                    • -
                                                                  • Weaknesses: Poison, Steel
                                                                    • -
                                                                  • Resistances: Dragon
                                                                    • -
                                                                  -

                                                                  - Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -

                                                                  -
                                                                  -
                                                                  - - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md deleted file mode 100644 index 6a9eedf5e9d..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05b -title: 独自の関数を作成する -challengeType: 11 -videoId: nLDychdBwUg -bilibiliIds: - aid: 249487483 - bvid: BV1Fv411J7bS - cid: 376340281 -dashedName: build-your-own-functions ---- - -# --description-- - -その他のリソース: - -\- 演習 - -# --question-- - -## --text-- - -次の Python プログラムは何を出力しますか？ - -```python -def fred(): - print("Zap") -def jane(): - print("ABC") - -jane() -fred() -jane() -``` - -## --answers-- - -
                                                                  Zap
-ABC
-jane
-fred
-jane
                                                                  - ---- - -
                                                                  Zap
-ABC
-Zap
                                                                  - ---- - -
                                                                  ABC
-Zap
-jane
                                                                  - ---- - -
                                                                  ABC
-Zap
-ABC
                                                                  - ---- - -
                                                                  Zap
-Zap
-Zap
                                                                  - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index 0a11e7560a1..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: タプルの比較と並べ替え -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -その他のリソース: - -\- 演習 - -# --question-- - -## --text-- - -次のコードと同じ動作をするものはどれですか？ - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index b61942880dc..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: 条件付き実行 -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -x = 0 かつ y = 10 の場合、”Yes” を出力するために正しくインデントされているコードはどれですか？ - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index 01dab699ede..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: 'データ可視化: メーリングリスト' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -その他のリソース: - -\- 演習: Geodata - -\- 演習: Gmane Model - -\- 演習: Gmane Spider - -\- 演習: Gmane Viz - -\- 演習: Page Rank - -\- 演習: Page Spider - -\- 演習: Page Viz - -# --question-- - -## --text-- - -一般的な JavaScript 可視化ライブラリはどれですか？ - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index b0ff2dc87cd..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: 'データ可視化: Page Rank' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -PageRank アルゴリズムはどのように動作しますか？ - -## --answers-- - -どのページが最も接続数が多いかを判断する。 - ---- - -閲覧数に基づいてページをランク付けする。 - ---- - -どのページに最も重要なコンテンツが含まれているかを解析する。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index b084b07c7cd..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: 辞書とループ -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -その他のリソース: - -\- 演習 - -# --question-- - -## --text-- - -次のコードは何を表示しますか？ - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -
                                                                  annie 42
-jan 100
                                                                  - ---- - -
                                                                  chuck 1
-annie 42
-jan 100
                                                                  - ---- - -
                                                                  chuck 1
                                                                  - ---- - -
                                                                  [エラー]
                                                                  - -## --video-solution-- - -1 diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index 34fad79388b..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: '辞書: 一般的な例' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -次のコードは何を表示しますか？ - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[エラーを返す] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index 3b6e26b6355..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: ファイルをシーケンスとして扱う -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -その他のリソース: - -\- 演習 - -# --question-- - -## --text-- - -ループの途中で出現する「continue」という言葉は、何をすることを表していますか？ - -## --answers-- - -ループの直後のコードにスキップする。 - ---- - -コードの次の行にスキップする。 - ---- - -ループの次の繰り返しにスキップする。 - ---- - -次のコードブロックをスキップする。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index c1d2f6e2570..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: 中間の式 -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -その他のリソース: - -\- 演習 1 - -\- 演習 2 - -# --question-- - -## --text-- - -このコードを実行すると何が出力されますか？ - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index 90f9da2bc19..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: 中間の文字列 -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -その他のリソース: - -\- 演習 - -# --question-- - -## --text-- - -次のコードで i の値は何になりますか？ - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index c7b4c4bb50a..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: 'はじめに: Python の要素' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -次のプログラムは何を出力しますか？ - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index 7083aa9a23d..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: 'はじめに: ハードウェアアーキテクチャ' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -実行中のプログラムはどこに保存されていますか？ - -## --answers-- - -ハードドライブ - ---- - -メモリ - ---- - -中央処理装置 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index 1970dadab11..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: 'はじめに: 言語としての Python' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -この 2 行のコードを実行すると何が出力されますか？ - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index 771d14974ea..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: 'はじめに: なぜプログラムなのか?' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -その他のリソース: - -\- Windows に Python をインストール - -\- MacOS に Python をインストール - -# --question-- - -## --text-- - -誰がプログラミングを学ぶべきですか？ - -## --answers-- - -大学生 - -### --feedback-- - -College students should learn to program, but there's a better answer. - ---- - -People who want to become software developers. - -### --feedback-- - -People who want to become software developers should learn to program, but there's a better answer. - ---- - -Everyone. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index 55697d38aec..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: '繰り返し: 有限ループ' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -次のコードの出力は何行ですか？ - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index e39ac737153..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: '繰り返し: ループの用法' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -次のコードでは、値のリストから最小値を見つけようとしています。 この中の 1 行に誤りがあり、コードが期待どおりに動作しません。 どの行ですか？ - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index 701e4409276..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: '繰り返し: その他のパターン' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -その他のリソース: - -\- 演習 - -# --question-- - -## --text-- - -次のうち、どれが False と評価されますか？ - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 52ee5f3a091..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: ループと繰り返し処理 -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -次のコードは何を表示しますか？ - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -
                                                                  0
-1
-2
                                                                  - ---- - -
                                                                  0
-1
-2
-3
                                                                  - ---- - -
                                                                  1
-2
                                                                  - ---- - -
                                                                  1
-2
-3
                                                                  - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index 7b126fb5ca3..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: リレーショナルデータベースを作成する -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -メールアドレス `quincy@freecodecamp.org` を持つすべてのユーザーを取得するために使用する SQL コマンドはどれですか？ - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index 41b1d33d18f..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: その他の条件付き構造 -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -その他のリソース: - -\- 演習 1 - -\- 演習 2 - -# --question-- - -## --text-- - -次のコードがあります。 - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -どの行を `try` ブロックで囲むべきですか？ - -## --answers-- - -1 - ---- - -3 - ---- - -3、4 - ---- - -4 - ---- - -該当なし - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index 3aef86521c3..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: ネットワーキングプロトコル -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -ウェブサイトにアクセスするために通常使用する HTTP リクエストのタイプはどれですか？ - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index 5a229f66d49..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: 'ネットワーキング: テキスト処理' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -ほとんどのウェブサイトで使用されているエンコードのタイプはどれですか？ - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index 2d112edd6ac..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: 'ネットワーキング: Python で urllib を使用する' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -次のコードの出力はどのようになりますか？ - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -"romeo.txt" の内容のみ。 - ---- - -ヘッダーと "romeo.txt" の内容。 - ---- - -ヘッダー、フッター、および "romeo.txt" の内容。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index bb6143c9fa3..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: 'ネットワーキング: Python でウェブスクレイピングを行う' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -その他のリソース: - -\- 演習: socket1 - -\- 演習: urllib - -\- 演習: urllinks - -# --question-- - -## --text-- - -HTML ドキュメントの解析や HTML ドキュメントからのデータ抽出に使用する Python ライブラリはどれですか？ - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index 15239326c1a..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: Python によるネットワーキング -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -TCP ソケットへのアクセス手段を提供する Python ライブラリはどれですか？ - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index c0ff28685d3..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: 'ネットワーキング: ウェブブラウザーを作成する' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -次のコードは何を作成しますか？ - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -シンプルなウェブサーバー。 - ---- - -シンプルな電子メールクライアント。 - ---- - -シンプルな todo リスト。 - ---- - -シンプルなウェブブラウザー。 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index 9564fecbd89..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: オブジェクトのライフサイクル -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -次のプログラムは何を出力しますか？ - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - -
                                                                  -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 2
-Quincy party count 3
-
                                                                  - ---- - -
                                                                  -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 1
-Quincy party count 2
-
                                                                  - ---- - -
                                                                  -Quincy constructed
-Quincy party count 1
-Quincy party count 2
-Miya constructed
-Miya party count 1
-
                                                                  - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index 611dd788287..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: 'オブジェクト: サンプルクラス' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -次のプログラムは何を出力しますか？ - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - -
                                                                  -So far 1
-So far 2
-
                                                                  - ---- - -
                                                                  -0
-0
-
                                                                  - ---- - -
                                                                  -2
-2
-
                                                                  - ---- - -
                                                                  -2
-4
-
                                                                  - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index 6e5e2d56789..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: 'オブジェクト: 継承' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -オブジェクト指向プログラミングにおける継承とは何ですか？ - -## --answers-- - -親クラスが拡張されたときに作成される新しいクラス。 - ---- - -クラスの構築されたインスタンス。 - ---- - -既存のクラスを拡張して新しいクラスを作成する機能。 - ---- - -オブジェクトを構築するためにクラスが使用された時点で呼び出されるメソッド。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index 081fd135ac3..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Python の辞書 -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -このコードを実行した後、dict はどれに等しくなりますか？ - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index 1350773de1b..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Python の関数 -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -Python の "def" キーワードの用途は何ですか？ - -## --answers-- - -「次のコードは本当にクールです」という意味のスラング。 - ---- - -関数の始まりを示す。 - ---- - -以降のインデントされたコードセクションを後で保存する必要があることを示す。 - ---- - -関数の始まりを示し、以降のインデントされたコードセクションを後で保存する必要があることを示す。 - ---- - -上記のいずれでもない。 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index 2ab037c7655..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Python のリスト -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -このコードを実行した後の x の値は何ですか？ - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index 27c20f63fc1..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Python のオブジェクト -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -Python のオブジェクトについての説明として正しくないのはどれですか？ - -## --answers-- - -オブジェクトは作成され、使用される。 - ---- - -オブジェクトはコードやデータの集まりである。 - ---- - -オブジェクトは詳細を隠す。 - ---- - -オブジェクトは 5 つの標準的なデータ型のうちの 1 つである。 - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index 0e3336f48ab..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: ファイルを読み取る -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -文字列の新しい行を示すために使用するものは何ですか？ - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index f2a058d9dce..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: '正規表現: データの照合と抽出' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -次のプログラムは何を出力しますか？ - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index ee424994101..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: '正規表現: 実用的な例' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -正規表現で "$" を検索するものは何ですか？ - -## --answers-- - -$ - ---- - -\\dollar\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index b60bbf455d7..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: 正規表現 -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -空白文字のみにマッチする正規表現はどれですか？ - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index 965c13ce2d9..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: リレーショナルデータベースの設計 -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -文字列データをデータベースに保存する際にベストプラクティスとなっている保存回数は何回ですか？ - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index 43fa5b97042..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: リレーショナルデータベースと SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -SQLite をダウンロード -DB Browser for SQLite をダウンロード -SQLite の活用事例 - -# --question-- - -## --text-- - -データベースの基本のデータ構造「ではない」ものはどれですか？ - -## --answers-- - -インデックス - ---- - -テーブル - ---- - -行 - ---- - -列 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index 10e05495a0c..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: 'リレーショナルデータベース: 結合操作' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -SQL ステートメントで JOIN 句を使用する場合、ON は何を実行しますか？ - -## --answers-- - -JOIN を実行するテーブルを示す。 - ---- - -JOIN に使用するフィールドを指定する。 - ---- - -2 つのテーブルをどのように結合するかを示す。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index ffb0cb29d44..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: 'リレーショナルデータベース: 多対多のリレーションシップ' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -その他のリソース: - -\- 演習: Email - -\- 演習: Roster - -\- 演習: Tracks - -\- 演習: Twfriends - -\- 演習: Twspider - -# --question-- - -## --text-- - -多対多のリレーションシップの具体例はどれですか？ - -## --answers-- - -先生と生徒 - ---- - -客と注文 - ---- - -本とページ - ---- - -都市と国 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index 65bbda5474b..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: 'リレーショナルデータベース: リレーションシップの構築' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -SQL の INSERT コマンドは何を実行しますか？ - -## --answers-- - -新しい行を定義する。そのために、挿入したいフィールドを列挙し、その後に、新しい行に配置したい値を記述する。 - ---- - -新しい列を定義する。そのために、挿入したい行を列挙し、その後に、新しい列に配置したい値を記述する。 - ---- - -新しいテーブルを定義する。そのために、挿入したい行とフィールドを列挙し、その後に、テーブルに配置したい値を記述する。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index 3bf5f7f3b06..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: リレーショナルデータベースのリレーションシップを表現する -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -外部キーとは何ですか？ - -## --answers-- - -そこにあるはずのないキー。 - ---- - -非ラテン文字を使用するキー。 - ---- - -別のテーブルにある関連する行の主キーを指す数値。 - ---- - -"Real world" で行をルックアップ検索するために使用する可能性のあるキー。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index df8bc9f0c80..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: 文字列とリスト -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -その他のリソース: - -\- 演習 - -# --question-- - -## --text-- - -このコードで n は何に等しくなりますか？ - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -mail - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index b1f0474e7e4..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Python の文字列 -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -次のコードは何を表示しますか？ - -```python -for n in "banana": - print(n) -``` - -## --answers-- - -
                                                                  -n
-n
-
                                                                  - ---- - -
                                                                  -0
-1
-
                                                                  - ---- - -
                                                                  -0
-1
-2
-3
-4
-5
-
                                                                  - ---- - -
                                                                  -b
-a
-n
-a
-n
-a
-
                                                                  - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index 99a8d88c071..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: タプルコレクション -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -次のコードは何を表示しますか？ - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - -
                                                                  -k i
-k i
-k i
-
                                                                  - ---- - -
                                                                  -quincy 0
-beau 1
-kris 2
-
                                                                  - ---- - -
                                                                  -quincy 1
-beau 5
-kris 9
-
                                                                  - ---- - -
                                                                  -1 quincy
-5 beau
-9 kris
-
                                                                  - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index 7b59ba7a4a6..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: ウェブサービスを利用する -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -インターネットでデータを送信するための最も一般的な 2 つの方法は何ですか？ - -## --answers-- - -JSON と TXT - ---- - -JSON と XML - ---- - -XML と TXT - ---- - -XML と PHP - ---- - -PHP と TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index 2a875ba41e4..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: '変数、式、ステートメント' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -代入ステートメントで使用する記号は何ですか？ - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index b214ff43a1e..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: Python でデータを可視化する -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -ほとんどのデータは使用する前に \_\_\_\_\_\_ する必要があります。 - -## --answers-- - -JSON 形式に変換 - ---- - -グラフ化 - ---- - -クリーニング - ---- - -記憶 - ---- - -歌詞化 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index c46a2b12c07..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'ウェブサービス: API レート制限とセキュリティ' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -その他のリソース: - -\- 演習: GeoJSON - -\- 演習: JSON - -\- 演習: Twitter - -\- 演習: XML - -# --question-- - -## --text-- - -Twitter API からリクエストを行う場合、常にリクエストと一緒に送信する必要がある情報は何ですか？ - -## --answers-- - -Twitter のユーザー名 - ---- - -日付の範囲 - ---- - -検索キーワード - ---- - -キー - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index a77809b422f..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'ウェブサービス: API' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -API とは何の略ですか？ - -## --answers-- - -アプリケーション・ポータブル・インテリジェンス - ---- - -アソシエイト・プログラミング・インターナショナル - ---- - -アプリケーション・プログラム・インターフェイス - ---- - -アクション・ポータブル・インターフェイス - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index 849974b079f..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'ウェブサービス: JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -次のコードは何を表示しますか？ - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[エラー] - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index 1e087e67704..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'ウェブサービス: サービス指向のアプローチ' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -サービス指向のウェブアプリ開発アプローチでは、データはどこに存在しますか？ - -## --answers-- - -インターネットまたは内部ネットワークを介して接続された多くのコンピューターシステムに散在している。 - ---- - -メインのウェブサーバー上の異なるサービス内にある。 - ---- - -別のデータベースサーバー上にある。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index f7d656b224d..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'ウェブサービス: XML スキーマ' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -XSD とは何ですか？ - -## --answers-- - -XML に対する W3C スキーマ仕様。 - ---- - -MOZ からの標準 JSON スキーマ。 - ---- - -拡張可能な状況依存ドライバー。 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index add041ed188..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'ウェブサービス: XML' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -次の XML で何が間違っていますか？ - -```xml - - Chuck - - +1 734 303 4456 - - -``` - -## --answers-- - -email タグに終了タグがない。 - ---- - -スペースの記述が原因で XML が無効になる。 - ---- - -phone タグに終了タグがない。 - ---- - -プレーンテキストは UTF-8 を使用してエンコードする必要がある。 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md deleted file mode 100644 index 6b07a7a96d7..00000000000 --- a/curriculum/challenges/japanese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f065 -title: リストの操作 -challengeType: 11 -videoId: lCnHfTHkhbE -bilibiliIds: - aid: 376965958 - bvid: BV1No4y1S7oi - cid: 376387989 -dashedName: working-with-lists ---- - -# --question-- - -## --text-- - -リストの末尾にアイテムを追加するために使用するメソッドはどれですか？ - -## --answers-- - -insert - ---- - -push - ---- - -append - ---- - -new - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md deleted file mode 100644 index 81ca99f6529..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f33310c1851c6c4da013250 -title: ステップ 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -メニューの中身を追加しましょう。 `main` 要素を既存の `header` 要素の下に追加してください。 後ほど、カフェが提供するコーヒーとデザートの値段をここに入れます。 - -# --hints-- - -`
                                                                  ` の開始タグが 1 つ必要です。 - -```js -assert(code.match(/
                                                                  /i)); -``` - -終了タグ `
                                                                  ` が 1 つ必要です。 - -```js -assert(code.match(/<\/main>/i)); -``` - -`header` 要素を変更しないでください。 誤って終了タグを削除していないか確認してください。 - -```js -assert($('header').length === 1); -``` - -`main` タグを `header` タグの後に置く必要があります。 - -```js -const main = document.querySelectorAll('main')[0]; -assert(main.previousElementSibling.tagName === 'HEADER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - ---fcc-editable-region-- -
                                                                  -

                                                                  CAMPER CAFE

                                                                  -

                                                                  Est. 2020

                                                                  -
                                                                  ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index 3f4cd5437dc..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: ステップ 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -フレックスボックスとは、コンテナー内のアイテムの間隔や整列方法を制御するための一次元の CSS レイアウトです。 - -フレックスボックスを使用するには、要素の `display` プロパティを `flex` に設定します。 これにより、要素がフレックスコンテナーとなります。 フレックスコンテナーの直接の子要素はフレックスアイテムと呼ばれます。 - -`.gallery` セレクターを作成して、それをフレックスコンテナーにしてください。 - -# --hints-- - -`.gallery` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); -``` - -`.gallery` セレクターの `display` プロパティの値を `flex` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
                                                                  -

                                                                  css flexbox photo gallery

                                                                  -
                                                                  -
                                                                  - - - - - - - - - -
                                                                  - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; -} - -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { - width: 100%; - max-width: 350px; - height: 300px; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index 99727e0185c..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: ステップ 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -HTML 構造の準備から始めましょう。 `` 宣言と、`lang` 属性を `en` に設定した `html` 要素を追加してください。 `html` 要素の中に `head` 要素と `body` 要素を追加してください。 - -# --hints-- - -コードに `DOCTYPE` 参照を入れる必要があります。 - -```js -assert(code.match(/` を入力して、`DOCTYPE` 宣言を閉じる必要があります。 - -```js -assert(code.match(/html\s*>/gi)); -``` - -`DOCTYPE` 宣言は HTML の先頭にある必要があります。 - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -`html` 要素には `lang` 属性 `en` を持つ開始タグが必要です。 - -```js -assert(code.match(//gi)); -``` - -`html` 要素には終了タグが必要です。 - -```js -assert(code.match(/<\/html\s*>/)); -``` - -`head` の開始タグが 1 つ必要です。 - -```js -assert(code.match(//i)); -``` - -`head` の終了タグが 1 つ必要です。 - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -`body` の開始タグが 1 つ必要です。 - -```js -assert(code.match(//i)); -``` - -`body` の終了タグが 1 つ必要です。 - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -`head` 要素と `body` 要素は兄弟要素である必要があります。 - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -`head` 要素は `html` 要素の中にある必要があります。 - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -`body` 要素は `html` 要素の中にある必要があります。 - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md deleted file mode 100644 index 1f20bb26b42..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: ステップ 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -`head` 要素内に `meta` タグを追加し、`charset` 属性を `utf-8` に設定してください。 また、`title` 要素を追加して、`Picasso Painting` というテキストを設定してください。 - -# --hints-- - -`meta` 要素が 1 つ必要です。 - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -`meta` 要素には `charset` 属性が必要です。 - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -`charset` 属性を `utf-8` に設定する必要があります。 - -```js -assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -``` - -`title` 要素が 1 つ必要です。 - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -`title` 要素は `Picasso Painting` というテキストをもつ必要があります。 スペルや大文字小文字の区別に気をつけましょう。 - -```js -assert(document.querySelector('title')?.innerText === 'Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md deleted file mode 100644 index bb9dd91915f..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: ステップ 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -FontAwesome とは SVG アイコンのライブラリで、大部分が無料で利用できます。 このプロジェクトでは FontAwesome のアイコンをいくつか使用するので、HTML に外部スタイルシートをリンクする必要があります。 - -`link` 要素を追加して、`rel` を `stylesheet` に、`href` は `https://use.fontawesome.com/releases/v5.8.2/css/all.css` に設定してください。 - -# --hints-- - -`link` 要素が 2 つ必要です。 - -```js -assert(document.querySelectorAll('link').length === 2); -``` - -`link` 要素の `rel` は `stylesheet` に設定されている必要があります。 - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); -``` - -`link` 要素の `href` は `https://use.fontawesome.com/releases/v5.8.2/css/all.css` に設定されている必要があります。 - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index 7431ff9d301..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: ステップ 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -では絵画を作り始めます。まず `body` 要素の `background-color` を `rgb(184, 132, 46)` に設定してください。 - -# --hints-- - -`body` セレクターを使用してください。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -`body` 要素の `background-color` プロパティが `rgb (184, 132, 46)` に設定されている必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index f869cdeaf53..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: ステップ 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -本文 (body) タグ内に `div` 要素を追加してください。 その `id` を `back-wall` に設定してください。 - -# --hints-- - -`div` 要素が 1 つ必要です。 - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -`div` 要素の `id` の値を `back-wall` に設定する必要があります。 - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index f16e191e50c..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: ステップ 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -ID セレクターを使用して、ID が `back-wall` の要素の `background-color` を `#8B4513` に設定してください。 - -# --hints-- - -`#back-wall` セレクターを使用する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -`#back-wall` セレクターの `background-color` プロパティを `#8B4513` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index 6692c5845e1..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: ステップ 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -`#back-wall` の要素の `width` を `100%` に、`height` を `60%` に設定してください。 - -# --hints-- - -`#back-wall` セレクターの `width` を `100%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -`#back-wall` セレクターの `height` を `60%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index ec0b7d4bdea..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: ステップ 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -通常、HTML は上から下にレンダリングされます。 コードの上部にある要素は、ページの上部に表示されます。 しかし、要素を異なる位置に移動させたい場合も多々あります。 それには `position` プロパティを使います。 - -`#back-wall` の要素の `position` プロパティを `absolute` に設定してください。 `absolute` 位置指定は、上から下に向かうドキュメントフローから要素を除外し、その要素のコンテナーからの相対位置での位置調整を可能にします。 - -要素を手動で位置指定する場合、`top`、`left`、`right`、`bottom` を使用してレイアウトを調整できます。 `#back-wall` 要素の `top` の値が `0`、`left` の値が `0` になるよう設定してください。 - - -# --hints-- - -`#back-wall` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -`#back-wall` セレクターの `top` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -`#back-wall` セレクターの `left` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index 18db078da77..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: ステップ 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -`z-index` プロパティは、HTML 要素に「レイヤー」を作成するために使われます。 画像編集ツールを使い慣れている人であれば、レイヤーを使って作業したことがあるかもしれません。 それとよく似た概念です。 - -`z-index` の値が大きい要素は、`z-index` の値が小さい要素の上 (手前) に重なって表示されます。 これと 1 つ前のレッスンの位置指定 (position) を組み合わせて、ユニークな効果を生み出すことができます。 - -ID を `back-wall` にした要素を、これから作成する他の要素の「後ろ」に表示したいので、`back-wall` の要素の `z-index` を `-1` に設定してください。 - -# --hints-- - -`#back-wall` セレクターの `z-index` プロパティを `-1` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index 5fc2ea0d80e..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: ステップ 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -`#back-wall` の要素の下に、`div` を作成して `class` を `characters` に設定してください。 ここに絵画のキャラクターを作成していきます。 - -# --hints-- - -新しい `div` 要素を 1 つだけ追加してください。 - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -新しい `div` 要素は `#back-wall` 要素の後に置く必要があります。 - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -新しい `div` 要素の `class` を `characters` に設定する必要があります。 - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index a299a24b312..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: ステップ 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -`.characters` の要素内に、もう 1 つ `div` を作成し、`id` を `offwhite-character` に設定してください。 - -# --hints-- - -`div` 要素を 1 つだけ追加してください。 - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -新しい `div` 要素は `.characters` 要素内にネストされる必要があります。 - -```js -assert(document.querySelector('.characters div')); -``` - -新しい `div` 要素の `id` を `offwhite-character` に設定する必要があります。 - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index 50cd0cd056c..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: ステップ 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -ID が `offwhite-character` の要素内に `div` 要素を 4 つ作成してください。 その `div` 要素に、以下の `id` の値をこの順で設定してください: `white-hat`、`black-mask`、`gray-instrument`、`tan-table` - -# --hints-- - -`.offwhite-character` 要素内に `div` 要素を 4 つ追加する必要があります。 - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -1 つ目の新しい `div` 要素の `id` は `white-hat` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -2 つ目の新しい `div` 要素の `id` は `black-mask` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -3 つ目の新しい `div` 要素の `id` は `gray-instrument` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -4 つ目の新しい `div` 要素の `id` は `tan-table` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index 7a9e51b00df..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: ステップ 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -キャラクターの目を作りましょう。 `#black-mask` の要素内に `div` 要素を 2 つ作成してください。 作成した要素に、順番に `eyes left` と `eyes right` というクラスを設定してください。 - -# --hints-- - -`#black-mask` 要素内に `div` 要素を 2 つ作成する必要があります。 - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -1 つ目の新しい `div` には、`eyes` と `left` というクラスが必要です。 - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -2 つ目の新しい `div` には、`eyes` と `right` というクラスが必要です。 - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index aa249822a81..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: ステップ 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -楽器に付ける「点」を作成します。 `#gray-instrument` の要素内に `div` 要素を 5 つ追加してください。 それぞれの `class` を `black-dot` に設定してください。 - -# --hints-- - -`#gray-instrument` 要素内に新しい `div` 要素が 5 つ必要です。 - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -5 つの新しい `div` 要素すべてにクラス `black-dot` が必要です。 - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index 3427c436ef7..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: ステップ 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -ID セレクターを使用して、`offwhite-character` という ID を持つ要素を対象とするルールを作成してください。 その `width` を `300px`、`height` を `550px`、`background-color` を `GhostWhite` に設定してください。 - -# --hints-- - -`#offwhite-character` セレクターを使用する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -`#offwhite-character` の `width` プロパティを `300px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -`#offwhite-character` の `height` プロパティを `550px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -`#offwhite-character` の `background-color` プロパティを `GhostWhite` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index d4ee4abb5e2..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: ステップ 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -`#offwhite-character` を所定の位置に動かすために、`position` を `absolute` に、`top` の値を `20%` に、`left` の値を `17.5%` に設定してください。 - -# --hints-- - -`#offwhite-character` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -`#offwhite-character` セレクターの `top` プロパティを `20%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -`#offwhite-character` セレクターの `left` プロパティを `17.5%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index 2e5d32a6e39..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: ステップ 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -ID セレクターを使用して、`white-hat` という ID を持つ要素のスタイルを設定しましょう。 `width` と `height` を `0` に、`border-style` を `solid` に設定してください。 - -# --hints-- - -`#white-hat` セレクターを使用する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -`#white-hat` セレクターの `width` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -`#white-hat` セレクターの `height` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -`#white-hat` セレクターの `border-style` プロパティを `solid` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index 188847a6125..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: ステップ 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -まだ思うような見た目ではありませんね。 帽子を適切な大きさにするために、`border-width` を `0 120px 140px 180px` に設定してください。 - -# --hints-- - -`#white-hat` セレクターの `border-width` プロパティを `0 120px 140px 180px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index 11bb1d99f4c..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: ステップ 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -これで大きな長方形ができました。 次に `border-top-color`、`border-right-color`、`border-left-color` を、`transparent` に設定してください。 `border-bottom-color` は `GhostWhite` に設定してください。 これで、もう少し帽子らしい形になります。 - -# --hints-- - -`#white-hat` セレクターの `border-top-color` プロパティを `transparent` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -`#white-hat` セレクターの `border-right-color` プロパティを `transparent` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -`#white-hat` セレクターの `border-left-color` プロパティを `transparent` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -`#white-hat` セレクターの `border-bottom-color` プロパティを `GhostWhite` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index e527e20c00f..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: ステップ 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -帽子 (white-hat) の `position` を `absolute` に、`top` の値を `-140px` に、`left` の値を `0` に設定してください。 - -# --hints-- - -`#white-hat` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -`#white-hat` セレクターの `top` プロパティを `-140px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -`#white-hat` セレクターの `left` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index ddde3c4fedc..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: ステップ 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -ID セレクターを使用して、`black-mask` という ID を持つ要素を対象とするルールを作成してください。 `width` を `100%`、`height` を `50px`、`background-color` を `rgb(45, 31, 19)` に設定してください。 - -# --hints-- - -`#black-mask` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -`#black-mask` セレクターの `width` プロパティを `100%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -`#black-mask` セレクターの `height` プロパティを `50px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -`#black-mask` セレクターの `background-color` プロパティを `rgb(45, 31, 19)` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index ed260b8a339..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: ステップ 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -仮面 (black-mask) の `position` を `absolute` に、`top` と `left` の値を `0` に設定してください。 - -# --hints-- - -`#black-mask` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -`#black-mask` セレクターの `top` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -`#black-mask` セレクターの `left` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index 2790fef00f5..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: ステップ 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -仮面が必ず見えるように、`z-index` を `1` に設定してください。 - -# --hints-- - -`#black-mask` セレクターの `z-index` プロパティを `1` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index 8cbfb01567e..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: ステップ 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -ID セレクターを使用して、ID が `gray-instrument` の要素の `width` を `15%`、`height` を `40%`、`background-color` を `rgb(167, 162, 117)` に設定してください。 - -# --hints-- - -`#gray-instrument` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -`#gray-instrument` セレクターの `width` プロパティを `15%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -`#gray-instrument` セレクターの `height` プロパティを `40%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -`#gray-instrument` セレクターの `background-color` プロパティを `rgb(167, 162, 117)` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index 6f1f90e0cbe..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: ステップ 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -ではこの楽器 (gray-instrument) を所定の位置に移動するために、`position` を `absolute` に、`top` の値を `50px` に、`left` の値を `125px` に設定してください。 - -# --hints-- - -`#gray-instrument` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -`#gray-instrument` セレクターの `top` プロパティを `50px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -`#gray-instrument` セレクターの `left` プロパティを `125px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index 930347bc736..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: ステップ 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -`z-index` を `1` に設定してください。 - -# --hints-- - -`#gray-instrument` セレクターの `z-index` プロパティを `1` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index 7df0441cf6d..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: ステップ 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -クラスセレクターを使用して、`black-dot` クラスの要素を対象とするルールを作成してください。 その `width` を `10px` に、`height` を `10px` に、`background-color` を `rgb(45, 31, 19)` に設定してください。 - -# --hints-- - -`.black-dot` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -`.black-dot` セレクターの `width` プロパティを `10px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -`.black-dot` セレクターの `height` プロパティを `10px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -`.black-dot` セレクターの `background-color` プロパティを `rgb(45, 31, 19)` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index 912caeb9a8f..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: ステップ 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -点がまだ、ただの四角形ですね。 `black-dot` クラスの `border-radius` を `50%` に設定して修正しましょう。 - -# --hints-- - -`.black-dot` セレクターの `border-radius` プロパティを `50%` に設定する必要があります。 - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index 2aa7b589abe..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: ステップ 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -点を所定の位置に移動するため、`display` を `block` に、`margin` を `auto` に、`margin-top` を `65%` に設定してください。 - -# --hints-- - -`.black-dot` セレクターの `display` プロパティを `block` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -`.black-dot` セレクターの `margin` プロパティを `auto` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -`.black-dot` セレクターの `margin-top` プロパティを `65%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index 5ef9c0d6cf9..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: ステップ 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -ID セレクターを使用して、`tan-table` という ID を持つ要素のスタイルを設定しましょう。 `width` を `450px` に、`height` を `140px` に、`background-color` を `#D2691E` に設定してください。 - -# --hints-- - -`#tan-table` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -`#tan-table` セレクターの `width` プロパティを `450px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -`#tan-table` セレクターの `height` プロパティを `140px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -`#tan-table` セレクターの `background-color` プロパティを `#D2691E` に設定する必要があります。 - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index 0302b93299b..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: ステップ 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -テーブル (tan-table) を所定の位置に移動するために、`position` を `absolute` に、`top` の値を `275px` に、`left` の値を `15px` に設定してください。 - -# --hints-- - -`#tan-table` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -`#tan-table` セレクターの `top` プロパティを `275px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -`#tan-table` セレクターの `left` プロパティを `15px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index cfe17ca5966..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: ステップ 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -テーブルの `z-index` を `1` に設定してください。 - -# --hints-- - -`#tan-table` セレクターの `z-index` プロパティを `1` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index ed57251dccf..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: ステップ 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -`div#offwhite-character` の要素の後に、`id` が `black-character` の `div` を追加してください。 - -# --hints-- - -`.characters` 要素内に新しい `div` 要素を追加する必要があります。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -新しい `div` 要素の `id` を `black-character` に設定する必要があります。 - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index 723966211d0..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: ステップ 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -今追加した `#black-character` の要素の中に、`div` 要素を 3 つ追加して、以下の `id` の値を順に設定してください: `black-hat`、`gray-mask`、`white-paper` - -# --hints-- - -`#black-character` 要素内に `div` 要素を 3 つ作成する必要があります。 - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -1 つ目の新しい `div` 要素の `id` は `black-hat` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -2 つ目の新しい `div` 要素の `id` は `gray-mask` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -3 つ目の新しい `div` 要素の `id` は `white-paper` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index 89d2ec0c2d7..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: ステップ 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -仮面に目を付けましょう。 `#gray-mask` の要素内に `div` 要素を 2 つ追加してください。 1 つ目は `class` を `eyes left` に、2 つ目は `class` を `eyes right` に設定してください。 - -# --hints-- - -`#gray-mask` 要素の中に `div` 要素が 2 つ必要です。 - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -1 つ目の新しい `div` 要素の `class` は `eyes left` に設定する必要があります。 - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -2 つ目の新しい `div` 要素の `class` は `eyes right` に設定する必要があります。 - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index fd921674bdc..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: ステップ 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -ではここで、FontAwesome のアイコンを使いましょう。 - -`i` 要素は、慣用的 (idiomatic) なテキスト、あるいは通常のテキストコンテンツとは異なるテキストに使われます。 これは例えば科学用語などの_イタリック体_で書かれるテキストや、FontAwesome で提供されるようなアイコンなどが該当します。 - -`#white-paper` の要素内に、`i` 要素を 4 つ追加してください。 すべて、`class` の値を `fas fa-music` に設定してください。 - -この特別なクラスが FontAwesome で読み込むアイコンを決定します。 `fas` はアイコンのカテゴリーを表し (この場合は FontAwesome Solid)、`fa-music` が特定のアイコンを選択します。 - -# --hints-- - -`#white-paper` 要素内に新しい `i` 要素が 4 つ必要です。 - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -すべての `i` 要素の `class` を `fas fa-music` に設定する必要があります。 - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index 97c69dd8992..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: ステップ 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -ID セレクターを使用して、`black-character` という ID を持つ要素を対象とするルールを作成してください。 `width` を `300px` に、`height` を `500px` に、`background-color` を `rgb(45, 31, 19)` に設定してください。 - -# --hints-- - -`#black-character` セレクターを使用する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -`#black-character` セレクターの `width` プロパティを `300px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -`#black-character` セレクターの `height` プロパティを `500px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -`#black-character` セレクターの `background-color` プロパティを `rgb(45, 31, 19)` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index 48f0a37047f..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: ステップ 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -`#black-character` の要素を所定の位置に動かすために、`position` を `absolute` に、`top` を `30%` に、`left` を `59%` に設定してください。 - -# --hints-- - -`#black-character` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -`#black-character` セレクターの `top` プロパティを `30%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -`#black-character` セレクターの `left` プロパティを `59%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index 6874c9ba82a..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: ステップ 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -ID セレクターを使用して、`black-hat` という ID を持つ要素を対象とするルールを作成してください。 `width` を `0` に、`height` を `0` に、`border-style` を `solid` に設定してください。 - -# --hints-- - -`#black-hat` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -`#black-hat` セレクターの `width` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -`#black-hat` セレクターの `height` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -`#black-hat` セレクターの `border-style` プロパティを `solid` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index 0c011563e89..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: ステップ 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -`#white-hat` と同様に、`#black-hat` の要素の境界線にスタイルを設定します。 `border-top-color`、`border-right-color`、および `border-bottom-color` を、`transparent` に設定してください。 `border-left-color` は `rgb(45, 31, 19)` に設定してください。 - -# --hints-- - -`#black-hat` セレクターの `border-top-color` プロパティを `transparent` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -`#black-hat` セレクターの `border-right-color` プロパティを `transparent` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -`#black-hat` セレクターの `border-bottom-color` プロパティを `transparent` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -`#black-hat` セレクターの `border-left-color` プロパティを `rgb(45, 31, 19)` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index d893a7a5383..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: ステップ 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -`#black-hat` の要素の位置を調整しましょう。 `position` を `absolute` に、`top` を `-150px` に、`left` を `0` に設定してください。 - -# --hints-- - -`#black-hat` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -`#black-hat` セレクターの `top` プロパティを `-150px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -`#black-hat` セレクターの `left` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index fcdb788bf14..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: ステップ 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -ID セレクターを使用して、`gray-mask` という ID を持つ要素のスタイルを設定しましょう。 `width` を `150px` に、`height` を `150px` に、`background-color` を `rgb(167, 162, 117)` に設定してください。 - -# --hints-- - -`#gray-mask` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -`#gray-mask` セレクターの `width` プロパティを `150px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -`#gray-mask` セレクターの `height` プロパティを `150px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -`#gray-mask` セレクターの `background-color` プロパティを `rgb(167, 162, 117)` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index 2e2f79c9918..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: ステップ 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -`#gray-mask` の要素の位置を調整するために、`position` を `absolute` に、`top` を `-10px` に、`left` を `70px` に設定してください。 - -# --hints-- - -`#gray-mask` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -`#gray-mask` セレクターの `top` プロパティを `-10px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -`#gray-mask` セレクターの `left` プロパティを `70px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index be036ce630b..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: ステップ 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -ID セレクターを使用して、`white-paper` という ID を対象とするルールを作成してください。 `width` を `400px` に、`height` を `100px` に、`background-color` を `GhostWhite` に設定してください。 - -# --hints-- - -`#white-paper` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -`#white-paper` セレクターの `width` プロパティを `400px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -`#white-paper` セレクターの `height` プロパティを `100px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -`#white-paper` セレクターの `background-color` プロパティを `GhostWhite` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index 03a7cb454ee..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: ステップ 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -`#white-paper` を所定の位置に移動するため、`position` を `absolute` に、`top` を `250px` に、`left` を `-150px` に設定してください。 - -# --hints-- - -`#white-paper` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -`#white-paper` セレクターの `top` プロパティを `250px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -`#white-paper` セレクターの `left` プロパティを `-150px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index 144b6b3f00c..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: ステップ 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -`#white-paper` の要素の `z-index` を `1` に設定してください。 - -# --hints-- - -`#white-paper` セレクターの `z-index` プロパティを `1` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index 83325072f1f..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: ステップ 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -FontAwesome のアイコンには、アイコンを定義するための独自のスタイルが付属しています。 しかし自分でスタイルを設定して色やサイズを変更することもできます。 ここでは、クラスセレクターを使用して `fa-music` クラスのアイコンを選択してください。 そして `display` を `inline-block` に、`margin-top` を `8%` に、`margin-left` を `13%` に設定してください。 - -# --hints-- - -`.fa-music` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -`.fa-music` セレクターの `display` プロパティを `inline-block` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -`.fa-music` セレクターの `margin-top` プロパティを `8%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -`.fa-music` セレクターの `margin-left` プロパティを `13%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index f653b9a436d..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: ステップ 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -`#black-character` の要素の下に、新しい `div` 要素を 2 つ追加してください。 これがショール (肩掛け) の部分になります。 両方に `blue` という `class` を追加してください。 そして 1 つ目は `id` を `blue-left` に、2 つ目は `id` を `blue-right` に設定してください。 - -# --hints-- - -`.characters` 要素内に新しい `div` 要素を 2 つ追加する必要があります。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -新しい 2 つの `div` 要素の `class` を `blue` に設定する必要があります。 - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -1 つ目の新しい `div` の `id` を `blue-left` に設定する必要があります。 - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -2 つ目の新しい `div` の `id` を `blue-right` に設定する必要があります。 - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index 5e155ab2601..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: ステップ 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -先ほど追加した、クラスが `blue` の要素を、クラスセレクターを使用して選択してください。 その `background-color` を `#1E90FF` に設定してください。 - -# --hints-- - -`.blue` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -`.blue` セレクターの `background-color` プロパティを `#1E90FF` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index 18b740a34b3..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: ステップ 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -ID セレクターを使用して、ID が `blue-left` の要素を選択しましょう。 その `width` を `500px` に、`height` を `300px` に設定してください。 - -# --hints-- - -`#blue-left` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -`#blue-left` セレクターの `width` プロパティを `500px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -`#blue-left` セレクターの `height` プロパティを `300px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index f6c71252972..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: ステップ 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -次に `position` を `absolute` に、`top` を `20%` に、`left` を `20%` に設定してください。 - -# --hints-- - -`#blue-left` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -`#blue-left` セレクターの `top` プロパティを `20%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -`#blue-left` セレクターの `left` プロパティを `20%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index e185b748b8e..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: ステップ 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -では次に、ID セレクターで ID が `blue-right` の要素を選択してください。 その `width` を `400px` に、`height` を `300px` に設定してください。 - -# --hints-- - -`#blue-right` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -`#blue-right` セレクターの `width` プロパティを `400px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -`#blue-right` セレクターの `height` プロパティを `300px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index 28bb05f4d48..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: ステップ 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -`#blue-right` の要素を正しい位置に移動するため、`position` を `absolute`、`top` を `50%`、`left` を `40%` に設定してください。 - -# --hints-- - -`#blue-right` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -`#blue-right` セレクターの `top` プロパティを `50%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -`#blue-right` セレクターの `left` プロパティを `40%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index cca03bbb93d..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: ステップ 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -一連の `.blue` 要素の下に、`div` をもう 1 つ追加してください。 その `id` の値を `orange-character` にしてください。 - -# --hints-- - -`.characters` の要素内に新しい `div` 要素が必要です。 - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -新しい `div` 要素の `id` を `orange-character` に設定する必要があります。 - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index 6a931a2f065..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: ステップ 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -`#orange-character` の要素内に、`div` 要素を 4 つ追加してください。 その `id` の値を順に `black-round-hat`、`eyes-div`、`triangles`、`guitar` と設定してください。 - -# --hints-- - -`#orange-character` の要素内に新しい `div` 要素を 4 つ追加する必要があります。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -1 つ目の新しい `div` 要素の `id` は `black-round-hat` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -2 つ目の新しい `div` 要素の `id` は `eyes-div` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -3 つ目の新しい `div` 要素の `id` は `triangles` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -4 つ目の新しい `div` 要素の `id` は `guitar` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index 52514256e21..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: ステップ 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -`#eyes-div` の要素内に目を配置します。 ここに `div` 要素を 2 つ追加してください。 1 つ目は `class` を `eyes left`、2 つ目は `class` を `eyes right` に設定してください。 - -# --hints-- - -`#eyes-div` の要素内に `div` 要素を 2 つネストしてください。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -1 つ目の新しい `div` の `class` は `eyes left` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -2 つ目の新しい `div` の `class` は `eyes right` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index 3ca18e28574..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: ステップ 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -`#triangles` の div 内に、三角形にするための要素を追加します。 `div` を 30 個作成し、それぞれに `triangle` というクラスを設定してください。 - -# --hints-- - -`#triangles` の要素内に `div` 要素が 30 個必要です。 - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -30 個の新しい `div` 要素すべての `class` を `triangle` に設定する必要があります。 - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index 7679d2627f9..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: ステップ 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -`#guitar` の要素内に、`div` 要素を 3 つ追加してください。 最初の 2 つには `class` に `guitar` という値を追加してください。 そして 1 つ目は `id` を `guitar-left` に、2 つ目は `id` を `guitar-right` に設定してください。 3 つ目の `div` の `id` は `guitar-neck` という値にしてください。 - -3 つ目の `div` は `guitar` クラスを持たないようにしてください。 - -# --hints-- - -`#guitar` の要素内に新しい `div` 要素が 3 つ必要です。 - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -1 つ目の新しい `div` の `class` を `guitar` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -1 つ目の新しい `div` の `id` を `guitar-left` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -2 つ目の新しい `div` の `class` を `guitar` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -2 つ目の新しい `div` の `id` を `guitar-right` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -3 つ目の新しい `div` の `id` を `guitar-neck` に設定する必要があります。 - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -3 つ目の新しい `div` には `guitar` という `class` を設定しないでください。 - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index 2be935bbe2e..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: ステップ 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -`.guitar` にもう 1 つ、FontAwesome のアイコンを使いましょう。 `#guitar-left` と `#guitar-right` それぞれの要素内に、`i` 要素を追加して、`class` を `fas fa-bars` に設定してください。 - -# --hints-- - -`#guitar-left` の要素内に `i` 要素を追加する必要があります。 - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -`#guitar-right` の要素内に `i` 要素を追加する必要があります。 - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -2 つの新しい `i` 要素の `class` を `fas fa-bars` に設定する必要があります。 - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - --fcc-editable-region-- -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  - --fcc-editable-region-- -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index e767fe10e63..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: ステップ 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -ID セレクターを使用して、ID が `orange-character` の要素を選択してください。 その `width` を `250px` に、`height` を `550px` に、`background-color` を `rgb(240, 78, 42)` に設定してください。 - -# --hints-- - -`#orange-character` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -`#orange-character` セレクターの `width` プロパティを `250px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -`#orange-character` セレクターの `height` プロパティを `550px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -`#orange-character` セレクターの `background-color` プロパティを `rgb(240, 78, 42)` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index 01b92f608b5..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: ステップ 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -`#orange-character` の要素について、`position` を `absolute`、`top` を `25%`、`left` を `40%` に設定してください。 - -# --hints-- - -`#orange-character` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -`#orange-character` セレクターの `top` プロパティを `25%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -`#orange-character` セレクターの `left` プロパティを `40%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index 1545933d1c5..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: ステップ 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -ID セレクターを使用して、ID が `black-round-hat` の要素にスタイルを設定しましょう。 `width` を `180px` に、`height` を `150px` に、`background-color` を `rgb(45, 31, 19)` に設定してください。 - -# --hints-- - -`#black-round-hat` セレクターが必要です。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -`#black-round-hat` セレクターの `width` プロパティを `180px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -`#black-round-hat` セレクターの `height` プロパティを `150px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -`#black-round-hat` セレクターの `background-color` プロパティを `rgb(45, 31, 19)` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index 02482500844..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: ステップ 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -`#black-round-hat` という名前の要素なので、丸くした方が良さそうです。 `border-radius` を `50%` にして丸くしましょう。 - -# --hints-- - -`#black-round-hat` セレクターの `border-radius` プロパティを `50%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index 2050a7ae6a5..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: ステップ 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -`#black-round-hat` の要素を所定の位置に移動するため、`position` を `absolute` に、`top` を `-100px` に、`left` を `5px` に設定してください。 - -# --hints-- - -`#black-round-hat` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -`#black-round-hat` セレクターの `top` プロパティを `-100px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -`#black-round-hat` セレクターの `left` プロパティを `5px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index 1ce35248eef..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: ステップ 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -`#black-round-hat` の要素を正しい順に重ね合わせるために、`z-index` を `-1` に設定しましょう。 - -# --hints-- - -`#black-round-hat` セレクターの `z-index` プロパティを `-1` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index 7925a427559..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: ステップ 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -ID セレクターを使用して、`eyes-div` という ID を対象とするルールを作成してください。 `width` を `180px` に、`height` を `50px` に設定してください。 - -# --hints-- - -`#eyes-div` セレクターを作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -`#eyes-div` セレクターの `width` プロパティを `180px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -`#eyes-div` セレクターの `height` プロパティを `50px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index d7e0b61aef3..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: ステップ 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -では `#eyes-div` の要素を所定の位置に移動するため、`position` を `absolute` に、`top` を `-40px` に、`left` を `20px` に設定してください。 - -# --hints-- - -`#eyes-div` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -`#eyes-div` セレクターの `top` プロパティを `-40px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -`#eyes-div` セレクターの `left` プロパティを `20px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index 09f051a6e20..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: ステップ 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -`#eyes-div` 要素の `z-index` を `3` に設定してください。 - -# --hints-- - -`#eyes-div` セレクターの `z-index` プロパティを `3` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index 0211f9f7e73..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: ステップ 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -次はクラスセレクターで `guitar` クラスを選択してください。 このルールでギターの「半分」ずつのスタイルを設定します。 `width` を `150px` に、`height` を `120px` に、`background-color` を `Goldenrod` に、`border-radius` を `50%` に設定してください。 - -# --hints-- - -`.guitar` セレクターを作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -`.guitar` セレクターの `width` プロパティを `150px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -`.guitar` セレクターの `height` プロパティを `120px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -`.guitar` セレクターの `background-color` プロパティを `Goldenrod` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -`.guitar` セレクターの `border-radius` プロパティを `50%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index e59eb70bada..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: ステップ 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -`guitar-left` という値の `id` を選択し、`position` を `absolute` に、`left` を `0px` に設定してください。 - -# --hints-- - -`#guitar-left` セレクターを新しく作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -`#guitar-left` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index 8956ece985f..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: ステップ 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -`guitar-right` という値の `id` を選択し、`position` を `absolute` に設定してください。 こちらは `left` を `100px` に設定してください。 - -# --hints-- - -`#guitar-right` セレクターを新しく作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -`#guitar-right` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -`#guitar-right` セレクターの `left` プロパティを `100px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index 41af36aa911..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: ステップ 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -次は横棒のアイコンを所定の位置に移動しましょう。 `fa-bars` クラスを選択するクラスセレクターを作成してください。 `display` を `block` に、`margin-top` を `30%` に、`margin-left` を `40%` に設定してください。 - -# --hints-- - -`.fa-bars` セレクターを作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -`.fa-bars` セレクターの `display` プロパティを `block` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -`.fa-bars` セレクターの `margin-top` プロパティを `30%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -`.fa-bars` セレクターの `margin-left` プロパティを `40%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index d64559814fc..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: ステップ 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -ID セレクターを使用して、`guitar-neck` という ID を対象とするルールを作成してください。 `width` を `200px` に、`height` を `30px` に、`background-color` を `#D2691E` に設定してください。 - -# --hints-- - -`#guitar-neck` セレクターを作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -`#guitar-neck` セレクターの `width` プロパティを `200px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -`#guitar-neck` セレクターの `height` プロパティを `30px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -`#guitar-neck` セレクターの `background-color` プロパティを `#D2691E` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index f5a6ebcc68b..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: ステップ 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -では `#guitar-neck` の要素を移動するため、`position` を `absolute` に、`top` の値を `45px` に、`left` の値を `200px` に設定してください。 - -# --hints-- - -`#guitar-neck` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -`#guitar-neck` セレクターの `top` プロパティを `45px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -`#guitar-neck` セレクターの `left` プロパティを `200px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index 52fa0a6d4b1..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: ステップ 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -`#guitar-neck` の要素の `z-index` を `3` に設定してください。 - -# --hints-- - -`#guitar-neck` セレクターの `z-index` プロパティを `3` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index c9939d263d8..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: ステップ 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -では `eyes` クラスの要素のスタイルを設定しましょう。 クラスセレクターを使用して、`width` を `35px`、`height` を `20px`、`background-color` を `#8B4513`、`border-radius` を `20px 50%` に設定してください。 - -# --hints-- - -`.eyes` セレクターを作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -`.eyes` セレクターの `width` プロパティを `35px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -`.eyes` セレクターの `height` プロパティを `20px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -`.eyes` セレクターの `background-color` プロパティを `#8B4513` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -`.eyes` セレクターの `border-radius` プロパティを `20px 50%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index a7791c7d366..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: ステップ 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -`right` という値の `class` を選択し、`position` を `absolute` に、`top` を `15px` に、`right` を `30px` に設定してください。 - -# --hints-- - -`.right` セレクターを作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -`.right` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -`.right` セレクターの `top` プロパティを `15px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -`.right` セレクターの `right` プロパティを `30px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index 05d7e662f45..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: ステップ 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -`left` という値の `class` についてクラスセレクターを作成し、`position` を `absolute` に、`top` を `15px` に、`left` を `30px` に設定してください。 - -# --hints-- - -新しく `.left` セレクターを作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -`.left` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -`.left` セレクターの `top` プロパティを `15px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -`.left` セレクターの `left` プロパティを `30px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index d9013065a58..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: ステップ 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -最後のステップです。 FontAwesome のアイコンが少し小さすぎますね。 `fas` クラスを対象とするクラスセレクターですべての FontAwesome アイコンを選択し、`font-size` を `30px` に設定してください。 - -これで、ピカソの絵画の完成です！ - -# --hints-- - -`.fas` セレクターを作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -`.fas` セレクターの `font-size` プロパティを `30px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index 2214c78ba4b..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: ステップ 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -まだ CSS は書いていませんが、先に CSS ファイルをリンクしておきましょう。 - -`link` 要素を追加して、`rel` を `stylesheet` に、 `href` を `styles.css` に設定してください。 - -# --hints-- - - -コードには `link` 要素が 1 つ必要です。 - -```js -assert.match(code, / link')); -``` - -`link` 要素は値が `stylesheet` に設定されている `rel` 属性を持つ必要があります。 - -```js -const link_element = document.querySelector('link'); -const rel = link_element.getAttribute("rel"); -assert.equal(rel, "stylesheet"); -``` - -`link` 要素は値が `styles.css` に設定されている `href` 属性を持つ必要があります。 - -```js -const link = document.querySelector('link'); -assert.equal(link.dataset.href, "styles.css"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index acfdcec6766..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: ステップ 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -`.triangle` の要素の配置を調整するため、`display` を `inline-block` に設定しましょう。 - -# --hints-- - -`.triangle` セレクターの `display` プロパティを `inline-block` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index 77d414dcac6..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: ステップ 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -`.triangle` の要素に正しい色を設定しましょう。 `border-top-color`、`border-bottom-color`、および `border-left-color` を、`transparent` に設定してください。 `border-right-color` は `Gold` に設定してください。 - -# --hints-- - -`.triangle` セレクターの `border-top-color` プロパティを `transparent` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -`.triangle` セレクターの `border-bottom-color` プロパティを `transparent` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -`.triangle` セレクターの `border-left-color` プロパティを `transparent` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -`.triangle` セレクターの `border-right-color` プロパティを `Gold` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index 090f65987de..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: ステップ 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -`.triangle` の要素に境界線のスタイルを設定しましょう。 `border-style` を `solid` に、`border-width` を `42px 45px 45px 0` に設定してください。 - -# --hints-- - -`.triangle` セレクターの `border-style` プロパティを `solid` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -`.triangle` セレクターの `border-width` プロパティを `42px 45px 45px 0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index 43e8ee46367..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: ステップ 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -`triangle` クラスの要素を選択するクラスセレクターを作成してください。 `width` を `0` に、`height` を `0` に設定してください。 - -# --hints-- - -`.triangle` セレクターを作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -`.triangle` セレクターの `width` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -`.triangle` セレクターの `height` プロパティを `0` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index d8f1b2850eb..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: ステップ 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -ID セレクターを使用して、ID が `triangles` の要素を選択しましょう。 `width` を `250px` に、`height` を `550px` に設定してください。 - -# --hints-- - -`#triangles` セレクターを追加する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -`#triangles` セレクターの `width` プロパティを `250px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -`#triangles` セレクターの `height` プロパティを `550px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index 6bbd356b8fc..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: ステップ 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -次に ID セレクターを使用して `guitar` の ID を選択してください。 `width` を `100%` に、`height` を `100px` に設定してください。 - -# --hints-- - -`#guitar` セレクターを作成する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -`#guitar` セレクターの `width` プロパティを `100%` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -`#guitar` セレクターの `height` プロパティを `100px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index e3d5b57a965..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: ステップ 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -同じ `#guitar` セレクター内で、`position` を `absolute` に、`top` を `120px` に、`left` を `0px` に設定してください。 - -# --hints-- - -`#guitar` セレクターの `position` プロパティを `absolute` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -`#guitar` セレクターの `top` プロパティを `120px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -`#guitar` セレクターの `left` プロパティを `0px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index b3e03eed6cc..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: ステップ 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -`#guitar` ルールの `z-index` を `3` に設定してください。 - -# --hints-- - -`#guitar` セレクターの `z-index` プロパティを `3` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - -
                                                                  -
                                                                  - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index 1a824fce5ce..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: ステップ 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -`#black-hat` の `border-width` を `150px 0 0 300px` に設定してください。 - -# --hints-- - -`#black-hat` セレクターの `border-width` プロパティを `150px 0 0 300px` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  -
                                                                  - - - - -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md deleted file mode 100644 index 1f45c0eec5a..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f5c1cb7575c7551ed8a40 -title: ステップ 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -`230` という数字のフォントサイズを大きくしたことで、テキストがはみ出しています。 これを回避するため、`.calories-info h1` の `overflow` プロパティを `hidden` に設定してください。 - -# --hints-- - -`.calories-info h1` セレクターの `overflow` プロパティを `hidden` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                                  -
                                                                  -

                                                                  Nutrition Facts

                                                                  -
                                                                  -

                                                                  8 servings per container

                                                                  -

                                                                  Serving size 2/3 cup (55g)

                                                                  -
                                                                  -
                                                                  -
                                                                  -

                                                                  Amount per serving

                                                                  -

                                                                  Calories 230

                                                                  -
                                                                  -
                                                                  - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- -.calories-info h1 { - margin: -5px -2px; -} ---fcc-editable-region-- - -.calories-info span { - font-size: 1.2em; -} -``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md deleted file mode 100644 index 0e80ff91547..00000000000 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f6a7d4ba8037bc086c2c7 -title: ステップ 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -`.divider` セレクターの `clear` プロパティを `right` に設定してください。 これにより `float` プロパティがクリアされ、仕切り線以降のコンテンツが `float` のテキストの下に押し下げられます。 - -# --hints-- - -`.divider` セレクターの `clear` プロパティを `right` に設定する必要があります。 - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                                  -
                                                                  -

                                                                  Nutrition Facts

                                                                  -
                                                                  -

                                                                  8 servings per container

                                                                  -

                                                                  Serving size 2/3 cup (55g)

                                                                  -
                                                                  -
                                                                  -
                                                                  -

                                                                  Amount per serving

                                                                  -

                                                                  Calories 230

                                                                  -
                                                                  -
                                                                  -
                                                                  -

                                                                  % Daily Value *

                                                                  -
                                                                  -
                                                                  -
                                                                  - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - ---fcc-editable-region-- -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} ---fcc-editable-region-- - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md deleted file mode 100644 index 46c493ad260..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 56533eb9ac21ba0edf2244e2 -title: Build a Caesars Cipher -challengeType: 5 -forumTopicId: 16003 -dashedName: build-a-caesars-cipher ---- - -# --description-- - -One of the simplest and most widely known ciphers is a Caesar cipher, also known as a shift cipher. In a shift cipher the meanings of the letters are shifted by some set amount. - -A common modern use is the ROT13 cipher, where the values of the letters are shifted by 13 places. Thus `A ↔ N`, `B ↔ O` and so on. - -Write a function which takes a ROT13 encoded string as input and returns a decoded string. - -All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on. - -# --hints-- - -`rot13("SERR PBQR PNZC")` should decode to the string `FREE CODE CAMP` - -```js -assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); -``` - -`rot13("SERR CVMMN!")` should decode to the string `FREE PIZZA!` - -```js -assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); -``` - -`rot13("SERR YBIR?")` should decode to the string `FREE LOVE?` - -```js -assert(rot13('SERR YBIR?') === 'FREE LOVE?'); -``` - -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` should decode to the string `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` - -```js -assert( - rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === - 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function rot13(str) { - return str; -} - -rot13("SERR PBQR PNZC"); -``` - -# --solutions-- - -```js -var lookup = { - 'A': 'N','B': 'O','C': 'P','D': 'Q', - 'E': 'R','F': 'S','G': 'T','H': 'U', - 'I': 'V','J': 'W','K': 'X','L': 'Y', - 'M': 'Z','N': 'A','O': 'B','P': 'C', - 'Q': 'D','R': 'E','S': 'F','T': 'G', - 'U': 'H','V': 'I','W': 'J','X': 'K', - 'Y': 'L','Z': 'M' -}; - -function rot13(encodedStr) { - var codeArr = encodedStr.split(""); // String to Array - var decodedArr = []; // Your Result goes here - // Only change code below this line - - decodedArr = codeArr.map(function(letter) { - if(lookup.hasOwnProperty(letter)) { - letter = lookup[letter]; - } - return letter; - }); - - // Only change code above this line - return decodedArr.join(""); // Array to String -} -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md deleted file mode 100644 index c98d513eb13..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: aa2e6f85cab2ab736c9a9b24 -title: Build A Cash Register -challengeType: 5 -forumTopicId: 16012 -dashedName: build-a-cash-register ---- - -# --description-- - -Design a cash register drawer function `checkCashRegister()` that accepts purchase price as the first argument (`price`), payment as the second argument (`cash`), and cash-in-drawer (`cid`) as the third argument. - -`cid` is a 2D array listing available currency. - -The `checkCashRegister()` function should always return an object with a `status` key and a `change` key. - -Return `{status: "INSUFFICIENT_FUNDS", change: []}` if cash-in-drawer is less than the change due, or if you cannot return the exact change. - -Return `{status: "CLOSED", change: [...]}` with cash-in-drawer as the value for the key `change` if it is equal to the change due. - -Otherwise, return `{status: "OPEN", change: [...]}`, with the change due in coins and bills, sorted in highest to lowest order, as the value of the `change` key. - -
                                                                  Currency UnitAmount
                                                                  Penny$0.01 (PENNY)
                                                                  Nickel$0.05 (NICKEL)
                                                                  Dime$0.1 (DIME)
                                                                  Quarter$0.25 (QUARTER)
                                                                  Dollar$1 (ONE)
                                                                  Five Dollars$5 (FIVE)
                                                                  Ten Dollars$10 (TEN)
                                                                  Twenty Dollars$20 (TWENTY)
                                                                  One-hundred Dollars$100 (ONE HUNDRED)
                                                                  - -See below for an example of a cash-in-drawer array: - -```js -[ - ["PENNY", 1.01], - ["NICKEL", 2.05], - ["DIME", 3.1], - ["QUARTER", 4.25], - ["ONE", 90], - ["FIVE", 55], - ["TEN", 20], - ["TWENTY", 60], - ["ONE HUNDRED", 100] -] -``` - -# --hints-- - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return an object. - -```js -assert.deepEqual( - Object.prototype.toString.call( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]) - ), - '[object Object]' -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return `{status: "OPEN", change: [["QUARTER", 0.5]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { status: 'OPEN', change: [['QUARTER', 0.5]] } -); -``` - -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. - -```js -assert.deepEqual( - checkCashRegister(3.26, 100, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { - status: 'OPEN', - change: [ - ['TWENTY', 60], - ['TEN', 20], - ['FIVE', 15], - ['ONE', 1], - ['QUARTER', 0.5], - ['DIME', 0.2], - ['PENNY', 0.04] - ] - } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 1], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { - status: 'CLOSED', - change: [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ] - } -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function checkCashRegister(price, cash, cid) { - let change; - return change; -} - -checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); -``` - -# --solutions-- - -```js -const denom = [ - { name: "ONE HUNDRED", val: 100 }, - { name: "TWENTY", val: 20 }, - { name: "TEN", val: 10 }, - { name: "FIVE", val: 5 }, - { name: "ONE", val: 1 }, - { name: "QUARTER", val: 0.25 }, - { name: "DIME", val: 0.1 }, - { name: "NICKEL", val: 0.05 }, - { name: "PENNY", val: 0.01 }, -]; - -function checkCashRegister(price, cash, cid) { - const output = { status: null, change: [] }; - let change = cash - price; - const register = cid.reduce( - function (acc, curr) { - acc.total += curr[1]; - acc[curr[0]] = curr[1]; - return acc; - }, - { total: 0 } - ); - if (register.total === change) { - output.status = "CLOSED"; - output.change = cid; - return output; - } - if (register.total < change) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - const change_arr = denom.reduce(function (acc, curr) { - let value = 0; - while (register[curr.name] > 0 && change >= curr.val) { - change -= curr.val; - register[curr.name] -= curr.val; - value += curr.val; - change = Math.round(change * 100) / 100; - } - if (value > 0) { - acc.push([curr.name, value]); - } - return acc; - }, []); - if (change_arr.length < 1 || change > 0) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - output.status = "OPEN"; - output.change = change_arr; - return output; -} -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md deleted file mode 100644 index 5f7ca896a8c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: aaa48de84e1ecc7c742e1124 -title: Build A Palindrome Checker -challengeType: 5 -forumTopicId: 16004 -dashedName: build-a-palindrome-checker ---- - -# --description-- - -Return `true` if the given string is a palindrome. Otherwise, return `false`. - -A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing. - -**Note:** You'll need to remove **all non-alphanumeric characters** (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes. - -We'll pass strings with varying formats, such as `racecar`, `RaceCar`, and `race CAR` among others. - -We'll also pass strings with special symbols, such as `2A3*3a2`, `2A3 3a2`, and `2_A3*3#A2`. - -# --hints-- - -`palindrome("eye")` should return a boolean. - -```js -assert(typeof palindrome('eye') === 'boolean'); -``` - -`palindrome("eye")` should return `true`. - -```js -assert(palindrome('eye') === true); -``` - -`palindrome("_eye")` should return `true`. - -```js -assert(palindrome('_eye') === true); -``` - -`palindrome("race car")` should return `true`. - -```js -assert(palindrome('race car') === true); -``` - -`palindrome("not a palindrome")` should return `false`. - -```js -assert(palindrome('not a palindrome') === false); -``` - -`palindrome("A man, a plan, a canal. Panama")` should return `true`. - -```js -assert(palindrome('A man, a plan, a canal. Panama') === true); -``` - -`palindrome("never odd or even")` should return `true`. - -```js -assert(palindrome('never odd or even') === true); -``` - -`palindrome("nope")` should return `false`. - -```js -assert(palindrome('nope') === false); -``` - -`palindrome("almostomla")` should return `false`. - -```js -assert(palindrome('almostomla') === false); -``` - -`palindrome("My age is 0, 0 si ega ym.")` should return `true`. - -```js -assert(palindrome('My age is 0, 0 si ega ym.') === true); -``` - -`palindrome("1 eye for of 1 eye.")` should return `false`. - -```js -assert(palindrome('1 eye for of 1 eye.') === false); -``` - -`palindrome("0_0 (: /-\ :) 0-0")` should return `true`. - -```js -assert(palindrome('0_0 (: /- :) 0-0') === true); -``` - -`palindrome("five|\_/|four")` should return `false`. - -```js -assert(palindrome('five|_/|four') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function palindrome(str) { - return true; -} - -palindrome("eye"); -``` - -# --solutions-- - -```js -function palindrome(str) { - var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); - var aux = string.split(''); - if (aux.join('') === aux.reverse().join('')){ - return true; - } - - return false; -} -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md deleted file mode 100644 index 06f0c991879..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: a7f4d8f2483413a6ce226cac -title: Build A Roman Numeral Converter -challengeType: 5 -forumTopicId: 16044 -dashedName: build-a-roman-numeral-converter ---- - -# --description-- - -Convert the given number into a roman numeral. - -| Roman numerals | Arabic numerals | -| -------------- | --------------- | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| C | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -All roman numerals answers should be provided in upper-case. - -# --hints-- - -`convertToRoman(2)` should return the string `II`. - -```js -assert.deepEqual(convertToRoman(2), 'II'); -``` - -`convertToRoman(3)` should return the string `III`. - -```js -assert.deepEqual(convertToRoman(3), 'III'); -``` - -`convertToRoman(4)` should return the string `IV`. - -```js -assert.deepEqual(convertToRoman(4), 'IV'); -``` - -`convertToRoman(5)` should return the string `V`. - -```js -assert.deepEqual(convertToRoman(5), 'V'); -``` - -`convertToRoman(9)` should return the string `IX`. - -```js -assert.deepEqual(convertToRoman(9), 'IX'); -``` - -`convertToRoman(12)` should return the string `XII`. - -```js -assert.deepEqual(convertToRoman(12), 'XII'); -``` - -`convertToRoman(16)` should return the string `XVI`. - -```js -assert.deepEqual(convertToRoman(16), 'XVI'); -``` - -`convertToRoman(29)` should return the string `XXIX`. - -```js -assert.deepEqual(convertToRoman(29), 'XXIX'); -``` - -`convertToRoman(44)` should return the string `XLIV`. - -```js -assert.deepEqual(convertToRoman(44), 'XLIV'); -``` - -`convertToRoman(45)` should return the string `XLV`. - -```js -assert.deepEqual(convertToRoman(45), 'XLV'); -``` - -`convertToRoman(68)` should return the string `LXVIII` - -```js -assert.deepEqual(convertToRoman(68), 'LXVIII'); -``` - -`convertToRoman(83)` should return the string `LXXXIII` - -```js -assert.deepEqual(convertToRoman(83), 'LXXXIII'); -``` - -`convertToRoman(97)` should return the string `XCVII` - -```js -assert.deepEqual(convertToRoman(97), 'XCVII'); -``` - -`convertToRoman(99)` should return the string `XCIX` - -```js -assert.deepEqual(convertToRoman(99), 'XCIX'); -``` - -`convertToRoman(400)` should return the string `CD` - -```js -assert.deepEqual(convertToRoman(400), 'CD'); -``` - -`convertToRoman(500)` should return the string `D` - -```js -assert.deepEqual(convertToRoman(500), 'D'); -``` - -`convertToRoman(501)` should return the string `DI` - -```js -assert.deepEqual(convertToRoman(501), 'DI'); -``` - -`convertToRoman(649)` should return the string `DCXLIX` - -```js -assert.deepEqual(convertToRoman(649), 'DCXLIX'); -``` - -`convertToRoman(798)` should return the string `DCCXCVIII` - -```js -assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); -``` - -`convertToRoman(891)` should return the string `DCCCXCI` - -```js -assert.deepEqual(convertToRoman(891), 'DCCCXCI'); -``` - -`convertToRoman(1000)` should return the string `M` - -```js -assert.deepEqual(convertToRoman(1000), 'M'); -``` - -`convertToRoman(1004)` should return the string `MIV` - -```js -assert.deepEqual(convertToRoman(1004), 'MIV'); -``` - -`convertToRoman(1006)` should return the string `MVI` - -```js -assert.deepEqual(convertToRoman(1006), 'MVI'); -``` - -`convertToRoman(1023)` should return the string `MXXIII` - -```js -assert.deepEqual(convertToRoman(1023), 'MXXIII'); -``` - -`convertToRoman(2014)` should return the string `MMXIV` - -```js -assert.deepEqual(convertToRoman(2014), 'MMXIV'); -``` - -`convertToRoman(3999)` should return the string `MMMCMXCIX` - -```js -assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); -``` - -# --seed-- - -## --seed-contents-- - -```js -function convertToRoman(num) { - return num; -} - -convertToRoman(36); -``` - -# --solutions-- - -```js -function convertToRoman(num) { - var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; - var res = []; - ref.forEach(function(p) { - while (num >= p[1]) { - res.push(p[0]); - num -= p[1]; - } - }); - return res.join(''); -} -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md deleted file mode 100644 index 282f77b4be9..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: aff0395860f5d3034dc0bfc9 -title: Build a Telephone Number Validator -challengeType: 5 -forumTopicId: 16090 -dashedName: build-a-telephone-number-validator ---- - -# --description-- - -Return `true` if the passed string looks like a valid US phone number. - -The user may fill out the form field any way they choose as long as it has the format of a valid US number. The following are examples of valid formats for US numbers (refer to the tests below for other variants): - -
                                                                  555-555-5555
                                                                  (555)555-5555
                                                                  (555) 555-5555
                                                                  555 555 5555
                                                                  5555555555
                                                                  1 555 555 5555
                                                                  - -For this challenge you will be presented with a string such as `800-692-7753` or `8oo-six427676;laskdjf`. Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is `1`. Return `true` if the string is a valid US phone number; otherwise return `false`. - -# --hints-- - -`telephoneCheck("555-555-5555")` should return a boolean. - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` should return `true`. - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` should return `true`. - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` should return `true`. - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` should return `true`. - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` should return `true`. - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` should return `true`. - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` should return `false`. - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` should return `false`. - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` should return `false`. - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` should return `true`. - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` should return `true`. - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` should return `false`. - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` should return `false`. - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` should return `false`. - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` should return `false`. - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` should return `false`. - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` should return `false`. - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` should return `false`. - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` should return `false`. - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` should return `false`. - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` should return `false`. - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` should return `false`. - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` should return `false`. - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` should return `false`. - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index 63ecefac153..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -You have been declaring your variables with the `var` keyword. However, in modern JavaScript it is best practice to use the `let` keyword instead. This fixes several unusual behaviors with `var` that can make your code difficult to debug. - -Change all of your `var` keywords to `let`. - -# --hints-- - -You should not have any `var` keywords in your code. - -```js -assert.notMatch(code, /var/); -``` - -You should use the `let` keyword to declare your `xp` variable. - -```js -assert.match(code, /let xp/); -``` - -You should use the `let` keyword to declare your `health` variable. - -```js -assert.match(code, /let health/); -``` - -You should use the `let` keyword to declare your `gold` variable. - -```js -assert.match(code, /let gold/); -``` - -You should use the `let` keyword to declare your `currentWeapon` variable. - -```js -assert.match(code, /let currentWeapon/); -``` - -You should not change the values of your variables. - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - - -
                                                                  -
                                                                  - XP: 0 - Health: 100 - Gold: 50 -
                                                                  -
                                                                  - - - -
                                                                  -
                                                                  - Monster Name: - Health: -
                                                                  -
                                                                  - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                                  -
                                                                  - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js ---fcc-editable-region-- -var xp = 0; -var health = 100; -var gold = 50; -var currentWeapon = 0; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md deleted file mode 100644 index cd564871491..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 62a8f2bc37675e77d5835235 -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -JavaScript has a conditional operator called the ternary operator. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`. - -Here is an example of an `if-else` expression changed to a ternary: - -```js -if (num > 5) { - bigger() -} else { - smaller() -} - -num > 5 ? bigger() : smaller(); -``` - -Change your new `if-else` expression to a ternary. - -# --hints-- - -You should remove the `if` and `else` from your `else if` block. - -```js -const block = attack.toString().split("else if"); -assert.notMatch(block[1], /if/); -assert.notMatch(block[1], /else/); -``` - -You should check if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2/); -``` - -Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); -``` - -Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - -
                                                                  -
                                                                  - XP: 0 - Health: 100 - Gold: 50 -
                                                                  -
                                                                  - - - -
                                                                  -
                                                                  - Monster Name: - Health: -
                                                                  -
                                                                  - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                                  -
                                                                  - - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js -let xp = 0; -let health = 100; -let gold = 50; -let currentWeapon = 0; -let fighting; -let monsterHealth; -let inventory = ["stick"]; - -const button1 = document.querySelector('#button1'); -const button2 = document.querySelector("#button2"); -const button3 = document.querySelector("#button3"); -const text = document.querySelector("#text"); -const xpText = document.querySelector("#xpText"); -const healthText = document.querySelector("#healthText"); -const goldText = document.querySelector("#goldText"); -const monsterStats = document.querySelector("#monsterStats"); -const monsterName = document.querySelector("#monsterName"); -const monsterHealthText =document.querySelector("#monsterHealth"); -const weapons = [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]; -const monsters = [ - { - name: "slime", - level: 2, - health: 15 - }, - { - name: "fanged beast", - level: 8, - health: 60 - }, - { - name: "dragon", - level: 20, - health: 300 - } -] -const locations = [ - { - name: "town square", - "button text": ["Go to store", "Go to cave", "Fight dragon"], - "button functions": [goStore, goCave, fightDragon], - text: "You are in the town square. You see a sign that says \"Store\"." - }, - { - name: "store", - "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], - "button functions": [buyHealth, buyWeapon, goTown], - text: "You enter the store." - }, - { - name: "cave", - "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], - "button functions": [fightSlime, fightBeast, goTown], - text: "You enter the cave. You see some monsters." - }, - { - name: "fight", - "button text": ["Attack", "Dodge", "Run"], - "button functions": [attack, dodge, goTown], - text: "You are fighting a monster." - }, - { - name: "kill monster", - "button text": ["Go to town square", "Go to town square", "Go to town square"], - "button functions": [goTown, goTown, goTown], - text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' - }, - { - name: "lose", - "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], - "button functions": [restart, restart, restart], - text: "You die. ☠️" - } -]; - -// initialize buttons -button1.onclick = goStore; -button2.onclick = goCave; -button3.onclick = fightDragon; - -function update(location) { - monsterStats.style.display = "none"; - button1.innerText = location["button text"][0]; - button2.innerText = location["button text"][1]; - button3.innerText = location["button text"][2]; - button1.onclick = location["button functions"][0]; - button2.onclick = location["button functions"][1]; - button3.onclick = location["button functions"][2]; - text.innerText = location.text; -} - -function goTown() { - update(locations[0]); -} - -function goStore() { - update(locations[1]); -} - -function goCave() { - update(locations[2]); -} - -function buyHealth() { - if (gold >= 10) { - gold -= 10; - health += 10; - goldText.innerText = gold; - healthText.innerText = health; - } else { - text.innerText = "You do not have enough gold to buy health."; - } -} - -function buyWeapon() { - if (currentWeapon < weapons.length - 1) { - if (gold >= 30) { - gold -= 30; - currentWeapon++; - goldText.innerText = gold; - let newWeapon = weapons[currentWeapon].name; - text.innerText = "You now have a " + newWeapon + "."; - inventory.push(newWeapon); - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "You do not have enough gold to buy a weapon."; - } - } else { - text.innerText = "You already have the most powerful weapon!"; - button2.innerText = "Sell weapon for 15 gold"; - button2.onclick = sellWeapon; - } -} - -function sellWeapon() { - if (inventory.length > 1) { - gold += 15; - goldText.innerText = gold; - let currentWeapon = inventory.shift(); - text.innerText = "You sold a " + currentWeapon + "."; - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "Don't sell your only weapon!"; - } -} - -function fightSlime() { - fighting = 0; - goFight(); -} - -function fightBeast() { - fighting = 1; - goFight(); -} - -function fightDragon() { - fighting = 2; - goFight(); -} - -function goFight() { - update(locations[3]); - monsterHealth = monsters[fighting].health; - monsterStats.style.display = "block"; - monsterName.innerText = monsters[fighting].name; - monsterHealthText.innerText = monsterHealth; -} - ---fcc-editable-region-- -function attack() { - text.innerText = "The " + monsters[fighting].name + " attacks."; - text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; - health -= monsters[fighting].level; - monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; - healthText.innerText = health; - monsterHealthText.innerText = monsterHealth; - if (health <= 0) { - lose(); - } else if (monsterHealth <= 0) { - if (fighting === 2) { - winGame(); - } else { - defeatMonster(); - } - } -} ---fcc-editable-region-- - -function dodge() { - text.innerText = "You dodge the attack from the " + monsters[fighting].name; -} - -function defeatMonster() { - gold += Math.floor(monsters[fighting].level * 6.7); - xp += monsters[fighting].level; - goldText.innerText = gold; - xpText.innerText = xp; - update(locations[4]); -} - -function lose() { - update(locations[5]); -} - -function restart() { - xp = 0; - health = 100; - gold = 50; - currentWeapon = 0; - inventory = ["stick"]; - goldText.innerText = gold; - healthText.innerText = health; - xpText.innerText = xp; - goTown(); -} -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md new file mode 100644 index 00000000000..d178d5a5a2b --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -0,0 +1,682 @@ +--- +id: 659b0093d7db5a1a1122b7bd +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +```js +const animals = ["dog", "cat", "horse"]; +animals.indexOf("cat") // 1 +``` + +Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`. + +# --hints-- + +You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/) +``` + +You should pass in `userData.currentSong` into the `indexOf()` method. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +

                                                                  freeCodeCamp

                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  + song cover art +
                                                                  +
                                                                  +
                                                                  +

                                                                  +

                                                                  +
                                                                  +
                                                                  + + + + + +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +

                                                                  Playlist

                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                  +
                                                                    +
                                                                    +
                                                                    + + + +``` + +```css +:root { + /* colors */ + --primary-color: #dfdfe2; + --secondary-color: #ffffff; + --app-background-color: #4d4d62; + --background-color: #1b1b32; + --foreground-color: #3b3b4f; + --highlight-color: #f1be32; + + /* font sizes */ + --root-font-size: 16px; + font-size: var(--root-font-size); + + /* font-families */ + --font-headline: "Roboto Mono", monospace; + --font-family: "Lato", sans-serif; +} + +*, +*::after, +*::before { + box-sizing: border-box; +} + +body { + background-color: var(--app-background-color); + color: var(--primary-color); + font-family: var(--font-family); +} + +h1 { + font-size: 1.125rem; + line-height: 1.6; +} + +h2 { + font-size: var(--root-font-size); +} + +ul { + margin: 0; +} + +.container { + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; +} + +.player, +.playlist { + width: 450px; + background-color: var(--background-color); + border: 3px solid var(--foreground-color); +} + +.player { + height: 260px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +.player-bar, +.playlist-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + width: 100%; + height: 30px; + background-color: var(--foreground-color); +} + +.parallel-lines { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + padding: 0 5px; +} + +.parallel-lines > div { + height: 2px; + width: 100%; + min-width: 75px; + background-color: var(--highlight-color); +} + +.fcc-title, +.playlist-title { + color: var(--secondary-color); + margin: 0 10px; + font-family: var(--font-headline); +} + +.player-content { + display: flex; + background-color: var(--foreground-color); + width: 430px; + height: 200px; + column-gap: 13px; + align-items: center; + justify-content: center; +} + +#player-album-art { + background-color: var(--secondary-color); + border: 6px solid var(--background-color); +} + +#player-album-art img { + width: 150px; + display: block; +} + +.player-display { + display: flex; + flex-direction: column; + row-gap: 20px; + padding: 14px; + background-color: var(--background-color); + height: 153px; + width: 226px; +} + +.player-display-song-artist { + height: 80px; +} + +.player-buttons svg { + fill: var(--primary-color); +} + +.playing > svg { + fill: var(--highlight-color); +} + +.player-buttons { + display: flex; + justify-content: space-around; +} + +button { + background: transparent; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: var(--root-font-size); + outline-color: var(--highlight-color); + text-align: center; +} + +.playlist-song { + outline-color: var(--highlight-color); +} + +.playlist li:not(:last-child) { + border-bottom: 1px solid var(--background-color); +} + +button:focus, +.playlist-song:focus { + outline-style: dashed; + outline-width: 2px; +} + +/* Playlist */ +.playlist { + height: auto; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +#playlist-songs { + width: 430px; + height: 100%; + background-color: var(--foreground-color); + display: flex; + flex-direction: column; + row-gap: 8px; + padding: 8px 9px; + visibility: visible; + justify-content: start; + list-style: none; +} + +.playlist-song { + display: flex; + height: 55px; + justify-content: space-between; + align-items: center; + padding: 5px; +} + +[aria-current="true"] { + background-color: var(--background-color); +} + +[aria-current="true"] p { + color: var(--highlight-color); +} + +.playlist-song-info { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + column-gap: 7px; + padding: 5px 0; + font-family: var(--font-family); +} + +#player-song-title, +#player-song-artist { + margin: 0; +} + +#player-song-artist { + color: var(--highlight-color); + font-size: 0.75rem; +} + +#player-song-title { + font-size: 1.125rem; +} + +.playlist-song-title { + font-size: 0.85rem; + width: 241px; + text-align: left; +} + +.playlist-song-artist { + font-size: 0.725rem; + width: 80px; +} + +.playlist-song-duration { + font-size: 0.725rem; + margin: auto; + font-family: var(--font-headline); + width: 30px; +} + +.playlist-song-delete { + padding: 0; + width: 20px; + height: 20px; +} + +.playlist-song-delete, +.playlist-song-delete { + fill: var(--foreground-color); +} + +.playlist-song-delete:hover circle, +.playlist-song-delete:focus circle { + fill: #ff0000; +} + +@media (max-width: 700px) { + .player, + .playlist { + width: 300px; + } + + .player { + height: 340px; + } + + #playlist-songs { + height: 280px; + padding: 5px 6px; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-color: var(--background-color) var(--secondary-color); + scrollbar-width: thin; + } + + #playlist-songs::-webkit-scrollbar { + width: 5px; + } + + #playlist-songs::-webkit-scrollbar-track { + background: var(--background-color); + } + + #playlist-songs::-webkit-scrollbar-thumb { + background: var(--secondary-color); + } + + h1 { + font-size: 0.813rem; + } + + h2 { + font-size: 0.75rem; + } + + .player-bar, + .playlist-bar, + .player-content, + #playlist-songs { + width: 280px; + } + + .playlist-song { + justify-content: space-between; + } + + .playlist-song-title { + width: 140px; + } + + .playlist-song-artist { + width: 40px; + } + + .playlist-song-duration > button { + padding: 0; + } + + .player-content { + display: inline; + position: relative; + justify-items: center; + height: 100%; + } + + #player-album-art { + z-index: -100; + height: 280px; + box-shadow: none; + background: #000; + } + + #player-album-art img { + width: 100%; + opacity: 0.6; + } + + .player-display-song-artist { + padding: 0 10px; + } + + .player-display-song-artist > p { + white-space: pre-wrap; + } + + .player-display { + position: absolute; + width: 100%; + z-index: 1000; + background-color: transparent; + top: 0; + height: 280px; + justify-content: space-between; + text-align: center; + } +} +``` + +```js +const playlistSongs = document.getElementById("playlist-songs"); +const playButton = document.getElementById("play"); +const pauseButton = document.getElementById("pause"); +const nextButton = document.getElementById("next"); +const previousButton = document.getElementById("previous"); +const shuffleButton = document.getElementById("shuffle"); + +const allSongs = [ + { + id: 0, + title: "Scratching The Surface", + artist: "Quincy Larson", + duration: "4:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3", + }, + { + id: 1, + title: "Can't Stay Down", + artist: "Quincy Larson", + duration: "4:15", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3", + }, + { + id: 2, + title: "Still Learning", + artist: "Quincy Larson", + duration: "3:51", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3", + }, + { + id: 3, + title: "Cruising for a Musing", + artist: "Quincy Larson", + duration: "3:34", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3", + }, + { + id: 4, + title: "Never Not Favored", + artist: "Quincy Larson", + duration: "3:35", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3", + }, + { + id: 5, + title: "From the Ground Up", + artist: "Quincy Larson", + duration: "3:12", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3", + }, + { + id: 6, + title: "Walking on Air", + artist: "Quincy Larson", + duration: "3:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3", + }, + { + id: 7, + title: "Can't Stop Me. Can't Even Slow Me Down.", + artist: "Quincy Larson", + duration: "3:52", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3", + }, + { + id: 8, + title: "The Surest Way Out is Through", + artist: "Quincy Larson", + duration: "3:10", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3", + }, + { + id: 9, + title: "Chasing That Feeling", + artist: "Quincy Larson", + duration: "2:43", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3", + }, +]; + +const audio = new Audio(); +let userData = { + songs: [...allSongs], + currentSong: null, + songCurrentTime: 0, +}; + +const playSong = (id) => { + const song = userData?.songs.find((song) => song.id === id); + audio.src = song.src; + audio.title = song.title; + + if (userData?.currentSong === null || userData?.currentSong.id !== song.id) { + audio.currentTime = 0; + } else { + audio.currentTime = userData.songCurrentTime; + } + userData.currentSong = song; + playButton.classList.add("playing"); + + audio.play(); +}; + +const pauseSong = () => { + userData.songCurrentTime = audio.currentTime; + + playButton.classList.remove("playing"); + audio.pause(); +}; + +const renderSongs = (array) => { + const songsHTML = array + .map((song)=> { + return ` +
                                                                  • + + +
                                                                    • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +const getCurrentSongIndex = () => { + +} +--fcc-editable-region-- + +playButton.addEventListener("click", () => { + if (userData?.currentSong === null) { + playSong(userData?.songs[0].id); + } else { + playSong(userData?.currentSong.id); + } +}); + +pauseButton.addEventListener("click", pauseSong); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md deleted file mode 100644 index d65212aca6b..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 63ec14d1c216aa063f0be4af -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive. - -To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively. - -Since these will not change, remember to use `const` to declare them. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#products-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#dessert-card-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md deleted file mode 100644 index 98110e0bc8a..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 63ec19978a066607e23439f8 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#clear-cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md deleted file mode 100644 index b3616baccb4..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 63ec1a16f930b108b8a76806 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#total-items` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#subtotal` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#taxes` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#total` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md deleted file mode 100644 index a973654d0d6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 63ec1bbf5584390a7d08d41f -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`. - -Then, use `let` to declare a variable named `isCartShowing` and set it to `false`. - -# --hints-- - -You should use `document.getElementById()` to get the `#show-hide-cart` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should use `let` to declare a variable named `isCartShowing`. - -```js -assert.match(code, /let\s+isCartShowing/); -``` - -You should set the `isCartShowing` variable to `false`. - -```js -assert.match(code, /let\s+isCartShowing\s*=\s*false/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md deleted file mode 100644 index 172acaf6e3f..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 63ec1cb59f2a4c0be5b6dfa0 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products. - -# --hints-- - -You should declare a `products` variable with `const`. - -```js -assert.match(code, /const\s+products/); -``` - -You should set the `products` variable to an empty array. - -```js -assert.match(code, /const\s+products\s*=\s*\[\s*\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md deleted file mode 100644 index 0815e4ecb06..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 63ec20a06fff670d37befbd9 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -You now need to start adding products. Before you do that, you need to consider the structure of your product data. A product will need a unique identifier to distinguish it from other products, a price so people know how much it costs, and a name so people know what they are buying. You should also add a category to each product. - -Add an object to your `products` array. Give this object an `id` property set to the number `1`, a `name` property set to `Vanilla Cupcakes (6 Pack)`, a `price` property set to the number `12.99`, and a `category` property set to `Cupcake`. - -# --hints-- - -Your products array should have one value. - -```js -assert.equal(products.length, 1); -``` - -Your products array should have an object as its first value. - -```js -assert.isObject(products[0]); -``` - -Your products array should have an object with an `id` property set to the number `1`. - -```js -assert.equal(products[0].id, 1); -``` - -Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`. - -```js -assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your products array should have an object with a `price` property set to the number `12.99`. - -```js -assert.equal(products[0].price, 12.99); -``` - -Your products array should have an object with a `category` property set to `Cupcake`. - -```js -assert.equal(products[0].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md deleted file mode 100644 index 30754019c8c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md +++ /dev/null @@ -1,472 +0,0 @@ ---- -id: 63ec3287b182ec0efe8a3135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up. - -| `name` | `price` | `category` | -| ------------------------------ | ------- | ----------- | -| `French Macaroon` | `3.99` | `Macaroon` | -| `Pumpkin Cupcake` | `3.99` | `Cupcake` | -| `Chocolate Cupcake` | `5.99` | `Cupcake` | -| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` | -| `Strawberry Ice Cream` | `2.99` | `Ice Cream` | -| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` | -| `Strawberry Pretzel` | `4.99` | `Pretzel` | -| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` | -| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` | -| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` | -| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` | - -# --hints-- - -Your second object in the `products` array should have an `id` property set to the number `2`. - -```js -assert.equal(products[1].id, 2); -``` - -Your second object in the `products` array should have a `name` property set to `French Macaroon`. - -```js -assert.equal(products[1].name, 'French Macaroon'); -``` - -Your second object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[1].price, 3.99); -``` - -Your second object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[1].category, 'Macaroon'); -``` - -Your third object in the `products` array should have an `id` property set to the number `3`. - -```js -assert.equal(products[2].id, 3); -``` - -Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`. - -```js -assert.equal(products[2].name, 'Pumpkin Cupcake'); -``` - -Your third object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[2].price, 3.99); -``` - -Your third object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[2].category, 'Cupcake'); -``` - -Your fourth object in the `products` array should have an `id` property set to the number `4`. - -```js -assert.equal(products[3].id, 4); -``` - -Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`. - -```js -assert.equal(products[3].name, 'Chocolate Cupcake'); -``` - -Your fourth object in the `products` array should have a `price` property set to the number `5.99`. - -```js -assert.equal(products[3].price, 5.99); -``` - -Your fourth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[3].category, 'Cupcake'); -``` - -Your fifth object in the `products` array should have an `id` property set to the number `5`. - -```js -assert.equal(products[4].id, 5); -``` - -Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`. - -```js -assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)'); -``` - -Your fifth object in the `products` array should have a `price` property set to the number `10.99`. - -```js -assert.equal(products[4].price, 10.99); -``` - -Your fifth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[4].category, 'Pretzel'); -``` - -Your sixth object in the `products` array should have an `id` property set to the number `6`. - -```js -assert.equal(products[5].id, 6); -``` - -Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`. - -```js -assert.equal(products[5].name, 'Strawberry Ice Cream'); -``` - -Your sixth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[5].price, 2.99); -``` - -Your sixth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[5].category, 'Ice Cream'); -``` - -Your seventh object in the `products` array should have an `id` property set to the number `7`. - -```js -assert.equal(products[6].id, 7); -``` - -Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`. - -```js -assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)'); -``` - -Your seventh object in the `products` array should have a `price` property set to the number `9.99`. - -```js -assert.equal(products[6].price, 9.99); -``` - -Your seventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[6].category, 'Macaroon'); -``` - -Your eighth object in the `products` array should have an `id` property set to the number `8`. - -```js -assert.equal(products[7].id, 8); -``` - -Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`. - -```js -assert.equal(products[7].name, 'Strawberry Pretzel'); -``` - -Your eighth object in the `products` array should have a `price` property set to the number `4.99`. - -```js -assert.equal(products[7].price, 4.99); -``` - -Your eighth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[7].category, 'Pretzel'); -``` - -Your ninth object in the `products` array should have an `id` property set to the number `9`. - -```js -assert.equal(products[8].id, 9); -``` - -Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`. - -```js -assert.equal(products[8].name, 'Butter Pecan Ice Cream'); -``` - -Your ninth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[8].price, 2.99); -``` - -Your ninth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[8].category, 'Ice Cream'); -``` - -Your tenth object in the `products` array should have an `id` property set to the number `10`. - -```js -assert.equal(products[9].id, 10); -``` - -Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`. - -```js -assert.equal(products[9].name, 'Rocky Road Ice Cream'); -``` - -Your tenth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[9].price, 2.99); -``` - -Your tenth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[9].category, 'Ice Cream'); -``` - -Your eleventh object in the `products` array should have an `id` property set to the number `11`. - -```js -assert.equal(products[10].id, 11); -``` - -Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`. - -```js -assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)'); -``` - -Your eleventh object in the `products` array should have a `price` property set to the number `11.99`. - -```js -assert.equal(products[10].price, 11.99); -``` - -Your eleventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[10].category, 'Macaroon'); -``` - -Your twelfth object in the `products` array should have an `id` property set to the number `12`. - -```js -assert.equal(products[11].id, 12); -``` - -Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`. - -```js -assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)'); -``` - -Your twelfth object in the `products` array should have a `price` property set to the number `12.99`. - -```js -assert.equal(products[11].price, 12.99); -``` - -Your twelfth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[11].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md deleted file mode 100644 index 2a000e8614e..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 63ec3427fc3e9214c9ed2a14 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that. - -Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function. - -# --hints-- - -You should call the `.forEach` method of your `products` array. - -```js -assert.match(code, /products\.forEach\(/); -``` - -You should use arrow syntax to create an empty callback function. - -```js -assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/) -``` - -You should pass your empty callback function to the `.forEach` method. - -```js -assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md deleted file mode 100644 index e9a2c069456..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 63ec36f6133df7160be3ec66 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Remember that you can use destructuring to extract multiple values from an array or object in a single statement. - -For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in. - -# --hints-- - -You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters. - -```js -assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/); -``` - -Your destructuring should be the first parameter of the callback function. - -```js -assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - () => {} -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md deleted file mode 100644 index 4add604d105..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 63ec47b454495519739486a7 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable. - -# --hints-- - -You should use access the `innerHTML` property of the `dessertCards` variable. - -```js -assert.match(code, /dessertCards\.innerHTML/); -``` - -You should use the addition assignment operator on the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/); -``` - -You should add an empty template literal string to the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md deleted file mode 100644 index 02a59b523b4..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 63ee5d38a5d29d0696f8d820 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable. - -# --hints-- - -You should create a `div` element. - -```js -assert.isAtLeast(document.querySelectorAll('div')?.length, 12); -``` - -Your `div` element should have a class of `dessert-card`. - -```js -assert.equal(document.querySelectorAll('.dessert-card')?.length, 12); -``` - -You should create an `h2` element. - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.length, 12); -``` - -Your `h2` element should have the text of the `name` variable. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your `h2` element should be inside the `div` element. - -```js -assert.equal(document.querySelectorAll('div h2')?.length, 12); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` - - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md deleted file mode 100644 index 96485328760..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63ee5d8f9e7168076e932fe2 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -After your `h2` element, create two `p` elements. Give the first a `class` of `dessert-price`, and the text of the `price` variable with a dollar sign in front of it. Give the second a `class` of `product-category`, and the text `Category:` followed by the value of the `category` variable. - -# --hints-- - -You should create two `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card')?.children.length, 3); -assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2) -``` - -Your `p` elements should come after your `h2` element. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2'); -assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P'); -assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P'); -``` - -Your first `p` element should have a `class` of `dessert-price`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price'); -``` - -Your first `p` element should have the text of the `price` variable with a dollar sign in front of it. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99'); -``` - -Your second `p` element should have a `class` of `product-category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category'); -``` - -Your second `p` element should have the text `Category:` followed by the value of the `category` variable. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    - -
                                                                    - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md deleted file mode 100644 index 6092f597046..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 63ee5e0f08e82208364c4128 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Finally, after your `p` elements, create a `button` element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `Add to cart` for the text. - -# --hints-- - -You should create a `button` element. - -```js -assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12); -``` - -Your `button` element should come after your `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P'); -assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling); -``` - -Your `button` element should have an `id` set to the value of the `id` variable. - -```js -assert.equal(document.querySelector('.dessert-card button')?.id, '1'); -``` - -Your `button` element should have a `class` of `btn add-to-cart-btn`. - -```js -assert.include(document.querySelector('.dessert-card button')?.className, 'btn'); -assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn'); -``` - -Your `button` element should have the text `Add to cart`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md deleted file mode 100644 index 44ba9af32dc..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 63ee5ea8be892e0955ab346c -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -You are already familiar with an HTML `class`, but JavaScript also has a class. In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods. - -The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class: - -```js -class Computer {}; -``` - -Declare a `ShoppingCart` class. - -# --hints-- - -You should declare a `ShoppingCart` variable. - -```js -assert.match(code, /ShoppingCart/); -``` - -You should use the `class` keyword to declare a `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*/); -``` - -Your `ShoppingCart` class should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md deleted file mode 100644 index 87839e53275..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 63ee5fc113bcb20a5db9214b -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Classes have a special `constructor` method, which is called when a new instance of the class is created. The `constructor` method is a great place to initialize properties of the class. Here is an example of a class with a `constructor` method: - -```js -class Computer { - constructor() { - } -} -``` - -Add an empty `constructor` method to the `ShoppingCart` class. - -# --hints-- - -You should add a `constructor` method to the `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/) -``` - -Your `constructor` method should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md deleted file mode 100644 index 4f7a2390687..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 63ee611d478dca0b77f6a393 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -The `this` keyword in JavaScript is used to refer to the current object. Depending on where `this` is used, what it references changes. In the case of a class, it refers to the instance of the object being constructed. You can use the `this` keyword to set the properties of the object being instantiated. Here is an example: - -```js -class Computer { - constructor() { - this.ram = 16; - } -} -``` - -In your constructor, use the `this` keyword to set the `items` property to an empty array. Also, set the `total` property to `0`, and the `taxRate` property to `8.25`. - -# --hints-- - -You should use the `this` keyword to set the `items` property of your class to an empty array. - -```js -assert.match(code, /this\.items/); -const cart = new ShoppingCart(); -assert.isArray(cart.items); -assert.isEmpty(cart.items); -``` - -You should use the `this` keyword to set the `total` property of your class to `0`. - -```js -assert.match(code, /this\.total/); -const cart = new ShoppingCart(); -assert.equal(cart.total, 0); -``` - -You should use the `this` keyword to set the `taxRate` property of your class to `8.25`. - -```js -assert.match(code, /this\.taxRate/); -const cart = new ShoppingCart(); -assert.equal(cart.taxRate, 8.25); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - - } -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md deleted file mode 100644 index 86c81b0332a..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 63ee7c664f9b65137d925c8a -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Your `ShoppingCart` class needs the ability to add items. Create an empty `addItem` method, which takes two parameters: `id` and `products`. Creating a method might look like this: - -```js -class Computer { - constructor() { - this.ram = 16; - } - - addRam(amount) { - this.ram += amount; - } -} -``` - -The first parameter, `id`, is the `id` of the product the user has added to their cart. The second parameter, `products`, is an array of product objects. By using a parameter instead of directly referencing your existing `products` array, this method will be more flexible if you wanted to add additional product lists in the future. - -# --hints-- - -Your `ShoppingCart` class should have an `addItem` method. - -```js -const cart = new ShoppingCart(); -assert.isFunction(cart.addItem); -``` - -Your `addItem` method should take two parameters: `id` and `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/); -``` - -Your `addItem` method should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md deleted file mode 100644 index 88900979e4b..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 63eea5cea403a81a68ae493c -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -You need to find the product that the user is adding to the cart. Remember that arrays have a `.find()` method. In your `addItem` function, declare a `product` variable, and assign it the value of calling the `.find()` method on the `products` array. - -For the callback to `.find()`, pass a function that takes a single parameter `item`, and returns whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -# --hints-- - -You should declare a `product` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=/); -``` - -You should call the `.find()` method on your `products` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(/); -``` - -You should pass a callback function to the `.find()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/); -``` - -The callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/); -``` - -The callback function should return whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/); -``` - -You should assign the value of the `.find()` method to the `product` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md deleted file mode 100644 index fa4bbc91e2f..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63eea817673c8e1c22927fa6 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Use `const` and destructuring to extract `name` and `price` variables from `product`. - -# --hints-- - -You should use destructuring to get the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/); -``` - -You should use `const` to declare the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/); -``` - -You should use destructuring to get the `name` and `price` variables from `product`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md deleted file mode 100644 index 21089f88380..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 63eea8e1e143ae1d098c8c9d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Now you need to push the `product` into the cart's `items` array. Remember to use the `this` keyword. - -# --hints-- - -You should call the `push` method on the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.push\(/); -``` - -Remember you need to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.push\(/); -``` - -You should `push` the `product` variable to the `items` array. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.deepEqual(cart.items, [products[0]]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md deleted file mode 100644 index f1583334ed8..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 63eeb8e86becbf1e75c2cb0d -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -You now need a total count of each product that the user has in the cart. Declare a `totalCountPerProduct` variable, and assign it an empty object. - -# --hints-- - -You should declare a `totalCountPerProduct` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/); -``` - -You should use `const` to declare `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/); -``` - -You should assign an empty object to `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md deleted file mode 100644 index af217952d82..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63eedebb0ec0231ff1cede1a -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Use the `.forEach()` method to loop through the `items` array. Pass an empty callback function that takes a single parameter `dessert`. - -# --hints-- - -You should use the `.forEach()` method on your `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.forEach\(/); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(/); -``` - -You should pass a callback function to the `.forEach()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/); -``` - -Your callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/); -``` - -Your callback function should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md deleted file mode 100644 index 24c1ac26daf..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 63efdbc22a0c56070beabed7 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -In your `forEach` callback, you need to update the `totalCountPerProduct` object. Using the `id` of the current `dessert` as your property, update the value of the property to be the current value plus one. Do not use the addition assignment operator for this. - -# --hints-- - -You should use dot notation to access the `id` property of `dessert`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /dessert\.id/); -``` - -You should use bracket notation to access the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the assignment operator to update the value of the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/); -``` - -You should update the value of `totalCountPerProduct` to be the current value plus one. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md deleted file mode 100644 index cba3963dbee..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 63efe370bbfc4a08d500118e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -You now have a small bug. When you try to access a property of an object and the property doesn't exist, you get `undefined`. This means if the dessert isn't already present in the `totalCountPerProduct` object, you end up trying to add `1` to `undefined`, which results in `NaN`. - -To fix this, you can use the `||` operator to set the value to `0` if it doesn't exist. Wrap your right-hand `totalCountPerProduct[data.id]` in parentheses, and add `|| 0` to the end of the expression. - -# --hints-- - -You should wrap your right-hand `totalCountPerProduct[data.id]` in parentheses. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the `||` operator. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/); -``` - -You should use `0` as your fallback value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/); -``` - -You should still add `1` to the value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1; - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md deleted file mode 100644 index 5e3da866f36..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 63eff02f00e69a0b2ac10b43 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Now you need to get prepared to update the display with the new product the user added. Declare a `currentProductCount` variable, and assign it the value of the `totalCountPerProduct` object's property matching the `id` of `product`. - -# --hints-- - -You should declare a `currentProductCount` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=/); -``` - -You should use `const` to declare `currentProductCount`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCount\s*=/); -``` - -You should assign the value of `totalCountPerProduct[product.id]` to `currentProductCount`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md deleted file mode 100644 index a1b63e599ad..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 63eff98ffb1d5a0d24ec79cb -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -You haven't written the code to generate the HTML yet, but if a product has already been added to the user's cart then there will be a matching element which you'll need. - -Use `.getElementById()` to get the matching element - you'll be setting the `id` value to `product-count-for-id${product.id}`, so use a template literal to query that value. - -Assign your query to a `currentProductCountSpan` variable. - -# --hints-- - -You should declare a `currentProductCountSpan` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/); -``` - -You should use `const` to declare `currentProductCountSpan`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/); -``` - -You should use `document.getElementById()` to get the matching element. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /document\.getElementById\(/); -``` - -You should use a template literal to query the `id` value. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/); -``` - -You should assign the value of `document.getElementById()` to `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md deleted file mode 100644 index 4573e021ac0..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63effe558c87a70e7072e447 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. - -# --hints-- - -You should check if `currentProductCount` is greater than `1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/); -``` - -You should use a ternary operator with your `currentProductCount > 1` condition. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/); -``` - -You should use `undefined` as the truthy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should use `undefined` as the falsy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md deleted file mode 100644 index aebdaf9a24f..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 63f0165121a9181342d5bc66 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -For your truthy expression, removing the `undefined`, you need to update the `textContent` of the `currentProductCountSpan` to be the `currentProductCount` followed by an `x`. Use a template literal to do so. - -# --hints-- - -You should remove the `undefined` from your truthy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should access the `textContent` property of `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/); -``` - -You should use template literal syntax to update the `textContent` to be `${currentProductCount}x`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 ? undefined : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md deleted file mode 100644 index b6f14c6ae69..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 63f017b4ad028a148eb713c0 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -For your falsy expression, you'll need to add new HTML to your `productsContainer`. Start by removing the `undefined`, then use the addition assignment operator and template literal syntax to add a `div` with the `class` set to `product` and the `id` set to `dessert${id}` to the `innerHTML` property of the `productsContainer`. - -# --hints-- - -You should remove the `undefined` from your falsy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /undefined/); -``` - -You should use the addition assignment operator to add HTML to the `productsContainer`. Remember that HTML goes in the `innerHTML` property. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/); -``` - -You should use template literal syntax to add HTML to the `productsContainer`. - -```js -assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/); -``` - -You should add a `div` to the `productsContainer`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.tagName, "DIV"); -``` - -Your `div` should have the `class` set to `product`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.className, "product"); -``` - -Your `div` should have the `id` set to `dessert${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.id, "dessert1"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md deleted file mode 100644 index dd3815162fa..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 63f01861f813e01564c95315 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Inside your `div`, add two `p` elements. Set the text of the second `p` element to be the value of the `price` variable. - -# --hints-- - -You should add two `p` elements inside your `div` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children.length, 2); -assert.equal(div?.children[0].tagName, 'P'); -assert.equal(div?.children[1].tagName, 'P'); -``` - -Your second `p` element should have the text of the `price` variable. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children[1].textContent, '12.99'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    - -
                                                                    - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md deleted file mode 100644 index da747a73c32..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 63f018f04e487e164dc27bd9 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable. - -# --hints-- - -Your first `p` element should have a `span` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children.length, 1); -assert.equal(p.children[0].tagName, 'SPAN'); -``` - -Your `span` element should have a `class` of `product-count`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].className, 'product-count'); -``` - -Your `span` element should have an `id` of `product-count-for-id${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].id, 'product-count-for-id1'); -``` - -Your first `p` element should have the text of the `name` variable. This should be outside the span. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md deleted file mode 100644 index 852ac25d2b7..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 63f01c9791a0aa1751c73760 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -There is still more functionality that your `ShoppingCart` class needs, but first you need to be able to test the code you have currently written. You'll need to instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples: - -```js -const myComputer = new Computer(); -``` - -Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object. - -# --hints-- - -You should use `const` to declare a `cart` variable. - -```js -assert.match(code, /const\s+cart\s*=/); -``` - -You should use the `new` keyword to instantiate a new `ShoppingCart` object. - -```js -assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/); -``` - -You should assign your new `ShoppingCart` object to the `cart` variable. - -```js -assert.isTrue(cart instanceof ShoppingCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } -}; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md deleted file mode 100644 index c2590b8a8ea..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f0224ceb16dc196d2c860a -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -You need to get all of the `Add to cart` buttons that you added to the DOM earlier. Declare an `addToCartBtns` variable, and assign it the value of calling the `getElementsByClassName()` method on the `document` object, passing in the string `add-to-cart-btn`. - -# --hints-- - -You should use `const` to declare your `addToCartBtns` variable. - -```js -assert.match(code, /const\s+addToCartBtns\s*=/); -``` - -You should call the `getElementsByClassName()` method on the `document` object. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/); -``` - -You should pass the string `add-to-cart-btn` to the `getElementsByClassName()` method. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/); -``` - -You should assign the value returned by the `getElementsByClassName()` method to the `addToCartBtns` variable. - -```js -assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } -}; - -const cart = new ShoppingCart(); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md deleted file mode 100644 index fd0129e37ca..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f026d041bc6c1a3d5cba0f -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -You need to iterate through the buttons in your `addToCartBtns` variable. However, `.getElementsByClassName()` returns a Collection, which does not have a `forEach` method. - -Use the spread operator on the `addToCartBtns` variable to convert it into an array. Then, use the `forEach` method to iterate through the array. Do not pass a callback function yet. - -# --hints-- - -You should use the spread operator on the `addToCartBtns` variable. - -```js -assert.match(code, /\.\.\.addToCartBtns/); -``` - -You should spread the `addToCartBtns` variable into an array. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/); -``` - -You should use the `forEach` method on the array you created. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/); -``` - -You should not pass a callback function to the `forEach` method. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md deleted file mode 100644 index cae3ba72dbe..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0284532742c1b26c7a052 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Add your callback function to the `forEach` method. It should take a `btn` parameter. Then, in the callback, add an event listener to the `btn`. The event listener should listen for a `click` event, and should take another callback with an `event` parameter. The second callback should be empty. - -# --hints-- - -You should use arrow syntax to add a callback function to the `forEach` method which takes a `btn` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/); -``` - -You should add an event listener to the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/); -``` - -You should add an empty callback function to the event listener. Remember to give it an `event` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md deleted file mode 100644 index c27e13717f0..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0289df84a581bbdbd29b7 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -In your event listener callback, call the `.addItem()` method of your `cart` object, and pass in the `event.target.id`. Remember that the `id` here will be a string, so you need to convert it to a number. - -Pass your `products` array as the second argument. - -# --hints-- - -Your event listener callback should call the `.addItem()` method of your `cart` object. - -```js -assert.match(code, /cart\.addItem\(/); -``` - -Your `.addItem()` method should be called with the `event.target.id` as the first argument. Remember to convert the `id` to a number using `Number()`. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/); -``` - -Your `.addItem()` method should be called with the `products` array as the second argument. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - - }) - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md deleted file mode 100644 index 4b53ebc3ff1..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 63f0295e673b661ccb299e8a -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -You need a way to access the total number of items in the cart. The best way to do this is to add another method to your `ShoppingCart` class, rather than accessing the `items` array directly. - -Add a `getCounts` method to the `ShoppingCart` class. It should return the number of items in the `items` array. - -# --hints-- - -Your `ShoppingCart` class should have a `getCounts` method. - -```js -assert.isFunction(cart.getCounts); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const afterCounts = code.split('getCounts')[1]; -assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/); -``` - -Your `getCounts` method should return the number of items in the `items` array. - -```js -assert.equal(cart.getCounts(), 0); -cart.addItem(1, products); -assert.equal(cart.getCounts(), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md deleted file mode 100644 index b75a16738ae..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 63f029b96b9e9e1df93be951 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Now you can update the total number of items on the webpage. Assign the value of your `cart` object's `.getCounts()` method to the `textContent` of the `totalNumberOfItems` variable. - -# --hints-- - -You should access the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent/) -``` - -You should assign the value of your `cart` object's `.getCounts()` method to the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md deleted file mode 100644 index ff8d5d86a2e..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 63f02a4ef92d711ec1ff618c -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -You also need to update the total price of the cart when the user adds an item. Create a `calculateTotal` method in the `ShoppingCart` class. - -In that method, declare a `subTotal` variable and use the `reduce` method on the `items` array to calculate the sum of the `price` property of each item in the array. Use `total` and `item` as the parameters for your callback. - -Remember to set your initial value in the `reduce` method. - -# --hints-- - -You should create a `calculateTotal` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTotal); -``` - -Your `calculateTotal` method should have a `subTotal` variable declared with `const`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+subTotal\s*=/); -``` - -Your `calculateTotal` method should use the `reduce` method on the `items` array. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/); -``` - -Your `reduce` callback should use `total` and `item` as the first and second parameter. Remember to use arrow function syntax. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/); -``` - -Your `reduce` callback should return the sum of `total` and `item.price`. Use an implicit return. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/); -``` - -Your `reduce` call should have an initial value of `0`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md deleted file mode 100644 index 8d4036f7ea6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f02b22cce1c11fe9604381 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Part of the total cost will include the tax, so you need to calculate that as well. Create a `calculateTaxes` method in the `ShoppingCart` class. This method should take an `amount` parameter. - -# --hints-- - -You should create a `calculateTaxes` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTaxes); -``` - -Your `calculateTaxes` method should take an `amount` parameter. - -```js -assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md deleted file mode 100644 index 82d277b0ab0..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f02bdeb9b428208b97eb6b -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -For clarity, wrap the `taxRate / 100` calculation in parentheses. - -# --hints-- - -You should divide the `taxRate` by 100 in your `calculateTaxes` method. Remember to use the `this` keyword. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/); -``` - -You should wrap the `this.taxRate / 100` calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/); -``` - -You should multiply the `amount` parameter by the `taxRate` divided by 100 in your `calculateTaxes` method. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/); -``` - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -```js -console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md deleted file mode 100644 index 0954c9b4ac6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 63f02c6e18773921ba50aa53 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Because of the way computers store and work with numbers, calculations involving decimal numbers can result in some strange behavior. For example, `0.1 + 0.2` is not equal to `0.3`. This is because computers store decimal numbers as binary fractions, and some binary fractions cannot be represented exactly as decimal fractions. - -We want to clean up the number result from your calculation. Wrap your calculation in parentheses (don't include the `return` statement!) and call the `.toFixed()` method on it. Pass the `.toFixed()` method the number `2` as an argument. This will round the number to two decimal places and return a string. - -# --hints-- - -You should wrap your calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/) -``` - -You should call the `.toFixed()` method on your calculation. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/) -``` - -You should pass the `.toFixed()` method the number `2` as an argument. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return (this.taxRate / 100) * amount; - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md deleted file mode 100644 index d925dca7812..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 63f0311f5ea9382388d6124f -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -The issue with `.toFixed()` returning a string is that you want to be able to perform calculations with the tax rate. To fix this, you can pass the `.toFixed()` call (including the calculation) to the `parseFloat()` function. This will convert the fixed string back into a number, preserving the existing decimal places. - -Pass your `.toFixed()` call to `parseFloat()`. - -# --hints-- - -You should pass your entire calculation (excluding the `return` statement) to `parseFloat()`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return ((this.taxRate / 100) * amount).toFixed(2); - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md deleted file mode 100644 index b0527ca7c31..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f033fdb1fbcc254999fcc3 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Your cart currently isn't visible on the webpage. To make it visible, start by adding an event listener to the `cartBtn` variable, listening for the click event. The callback does not need any parameters. - -# --hints-- - -You should add an event listener to the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/); -``` - -You should add an empty callback function (using arrow syntax) to the event listener. Remember that it does not need any parameters. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md deleted file mode 100644 index 48e1daa6e0e..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f03446c2ed3e264be6c7fc -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Start by inverting the value of `isCartShowing`. Remember that you can use the logical not operator `!` to invert the value of a boolean. Assign the inverted value to `isCartShowing`. - -# --hints-- - -You should invert the value of `isCartShowing`. - -```js -assert.match(code, /!isCartShowing/); -``` - -You should assign the inverted value of `isCartShowing` to `isCartShowing`. - -```js -assert.match(code, /isCartShowing\s*=\s*!isCartShowing/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md deleted file mode 100644 index 1e9f9959098..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f0348a54a177272071a595 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `Hide`, otherwise set it to `Show`. - -# --hints-- - -You should use the assignment operator on the `textContent` property of the `showHideCartSpan` variable. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Hide` if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Show` if `isCartShowing` is false. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md deleted file mode 100644 index 3fcf304cca6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 63f034d012f74627ce538d3a -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `block`, otherwise set it to `none`. - -Now you should be able to see your cart and add items to it. - -# --hints-- - -You should access the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/) -``` - -You should use the assignment operator on the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `block` if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `none` if `isCartShowing` is false. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md deleted file mode 100644 index a4c481b5796..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f03686c5ea863533ec71f4 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Declare a variable `tax` and assign it the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument. - -# --hints-- - -Use `const` to declare a variable named `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+tax\s*=/); -``` - -Assign the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument, to the `tax` variable. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md deleted file mode 100644 index 936b8a7add9..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f036ec91fdf238c90665f5 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Update the `total` value to be the sum of the `subTotal` and `tax` values. - -# --hints-- - -You should update the `total` value. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total/); -``` - -You should set the `total` value to be the sum of the `subTotal` and `tax` values. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md deleted file mode 100644 index cba09f5a3e6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 63f0370b340915399d31e5eb -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -You're going to update the HTML in this method as well. Set the `textContent` of the `cartSubTotal` to be the value of `subTotal` to a fixed 2 decimal places. Use template literal syntax to add the dollar sign to the beginning of the value. - -# --hints-- - -You should access the `textContent` property of the `cartSubTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `subTotal` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartSubTotal` element to your template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md deleted file mode 100644 index 37c08222320..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 63f0374d5351223a747c301d -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Following the same pattern as your `cartSubTotal`, update the `cartTaxes` to display the `tax` value, and your `cartTotal` to display the `total` property. - -# --hints-- - -You should access the `textContent` property of the `cartTaxes` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/); -``` - -You should call the `.toFixed()` method on the `tax` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTaxes` element to `tax.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should access the `textContent` property of the `cartTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `total` variable, passing `2` as the argument. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTotal` element to your `total.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md deleted file mode 100644 index 56336e0263e..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f0378e173e3c3b7638b528 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Finally, return the value of the `total` property. Remember your `this` keyword. - -# --hints-- - -Your `calculateTotal` method should return the value of the `total` property. - -```js -assert.equal(cart.calculateTotal(), 0); -cart.addItem(1, products); -assert.approximately(cart.calculateTotal(), 14.06, 0.1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md deleted file mode 100644 index db0f9862452..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f038a0ae041d3c5b0cdf23 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Your last feature is to allow users to clear their cart. Add a `clearCart()` method to your `ShoppingCart` class. - -# --hints-- - -Your `ShoppingCart` class should have a `clearCart` method. - -```js -assert.isFunction(cart.clearCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md deleted file mode 100644 index 50339959f43..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -id: 63f038e671d3f73d5a041973 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -The first thing you should do is check if the `items` array is empty. If it is, display an `alert` to the user with the text `Your shopping cart is already empty`, then return from the function. - -Remember that `0` is a falsy value, so you can use the `!` operator to check if the array is empty. - -After displaying the alert, return from the function to stop execution. - -# --hints-- - -You should create an `if` statement that checks if the `items` array is empty, using the negation operator. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/); -``` - -Your `if` statement should display an `alert` to the user with the text `Your shopping cart is already empty`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/); -``` - -Your `if` statement should return from the function. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md deleted file mode 100644 index 23f034e9067..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 63f039dbcef7673e4e758fa3 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Browsers have a built-in `confirm()` function which displays a confirmation prompt to the user. `confirm()` accepts a string, which is the message displayed to the user. It returns `true` if the user confirms, and `false` if the user cancels. - -Declare a variable `isCartCleared` and assign it the value of calling `confirm()` with the string `"Are you sure you want to clear all items from your shopping cart?"`. - -# --hints-- - -You should use `const` to declare the `isCartCleared` variable. - -```js -const afterClearCart = code.split('clearCart()')[1]; -assert.match(afterClearCart, /const\s+isCartCleared\s*=/); -``` - -You should call the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(/); -``` - -You should pass the string `Are you sure you want to clear all items from your shopping cart?` to the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -You should assign the value of the `confirm()` function to the `isCartCleared` variable. - -```js -assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md deleted file mode 100644 index be4fde050a5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -id: 63f03a7143a6ef3f7f3344f0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -You only want to clear the cart if the user confirms the prompt. Create an `if` statement that checks if the user confirmed the prompt. - -In the `if` statement, set the `items` property back to an empty array, then set the `total` property to `0`. - -# --hints-- - -You should create an `if` statement that checks if the user confirmed the prompt. Remember that you can check the truthiness of `isCartCleared` directly. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/); -``` - -Your `if` statement should set the `items` property back to an empty array. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/); -``` - -Your `if` statement should set the `total` property to `0`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md deleted file mode 100644 index 3b6705168d8..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f03ac2b428b2404a5a7518 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -You also need to start clearing the HTML. Set the `innerHTML` property of the `productsContainer` back to an empty string. - -# --hints-- - -In your `if` statement, you should set the `innerHTML` property of the `productsContainer` back to an empty string. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md deleted file mode 100644 index 5a1e7f099f3..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 63f03af535682e4138fdb915 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Set the `textContent` of the `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal` elements all to the number `0`. - -# --hints-- - -You should set the `textContent` of the `totalNumberOfItems` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartSubTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTaxes` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTotal\.textContent\s*=\s*0/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md deleted file mode 100644 index 913c5c53bdb..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md +++ /dev/null @@ -1,744 +0,0 @@ ---- -id: 63f03b1ed5ab15420c057463 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Your final step is to make your clear button functional. Add a `click` event listener to the `clearCartBtn`. For the callback, you can pass in `cart.clearCart` directly. - -However, doing so will not work, because the context of `this` will be the `clearCartBtn` element. You need to bind the `clearCart` method to the `cart` object. - -You can do this by passing `cart.clearCart.bind(cart)` as the callback. - -And with that, your shopping cart project is complete! - -# --hints-- - -You should add an event listener to your `clearCartBtn` element. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(/); -``` - -Your event listener should listen for the `click` event. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/); -``` - -Your event listener should take `cart.clearCart.bind(cart)` as the callback. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - -clearCartBtn.addEventListener("click", cart.clearCart.bind(cart)); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md deleted file mode 100644 index c33ce088a1c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f6721d5110af243ef8f3d9 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now call your `.calculateTotal()` method inside your `forEach` loop. - -# --hints-- - -You should call `cart.calculateTotal()` inside your `forEach` loop. - -```js -const afterForEach = code.split('[...addToCartBtns].forEach(')[1]; -assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                    -

                                                                    Desserts Page

                                                                    -
                                                                    -
                                                                    - -
                                                                    - -
                                                                    -

                                                                    Total number of items: 0

                                                                    -

                                                                    Subtotal: $0

                                                                    -

                                                                    Taxes: $0

                                                                    -

                                                                    Total: $0

                                                                    -
                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                    -

                                                                    ${name}

                                                                    -

                                                                    $${price}

                                                                    -

                                                                    Category: ${category}

                                                                    - -
                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                    -

                                                                    - ${name} -

                                                                    -

                                                                    ${price}

                                                                    -
                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md deleted file mode 100644 index a2ce162457c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9a -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. - -In JavaScript, you can access the DOM by referencing the global `document` object. - -To view the DOM, log it to the console with `console.log(document)`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast
                                                                    - Lunch
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md deleted file mode 100644 index aab244748d6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9b -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -In our HTML document, we have a form element with an `id` attribute: `
                                                                    ` - -To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. - -The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    - -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - - -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md deleted file mode 100644 index 31afd7303fc..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9c -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. - -Forms have an `onsubmit` event that can execute a function when the form is submitted. - -For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. - -Assign a function named `calculate` to the `onsubmit` event of your form. - -You will create the `calculate` function later. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md deleted file mode 100644 index bcd3b1bc287..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9d -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. Here is an example of an empty function called `square`: - -```js -function square() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(typeof calculate === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md deleted file mode 100644 index 8a02a67b570..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9e -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -By default, `onsubmit` will pass the event object as a parameter to the function it calls. People usually call it `e`, short for event. Update the `calculate()` function to accept `e` as parameter. - -Here is an example of an empty function called `square` that takes a `number` as a parameter: - -```js -function square(number) {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md deleted file mode 100644 index 0cd5d1525fd..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9f -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. - -Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md deleted file mode 100644 index ee8e8356f0d..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da0 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. - -To access elements with a certain class name, we use the `getElementsByClassName()` method. - -Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md deleted file mode 100644 index 9b80e0f827c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da1 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md deleted file mode 100644 index c5a2856f2c3..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da2 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -To make the document objects easier to handle, let's turn them into an array. Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md deleted file mode 100644 index 40f6a846fd5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da3 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md deleted file mode 100644 index 725bff25987..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da4 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md deleted file mode 100644 index fead88a0598..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da5 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. - -The `map()` method allows us to do exactly that. - -Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .toString() - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md deleted file mode 100644 index 714497fddbb..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da6 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Now we need to provide a function to `map()` that will be performed on each item of the array. - -This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: - -```js -function(meal){} -``` - -Enter in the above function as an argument in between the parentheses of the `.map()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md deleted file mode 100644 index 7d58167b80c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da7 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. - -If you want, console log `total` to see what results you are getting. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md deleted file mode 100644 index 4a199951818..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da8 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md deleted file mode 100644 index 6058cea614a..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da9 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md deleted file mode 100644 index 46dfade8b55..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daa -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. - -Chain the `reduce()` method to the `Array.from()` expression. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md deleted file mode 100644 index 065b5dce513..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dab -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: - -```js -function(accumulator, currentValue) { /* code to run */ } -``` - -or using arrow functions: - -```js -(accumulator, currentValue) => { /* code to run */ } -``` - -Insert the above callback function as an argument in the `.reduce()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md deleted file mode 100644 index 448c7702610..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dac -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. - -Here is an example of a `reduce()` method with an empty object as its initial value: - -```js -arr.reduce((accumulator, currentValue) => { - /* code to run */ -}, {}); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md deleted file mode 100644 index 4134f0401a2..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dad -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. - -We can use the reduce function as follows: - -```js -arr.reduce((accumulator, currentValue) => { - return accumulator + currentValue; -}, 0); -``` - -At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, since `arr[0] = 1 = currentValue`. - -At `arr[1]`, the function is `(1, 3) => 1 + 3`, - -Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. - -In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md deleted file mode 100644 index c9d4f5bd8ad..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 5e302e80e003129199103c78 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` - -You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. - -When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md deleted file mode 100644 index b36ed2d97b6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5e302e8ce003129199103c79 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Now let's simplify the `reduce()` callback function by refactoring it. - -Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. - -So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. - -Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md deleted file mode 100644 index 8825fbe6dd0..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dae -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. - -Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. - -If you inspect the Female radio button you will notice its id: `` - -Create a variable named `maxCalories` and set it equal to the document element with the id of `female`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md deleted file mode 100644 index 1e19c715fcf..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daf -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` - -Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md deleted file mode 100644 index 21d83417535..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db0 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. - -For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: - -```js -if (5 - 3 === 4) { - return 'Yes'; -} else { - return 'No'; -} -``` - -`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md deleted file mode 100644 index abe960e3120..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db1 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Now that we have `total` and `maxCalories`, we need to find out the difference between them. - -Create a variable named `difference` and set it equal to `total - maxCalories` - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md deleted file mode 100644 index ad3abc0bfe5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db2 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. - -To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). - -If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. - -Use the same ternary syntax that you used to determine `maxCalories`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md deleted file mode 100644 index 2dbdd8b547b..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db3 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
                                                                    `. - -We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. - -Create a variable named `output` and set it equal to this division element with the `id` of `output`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md deleted file mode 100644 index 87062f28e7f..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db4 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Now it's time to create the HTML elements that we will add inside of `output`. - -To create an element, use `createElement()`. For example: - -```js -const myHeading1 = document.createElement('h1') -``` - -Create an `h3` element and assign it to a variable named `result`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md deleted file mode 100644 index 90ad3c91cb4..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db5 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Next, we will create a text node that we will later append to the `result` element. - -JavaScript has a function called `createTextNode()` to accomplish this. For example: - -```js -const myText = document.createTextNode("Hello world!") -``` - -Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md deleted file mode 100644 index b93248efe69..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db6 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -We can now use the `difference` variable that we created above. - -Insert the `difference` variable inside the parentheses of `.createTextNode()` - -If you want to see what the text currently looks like, try `console.log(resultText)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md deleted file mode 100644 index fd08248b5f0..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db7 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Notice how if `total` is less than `maxCalories`, `difference` is a negative number. - -We want to show the absolute value of the difference so it displays "300" rather than "-300". - -Wrap the `difference` in a `Math.abs()` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md deleted file mode 100644 index f066a2b3607..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db8 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md deleted file mode 100644 index d2e8c9a31c3..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db9 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Next we want to add the text from the `surplusOrDeficit` variable that we previously created. - -Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md deleted file mode 100644 index 1311c2ac849..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dba -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. - -Some people consider this a little cumbersome and prefer to use template literals instead. - -Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. - -For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. - -Convert the data inside of `createTextNode()` to be a template literal. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md deleted file mode 100644 index 923d7d02e23..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbb -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: - -```js -result.appendChild(resultText); -``` - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md deleted file mode 100644 index 09da32b6cb5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbc -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Similarly, append the `result` to the `output` element with the `appendChild()` method. - -Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md deleted file mode 100644 index ccb8660bf13..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbd -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Next, let's create and add a horizontal rule (`hr`) element to the output. - -Create an `hr` element and assign it to a variable named `line`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md deleted file mode 100644 index e0f9bd9c47c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbe -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Add the `line` to the `output` element using the `appendChild()` method. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md deleted file mode 100644 index 4c4b069fb43..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbf -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Let's create a few more HTML elements to add to the `output`. - -Create an `h4` element and assign it to a variable named `recommended`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md deleted file mode 100644 index 0becd375fa5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc0 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Create a text node and assign it to a variable named `recommendedText`. - -This is similar to how your created the `resultText` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md deleted file mode 100644 index fd2d846ab52..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc1 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. - -Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". - -This is similar to template literal syntax previously used to create `resultText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md deleted file mode 100644 index 9e9d9c9c3f2..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc2 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Append the `recommendedText` node to the `recommended` element. - -This is similar to how the `resultText` is appended to `result` previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md deleted file mode 100644 index 9264e8ac9cf..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc3 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Append the `recommended` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md deleted file mode 100644 index 0fd8978f093..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc4 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. - -Create an `h4` element and assign it to a variable named `consumed`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md deleted file mode 100644 index 6bb2536f422..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc5 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. - -For example: - -```js -consumed.innerHTML = `Hello world`; -``` - -Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md deleted file mode 100644 index 29d043f4c6e..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc6 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Append the `consumed` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md deleted file mode 100644 index c34dcad8f68..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc7 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Now it's time to add some styling which can be added directly as attributes or classes. - -In our CSS file, we have a styling rule for any elements with the class name `green-text`. - -On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. - -Now if you submit the form again and inspect the `result` element, you will see it as `

                                                                    ` and notice that the text is now green. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md deleted file mode 100644 index 7298971ffec..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc8 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. - -For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. - -Set the `class` attribute of the `output` element equal to a class named `bordered-class`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md deleted file mode 100644 index 1b0bd348910..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc9 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. - -Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. - -The `calculate()` function is now finished! - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                    -
                                                                    -

                                                                    Calorie Counter

                                                                    -
                                                                    - Sex -
                                                                    - - - -
                                                                    - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - Breakfast -
                                                                    - Lunch -
                                                                    - Dinner -
                                                                    - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md deleted file mode 100644 index 56bbb142804..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dca -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. - -In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: - -```html - - - - -
                                                                    -

                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md deleted file mode 100644 index db8f9bc95c1..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcb -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -We want a function to run every time the user clicks the "Add Entry" button. - -Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: - -```js -function() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md deleted file mode 100644 index 886f041422c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcc -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Inside the function, create an `input` document element and assign it to a variable named `foodInput`. - -This is similar to how you created the `result` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md deleted file mode 100644 index 6860d68731d..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcd -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Set the `placeholder` property of the `foodInput` equal to `'food name'`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md deleted file mode 100644 index 89e37a9f626..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dce -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. - -In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. - -Add the class name `food-control` to the `foodInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md deleted file mode 100644 index e0ab30e27b5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcf -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Notice that parent container of all of the inputs has an `id` of `entries`: `
                                          `. - -Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. - -This is similar to the other `appendChild()` methods that you have used previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md deleted file mode 100644 index ea1faf6c59c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md deleted file mode 100644 index 594af428356..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd1 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. - -This is similar to how to set the class of the `output` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md deleted file mode 100644 index 962a0309894..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd2 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -The `calorieInput` element should only accept numbers that are 0 or above. - -Set the `min` attribute of `calorieInput` to `0`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md deleted file mode 100644 index eac60b49fce..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd3 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. - -We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md deleted file mode 100644 index 7ffb7021744..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd4 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. - -To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md deleted file mode 100644 index 8e15285d2a9..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd5 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. - -The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md deleted file mode 100644 index df36314c4ae..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd6 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. - -Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md deleted file mode 100644 index 1e5b3e9b048..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd7 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. - -# --hints-- - -See description above for instructions. - -```js -assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md deleted file mode 100644 index 7a941b6559c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd8 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Create a variable named `clearOutput` and set it equal to a blank arrow function: - -```js -const clearOutput = () => {} -``` - -This is similar to `function clearOutput () {}`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearOutput === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md deleted file mode 100644 index e6a2d2c6337..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd9 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -We need to remove the contents inside of element with the `id` of `output`. - -In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md deleted file mode 100644 index f8984120835..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dda -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. - -Remove the `bordered-class` class. For example: - -```js -document.getElementById('my-div').classList.remove('my-class') -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md deleted file mode 100644 index 93a258c395b..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddb -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. - -In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/clearOutput\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md deleted file mode 100644 index 6a07e9aa83b..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddc -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearForm === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md deleted file mode 100644 index 88284a00280..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddd -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. - -Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. - -This is similar to how you declared the `total` variable previously in the `calculate` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md deleted file mode 100644 index 9cc201d5194..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dde -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. - -Add `foodInputs.forEach()`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md deleted file mode 100644 index 8044dac1e60..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddf -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -We need to provide a callback function in the parentheses of `forEach()`. - -This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. - -In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md deleted file mode 100644 index dd34b193b4c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de0 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. - -Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. - -This is similar to how you declared the `foodInputs` variable previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md deleted file mode 100644 index 652c8f99281..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de1 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md deleted file mode 100644 index b3cf00545fa..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de2 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. - -Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md deleted file mode 100644 index ead4dfe0e77..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de3 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Congratulations! Have fun playing with your completed calorie counter. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                          -
                                          -

                                          Calorie Counter

                                          -
                                          - Sex -
                                          - - - -
                                          - - -
                                          -
                                          -
                                          -
                                          - Breakfast -
                                          - Lunch -
                                          - Dinner -
                                          - - - -
                                          -
                                          -
                                          - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md deleted file mode 100644 index 08bc2a4aa43..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 5d79253297c0ebb149ea9fed -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -In functional programming, we prefer immutable values over mutable values. - -Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. - -Start by creating an empty `infixToFunction` object using `const`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md deleted file mode 100644 index 3159f1d2410..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 5d7925323be8848dbc58a07a -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md deleted file mode 100644 index c5dbbab705c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792532f631702ae6d23e11 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now return the sum of `x` and `y` using the `return` keyword. - -# --hints-- - -See description above for instructions. - -```js -assert(add(1, 2) === 3 && add(100, 2000) === 2100); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md deleted file mode 100644 index 0a9d327d798..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5d7925329445167ecc2ac9c9 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. - -Assign `add` to a new variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md deleted file mode 100644 index 4e85d64fbe2..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792532b07918c3a5904913 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: - -```js -function(x) { - return x -} -``` - -First, remove the `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md deleted file mode 100644 index a9aa387addd..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792533cc8b18b6c133edc7 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: - -```js -const fn = function(x) { - return x; -} - -fn(); -``` - -Assign the anonymous function to the variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md deleted file mode 100644 index 68c44b16619..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 5d7925337954ed57a565a135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. - -Rewrite `addVar` using ES6's arrow syntax: - -```js -const fn = (x, y) => x; -``` - -Note that the value is returned implicitly. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md deleted file mode 100644 index 676f6c6f4ff..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d79253352e33dd59ec2f6de -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Add the key `+` to `infixToFunction` and assign it the value `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(infixToFunction['+'].toString() === addVar.toString()); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md deleted file mode 100644 index c44846417a5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792533d31e4f7fad33011d -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md deleted file mode 100644 index 2096072d738..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d792533e7707b9645d7b540 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Remove the now redundant `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof addVar === 'undefined'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md deleted file mode 100644 index 526e706eb08..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 5d79253378595ec568f70ab6 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Add similar definitions for `-`, `*` and `/` in `infixToFunction`. - -# --hints-- - -See description above for instructions. - -```js -assert( - infixToFunction['-'](10, 2) === 8 && - infixToFunction['*'](10, 10) === 100 && - infixToFunction['/'](100, 10) === 10 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md deleted file mode 100644 index 37432637ac6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5d7925330918ae4a2f282e7e -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md deleted file mode 100644 index 3d09b3967f2..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5d792533ed00e75d129e1b18 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). - -Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. - -This is how you would pass the `-` function: - -```js -str.replace(regex, infixToFunction["-"]) -``` - -# --hints-- - -See description above for instructions. - -```js -assert(infixEval('ab', /(a)b/) === 'aba'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md deleted file mode 100644 index 0926459ef14..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5d792533a5c42fb4d1a4b70d -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md deleted file mode 100644 index 23968d2e070..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5d79253358e8f646cbeb2bb0 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Change the `"+"` in the call to `infixToFunction` to `fn`. - -`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md deleted file mode 100644 index f3dd1211e6a..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5d792533bb38fab70b27f527 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". - -Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). - -# --hints-- - -See description above for instructions. - -```js -const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; -assert( - infixEval('23+35', regex) === '58' && - infixEval('100-20', regex) === '80' && - infixEval('10*10', regex) === '100' && - infixEval('120/6', regex) === '20' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md deleted file mode 100644 index e295114e777..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5d79253386060ed9eb04a070 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. - -To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. - -Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md deleted file mode 100644 index 1af15a10b8e..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d792533717672657b81aa69 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -When defining an arrow function with a single argument, the parentheses can be omitted: - -```js -const greeting = name => `Hello !`; -``` - -Define a function `highPrecedence` which takes a single argument `str` and returns it. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('a') === 'a'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md deleted file mode 100644 index 5c2d8560932..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5d7925335ab63018dcec11fe -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Arrow functions can have multiple statements: - -```js -const fn = (x, y) => { - const result = x + y; - return result; // explicit return statement required -}; -``` - -Use this syntax for the `highPrecedence` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md deleted file mode 100644 index 1ddd40ce5d8..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5d7925330f300c342315066d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md deleted file mode 100644 index 3bfba3454a9..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5d792533aa6443215c9b16bf -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md deleted file mode 100644 index 333b8bcb122..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925334c5e22586dd72962 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -The ternary operator has the following syntax: - -```js -const result = condition ? valueIfTrue : valueIfFalse; -const result = 1 === 1 ? 1 : 0; // 1 -const result = 9 > 10 ? "Yes" : "No"; // "No" -``` - -Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2') === '' && - highPrecedence('2+2') === '2+2' && - code.includes('?') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md deleted file mode 100644 index c5f666b8a05..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5d79253307ecd49e030bdcd1 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. - -Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2*2') === '8' && - highPrecedence('2*2') === '4' && - highPrecedence('2+2') === '2+2' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md deleted file mode 100644 index c837d8e94e1..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5d792534257122211d3043af -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. - -# --hints-- - -See description above for instructions. - -```js -assert(spreadsheetFunctions['']('x') === 'x'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md deleted file mode 100644 index 58109dce7a4..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925346f4f2da6df4354a6 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md deleted file mode 100644 index 313db4427d6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5d792534cac2dbe0a719ea7a -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Set `noHigh` to `highPrecedence(str)` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md deleted file mode 100644 index bc94c78c155..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d792534857332d07ccba3ad -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md deleted file mode 100644 index 7972802a8b8..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5d792534d586ef495ea9df90 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Set `str2` to `infixEval(noHigh, infix)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md deleted file mode 100644 index f957c47d628..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5d79253410532e13d13fe574 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - applyFn - .toString() - .replace(/\s/g, '') - .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md deleted file mode 100644 index 42b80301fc6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d7925342415527083bd6667 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: - -```js -"a b c".split(" "); // ["a", "b", "c"]; -``` - -Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md deleted file mode 100644 index 33e85a097cc..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d792534c3d26890ac1484d4 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: - -```js -[1, 2, 3].map(x => x + 1); // [2, 3, 4] -``` - -In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md deleted file mode 100644 index abb91060f5e..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d792534b92f3d1cd4410ce3 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md deleted file mode 100644 index bb2f8da03a5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 5d7925341193948dfe6d76b4 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md deleted file mode 100644 index f32c582d3ef..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d792534cf81365cfca58794 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md deleted file mode 100644 index a460b595da1..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d7925348ee084278ff15556 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. - -Now return `str2.replace(regex, "")` at the end of `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md deleted file mode 100644 index 45e848ecbeb..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d7925348a6a41c32f7a4e3e -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md deleted file mode 100644 index 7394c7c6472..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d792534408c5be896b0a46e -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. - -Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md deleted file mode 100644 index c86fe809104..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 5d792534f0eda837510e9192 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md deleted file mode 100644 index bfa91d4503f..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d7925346b911fce161febaf -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md deleted file mode 100644 index 24d94216931..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d79253483eada4dd69258eb -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -`range` should set `arr` to `[start]` and should then return `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constarr=[start]') && - JSON.stringify(range(1)) === '[1]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md deleted file mode 100644 index 4307ef2889a..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d7925342b2b993ef18cd45f -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md deleted file mode 100644 index 0fa8e6fe0fb..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5d7925341747ad42b12f8e68 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. - -The `concat` method returns a new array instead of modifying an existing one: - -```js -[1,2,3].concat(4); // [1, 2, 3, 4] -[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] -``` - -Use `concat` instead of `push` to return the result of adding `end` to `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(1, 2)) === '[1,2]' && - code.includes('concat') && - !code.includes('push') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md deleted file mode 100644 index 448578598f5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: 5d792535b0b3c198ee3ed6f9 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -The `concat` method can also accept arrays: - -```js -[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] -[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] -``` - -Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md deleted file mode 100644 index 6e89d44a236..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d7925357a0533eb221b005d -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('arr') && - code.replace(/\s/g, '').includes('[start].concat([end])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md deleted file mode 100644 index 0d876da26b6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d792535591db67ee15b4106 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(3, 2)) === '[]' && - JSON.stringify(range(1, 3)) === '[1,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md deleted file mode 100644 index ee94e71d4a4..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d792535f1f7adf77de5831d -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md deleted file mode 100644 index 497b63c634b..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925353d2c505eafd50cd9 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Remove the curly braces and `return` keyword from `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md deleted file mode 100644 index 862a0002f2f..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d79253539b5e944ba3e314c -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md deleted file mode 100644 index 9845839bbeb..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535a4f1cbff7a8b9a0b -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Make `charRange` return `range(start, end)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md deleted file mode 100644 index 43167394a7b..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535e3304f15a8890162 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md deleted file mode 100644 index f5bb024255e..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 5d792535a40ea5ac549d6804 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md deleted file mode 100644 index 8369854b752..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925358c220e5b2998909e -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Now, pass `x` to `String.fromCharCode` in the arrow function. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md deleted file mode 100644 index 6253e20d545..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5d7925357729e183a49498aa -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md deleted file mode 100644 index 03ceaf96068..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253555aa652afbb68086 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md deleted file mode 100644 index 27b4b66f7f2..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253582be306d339564f6 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md deleted file mode 100644 index 72223dddb2c..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d7925352047e5c54882c436 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md deleted file mode 100644 index 1870ab8b951..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 5d79253568e441c0adf9db9f -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md deleted file mode 100644 index b394d603ed4..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925356ab117923b80c9cd -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md deleted file mode 100644 index e79d2b6f857..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d792535e54a8cd729a0d708 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md deleted file mode 100644 index 3d6a5a955b7..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -id: 5d7925353b307724a462b06b -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Finally, return `fn("A")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md deleted file mode 100644 index 994e931f57f..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d792536735f71d746ee5d99 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. - -Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md deleted file mode 100644 index b06f86f5495..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d792536ad340d9dff2e4a96 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Now, remove the curly braces and return statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md deleted file mode 100644 index d1492aa5cbf..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925369614afd92d01fed5 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md deleted file mode 100644 index 8d17549a291..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d792536504e68254fe02236 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. - -Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md deleted file mode 100644 index 1c388711e2f..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536c8d2f0fdfad768fe -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -You can add more arguments by simply adding another arrow with another argument name: - -```js -const manyArguments = a => b => c => d => [a, b, c, d] -``` - -Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md deleted file mode 100644 index 45e6af501cc..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d79253639028b8ec56afcda -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md deleted file mode 100644 index 19bbc068cd3..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d792536834f2fd93e84944f -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -You call curried functions like this: - -```js -const result = add(1)(2); -``` - -Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md deleted file mode 100644 index e220cf656e5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536ddff9ea73c90a994 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. - -Change `x => elemValue(n)(x)` to `elemValue(n)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md deleted file mode 100644 index eaff17e3511..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d7925361596f84067904f7f -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('const fn') && - code.includes('varRangeExpanded') && - evalFormula('A1:J133') === '3' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md deleted file mode 100644 index 03ec1f65ba2..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dd8a4daf255488ac -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md deleted file mode 100644 index b1139d99d92..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536449c73004f265fb1 -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md deleted file mode 100644 index a481e918c67..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d79253685fc69b8fe60a0d2 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. - -This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md deleted file mode 100644 index 64e48966f02..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dc6e3ab29525de9e -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md deleted file mode 100644 index 57da365160d..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536cfd0fd893c630abb -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.includes('varRegex') && - code.includes('varExpanded') && - evalFormula('aC12bc') === 'abc' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md deleted file mode 100644 index 2dc9ec5c8ab..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 5d7925366a5ff428fb483b40 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md deleted file mode 100644 index 0516f1f77e6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5d7925365d4035eeb2e395fd -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md deleted file mode 100644 index a1022f45c6a..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 5d7925364c106e9aaf05a16f -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. - -Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(evalFormula('(2+2)*2') === '8'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md deleted file mode 100644 index 5617221e798..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: 5d792536970cd8e819cc8a96 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -You can define arrow functions without arguments: - -```js -const two = () => 2; -``` - -Define an empty arrow function without arguments and assign it to `window.onload`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('window.onload=()=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md deleted file mode 100644 index 06b401c7e8e..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5d792536e33baeaa60129e0a -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md deleted file mode 100644 index 59443f50dc9..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 5d7925379e2a488f333e2d43 -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Now define a function `createLabel` which takes an argument `name` and has an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md deleted file mode 100644 index 3a3a6f126c8..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5d7925379000785f6d8d9af3 -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Inside `createLabel`, assign `document.createElement("div")` to `label`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md deleted file mode 100644 index a9a1dcc5726..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 5d79253791391b0acddd0ac5 -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Add the following code to `createLabel`: - -```js -label.className = "label"; -label.textContent = name; -container.appendChild(label); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md deleted file mode 100644 index 780a9dab7fe..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373104ae5ae83f20a5 -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -The `forEach` method takes a function and calls it with each element of the array. - -Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md deleted file mode 100644 index ccfac003142..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373b7127cfaeb50c26 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). - -# --hints-- - -See description above for instructions. - -```js -assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md deleted file mode 100644 index 5216d89d1d9..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d792537cb3a5cd6baca5e1a -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md deleted file mode 100644 index 544000db907..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 5d79253742f3313d55db981f -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md deleted file mode 100644 index bf8bee8395a..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 5d7925379e0180a438ce7f95 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md deleted file mode 100644 index d57aa617713..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d792537c80984dfa5501b96 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Inside `letters.forEach`, assign `document.createElement("input")` to `input`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md deleted file mode 100644 index 4568ec50b24..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925377b54d8a76efb5657 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Add the following code to `letters.forEach`: - -```js -input.type = "text"; -input.id = y + x; -input.onchange = update; -container.appendChild(input); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md deleted file mode 100644 index 6543d3124fb..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925371398513549bb6395 -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md deleted file mode 100644 index 378c01975ac..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d792537ea3eaf302bf2d359 -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md deleted file mode 100644 index 93968d4e378..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 5d792537533b1c7843bfd029 -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -The `includes` method works on a string and checks if the argument is its substring. - -Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md deleted file mode 100644 index dcc989ea328..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537dc0fe84345d4f19e -title: Step 93 -challengeType: 0 -dashedName: step-93 ---- - -# --description-- - -Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md deleted file mode 100644 index ce97294c369..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537b6cadae0f4b0cda1 -title: Step 94 -challengeType: 0 -dashedName: step-94 ---- - -# --description-- - -The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. - -Use the `slice` method to log the first two letters of `value` to the console. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md deleted file mode 100644 index 1eaf868ad16..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 5d79253770083fb730c93a93 -title: Step 95 -challengeType: 0 -dashedName: step-95 ---- - -# --description-- - -You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. - -Change the call to `slice` to log all characters except the first instead. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md deleted file mode 100644 index cd6f2405a86..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d792537fef76b226b63b93b -title: Step 96 -challengeType: 0 -dashedName: step-96 ---- - -# --description-- - -Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md deleted file mode 100644 index fb91f29be96..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d79253760fca25ccbbd8990 -title: Step 97 -challengeType: 0 -dashedName: step-97 ---- - -# --description-- - -The array destructuring syntax can be used to extract values from arrays: - -```js -const [x, y] = [1, 2]; // in variables -const fn = ([x, y]) => x + y // in functions -``` - -Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && - spreadsheetFunctions['random']([1, 2]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md deleted file mode 100644 index c933b24aaac..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d7925374321824cba309875 -title: Step 98 -challengeType: 0 -dashedName: step-98 ---- - -# --description-- - -Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( - code.replace(/\s/g, '') - ) && spreadsheetFunctions['random']([1, 1]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md deleted file mode 100644 index 2a5ee766e3d..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md +++ /dev/null @@ -1,276 +0,0 @@ ---- -id: 5d7925381e8565a5c50ba7f1 -title: Step 99 -challengeType: 0 -dashedName: step-99 ---- - -# --description-- - -In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. - -You can check if this is the case by comparing a call to a function with another call (with the same arguments): - -```js -console.log(f(2) === f(2)); // always true for pure functions -``` - -Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md deleted file mode 100644 index 2f419cf2876..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925383f1b77db7f1ff59e -title: Step 100 -challengeType: 0 -dashedName: step-100 ---- - -# --description-- - -This is (probably) false, so `random` is certainly impure. - -The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. - -Call `window.onload()` in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md deleted file mode 100644 index 176257a88b5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d792538de9fa3f298bcd5f6 -title: Step 101 -challengeType: 0 -dashedName: step-101 ---- - -# --description-- - -Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md deleted file mode 100644 index ad427105522..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -id: 5d7925385b74f69642e1fea5 -title: Step 102 -challengeType: 0 -dashedName: step-102 ---- - -# --description-- - -Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. - -Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md deleted file mode 100644 index 231159b2b34..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d7925380ea76d55b2c97d7b -title: Step 103 -challengeType: 0 -dashedName: step-103 ---- - -# --description-- - -This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. - -Remove the `console.log` statement. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.includes('console.log')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md deleted file mode 100644 index 36fd2f83b90..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d792538be4fe331f1a6c008 -title: Step 104 -challengeType: 0 -dashedName: step-104 ---- - -# --description-- - -Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. - -But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. - -Change these calls to `""` - the function is now pure but doesn't work. - -# --hints-- - -See description above for instructions. - -```js -const nos = code.replace(/\s/g, ''); -assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md deleted file mode 100644 index 4b9e711aae6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 5d792538d169f33142175b95 -title: Step 105 -challengeType: 0 -dashedName: step-105 ---- - -# --description-- - -To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. - -Add an argument `cells` to `evalFormula`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md deleted file mode 100644 index 39584a049ae..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538e48b5a2c6e5bbe12 -title: Step 106 -challengeType: 0 -dashedName: step-106 ---- - -# --description-- - -When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md deleted file mode 100644 index 1ab52bf8124..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d7925387f3e9da5ec856dbe -title: Step 107 -challengeType: 0 -dashedName: step-107 ---- - -# --description-- - -Update the recursive call to `evalFormula` by passing in `cells` as the second argument. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md deleted file mode 100644 index 11e0b2d0bbc..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253824ae9b4a6e6f3108 -title: Step 108 -challengeType: 0 -dashedName: step-108 ---- - -# --description-- - -Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. - -# --hints-- - -See description above for instructions. - -```js -assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md deleted file mode 100644 index d4c961be237..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 5d7925383f122a279f4c54ad -title: Step 109 -challengeType: 0 -dashedName: step-109 ---- - -# --description-- - -The `find` method returns the first element of an array that satisfies the function passed to it. - -Chain `find` onto `cells` and pass it `cell => cell === id`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md deleted file mode 100644 index abdc6794679..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d7925387b682e962f209269 -title: Step 110 -challengeType: 0 -dashedName: step-110 ---- - -# --description-- - -In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md deleted file mode 100644 index 4baca0e6cc3..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538de774217b173288e -title: Step 111 -challengeType: 0 -dashedName: step-111 ---- - -# --description-- - -Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md deleted file mode 100644 index a2c5b9b1bef..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253891d93585323d1f3c -title: Step 112 -challengeType: 0 -dashedName: step-112 ---- - -# --description-- - -Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md deleted file mode 100644 index 637af181723..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925384e34e944ecb4612d -title: Step 113 -challengeType: 0 -dashedName: step-113 ---- - -# --description-- - -Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md deleted file mode 100644 index d12140aa462..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d792538631844ad0bdfb4c3 -title: Step 114 -challengeType: 0 -dashedName: step-114 ---- - -# --description-- - -`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. - -Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md deleted file mode 100644 index c966a9161ed..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -id: 5d792538e2a8d20cc580d481 -title: Step 115 -challengeType: 0 -dashedName: step-115 ---- - -# --description-- - -The `slice` method can also work on arrays. - -Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md deleted file mode 100644 index 5483ee8a3e9..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 5d792538f5004390d6678554 -title: Step 116 -challengeType: 0 -dashedName: step-116 ---- - -# --description-- - -You can also pass in a negative argument to `slice` to specify that index from the end: - -```js -[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] -``` - -Use a negative index to add a function `lasttwo` which returns the last two elements of an array. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md deleted file mode 100644 index 3e61d996f85..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 5d792539dd4fd4c96fd85f7e -title: Step 117 -challengeType: 0 -dashedName: step-117 ---- - -# --description-- - -The `%` operator returns the remainder: - -```js -4 % 3; // 1 -5 % 3; // 2 -6 % 3; // 0 -``` - -Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. - -# --hints-- - -See description above for instructions. - -```js -assert(isEven(20) && !isEven(31)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md deleted file mode 100644 index 8c4b6a9e314..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md +++ /dev/null @@ -1,292 +0,0 @@ ---- -id: 5d79253949802f8587c8bbd3 -title: Step 118 -challengeType: 0 -dashedName: step-118 ---- - -# --description-- - -The `filter` method keeps only the elements of an array that satisfy the function passed to it: - -```js -[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] -``` - -Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && - code.includes('filter') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md deleted file mode 100644 index c441a9459d8..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 5d7925395888767e9304c082 -title: Step 119 -challengeType: 0 -dashedName: step-119 ---- - -# --description-- - -The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. - -The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. - -For example, here's how to multiply all the value in an array: - -```js -[2, 3, 4].reduce((a, x) => a * x); // 24 -``` - -Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md deleted file mode 100644 index 787472aea1d..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 5d7925393b30099e37a34668 -title: Step 120 -challengeType: 0 -dashedName: step-120 ---- - -# --description-- - -The `includes` method checks if an element is in an array. - -Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md deleted file mode 100644 index f032db3ac16..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 5d7925398157757b23730fdd -title: Step 121 -challengeType: 0 -dashedName: step-121 ---- - -# --description-- - -The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: - -```js -[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] -// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array -// now it first tries [].concat(1) which works -``` - -Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md deleted file mode 100644 index 6b5714247b5..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d792539de4b9ac14dd40409 -title: Step 122 -challengeType: 0 -dashedName: step-122 ---- - -# --description-- - -Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === - '[1,3,5,7,9]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md deleted file mode 100644 index 8f15f9adfd4..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539534f1bf991bb987f -title: Step 123 -challengeType: 0 -dashedName: step-123 ---- - -# --description-- - -ES6 introduced a shorthand object literal syntax: - -```js -const a = 10; -const myObject = { a }; -console.log(myObject); // { a: 10 } -``` - -First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. - -# --hints-- - -See description above for instructions. - -```js -assert(sum([1, 2, 3]) === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md deleted file mode 100644 index eef96f2d471..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d7925394089b762f93ffa52 -title: Step 124 -challengeType: 0 -dashedName: step-124 ---- - -# --description-- - -Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. - -This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. - -# --hints-- - -See description above for instructions. - -```js -assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md deleted file mode 100644 index cb3b30d8c4f..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539ec758d45a6900173 -title: Step 125 -challengeType: 0 -dashedName: step-125 ---- - -# --description-- - -The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. - -As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md deleted file mode 100644 index 621e4cc4fbc..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md +++ /dev/null @@ -1,308 +0,0 @@ ---- -id: 5d7925398d525f61a9ff3a79 -title: Step 126 -challengeType: 0 -dashedName: step-126 ---- - -# --description-- - -The spread operator allow you to pass multiple arguments instead of an array: - -```js -const arr = [1, 2, 3]; -const sum3 = (a, b, c) => a + b + c; -sum3(...arr); // 6 -``` - -Use the spread operator to add `range` to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && - code.includes('...') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md deleted file mode 100644 index 8d27ee2bf76..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 5d792539a222f385c5c17d2b -title: Step 127 -challengeType: 0 -dashedName: step-127 ---- - -# --description-- - -Now define a `median` function which takes an argument `nums` (in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md deleted file mode 100644 index 08ffbd94e4a..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d7925398a7184b41b12a0e0 -title: Step 128 -challengeType: 0 -dashedName: step-128 ---- - -# --description-- - -The `sort` method sorts an array alphabetically: - -```js -["B", "C", "A"].sort(); // ["A", "B", "C"] -``` - -Assign the sorted `nums` to `sorted` in `median`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md deleted file mode 100644 index 49b025f4b1e..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d7925399afb905c34730a75 -title: Step 129 -challengeType: 0 -dashedName: step-129 ---- - -# --description-- - -But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: - -```js -[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] -``` - -If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. - -Use `sort` to sort `nums` in ascending order. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md deleted file mode 100644 index cad2f5aa466..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d792539728d1aa7788e2c9b -title: Step 130 -challengeType: 0 -dashedName: step-130 ---- - -# --description-- - -Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. - -You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md deleted file mode 100644 index df39b579f78..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d79253939434a2724c0ec41 -title: Step 131 -challengeType: 0 -dashedName: step-131 ---- - -# --description-- - -Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md deleted file mode 100644 index 1e4f1aca372..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 5d792539b9e1d3c54d8fe94a -title: Step 132 -challengeType: 0 -dashedName: step-132 ---- - -# --description-- - -Add a return statement to `median` so that it returns `isEven(length)`. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md deleted file mode 100644 index 4cf66a6dd6a..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5d792539b2e0bd8f9e8213e4 -title: Step 133 -challengeType: 0 -dashedName: step-133 ---- - -# --description-- - -Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. - -Note that the `middle` variable is close to the middle but is not actually the middle. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md deleted file mode 100644 index 2428ff3a79d..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 5d792539239148965a1a59a5 -title: Step 134 -challengeType: 0 -dashedName: step-134 ---- - -# --description-- - -Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.median([1, 20, 3]) === 3 && - spreadsheetFunctions.median([27, 7, 20, 10]) === 15 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md deleted file mode 100644 index ff91ae909fd..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d792539e1446045d0df6d28 -title: Step 135 -challengeType: 0 -dashedName: step-135 ---- - -# --description-- - -The `some` method checks if any element of the array satisfies the provided testing function. - -Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.someeven([1, 5, 4, 3]) && - !spreadsheetFunctions.someeven([3, 5, 9]) && - code.includes('.some') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md deleted file mode 100644 index ddede0016d6..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a2febbb77098730b9 -title: Step 136 -challengeType: 0 -dashedName: step-136 ---- - -# --description-- - -The `every` method checks if all elements of an array satisfy the provided testing function. - -Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && - !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && - code.includes('.every') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md deleted file mode 100644 index c475cf8ba22..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d79253a98bd9fdf7ce68d0a -title: Step 137 -challengeType: 0 -dashedName: step-137 ---- - -# --description-- - -We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. - -While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. - -Replace the body of `range` with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md deleted file mode 100644 index 52e294c3655..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 5d79253a1e9abf29de64c177 -title: Step 138 -challengeType: 0 -dashedName: step-138 ---- - -# --description-- - -The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. - -Make `range` return an array of `undefined` with size `end - start + 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md deleted file mode 100644 index ce1e1c87c73..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a8b29d78984369e4b -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -The `fill` method takes an argument and replaces all elements of the array with that argument. - -Use it on the array in `range` to replace everything with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md deleted file mode 100644 index 9630c3210b7..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 5d79253ad297a31cbe073718 -title: Step 140 -challengeType: 0 -dashedName: step-140 ---- - -# --description-- - -The function in the `map` method can actually take a second argument: the index of the element. - -This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). - -Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md deleted file mode 100644 index 7531f12a5a3..00000000000 --- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5dc10b8b93704f41d279eb5b -title: Step 141 -challengeType: 0 -dashedName: step-141 ---- - -# --description-- - -Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                          -
                                          -
                                          -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md new file mode 100644 index 00000000000..d522cf2c5ab --- /dev/null +++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md @@ -0,0 +1,388 @@ +--- +id: 659ebe52d74b132a1d75c891 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug. + +The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function. +# --hints-- + +You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`. + +```js +assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn localStorage by Building a Todo App + + + + +
                                          +

                                          Todo App

                                          +
                                          + + + +
                                          +

                                          Discard unsaved changes?

                                          +
                                          + + +
                                          +
                                          +                                           +
                                          +
                                          +
                                          + + + + +``` + +```css +:root { + --white: #fff; + --light-grey: #f5f6f7; + --dark-grey: #0a0a23; + --yellow: #f1be32; + --golden-yellow: #feac32; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--dark-grey); +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + color: var(--light-grey); + margin: 20px 0 40px 0; +} + +.todo-app { + background-color: var(--white); + width: 300px; + height: 350px; + border: 5px solid var(--yellow); + border-radius: 8px; + padding: 15px; + position: relative; + display: flex; + flex-direction: column; + gap: 10px; +} + +.btn { + cursor: pointer; + width: 100px; + margin: 10px; + color: var(--dark-grey); + background-color: var(--golden-yellow); + background-image: linear-gradient(#fecc4c, #ffac33); + border-color: var(--golden-yellow); + border-width: 3px; +} + +.btn:hover { + background-image: linear-gradient(#ffcc4c, #f89808); +} + +.large-btn { + width: 80%; + font-size: 1.2rem; + align-self: center; + justify-self: center; +} + +.close-task-form-btn { + background: none; + border: none; + cursor: pointer; +} + +.close-icon { + width: 20px; + height: 20px; +} + +.task-form { + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--white); + border-radius: 5px; + padding: 15px; + width: 300px; + height: 350px; + flex-direction: column; + justify-content: space-between; + overflow: auto; +} + +.task-form-header { + display: flex; + justify-content: flex-end; +} + +.task-form-body { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.task-form-footer { + display: flex; + justify-content: center; +} + +.task-form-label, +#title-input, +#date-input, +#description-input { + display: block; +} + +.task-form-label { + margin-bottom: 5px; + font-size: 1.3rem; + font-weight: bold; +} + +#title-input, +#date-input, +#description-input { + width: 100%; + margin-bottom: 10px; + padding: 2px; +} + +#confirm-close-dialog { + padding: 10px; + margin: 10px auto; + border-radius: 15px; +} + +.confirm-close-dialog-btn-container { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.discard-message-text { + font-weight: bold; + font-size: 1.5rem; +} + +#tasks-container { + height: 100%; + overflow-y: auto; +} + +.task { + margin: 5px 0; +} + +.hidden { + display: none; +} + +@media (min-width: 576px) { + .todo-app, + .task-form { + width: 400px; + height: 450px; + } + + .task-form-label { + font-size: 1.5rem; + } + + #title-input, + #date-input { + height: 2rem; + } + + #title-input, + #date-input, + #description-input { + padding: 5px; + margin-bottom: 20px; + } +} +``` + +```js +const taskForm = document.getElementById("task-form"); +const confirmCloseDialog = document.getElementById("confirm-close-dialog"); +const openTaskFormBtn = document.getElementById("open-task-form-btn"); +const closeTaskFormBtn = document.getElementById("close-task-form-btn"); +const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); +const cancelBtn = document.getElementById("cancel-btn"); +const discardBtn = document.getElementById("discard-btn"); +const tasksContainer = document.getElementById("tasks-container"); +const titleInput = document.getElementById("title-input"); +const dateInput = document.getElementById("date-input"); +const descriptionInput = document.getElementById("description-input"); + +const taskData = []; +let currentTask = {}; + +const addOrUpdateTask = () => { + --fcc-editable-region-- + + --fcc-editable-region-- + const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); + const taskObj = { + id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, + title: titleInput.value, + date: dateInput.value, + description: descriptionInput.value, + }; + + if (dataArrIndex === -1) { + taskData.unshift(taskObj); + } else { + taskData[dataArrIndex] = taskObj; + } + + updateTaskContainer() + reset() +}; + +const updateTaskContainer = () => { + tasksContainer.innerHTML = ""; + + taskData.forEach( + ({ id, title, date, description }) => { + (tasksContainer.innerHTML += ` +
                                          +

                                          Title: ${title}

                                          +

                                          Date: ${date}

                                          +

                                          Description: ${description}

                                          + + +
                                          + `) + } + ); +}; + + +const deleteTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + buttonEl.parentElement.remove(); + taskData.splice(dataArrIndex, 1); +} + +const editTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + currentTask = taskData[dataArrIndex]; + + titleInput.value = currentTask.title; + dateInput.value = currentTask.date; + descriptionInput.value = currentTask.description; + + addOrUpdateTaskBtn.innerText = "Update Task"; + + taskForm.classList.toggle("hidden"); +} + +const reset = () => { + titleInput.value = ""; + dateInput.value = ""; + descriptionInput.value = ""; + taskForm.classList.toggle("hidden"); + currentTask = {}; +} + +openTaskFormBtn.addEventListener("click", () => + taskForm.classList.toggle("hidden") +); + +closeTaskFormBtn.addEventListener("click", () => { + const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; + if (formInputsContainValues) { + confirmCloseDialog.showModal(); + } else { + reset(); + } +}); + +cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); + +discardBtn.addEventListener("click", () => { + confirmCloseDialog.close(); + reset() +}); + +taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + addOrUpdateTask(); +}); +``` diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md deleted file mode 100644 index f4b05b12871..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e0e72c65bc8e73dfe1e -videoId: LGQuIIv2RVA -title: Elements and Tags Question A -challengeType: 15 -dashedName: elements-and-tags-question-a ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `

                                          `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                          `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                          ` or ``, but some can also be used without the closing forward slash such as `
                                          ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) - -## --text-- - -What are HTML tags? - -## --answers-- - -HTML tags tell the browser what content an element contains. - ---- - -HTML tags tell the browser when to load its content. - ---- - -HTML tags tell the browser what content the next element contains. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md deleted file mode 100644 index 51bf43a7014..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 637f4e1672c65bc8e73dfe1f -title: Elements and Tags Question B -challengeType: 15 -dashedName: elements-and-tags-question-b ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `

                                          `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                          `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                          ` or ``, but some can also be used without the closing forward slash such as `
                                          ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --text-- - -What are the three parts of most HTML elements? - -## --answers-- - -An opening tag, self closing tag, and content. - ---- - -An opening tag, closing tag, and content. - ---- - -An opening tag, closing tag, and attribute. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md deleted file mode 100644 index ab85844e81b..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e1c72c65bc8e73dfe20 -title: HTML Boilerplate Question A -challengeType: 15 -dashedName: html-boilerplate-question-a ---- - -# --description-- - -To demonstrate an HTML boilerplate, you first need an HTML file to work with. - -Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. - -You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. - -To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. - -It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. - -## The DOCTYPE - -Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. - -The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: - -```html - -``` - -However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. - -Open the `index.html` file created earlier in your text editor and add `` to the very first line. - -# --question-- -## --text-- - -What is the purpose of the `DOCTYPE` declaration? - -## --answers-- - -It tells the browser which version of HTML to use to render the document. - ---- - -It tells the browser that this document uses JavaScript. - ---- - -It tells the browser the title of the document. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md deleted file mode 100644 index ffd10a4b5ac..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 637f4e2872c65bc8e73dfe21 -title: HTML Boilerplate Question B -challengeType: 15 -dashedName: html-boilerplate-question-b ---- - -# --description-- - -After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. - -This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. - -Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: - -```html - - - -``` - -## What is the lang attribute? -`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. - -# --question-- - -## --text-- - -What is the `html` element? - -## --answers-- - -It is the root element in the document and tells the browser which version of HTML it should use. - ---- - -It is the root element in the document and all other elements should descend from it. - ---- - -It is the root element in the document and all other elements should come after it. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md deleted file mode 100644 index e4ddaa12c4b..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e2f72c65bc8e73dfe22 -title: HTML Boilerplate Question C -challengeType: 15 -dashedName: html-boilerplate-question-c ---- - -# --description-- - -The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. - -## The Charset Meta Element -You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. - -Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. - -## Title Element -Another element you should always include in the head of an HTML document is the `title` element: - -```html -My First Webpage -``` - -The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. - -If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. - -There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. - -Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: - - -```html - - - - - - My First Webpage - - -``` - -# --question-- - -## --text-- - -What is the purpose of the `head` element? - -## --answers-- - -The `head` element is used to display all elements that are displayed on the webpage. - ---- - -The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. - ---- - -The `head` element is used to display the header content on top of the webpage. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md deleted file mode 100644 index 302b6a95d44..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e3672c65bc8e73dfe23 -videoId: V8UAEoOvqFg -title: HTML Boilerplate Question D -challengeType: 15 -dashedName: html-boilerplate-question-d ---- - -# --description-- - -The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. - -To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. - ---- - -Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. - ---- - -Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. - -## --text-- - -What is the purpose of the `body` element? - -## --answers-- - -This is where all important information about the webpage is displayed such as the `title` and `meta` tags. - ---- - -This is where you tell the browser how to render the webpage correctly. - ---- - -This is where all content will be displayed on the page such images, text, and links. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md deleted file mode 100644 index 6c1bfb0a976..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 6374f208de18c50e48ba767b -title: Introduction To HTML and CSS Question A -challengeType: 15 -dashedName: introduction-to-html-and-css-question-a ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --assignment-- - -Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. - -## --text-- - -Which of the following statements is true? - -## --answers-- - -CSS is used to create the basic structure of a webpage, and HTML is used to add style. - ---- - -HTML is used to create the basic structure of a webpage, and CSS is used to add style. - ---- - -HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. - - -## --video-solution-- - -2 - - diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md deleted file mode 100644 index 87aff63d4ec..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 6376327e2724a688c04636e3 -title: Introduction To HTML and CSS Question B -challengeType: 15 -dashedName: introduction-to-html-and-css-question-b ---- - -# --description-- - - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to add paragraphs of text on a webpage? - -## --answers-- - -CSS - ---- - -JavaScript - ---- - -HTML - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md deleted file mode 100644 index 2ca9f2fbacb..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 637633162724a688c04636e4 -title: Introduction To HTML and CSS Question C -challengeType: 15 -dashedName: introduction-to-html-and-css-question-c ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to change the font and background color of a button? - -## --answers-- - -You should use CSS to change the background color and font of a button. - ---- - -You should use JavaScript to change the background color and font of a button. - ---- - -You should use HTML to change the background color and font of a button. - -## --video-solution-- - -1 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md deleted file mode 100644 index 53e4c08471a..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 637633672724a688c04636e5 -title: Introduction To HTML and CSS Question D -challengeType: 15 -dashedName: introduction-to-html-and-css-question-d ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -What is the difference between HTML, CSS, and JavaScript? - -## --answers-- - -HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. - ---- - -CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. - ---- - -JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md deleted file mode 100644 index b4d237448f3..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f704072c65bc8e73dfe36 -videoId: tsEQgGjSmkM -title: Links and Images Question A -challengeType: 15 -dashedName: links-and-images-question-a ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- Finally, add the following `h1` to the `body`: `

                                          Homepage

                                          ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. - -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. - -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Links video above. - -## --text-- - -What HTML tag is used to create a link? - -## --answers-- - -`` - ---- - -`

                                          ` - ---- - -`

                                            ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md deleted file mode 100644 index a138268c406..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f703572c65bc8e73dfe35 -title: Links and Images Question B -challengeType: 15 -dashedName: links-and-images-question-b ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                            Homepage

                                            ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `                                            ` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- -## --text-- - -What is an attribute? -## --answers-- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. - ---- - -An HTML attribute is used to tell the browser what the element contains. - ---- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md deleted file mode 100644 index 8863b087456..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 637f703072c65bc8e73dfe34 -title: Links and Images Question C -challengeType: 15 -dashedName: links-and-images-question-c ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                            Homepage

                                            ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --text-- - -What attribute tells links where to go to? - -## --answers-- - -`src` - ---- - -`href` - ---- - -`link` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md deleted file mode 100644 index 37eebffbabf..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 637f702872c65bc8e73dfe33 -videoId: ta3Oxx7Yqbo -title: Links and Images Question D -challengeType: 15 -dashedName: links-and-images-question-d ---- - -# --description-- - - -Generally, there are two kinds of links you will create: - -- Links to pages on other websites on the internet - -- Links to pages located on your own websites - - -## Absolute Links -Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. - -You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. - -`https://www.theodinproject.com/about` - -## Relative Links -Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. - -Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. - -Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: - -```html - - - - - Odin Links and Images - - - -

                                            About Page

                                            - - -``` - -Back in the `index` page, add the following anchor element to create a link to the `about` page: - -```html - -

                                            Homepage

                                            - click me - - About - -``` - -Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. - -This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. - -But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. - -Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. - -Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. - -To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. - -```html - -

                                            Homepage

                                            - About - -``` - -Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. - -In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. - -```html - -

                                            Homepage

                                            - About - -``` - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML File Structure video above. - -## --text-- - -What is the difference between an absolute and a relative link? - -## --answers-- - -An absolute link is a link to another page on the current website. A relative link is a link to another website. - ---- - -An absolute link is a link to another website. A relative link is a link another page on the current website. - ---- - -There is no difference between absolute and relative links. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md deleted file mode 100644 index ae008078088..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 637f702372c65bc8e73dfe32 -videoId: 0xoztJCHpbQ -title: Links and Images Question E -challengeType: 15 -dashedName: links-and-images-question-e ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                            Homepage

                                            - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## `Alt` attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included: - - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Images Video above. - -## --text-- - -Which tag is used to display an image? - -## --answers-- - -`` - ---- - -`` - ---- - -`` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md deleted file mode 100644 index e1af2d6a659..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701c72c65bc8e73dfe31 -title: Links and Images Question F -challengeType: 15 -dashedName: links-and-images-question-f ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                            Homepage

                                            -                                             click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -What two attributes do images always need to have? - -## --answers-- - -`href` and `alt` - ---- - -`name` and `href` - ---- - -`alt` and `src` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md deleted file mode 100644 index 5bc84fa6c96..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701572c65bc8e73dfe30 -title: Links and Images Question G -challengeType: 15 -dashedName: links-and-images-question-g ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                            Homepage

                                            - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -How do you access a parent directory in a filepath? - -## --answers-- - -`../` - ---- - -`./` - ---- - -`.../` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md deleted file mode 100644 index 71157081ae7..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 637f700b72c65bc8e73dfe2f -title: Links and Images Question H -challengeType: 15 -dashedName: links-and-images-question-h ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                            Homepage

                                            - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --assignment-- - -Read about the four main image formats that can be used on the web. - -## --text-- - -What are the four main image formats that you can use for images on the web? - -## --answers-- - -TIFF, GIF, PNG, and SVG. - ---- - -JPG, PNG, GIF, and SVG. - ---- - -JPG, PDF, SVG, and GIF. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md deleted file mode 100644 index f4625eb7e31..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e3e72c65bc8e73dfe24 -videoId: kcHKFZBVtf4 -title: Understand Ordered and Unordered List Question A -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-a ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                              ` element, and each item within the list is created using the list item element `
                                            • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                ` element. Each individual item in them is again created using the list item element `
                                              1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --assignment-- - -Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. - ---- - -Make an unordered shopping list of your favorite foods. - ---- - -Make an ordered list of todo’s you need to get done today. - ---- - -Make an unordered list of places you’d like to visit someday. - ---- - -Make an ordered list of your all time top 5 favorite video games or movies. - -## --text-- - -What HTML tag is used to create an unordered list? - -## --answers-- - -`
                                              2. ` - ---- - -`
                                                  ` - ---- - -`
                                                    ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md deleted file mode 100644 index 67e79f0ccb9..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e4672c65bc8e73dfe25 -title: Understand Ordered and Unordered List Question B -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-b ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                                      ` element, and each item within the list is created using the list item element `
                                                    • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                        ` element. Each individual item in them is again created using the list item element `
                                                      1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create an ordered list? - -## --answers-- - -`
                                                          ` - ---- - -`
                                                        1. ` - ---- - -`
                                                            ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md deleted file mode 100644 index 1edd6feffbf..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e5172c65bc8e73dfe26 -title: Understand Ordered and Unordered List Question C -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-c ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                                              ` element, and each item within the list is created using the list item element `
                                                            • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                                ` element. Each individual item in them is again created using the list item element `
                                                              1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create list items within both unordered and ordered lists? - -## --answers-- - -`
                                                                  ` - ---- - -`
                                                                1. ` - ---- - -`
                                                                    ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md deleted file mode 100644 index 8698b62aca8..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 637f4e5872c65bc8e73dfe27 -videoId: yqcd-XkxZNM -title: Working With Text Question A -challengeType: 15 -dashedName: working-with-text-question-a ---- - -# --description-- - -What would you expect the following text to output on an HTML page? - -```html - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. - -``` - -It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below: - - - -When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line. - -If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `

                                                                    ` tag. - -Changing our example from before to use paragraph elements fixes the issue: - - - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. - -## --text-- - -How do you create a paragraph in HTML? - -## --answers-- - -`

                                                                    This is a paragraph

                                                                    ` - ---- - -`

                                                                    This is a paragraph

                                                                    ` - ---- - -`This is a paragraph` - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md deleted file mode 100644 index 17d3c900359..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 637f4e5f72c65bc8e73dfe28 -title: Working With Text Question B -challengeType: 15 -dashedName: working-with-text-question-b ---- - -# --description-- - -Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. - -There are 6 different levels of headings starting from `

                                                                    ` to `

                                                                    `. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. - -Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `

                                                                    ` tag. - - - -Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. - -# --question-- -## --text-- - -How many different levels of headings are there and what is the difference between them? - -## --answers-- - -There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. - ---- - -There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. - ---- - -There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md deleted file mode 100644 index 6ccf0e06658..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 637f4e6672c65bc8e73dfe29 -videoId: gW6cBZLUk6M -title: Working With Text Question C -challengeType: 15 -dashedName: working-with-text-question-c ---- - -# --description-- - -The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. - -You can use `strong` on its own: - - - -But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: - - - -Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Bold and Italic Text Video above. - -## --text-- - -What element should you use to make text bold and important? - -## --answers-- - -`This is an important message` - ---- - -`

                                                                    This is an important message

                                                                    ` - ---- - -`This is an important message` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md deleted file mode 100644 index e686b2698e0..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 637f4e6e72c65bc8e73dfe2a -title: Working With Text Question D -challengeType: 15 -dashedName: working-with-text-question-d ---- - -# --description-- - -The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. - -To use `em` on its own: - - -Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: - - - -# --question-- -## --text-- - -What element should you use to make text italicized to add emphasis? - -## --answers-- - -`This is an italic message` - ---- - -`This is an italic message` - ---- - -`This is an italic message` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md deleted file mode 100644 index a0a7ba2fda9..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e7972c65bc8e73dfe2b -title: Working With Text Question E -challengeType: 15 -dashedName: working-with-text-question-e ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the `body` element is the parent and the `p` is the child: - -```html - - - - -

                                                                    Lorem ipsum dolor sit amet.

                                                                    - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: - -```html - - - - -

                                                                    Lorem ipsum dolor sit amet.

                                                                    -

                                                                    Ut enim ad minim veniam.

                                                                    - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship do two elements have if they are at the same level of nesting? - -## --answers-- - -The elements are each other's parents. - ---- - -The elements are each other's children. - ---- - -The elements are siblings. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md deleted file mode 100644 index 7d440cfab25..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f4e8072c65bc8e73dfe2c -title: Working With Text Question F -challengeType: 15 -dashedName: working-with-text-question-f ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the body element is the parent and the paragraph is the child: - -```html - - - - -

                                                                    Lorem ipsum dolor sit amet.

                                                                    - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: - -```html - - - - -

                                                                    Lorem ipsum dolor sit amet.

                                                                    -

                                                                    Ut enim ad minim veniam.

                                                                    - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship does an element have with any nested element within it? - -## --answers-- - -The element within the other element is called the parent element. - ---- - -The element within the other element is called the child element. - ---- - -The element within the other element is called the sibling element. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md deleted file mode 100644 index 5f5d141fa46..00000000000 --- a/curriculum/challenges/japanese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e8772c65bc8e73dfe2d -title: Working With Text Question G -challengeType: 15 -dashedName: working-with-text-question-g ---- - -# --description-- - -HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. - -Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: - -```html -

                                                                    View the html to see the hidden comments

                                                                    - - - -

                                                                    Some paragraph text

                                                                    - - -``` - -# --question-- - -## --assignment-- - -To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. - -## --text-- - -How do you create HTML comments? - -## --answers-- - -`/* This is an HTML comment */` - ---- - -`` - ---- - -`<-- This is an HTML comment --!>` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-data-graph-explorer/data-graph-explorer.md b/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-data-graph-explorer/data-graph-explorer.md deleted file mode 100644 index 458aedbd74d..00000000000 --- a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-data-graph-explorer/data-graph-explorer.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: 63d8402e39c73468b059cd43 -title: "Data Graph Explorer" -challengeType: 10 -dashedName: data-graph-explorer ---- - -# --description-- - -You will be working on this project with Google Colaboratory. - -After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link." - -# --instructions-- - -For this challenge, you need to create a multi-function calculator using Python that take input and do the following: - -- Get a .csv file in three ways - - uploading it from the local computer - - getting a url from user input - - putting the url in the code -- Use the Pandas library to save the .csv as a dataframe -- Print headings and the first two rows -- Store the column names as a list -- Choose one or two columns and convert the data to Numpy arrays -- Display data as a scatter plot or a line graph -- Be able to do this for different column combinations, and interpret the graphs - -Once you're done, submit the URL to the public Colab notebook on your Google drive. - diff --git a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-financial-calculator/financial-calculator.md b/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-financial-calculator/financial-calculator.md deleted file mode 100644 index 572091e16db..00000000000 --- a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-financial-calculator/financial-calculator.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: 63d8401e39c73468b059cd42 -title: "Financial Calculator" -challengeType: 10 -dashedName: financial-calculator ---- - -# --description-- - -You will be working on this project with Google Colaboratory. - -After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link." - -# --instructions-- - -For this challenge, you need to create a multi-function calculator using Python that take input and do the following: - -- Calculate annuity with monthly or continuous growth -- Calculate monthly mortgage payment -- Estimate retirement investment balance -- Determine how long until an amount doubles, given the rate -- Solve logarithmic equations -- Convert to (and from) scientific notation - -If you are struggling, you can follow the video walkthrough for this project. - -Once you're done, submit the URL to the public Colab notebook on your Google drive. - diff --git a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-graphing-calculator/graphing-calculator.md b/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-graphing-calculator/graphing-calculator.md deleted file mode 100644 index 7d4d4f9253d..00000000000 --- a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-graphing-calculator/graphing-calculator.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: 63d83ffd39c73468b059cd40 -title: "Graphing Calculator" -challengeType: 10 -dashedName: graphing-calculator ---- - -# --description-- - -You will be working on this project with Google Colaboratory. - -After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link." - -# --instructions-- - -For this challenge, you need to create a graphing calculator using Python that can take input and do the following: - -- Graph one or more functions -- Create a table of (x,y) values -- Shade above or below the line -- Solve and graph a system of equations -- Zoom in or out on a graph -- Solve quadratic equations - -If you are struggling, you can follow the video walkthrough for this project. - -Once you're done, submit the URL to the public Colab notebook on your Google drive. - diff --git a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-multi-function-calculator/multi-function-calculator.md b/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-multi-function-calculator/multi-function-calculator.md deleted file mode 100644 index fa9924aa9d1..00000000000 --- a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-multi-function-calculator/multi-function-calculator.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: 63d83ff239c73468b059cd3f -title: "Multi-Function Calculator" -challengeType: 10 -dashedName: multi-function-calculator ---- - -# --description-- - -You will be working on this project with Google Colaboratory. - -After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link." - -# --instructions-- - -For this challenge, you need to create a multi-function calculator using Python that take input and do the following: - -- solve proportions -- solve for x in equations -- factor square roots -- convert decimals to fractions and percents -- convert fractions to decimals and percents -- convert percents to decimals and fractions - -If you are struggling, you can follow the video walkthrough for this project. - -Once you're done, submit the URL to the public Colab notebook on your Google drive. - diff --git a/curriculum/challenges/japanese/17-college-algebra-with-python/build-three-math-games/three-math-games.md b/curriculum/challenges/japanese/17-college-algebra-with-python/build-three-math-games/three-math-games.md deleted file mode 100644 index d0969651fcc..00000000000 --- a/curriculum/challenges/japanese/17-college-algebra-with-python/build-three-math-games/three-math-games.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -id: 63d8401039c73468b059cd41 -title: "Three Math Games" -challengeType: 10 -dashedName: three-math-games ---- - -# --description-- - -You will be working on this project with Google Colaboratory. - -After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link." - -# --instructions-- - -For this challenge, you need to create three math games using Python that do the following: - -- Scatter plot game - - Randomly generate points on a graph and the player has to input the (x,y) coordinates - - For added difficulty, make the graph larger -- Algebra practice game - - Generate one-step and two-step problems with random integer values and the player has to input the answer - - Use positive and negative values. For added difficulty, make the numbers larger -- Projectile game - - Display a "wall" with random height and location. Player has to move sliders to adjust a parabolic path to clear the wall - - For added difficulty, make a second level where players enter a, b, and c without sliders - -Once you're done, submit the URL to the public Colab notebook on your Google drive. - diff --git a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md deleted file mode 100644 index 5b3f6a44858..00000000000 --- a/curriculum/challenges/japanese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5900f36e1000cf542c50fe80 -title: 'Problem 1: Multiples of 3 and 5' -challengeType: 1 -forumTopicId: 301722 -dashedName: problem-1-multiples-of-3-and-5 ---- - -# --description-- - -If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. - -Find the sum of all the multiples of 3 or 5 below the provided parameter value `number`. - -# --hints-- - -`multiplesOf3and5(10)` should return a number. - -```js -assert(typeof multiplesOf3and5(10) === 'number'); -``` - -`multiplesOf3and5(49)` should return 543. - -```js -assert.strictEqual(multiplesOf3and5(49), 543); -``` - -`multiplesOf3and5(1000)` should return 233168. - -```js -assert.strictEqual(multiplesOf3and5(1000), 233168); -``` - -`multiplesOf3and5(8456)` should return 16687353. - -```js -assert.strictEqual(multiplesOf3and5(8456), 16687353); -``` - -`multiplesOf3and5(19564)` should return 89301183. - -```js -assert.strictEqual(multiplesOf3and5(19564), 89301183); -``` - -# --seed-- - -## --seed-contents-- - -```js -function multiplesOf3and5(number) { - - return true; -} - -multiplesOf3and5(1000); -``` - -# --solutions-- - -```js -const multiplesOf3and5 = (number) => { - var total = 0; - - for(var i = 0; i < number; i++) { - if(i % 3 == 0 || i % 5 == 0) { - total += i; - } - } - return total; -}; -``` diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md deleted file mode 100644 index a8abd3ff027..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 651dd5ae6ffb500e3f2ce47c -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -```js -console.log('with code'); -``` - -*** - -Making a statement based on her assumption. - -### --feedback-- - -No, that's not correct - -*** - -Expressing a possibility. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md deleted file mode 100644 index 27f5dcb5e42..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5d86ffb500e3f2ce47d -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md deleted file mode 100644 index a79f83d6f5a..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd5f41d697d0aab7833b5 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md deleted file mode 100644 index 13028d7c28a..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 651dd3e06ffb500e3f2ce478 -title: "Dialogue: Introducing" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-introducing ---- - -# --description-- - -What the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md deleted file mode 100644 index 3d67f522c07..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543abeff5f028dba112f278 -title: "I am: I'm" -challengeType: 19 -dashedName: i-am-im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, the verb `to be` is used to talk about identities, characteristics, and more. The contraction `I'm` is a combination of `I` and `am`. Here, Tom uses it to introduce himself. - -# --question-- - -## --text-- - -Which operation correctly expands the contraction `I'm`? - -## --answers-- - -`I is` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I am` - -*** - -`I was` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I have` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md deleted file mode 100644 index a2aa6a8f717..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 6543abf5f5f028dba112f279 -title: I'm -challengeType: 22 -dashedName: im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -The word `I'm` is a contraction of `I am`. Contractions are a way to shorten common combinations of words, especially with verbs. - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, that's right! _ Tom McKenzie.` - -## --blanks-- - -`I'm` diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md deleted file mode 100644 index 3b8b7cff0bd..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 6537e6ece93e5724eeb27c54 -title: Name and Job Title -challengeType: 19 -dashedName: name-and-job-title -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, we often mention our job or role in a company by saying, `I'm [Name], the [Job title].` This lets others know our position or role. - -# --question-- - -## --text-- - -What is Maria's job role at the company? - -## --answers-- - -`Graphic Designer` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Member` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Lead` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`CEO` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md deleted file mode 100644 index 2a3c405b6ad..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 651dd5386ffb500e3f2ce47a -title: Right -challengeType: 22 -dashedName: right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, to check or confirm something people sometimes use tag questions. For example, `You are a programmer, right?` Here, `right?` is used as a tag to check or confirm the previous statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, _?` - -## --blanks-- - -`are` - -### --feedback-- - -Pay attention to the verb in the sentence. - -*** - -`right` - -### --feedback-- - -Pay attention to the verb in the sentence. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md deleted file mode 100644 index 2ae09721cbf..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 6543aa3df5f028dba112f275 -title: Team Lead -challengeType: 22 -dashedName: team-lead -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -A `team lead` is a person who leads or manages a team. In the dialogue, Maria introduces herself as the team lead, meaning she has a leadership role. - -# --fillInTheBlank-- - -## --sentence-- - -`I'm Maria, the _ _.` - -## --blanks-- - -team - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -lead - -### --feedback-- - -Focus on the term Maria used to describe herself. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md deleted file mode 100644 index 3349bcfead9..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 6543aae6f5f028dba112f277 -title: "That's Right: 2" -challengeType: 22 -dashedName: thats-right-2 -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -Placeholder Description \_\_\_ \_\_ - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, _ _! I'm Tom McKenzie. It's a pleasure to meet you.` - -## --blanks-- - -`that's` - -*** - -`right` diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md deleted file mode 100644 index e85982fd561..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543aaa9f5f028dba112f276 -title: That's Right -challengeType: 19 -dashedName: thats-right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -When someone makes a correct assumption or guess about you, you can confirm it using phrases like `that's right`. It's a way of agreeing or saying yes to what is said. - -# --question-- - -## --text-- - -Which phrase does Tom use to confirm Maria's statement about him? - -## --answers-- - -`that's wrong` - -### --feedback-- - -`That's wrong` is used to disagree. - -*** - -`that's okay` - -### --feedback-- - -`that's okay` usually shows acceptance, not confirmation. - -*** - -`that's right` - -*** - -`that's left` - -### --feedback-- - -`that's left` refers to a direction, not confirmation. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md deleted file mode 100644 index dd254987129..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 651dd5296ffb500e3f2ce479 -title: You Are -challengeType: 22 -dashedName: you-are -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, when making introductions or identifying someone, you use the verb `to be`. In this case, `You are` is used to address the person Maria is talking to and affirmatively identify their occupation. - -Maria is introducing herself and confirming Tom's job role. `Are` is used in the present affirmative to make a statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, right?` - -## --blanks-- - -are - -### --feedback-- - -The verb `to be` is an irregular verb. When conjugated with the pronoun `you`, `be` becomes `are`. For example: `You are an English learner.` diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md new file mode 100644 index 00000000000..a041fbddef7 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md @@ -0,0 +1,15 @@ +--- +id: 655c0feadb1dd77f6cda623f +title: "Dialogue 1: A Job Interview" +challengeType: 21 +videoId: nLDychdBwUg +dashedName: dialogue-1-a-job-interview +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md new file mode 100644 index 00000000000..97f3f3245d8 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md @@ -0,0 +1,54 @@ +--- +id: 657b0f0be03b2137ed88b36c +title: Task 1 +challengeType: 19 +dashedName: task-1 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `interview` is a formal meeting where someone asks questions to learn about another person's experience, skills, or opinions. In job interviews, like in the dialogue, the interviewer asks about the candidate's previous job experiences. + +# --question-- + +## --text-- + +What is the purpose of Anna's meeting with the candidate? + +## --answers-- + +To discuss a new project at Acme Tech + +### --feedback-- + +The dialogue is about an interview, not a project discussion. + +--- + +To give a presentation on web development + +### --feedback-- + +The dialogue focuses on an interview, not a presentation. + +--- + +To have a casual conversation about programming + +### --feedback-- + +This is a formal interview, not a casual conversation. + +--- + +To conduct an interview about the candidate's job experience + +## --video-solution-- + +4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md new file mode 100644 index 00000000000..301a777a900 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md @@ -0,0 +1,50 @@ +--- +id: 657b106ced8c653be6b3218f +title: Task 2 +challengeType: 22 +dashedName: task-2 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Thanks for coming in for this interview. _ you _ me about your _ job experiences?` + +## --blanks-- + +`Can` + +### --feedback-- + +This word is used to ask if someone is able to do something. + +--- + +`tell` + +### --feedback-- + +This word is used when asking someone to give information. + +--- + +`previous` + +### --feedback-- + +This word is used to describe something that happened before now. + + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md new file mode 100644 index 00000000000..ad5202d23d2 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md @@ -0,0 +1,58 @@ +--- +id: 657b108cf870283d22b21e8e +title: Task 3 +challengeType: 19 +dashedName: task-3 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the simple present tense is used to describe habitual or usual actions. However, when you are talking about past roles or experiences, like in an interview, you should use the simple past tense. + +The simple past tense often involves changing verbs. For example, `is` becomes `was` for singular subjects and `are` becomes `were` for plural subjects. + +For example, `I am a teacher` in the present becomes `I was a teacher` for past experiences. Similarly, `They are engineers` changes to `They were engineers` when speaking about the past. + +# --question-- + +## --text-- + +What was the candidate's position at Acme Tech? + +## --answers-- + +`A project manager` + +### --feedback-- + +The candidate stated they were a programmer, not a project manager. + +--- + +`A database analyst` + +### --feedback-- + +The candidate mentioned being a programmer, which is different from a database analyst. + +--- + +`A programmer` + +--- + +`A software tester` + +### --feedback-- + +The candidate specifically mentioned their role as a programmer, not a software tester. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md new file mode 100644 index 00000000000..f757d7077f1 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md @@ -0,0 +1,38 @@ +--- +id: 657b110ad8afcc3f8e586362 +title: Task 4 +challengeType: 22 +dashedName: task-4 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that have been completed in the past. It involves changing verbs to show that the action happened before now. In this challenge, you'll practice using the simple past form of verb `to be`. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ there for three years. I _ responsible for developing web applications and maintaining the company's database.` + +## --blanks-- + +`was` + +### --feedback-- + +The first `was` indicates the completion of the time period the candidate spent at their previous job. + +--- + +`was` + +### --feedback-- + +The second `was` is used to describe past responsibility, indicating what the candidate used to do in their previous job. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md new file mode 100644 index 00000000000..a2258172744 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md @@ -0,0 +1,49 @@ +--- +id: 657b115008a62d41c0d7482f +title: Task 5 +challengeType: 19 +dashedName: task-5 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the context of programming and technology, the term `web applications` refers to software programs that run on a web server and are accessed through a web browser. They are an essential part of modern technology, allowing users to perform functions or access services over the internet. + +# --question-- + +## --text-- + +What does `web applications` refer to in the context of programming? + +## --answers-- + +Mobile apps that are downloaded from app stores + +### --feedback-- + +While mobile apps are a type of application, `web applications` specifically refer to those accessed through a web browser. + +--- + +Programs that run on a web server and are accessed via a web browser + +--- + +Physical hardware used in networking + +### --feedback-- + +Web applications are software, not physical hardware. + +--- + +Websites that only provide information without user interaction + +### --feedback-- + +Web applications are interactive and functional, not just informational. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md new file mode 100644 index 00000000000..6c2c5ba78bf --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md @@ -0,0 +1,49 @@ +--- +id: 657b119f0ce64343420bb850 +title: Task 6 +challengeType: 19 +dashedName: task-6 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `database` is a structured collection of data, typically stored electronically in a computer system. It is used to organize, store, and retrieve large amounts of information efficiently. In programming, `database` is essential for managing data that applications need to function. + +# --question-- + +## --text-- + +What is a `database` in the context of programming? + +## --answers-- + +A structured collection of data stored electronically + +--- + +A tool for designing websites + +### --feedback-- + +While important in web development, a database is not a tool for designing websites, but for storing data. + +--- + +A programming language used to create applications + +### --feedback-- + +A database is not a programming language; it's a system for storing and managing data. + +--- + +A type of computer virus + +### --feedback-- + +A database is a safe and structured way to store data, not a computer virus. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md new file mode 100644 index 00000000000..03e329649a9 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md @@ -0,0 +1,40 @@ +--- +id: 657b11e082e48a44eb4bfc09 +title: Task 7 +challengeType: 22 +dashedName: task-7 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's response and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ also part of the _ update team.` + +## --blanks-- + +`was` + +### --feedback-- + +This word is a past tense verb. You use it to talk about something that happened in the past. + +--- + +`software` + +### --feedback-- + +This word refers to computer programs. It's an important term in technology and programming. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md new file mode 100644 index 00000000000..67343b31705 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -0,0 +1,57 @@ +--- +id: 657b11f87368cf463ea4fe46 +title: Task 8 +challengeType: 19 +dashedName: task-8 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. For example: + + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. + `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + +# --question-- + +## --text-- + +How does Anna ask about specific projects in the past tense? + +## --answers-- + +`Where there any specific projects you'd like to mention?` + +### --feedback-- + +`Where` is used for locations. The correct form for asking about past events is `Were`. + +--- + +`Were there any specific projects you'd like to mention?` + +--- + +`Was there any specific projects you'd like to mention?` + +### --feedback-- + +`Was` is used with singular nouns. Since `projects` is plural, `Were` is the correct choice. + +--- + +`Are there any specific projects you'd like to mention?` + +### --feedback-- + +`Are` is present tense. The question is about past projects, so `Were` is needed. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md new file mode 100644 index 00000000000..e6bc643d065 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md @@ -0,0 +1,55 @@ +--- +id: 657b1240ef768447b80817ad +title: Task 9 +challengeType: 19 +dashedName: task-9 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense, as reviewed earlier, is used for actions completed in the past. In this context, `we were involved in` combines the simple past tense (`were`) with the expression `involved in`, which means being a part of something, especially in an active or important role. For example, `They were involved in organizing the event` means they played an important role in organizing it. + +# --question-- + +## --text-- + +How does the candidate describe their role in the project? + +## --answers-- + +`We had involvement in the development of the e-commerce platform.` + +### --feedback-- + +Although this phrase communicates involvement, the more common expression in English is `were involved in`. + +--- + +`We were engaged in the development of the e-commerce platform.` + +### --feedback-- + +`engaged in` is similar but not the exact phrase used by the candidate. `Involved in` specifically indicates an active participation. + +--- + +`We were involved in the development of the e-commerce platform.` + +--- + +`We participated in the development of the e-commerce platform.` + +### --feedback-- + +While `participated in` suggests involvement, the specific phrase used here is `involved in`. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md new file mode 100644 index 00000000000..f51e04c012a --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md @@ -0,0 +1,49 @@ +--- +id: 657b12ae08dd7049b300c901 +title: Task 10 +challengeType: 19 +dashedName: task-10 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +An `e-commerce platform` refers to a software application that allows businesses to manage their online sales operations. It typically includes features for displaying products, processing orders, and handling customer transactions. This term is essential in the world of online business, as it enables companies to sell goods and services over the internet. + +# --question-- + +## --text-- + +What is an `e-commerce platform` in the context of online business? + +## --answers-- + +A platform for social media marketing + +### --feedback-- + +While e-commerce platforms may use social media for marketing, they are primarily used for online sales operations. + +--- + +A software application for managing online sales + +--- + +A tool for website design and development + +### --feedback-- + +An e-commerce platform is specifically for managing online sales, not just website design. + +--- + +A system for email communication with customers + +### --feedback-- + +Though communication might be a feature, an e-commerce platform's main function is to manage online sales. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md new file mode 100644 index 00000000000..092c2b7ff32 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md @@ -0,0 +1,41 @@ +--- +id: 657b12e7c306334b7c320221 +title: Task 11 +challengeType: 22 +dashedName: task-11 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's statement and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for the checkout process, and it _ a successful implementation.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense of `are` used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense of `is` used for singular subjects or situations. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md new file mode 100644 index 00000000000..5a555480e1c --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md @@ -0,0 +1,49 @@ +--- +id: 657b13088693ef4ce21ce0e4 +title: Task 12 +challengeType: 19 +dashedName: task-12 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `checkout process` refers to the steps involved in completing a purchase, whether in a physical store or online. In a physical store, this usually involves taking items to a cashier, paying, and receiving a receipt. In online shopping, it includes adding items to a cart, entering shipping and payment details, and finalizing the order. + +# --question-- + +## --text-- + +What does the `checkout process` typically involve? + +## --answers-- + +Signing up for a store's loyalty program + +### --feedback-- + +While loyalty programs are part of customer engagement, the checkout process is specifically about completing a transaction. + +--- + +Arranging items on shelves in a store + +### --feedback-- + +Arranging items is a part of store management, not related to the checkout process of completing a purchase. + +--- + +Conducting market research + +### --feedback-- + +Market research is important for business strategy, but it's separate from the checkout process, which is directly involved in sales transactions. + +--- + +Completing a purchase through payment and receipt of goods + +## --video-solution-- + +4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md new file mode 100644 index 00000000000..db7a9bbed14 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md @@ -0,0 +1,49 @@ +--- +id: 657b133afcef714e542b557a +title: Task 13 +challengeType: 19 +dashedName: task-13 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Implementation` in a technical or business context refers to the process of putting a plan or design into effect. In software development, for instance, implementation involves the actual coding and setup of a software application based on designed specifications. It is a critical phase where ideas or plans are turned into a functioning reality. + +# --question-- + +## --text-- + +What does `implementation` mean in a project context? + +## --answers-- + +The planning stage of a project + +### --feedback-- + +Planning is the phase where strategies are formed, not the actual execution or implementation of those plans. + +--- + +The analysis of project results + +### --feedback-- + +Analysis is about evaluating outcomes, whereas implementation is about executing or carrying out the project plans. + +--- + +The process of team formation + +### --feedback-- + +Team formation is part of project setup, but implementation specifically refers to executing the planned tasks of the project. + +--- + +The execution of a plan or design + +## --video-solution-- + +4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md new file mode 100644 index 00000000000..1fa977ff3c0 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md @@ -0,0 +1,49 @@ +--- +id: 657b135e9029fb4f8141e40c +title: Task 14 +challengeType: 22 +dashedName: task-14 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. This is a great way to practice and remember these words. + +# --fillInTheBlank-- + +## --sentence-- + +`Anna: That's excellent. _ there any specific projects you'd like to mention?` + +`Candidate: Yes, in one of my team's projects, we were _ in the development of an e-commerce platform. We were responsible for the _ process, and it was a successful implementation.` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past tense form of `are`. The first letter should be capitalized. + +--- + +`involved` + +### --feedback-- + +This word means participating actively in something. + +--- + +`checkout` + +### --feedback-- + +This term refers to the process of completing a purchase. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md new file mode 100644 index 00000000000..94904516eba --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md @@ -0,0 +1,54 @@ +--- +id: 657b138d33db9e50f116b5f0 +title: Task 15 +challengeType: 19 +dashedName: task-15 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and answer the question. + +# --question-- + +## --text-- + +How does Anna ask about the candidate's educational background in computer science? + +## --answers-- + +`Are you educated in computer science?` + +### --feedback-- + +`Are you` is present tense, but Anna's question is about the candidate's past education. + +--- + +`Do you study computer science?` + +### --feedback-- + +`Do you study` is present tense. The question is about past education. + +--- + +`Were you educated in computer science?` + +--- + +`Have you studied computer science?` + +### --feedback-- + +`Have you studied` is a different form, asking if they have ever studied it at any time. `Were you educated` specifically asks about formal education in the past. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md new file mode 100644 index 00000000000..6044644f850 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md @@ -0,0 +1,49 @@ +--- +id: 657b1431076b365555784189 +title: Task 16 +challengeType: 19 +dashedName: task-16 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `bachelor's degree` is an undergraduate academic degree awarded by colleges and universities upon completion of a course of study. In the term `bachelor's degree`, the use of the noun (`bachelor`) followed by the `'s` indicates possession or association. This form is commonly used to show that something belongs to or is related to the noun, as in `today's news` or `teacher's guide`. + +# --question-- + +## --text-- + +What does `bachelor's degree` refer to? + +## --answers-- + +An undergraduate academic degree + +--- + +A type of professional certification + +### --feedback-- + +A bachelor's degree is an academic qualification, not a professional certification. + +--- + +A high school diploma + +### --feedback-- + +A bachelor's degree is a higher education qualification, more advanced than a high school diploma. + +--- + +A master's program entry requirement + +### --feedback-- + +While a bachelor's degree may be required for a master's program, it itself refers to an undergraduate degree. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md new file mode 100644 index 00000000000..299109790e0 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md @@ -0,0 +1,56 @@ +--- +id: 657b145976723b56a97b8dda +title: Task 17 +challengeType: 19 +dashedName: task-17 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `I was introduced to` uses the simple past tense form `was` of the verb `be`, combined with the past participle `introduced`. This structure, `be` followed by a verb suffixed with `-ed`, is often used to describe actions that happened to the subject in the past. For example: + +`At college, I was introduced to many programing languages` + +# --question-- + +## --text-- + +What does the candidate mean by saying `I was introduced to various programming languages and software development principles`? + +## --answers-- + +I taught myself various programming languages and principles + +### --feedback-- + +`I was introduced to` implies being formally taught or shown by someone else, not self-teaching. + +--- + +I learned about various programming languages and principles in my studies + +--- + +I have extensive experience with various programming languages and principles + +### --feedback-- + +The phrase indicates initial exposure to these topics, not necessarily extensive experience. + +--- + +I developed various programming languages and principles + +### --feedback-- + +Being introduced to something means learning about it for the first time, not creating or developing it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md new file mode 100644 index 00000000000..2e11e13fa69 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md @@ -0,0 +1,49 @@ +--- +id: 657b149630b3ea5873269a38 +title: Task 18 +challengeType: 19 +dashedName: task-18 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `various` is an adjective used to describe a number of different types or kinds of something, emphasizing diversity or variety. It is often used to indicate that there are several distinct items or examples being referred to. For example, saying `various books` means books of different kinds or genres. + +# --question-- + +## --text-- + +What does `various` imply when talking about programming languages and software development principles? + +## --answers-- + +Different types or kinds + +--- + +A specific type or kind + +### --feedback-- + +The term `various` implies diversity, not specificity. + +--- + +Only one type + +### --feedback-- + +`Various` indicates a number of different types, not just one. + +--- + +Irrelevant or unrelated types + +### --feedback-- + +`Various` does mean different types, but these are usually relevant and related to the context. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md new file mode 100644 index 00000000000..b217384d87c --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md @@ -0,0 +1,38 @@ +--- +id: 657b14d8353d665a187fe771 +title: Task 19 +challengeType: 22 +dashedName: task-19 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this challenge, you'll practice filling in key terms from the dialogue. These terms are commonly used in job interviews and are essential for understanding the context of the discussion. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Sure, I was a programmer at Acme Tech. I was there for three years. I was responsible for developing web _ and maintaining the company's _. I was also part of the software update team.` + +## --blanks-- + +`applications` + +### --feedback-- + +These are programs designed to perform specific tasks or functions. + +--- + +`database` + +### --feedback-- + +This is a collection of information organized for easy access, management, and updating. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md new file mode 100644 index 00000000000..5d81b22a9e7 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md @@ -0,0 +1,62 @@ +--- +id: 657b153ac677705c7059530d +title: Task 20 +challengeType: 19 +dashedName: task-20 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `could you tell me` is a polite way to ask someone for information. It's commonly used in formal or professional situations, like job interviews or meetings. +In English, some verbs have irregular past forms, meaning they do not follow the regular pattern of adding `-ed` to make the past tense. `Can` is one such verb, and its irregular simple past form is `could`. + +The existence of irregular forms, like `could`, often comes from the way language has evolved over time. These forms do not follow the regular patterns and need to be memorized. + +For example: + +- Present: `I can speak English.` +- Past: `I could speak English when I was six.` + +# --question-- + +## --text-- + +What does the phrase `could you tell me` in Anna's sentence express? + +## --answers-- + +A polite request for information + +--- + +A command to do something immediately + +### --feedback-- + +The phrase `could you tell me` is used for polite requests, not direct commands. + +--- + +A suggestion for future action + +### --feedback-- + +This phrase is asking for information now, not suggesting something for the future. + +--- + +An offer to help someone + +### --feedback-- + +This phrase is more about asking for information than offering help. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md new file mode 100644 index 00000000000..ecf0d666af0 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md @@ -0,0 +1,54 @@ +--- +id: 657b15dbcafe4d5f39a5de82 +title: Task 21 +challengeType: 19 +dashedName: task-21 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `previous` is used to describe something that happened before the current time or situation. It's often used to refer to past experiences, jobs, or events. + +# --question-- + +## --text-- + +In the context of Anna's question, what does `previous` refer to? + +## --answers-- + +Past roles and responsibilities + +--- + +Future roles and responsibilities + +### --feedback-- + +`Previous` refers to something that has already happened, not something in the future. + +--- + +Current roles and responsibilities + +### --feedback-- + +`Previous` means something that happened before now, not what is happening currently. + +--- + +Unrelated roles and responsibilities + +### --feedback-- + +`Previous` specifically relates to roles and responsibilities that were held before, not those unrelated. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md new file mode 100644 index 00000000000..8497f67b9bb --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md @@ -0,0 +1,53 @@ +--- +id: 657b160d6a8662610fe6a523 +title: Task 22 +challengeType: 22 +dashedName: task-22 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that were completed in the past. Regular verbs in the past tense usually end with `-ed`, while irregular verbs have unique past forms. For example, as you learned in previous tasks, `was` and `were` are the past forms of `is` and `are`. + +Examples of simple past tense: + +- `I worked at a company.` (`work` becomes `worked`) +- `I was happy.` (`is` becomes `was`) +- `We were busy.` (`are` becomes `were`) + +# --fillInTheBlank-- + +## --sentence-- + +`Hello! Certainly. I _ at Mock Corporation for five years. I _ part of a team of software engineers, and we _ responsible for developing and maintaining various applications.` + +## --blanks-- + +`worked` + +### --feedback-- + +Think of the past tense of `work`, a regular verb that follows the usual `-ed` ending pattern. + +--- + +`was` + +### --feedback-- + +Recall the past tense form of `is`, which changes to a completely different word in its irregular past form. + +--- + +`were` + +### --feedback-- + +Consider the past tense of `are`, an irregular verb that also changes to a different word in the past. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md new file mode 100644 index 00000000000..8e1b26a3bce --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md @@ -0,0 +1,46 @@ +--- +id: 657b163c9da40e62b904be1f +title: Task 23 +challengeType: 22 +dashedName: task-23 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the past simple interrogative. In questions, the simple past tense often begins with a past tense verb, followed by the subject and the rest of the sentence. This structure is used to ask about past events or states. + +# --fillInTheBlank-- + +## --sentence-- + +`That's great to hear. _ the members of the team _ _ any specific achievements or projects?` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past form of `are` used to ask about a past state or condition. + +--- + +`involved` + +### --feedback-- + +Think of a word that means `participated in` or `engaged with`. + +--- + +`in` + +### --feedback-- + +A preposition that often follows `involved` to indicate participation or inclusion. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md new file mode 100644 index 00000000000..bc7924edcf6 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md @@ -0,0 +1,54 @@ +--- +id: 657b18e71067d6680b9ac5d3 +title: Task 24 +challengeType: 19 +dashedName: task-24 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `redesign` means to design something again or differently. It's often used in the context of improving or updating the design of an existing product, service, or structure. In software and web development, redesigning is a common practice to enhance functionality, user experience, or aesthetics. + +# --question-- + +## --text-- + +What does `redesign` imply in Candidate2's statement about the website project? + +## --answers-- + +To design for the first time + +### --feedback-- + +`Redesign` implies working on something that already exists, not creating it for the first time. + +--- + +To remove the design + +### --feedback-- + +`Redesign` means to change or improve the existing design, not to remove it. + +--- + +To change or improve an existing design + +--- + +To copy a design + +### --feedback-- + +`Redesign` involves making changes or improvements, not copying a design as it is. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md new file mode 100644 index 00000000000..ed588a90563 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md @@ -0,0 +1,54 @@ +--- +id: 657b1985ae17886b05b382b1 +title: Task 25 +challengeType: 19 +dashedName: task-25 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `performance` in a technical context often refers to how well a system or component operates, especially in terms of speed, efficiency, and reliability. For websites and software, performance can relate to how quickly pages load, the responsiveness of the application, or the stability of the system under various conditions. + +# --question-- + +## --text-- + +What does `performance` refer to in Candidate2's statement about the website? + +## --answers-- + +A live presentation + +### --feedback-- + +While `performance` can mean a presentation, in this context, it relates to the functioning of the website. + +--- + +Artistic display + +### --feedback-- + +In a technical context, `performance` refers to operational effectiveness, not an artistic aspect. + +--- + +Financial success + +### --feedback-- + +`Performance` in this context is about the website's operational aspects, not its financial success. + +--- + +How well the website operates + +## --video-solution-- + +4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md new file mode 100644 index 00000000000..98e6bda774a --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md @@ -0,0 +1,54 @@ +--- +id: 657b19bf7b32af6caf763ef7 +title: Task 26 +challengeType: 19 +dashedName: task-26 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `collaborative effort` refers to a situation where people work together as a team to achieve a common goal. This kind of teamwork is essential in many work environments, especially on projects where different skills and perspectives are needed. + +# --question-- + +## --text-- + +What does `collaborative effort` imply in the context of Candidate2's statement? + +## --answers-- + +Working independently + +### --feedback-- + +`Collaborative effort` means working together as a team, not independently. + +--- + +Teamwork to achieve a goal + +--- + +Avoiding responsibility + +### --feedback-- + +`Collaborative effort` involves taking shared responsibility, not avoiding it. + +--- + +Focusing on individual skills + +### --feedback-- + +`Collaborative effort` emphasizes teamwork over individual skills. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md new file mode 100644 index 00000000000..56a621b07c6 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md @@ -0,0 +1,38 @@ +--- +id: 657b1a03df3ec46eca276046 +title: Task 27 +challengeType: 22 +dashedName: task-27 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. + +# --fillInTheBlank-- + +## --sentence-- + +`Yes, our team _ involved in a project to _ the company's website.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`redesign` + +### --feedback-- + +This word means to design something again in a different way. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md new file mode 100644 index 00000000000..66d49e9e89f --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md @@ -0,0 +1,55 @@ +--- +id: 657b1a27dc6daf6ffd52ff1f +title: Task 28 +challengeType: 19 +dashedName: task-28 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the noun suffixed with `'s` followed by a second noun structure is used to show possession or belonging. If the first noun is singular, as in `Sarah's laptop`, it indicates that the laptop belongs to Sarah. However, if the first noun is plural, the structure changes to noun suffixed with `'`, as in `teachers' office`, indicating an office for teachers. + +# --question-- + +## --text-- + +What does `master's degree` in the context of the dialogue refer to? + +## --answers-- + +A degree for school teachers + +### --feedback-- + +`Master's degree` refers to an advanced academic degree, not specifically for teachers. + +--- + +A primary level educational degree + +### --feedback-- + +`Master's degree` is a higher education qualification, beyond the primary level. + +--- + +A degree in mastering skills + +### --feedback-- + +While it implies expertise, `master's degree` specifically refers to an academic qualification. + +--- + +An advanced academic degree + +## --video-solution-- + +4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md new file mode 100644 index 00000000000..bf63c3e8d24 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md @@ -0,0 +1,49 @@ +--- +id: 657b1a637e4dc571f8f4d3d7 +title: Task 29 +challengeType: 19 +dashedName: task-29 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `appreciate` is often used to express gratitude or to acknowledge the value or importance of something or someone's actions. It's a way of showing that you recognize and are thankful for someone's help, effort, or achievement. + +# --question-- + +## --text-- + +In a work meeting, your colleague says, `I really appreciate your help on this project.` What is your colleague expressing? + +## --answers-- + +Dissatisfaction with your work + +### --feedback-- + +`Appreciate` means to be grateful or thankful, not to show dissatisfaction. + +--- + +Indifference to your contribution + +### --feedback-- + +`Appreciate` is used to express positive recognition, not indifference. + +--- + +Gratitude for your contribution + +--- + +A need for more assistance + +### --feedback-- + +`Appreciate` here indicates satisfaction with the help received, not a request for more assistance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md new file mode 100644 index 00000000000..4fa33c1c2d0 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md @@ -0,0 +1,47 @@ +--- +id: 657b1a9581015573806e1e20 +title: Task 30 +challengeType: 22 +dashedName: task-30 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words you learned. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for implementing new features and ensuring the website's performance. It _ a _ effort, and we were able to deliver the project on time.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense form of `are`, used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`collaborative` + +### --feedback-- + +This word means working together as a team. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md new file mode 100644 index 00000000000..6013cb50f86 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md @@ -0,0 +1,39 @@ +--- +id: 657b1cc072206e7ac3db88b8 +title: Task 31 +challengeType: 22 +dashedName: task-31 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the missing words correctly. This is a great way to practice what you've learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I have a _ degree in computer science. My studies _ quite intensive, and I was introduced to many different methodologies.` + +## --blanks-- + +`master's` + +### --feedback-- + +This term, using the `noun's noun` structure, refers to an advanced academic degree. + +--- + +`were` + +### --feedback-- + +This is the past tense form of `are` used for plural subjects or things. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md new file mode 100644 index 00000000000..1c7c7b4603c --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md @@ -0,0 +1,30 @@ +--- +id: 657b1d080265ba7c4f96bf79 +title: Task 32 +challengeType: 22 +dashedName: task-32 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task helps you review the word you learned. Listen to the dialogue and complete the sentence correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`Impressive! We _ candidates with strong educational backgrounds and practical experience.` + +## --blanks-- + +`appreciate` + +### --feedback-- + +This word means to recognize the value or importance of something or someone's actions. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md new file mode 100644 index 00000000000..28e4211c290 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md @@ -0,0 +1,15 @@ +--- +id: 657b1d4ec0e2587e8bcc95f7 +title: "Dialogue 3: Two Workmates Talk About Their Backgrounds" +challengeType: 21 +dashedName: dialogue-3-two-workmates-talk-about-their-backgrounds +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md new file mode 100644 index 00000000000..df8ebc66d25 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md @@ -0,0 +1,54 @@ +--- +id: 657b1da0b27fef8117827ce5 +title: Task 33 +challengeType: 19 +dashedName: task-33 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned about the simple past tense. Now, you can explore it further. The simple past tense is often formed by adding `-ed` to a verb. But, when a verb ends with an `e`, you just add a `d`. For example, `notice` becomes `noticed`. + +# --question-- + +## --text-- + +What does `noticed` in Sarah's sentence indicate? + +## --answers-- + +Sarah observed something in the past + +--- + +Sarah is planning to observe something + +### --feedback-- + +The simple past tense `noticed` indicates a completed action in the past, not a future plan. + +--- + +Sarah continuously observes something + +### --feedback-- + +The simple past tense `noticed` is used for actions that were completed, not ongoing actions. + +--- + +Sarah never observes anything + +### --feedback-- + +`Noticed` implies that Sarah did observe something, not never observing. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md new file mode 100644 index 00000000000..5a1ba6afbfc --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md @@ -0,0 +1,30 @@ +--- +id: 657b1dfec76149836ea5c7d0 +title: Task 34 +challengeType: 22 +dashedName: task-34 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you will focus on the past simple negative. It's created by adding `not` after the auxiliary verb `was` or `were`. For example, `was` becomes `wasn't` (`was not`) and `were` becomes `weren't` (`were not`). This form is used to describe something that did not happen in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`It _ exactly tech-related, but I learned a lot about problem-solving and critical thinking.` + +## --blanks-- + +`wasn't` + +### --feedback-- + +This word is used to make a negative statement in the past tense. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md new file mode 100644 index 00000000000..da30e71e20a --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md @@ -0,0 +1,49 @@ +--- +id: 657b1e2fad2ffe84ab420a56 +title: Task 35 +challengeType: 19 +dashedName: task-35 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You're already familiar with `wasn't` and `weren't` for past simple negative. Now, let's explore `didn't`, a contraction of `did not`. It's used with the base form of verbs (the infinitive without `to`) to express that an action did not happen in the past. For example, `didn't go` means the action of going did not occur. + +# --question-- + +## --text-- + +Imagine you are reading a story about a character who planned to attend a concert but couldn't. How would you describe this situation? + +## --answers-- + +The character enjoyed the concert + +### --feedback-- + +Using `didn't` suggests the character did not go to the concert, contradicting the idea of enjoying it. + +--- + +The character didn't attend the concert + +--- + +The character always goes to concerts + +### --feedback-- + +This expression refers to a regular habit, not a specific event in the past. + +--- + +The character is looking forward to the next concert + +### --feedback-- + +This option is about future anticipation. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md new file mode 100644 index 00000000000..938a8118ce2 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md @@ -0,0 +1,54 @@ +--- +id: 657b1e66159fec86336a737b +title: Task 36 +challengeType: 19 +dashedName: task-36 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned the basics of the simple past tense. Now you can dive deeper into it. Typically, the simple past tense is formed by adding `-ed` to regular verbs. For instance, the verb `play` becomes `played` in the simple past. This tense is used to describe actions that were completed at a specific time in the past. + +# --question-- + +## --text-- + +What does `I played` in Sophie's sentence suggest about her experience with coding? + +## --answers-- + +She casually experimented with coding in the past + +--- + +She is currently playing a coding game + +### --feedback-- + +`Played` is in the past tense, indicating a past action, not something happening currently. + +--- + +She plans to start coding soon + +### --feedback-- + +`Played` implies she already has some experience with coding, not that she is planning to start. + +--- + +She never tried coding + +### --feedback-- + +Using `played` confirms she did engage in coding, contradicting the idea of never trying it. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md new file mode 100644 index 00000000000..2bd70b3d732 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md @@ -0,0 +1,49 @@ +--- +id: 657b1e9a62603587747f7f45 +title: Task 37 +challengeType: 19 +dashedName: task-37 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In English, when forming questions in the simple past tense, you often use `did`. This is followed by the subject and the base form of the verb (without `ed`). For example, `Did you enjoy` is a past simple interrogative phrase where `did` is the auxiliary verb, `you` is the subject, and `enjoy` is the base form of the verb. + +# --question-- + +## --text-- + +What does a question like `Did you enjoy the concert last night?` ask about? + +## --answers-- + +Are you going to enjoy the concert? + +### --feedback-- + +This implies a future event. The question with `did` is asking about a past experience. + +--- + +Do you enjoy concerts in general? + +### --feedback-- + +This is asking about general preferences, not a specific past event. + +--- + +Did you have a good experience at the concert last night? + +--- + +Will you enjoy future concerts? + +### --feedback-- + +The question is about a past event, not future experiences. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md new file mode 100644 index 00000000000..430fa995037 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md @@ -0,0 +1,42 @@ +--- +id: 657b1ee1de7216896b5b4361 +title: Task 38 +challengeType: 22 +dashedName: task-38 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blank correctly. This task is a review. Remember, the simple past tense is used to talk about actions or situations in the past, and the negative form is used to describe things that did not happen. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: That's interesting! So, you _ work on many programming projects during your studies?` + +`Sophie: No, not really. I _ around with coding, but most of my projects involved circuit designs and electrical systems. It was a bit different.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used here to talk about something that was not done in the past. + +--- + +`played` + +### --feedback-- + +This word suggests that Sophie casually engaged in coding for pleasure or interest. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md new file mode 100644 index 00000000000..dfcc68a881a --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md @@ -0,0 +1,40 @@ +--- +id: 657b1f0585d48f8ac0b19654 +title: Task 39 +challengeType: 22 +dashedName: task-39 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you'll focus on answering questions in the simple past tense. When responding to a past simple interrogative (a question), you can answer affirmatively with `did` or negatively with `didn't`. For example, `Did you go to the party?` can be answered with `I did` (affirmative) or `I didn't` (negative). Listen to the dialogue and fill in the blanks correctly to practice this structure. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: I see. _ you enjoy your time there, even if it wasn't entirely tech-focused? Sophie: I _.` + +## --blanks-- + +`Did` + +### --feedback-- + +This word is used to form a past simple interrogative question. The first letter should be capitalized. + +--- + +`did` + +### --feedback-- + +This response is an affirmative answer to the past simple interrogative question. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md new file mode 100644 index 00000000000..92e4b28c489 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md @@ -0,0 +1,49 @@ +--- +id: 657b1f598f63008c8bdb20b8 +title: Task 40 +challengeType: 19 +dashedName: task-40 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the simple past tense, some verbs are irregular and don't follow the regular `-ed` ending pattern. One example of this is the verb `meet`, which becomes `met` in the past tense. This is important to remember when talking about past events. + +# --question-- + +## --text-- + +During a class reunion, an old friend tells you, `We met for the first time in art class.` What is your friend referring to with `met`? + +## --answers-- + +We are meeting right now in art class + +### --feedback-- + +The use of `met` indicates a past event, not something happening currently. + +--- + +Our first encounter was in the past, specifically in art class + +--- + +We will meet for the first time soon + +### --feedback-- + +`Met` indicates a past action, not a future arrangement. + +--- + +We have never been in art class together + +### --feedback-- + +`Met` suggests a past meeting. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md new file mode 100644 index 00000000000..e3cdc339c1f --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md @@ -0,0 +1,49 @@ +--- +id: 657b1f981cd42e8dc3b282d9 +title: Task 41 +challengeType: 19 +dashedName: task-41 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn another special case in this task. It's the past tense form of `have`. Unlike regular verbs that add `-ed` for the past tense, `have` becomes `had`. This irregular form is used for both singular and plural subjects in the past tense, making it a unique and important verb to remember. + +# --question-- + +## --text-- + +What does `had` imply in a sentence like `They had a meeting yesterday?` + +## --answers-- + +They possessed or experienced something in the past + +--- + +They are having a meeting right now + +### --feedback-- + +`Had` is used for past actions, indicating the meeting occurred in the past, not at the present moment. + +--- + +They will have a meeting tomorrow + +### --feedback-- + +`Had` indicates a past action, not a future plan. + +--- + +They never have meetings + +### --feedback-- + +Using `had` confirms that the meeting took place in the past. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md new file mode 100644 index 00000000000..9f86ab82bcb --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md @@ -0,0 +1,47 @@ +--- +id: 657b1fe950c0df90346e5d12 +title: Task 42 +challengeType: 22 +dashedName: task-42 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the words `met`, `had`, and `wasn't`. You have already learned these words. Listen to the dialogue and fill in the blanks with the correct words. This exercise is a good way to practice and reinforce your understanding of these words in context. + +# --fillInTheBlank-- + +## --sentence-- + +`I did. It was challenging, but I _ some fantastic people. We _ a bunch of fun coding marathons, although I _ always a very strong programmer.` + +## --blanks-- + +`met` + +### --feedback-- + +This word is used here to describe encountering people in the past. + +--- + +`had` + +### --feedback-- + +This word is used to express possession or experiences in the past. + +--- + +`wasn't` + +### --feedback-- + +This word is the negative form in the past tense, indicating something that was not the case. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md new file mode 100644 index 00000000000..2ee4e256d2a --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md @@ -0,0 +1,39 @@ +--- +id: 657b201372864e91d4f5bb53 +title: Task 43 +challengeType: 22 +dashedName: task-43 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +When a verb ends in a consonant followed by `y`, you should change the `y` to `i` and add `ed` for the past tense. For example, `carry` becomes `carried`. Note that this rule applies when the `y` follows a consonant, not a vowel, so the simple past form of `convey` is `conveyed`. For regular verbs, you simply add `ed` to form the past tense. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ at a small college as well and _ in information technology.` + +## --blanks-- + +`studied` + +### --feedback-- + +The past simple tense of `study` is formed by changing `y` to `i` and adding `ed`. + +--- + +`majored` + +### --feedback-- + +This word follows the regular past simple tense formation by just adding `ed`. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md new file mode 100644 index 00000000000..67255d1bac6 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md @@ -0,0 +1,26 @@ +--- +id: 657b20338e0802931673c1e1 +title: Task 44 +challengeType: 22 +dashedName: task-44 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + +# --description-- + +You've learned that for verbs ending in `e`, you simply add `d` to form the simple past tense. Choose the correct form of `love` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she really _ the beach vacation.` + +## --blanks-- + +`loved` + +### --feedback-- + +To form the simple past, add `d` to the base form of the verb, `love`. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md new file mode 100644 index 00000000000..4d89a2935c0 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md @@ -0,0 +1,54 @@ +--- +id: 657b20985d315095e5c3851d +title: Task 45 +challengeType: 19 +dashedName: task-45 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this context, `got` is a special case in the simple past tense. It's the past tense of `get`. Unlike regular verbs that typically add `-ed` for the past tense, `get` changes to `got`. + +# --question-- + +## --text-- + +In the context of Sarah's statement, what does `got` imply about her experience? + +## --answers-- + +She is getting the opportunity now + +### --feedback-- + +`Got` indicates a past opportunity, not something happening currently. + +--- + +She had the opportunity in the past + +--- + +She will get the opportunity in the future + +### --feedback-- + +`Got` refers to a past experience, not a future possibility. + +--- + +She never gets such opportunities + +### --feedback-- + +`Got` in this context suggests she did have this opportunity. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md new file mode 100644 index 00000000000..ac32d364daa --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md @@ -0,0 +1,50 @@ +--- +id: 657b21e28a01039cb27b4f13 +title: Task 46 +challengeType: 19 +dashedName: task-46 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `exactly` is used to emphasize the truth or accuracy of a statement or description. It can mean `precisely` or `just`. For example, if someone says, `It's exactly what I needed`, they mean that it is precisely or perfectly what was required. `Exactly` often highlights that something is correct in every detail. + +# --question-- + +## --text-- + +What does `exactly` imply in a sentence like `This is exactly the kind of work I enjoy`? + +## --answers-- + +This is somewhat similar to the work I enjoy + +### --feedback-- + +`Exactly` indicates a perfect match, not just a similarity. + +--- + +This is the opposite of the work I enjoy + +### --feedback-- + +`Exactly` implies a perfect match, not an opposite. + +--- + +I am not sure if this is the work I enjoy + +### --feedback-- + +Using `exactly` shows certainty, not uncertainty. + +--- + +This is precisely the type of work that I find enjoyable + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md new file mode 100644 index 00000000000..36c267c651b --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md @@ -0,0 +1,35 @@ +--- +id: 657b221b2ab0ac9e18a173ef +title: Task 47 +challengeType: 22 +dashedName: task-47 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Let's look at `exactly` and `exact`. You use `exactly` to show something is just right or very true. It is an adverb. For example, `You did it exactly right!`. + +`Exact` is an adjective, and it describes something very correct or precise, like in `the exact time`. + +# --fillInTheBlank-- + +## --sentence-- + +`She knew the _ time of the meeting. She arrived _ at 3 pm.` + +## --blanks-- + +`exact` + +### --feedback-- + +This word is an adjective, describing the noun `time`. + +--- + +`exactly` + +### --feedback-- + +This word is an adverb, showing that her arrival time was very precise. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md new file mode 100644 index 00000000000..82dcdea8fbb --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -0,0 +1,39 @@ +--- +id: 657b223e41ce6b9f9a01d214 +title: Task 48 +challengeType: 22 +dashedName: task-48 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You'll review the past simple negative in this task. It's formed using `was` or `were` with `not`, like `weren't` (`were not`) or `wasn't` (`was not`). It's used to talk about things that did not happen or were not true in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`They _ _ big projects.` + +## --blanks-- + +`weren't` + +### --feedback-- + +It's the negative form of `were` in the past tense, used to say something was not true or did not happen. + +--- + +`exactly` + +### --feedback-- + +This word is used to emphasize the statement, suggesting the projects were not precisely big. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md new file mode 100644 index 00000000000..06ce8ba3d76 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md @@ -0,0 +1,15 @@ +--- +id: 657b227f7ad32ea17e2cdf28 +title: "Dialogue 4: A Developer with a Different Background" +challengeType: 21 +dashedName: dialogue-4-a-developer-with-a-different-background +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md new file mode 100644 index 00000000000..abee49452c1 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md @@ -0,0 +1,56 @@ +--- +id: 657b2310b8cd52a4f15c1818 +title: Task 49 +challengeType: 19 +dashedName: task-49 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `unconventional` is used to describe something that's not based on or conforming to what is generally done or believed. It often implies a method or approach that is different from the norm. + +# --question-- + +## --text-- + +What does `unconventional` imply about Alice's background in tech? + +## --answers-- + +Her background is different from the usual way people get into tech + +--- + +Her background is exactly the same as most people in tech + +### --feedback-- + +`Unconventional` means not following the usual conventions, which contradicts being the same as most people. + +--- + +She doesn't have any background in tech + +### --feedback-- + +`Unconventional` suggests a different approach, not the absence of a background. + +--- + +She followed a very traditional path into tech + +### --feedback-- + +`Unconventional` indicates a non-traditional path, not a very traditional one. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md new file mode 100644 index 00000000000..47917952aff --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md @@ -0,0 +1,39 @@ +--- +id: 657b2340be1593a6517fe77b +title: Task 50 +challengeType: 22 +dashedName: task-50 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple negative, `did not` (contracted to `didn't`) is followed by the base form of a verb. This structure is used to express that an action did not happen in the past. In this dialogue, Alice is describing her educational background related to technology. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ _ tech at a traditional university.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used in the past simple negative to indicate that an action was not done. + +--- + +`study` + +### --feedback-- + +The base form of the verb is used after the contraction in negative past simple sentences. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md new file mode 100644 index 00000000000..e19667245f9 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md @@ -0,0 +1,54 @@ +--- +id: 657b236aa1eb9fa7b209aa03 +title: Task 51 +challengeType: 19 +dashedName: task-51 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `mostly` is used to indicate that something is true to a large extent but not completely. It suggests that while other factors or methods may be involved, the primary aspect is what is mentioned. + +# --question-- + +## --text-- + +In Alice's statement, what does `mostly` suggest about her way of learning? + +## --answers-- + +She only learned through formal education + +### --feedback-- + +`Mostly` implies a greater emphasis on self-teaching rather than exclusive formal education. + +--- + +She didn't learn anything on her own + +### --feedback-- + +The use of `mostly` indicates a significant amount of self-learning, not an absence of it. + +--- + +She learned equally through self-teaching and formal courses + +### --feedback-- + +`Mostly` suggests a greater emphasis on one method over an equal balance. + +--- + +Her learning was primarily through her own efforts, with some formal courses + +## --video-solution-- + +4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md new file mode 100644 index 00000000000..10f6121949b --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md @@ -0,0 +1,36 @@ +--- +id: 657b23a413d28da927e087ca +title: Task 52 +challengeType: 22 +dashedName: task-52 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +This task reviews how an adverb is often formed by adding `-ly` to an adjective. + + +# --fillInTheBlank-- + +## --sentence-- + +`She completed _ of her work before lunch. The office is _ quiet in the mornings.` + +## --blanks-- + +`most` + +### --feedback-- + +This word is used as an adjective to describe the quantity of work completed. + +--- + +`mostly` + +### --feedback-- + +This word is used as an adverb to describe the general state of the office. + + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md new file mode 100644 index 00000000000..8f0a554d33f --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md @@ -0,0 +1,50 @@ +--- +id: 657b23bc0e32f9aa9c62eb82 +title: Task 53 +challengeType: 19 +dashedName: task-53 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `self-taught` refers to acquiring knowledge or skills without direct teaching from a traditional teacher or educational institution. It involves learning independently. The word `taught` is the past participle of `teach`. When someone is `self-taught`, it means they have taught themselves. + +# --question-- + +## --text-- + +What does `self-taught` imply when someone says, `I am self-taught in programming`? + +## --answers-- + +They were taught programming by a professional teacher + +### --feedback-- + +`Self-taught` indicates learning independently, not being taught by a professional teacher. + +--- + +They have no knowledge of programming + +### --feedback-- + +`Self-taught` means they have acquired knowledge or skills, not that they lack them. + +--- + +They learned programming on their own, without formal education + +--- + +They are planning to learn programming in the future + +### --feedback-- + +`Self-taught` refers to learning that has already taken place, not future plans. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md new file mode 100644 index 00000000000..daa0ed7fa3b --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md @@ -0,0 +1,27 @@ +--- +id: 657b23f03b449aac2c517089 +title: Task 54 +challengeType: 22 +dashedName: task-54 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `took` is a special case in the simple past tense. It's the past tense of `take`. Unlike regular verbs that follow the standard `-ed` ending for the past tense, `take` changes to `took`. This irregular form is important to know because it's commonly used to talk about actions that happened in the past. Choose the correct past tense form of `take` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she _ a photography class.` + +## --blanks-- + +`took` + +### --feedback-- + +This word is the past tense form of `take`. It's used to talk about actions that happened in the past. + + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md new file mode 100644 index 00000000000..aa093ae629c --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md @@ -0,0 +1,49 @@ +--- +id: 657b242d06512dadaea55056 +title: Task 55 +challengeType: 19 +dashedName: task-55 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The verb `attend` means to be present at an event or place. It's often used regarding schools, colleges, meetings, or events. It implies regular participation or presence at a specific place or event. + +# --question-- + +## --text-- + +If a friend tells you, `I'm going to attend the new art workshop downtown`, what are they planning to do? + +## --answers-- + +They are planning to teach at the art workshop + +### --feedback-- + +`Attend` suggests participating as a learner or member, not as a teacher. + +--- + +They might visit the workshop once + +### --feedback-- + +`Attend` implies regular or scheduled participation, not a one-time visit. + +--- + +They are not interested in art workshops + +### --feedback-- + +Saying they will `attend` indicates interest and intent to participate, not a lack of interest. + +--- + +They plan to regularly participate in the art workshop + +## --video-solution-- + +4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md new file mode 100644 index 00000000000..4dd651ea958 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md @@ -0,0 +1,39 @@ +--- +id: 657b24542024c8af092cd6c4 +title: Task 56 +challengeType: 22 +dashedName: task-56 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple, negative sentences are formed using `did not`, contracted to `didn't`, followed by the base form of the main verb. Listen to the dialogue and fill in the blanks with these words. + +# --fillInTheBlank-- + +## --sentence-- + +`So, you _ _ a regular college or anything like that?` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used to form a negative statement in the past tense. + +--- + +`attend` + +### --feedback-- + +The word means being present at an event or place. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md new file mode 100644 index 00000000000..15b9abab580 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md @@ -0,0 +1,48 @@ +--- +id: 657b24774d8cdab052ffe2a6 +title: Task 57 +challengeType: 22 +dashedName: task-57 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and fill in the blanks correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ study tech at a traditional university. I'm _, and I _ a lot of online courses.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used to form a negative statement in the past tense. + +--- + +`self-taught` + +### --feedback-- + +This word describes acquiring knowledge or skills independently. + +--- + +`took` + +### --feedback-- + +This word is the past tense form of a verb meaning to have completed an action. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md new file mode 100644 index 00000000000..b7c7a773588 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md @@ -0,0 +1,40 @@ +--- +id: 657b24a500800cb1c6945da9 +title: Task 58 +challengeType: 22 +dashedName: task-58 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`No, not at all. I _ at a different job, but I got really interested in programming and tech, so I _ learning in my free time.` + +## --blanks-- + +`was` + +### --feedback-- + +Use `to be` in the past tense. + +--- + +`started` + +### --feedback-- + +Use the verb `start`in the past tense. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md new file mode 100644 index 00000000000..14bccd55f81 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md @@ -0,0 +1,41 @@ +--- +id: 657b2be1b19500c63fc1a467 +title: Task 59 +challengeType: 22 +dashedName: task-59 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`That's impressive! _ you _ learning on your own?` + +## --blanks-- + +`Did` + +### --feedback-- + +Auxiliary verb for questions. This word should be capitalized. + +--- + +`enjoy` + +### --feedback-- + +A verb used to describe you are having fun. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md new file mode 100644 index 00000000000..f55f7908a4f --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md @@ -0,0 +1,38 @@ +--- +id: 657b2c040bb5f6c77fa5df80 +title: Task 60 +challengeType: 22 +dashedName: task-60 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You'll be filling in blanks with words you're already familiar with. + +# --fillInTheBlank-- + +## --sentence-- + +`Absolutely. It _ challenging, but I _ it.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of the verb `to be`, used for singular subjects. + +--- + +`loved` + +### --feedback-- + +This is the past tense form of a verb expressing a strong liking or enjoyment. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md new file mode 100644 index 00000000000..dc14016d020 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md @@ -0,0 +1,38 @@ +--- +id: 657b2d618b8851cc5baf9490 +title: Task 61 +challengeType: 22 +dashedName: task-61 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Listen to the audio and complete the sentence. + + +# --fillInTheBlank-- + +Fill in the blank with correct words. + + +## --sentence-- + +`Yes, I did. I built a few small web applications, just to practice. It _ a great way to apply what I _.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `to be`, used here for a singular subject. + +--- + +`learned` + +### --feedback-- + +This is the past tense form of `learn`, indicating the acquisition of knowledge or skills in the past. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md new file mode 100644 index 00000000000..b2433b84777 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md @@ -0,0 +1,54 @@ +--- +id: 657b2d9cb974dace59024964 +title: Task 62 +challengeType: 19 +dashedName: task-62 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `got` in this context is a versatile term and can have several meanings. In its simplest form, it's the past tense of `get`, which can mean to receive, arrive, become, or reach, depending on the context. In Tom's statement, `got` refers to the progress or level Alice reached through self-study. + +# --question-- + +## --text-- + +What does `got` imply in Tom's statement about Alice's progress? + +## --answers-- + +She received something while studying + +### --feedback-- + +While `got` can mean receiving, in this context it refers to the extent or level of progress. + +--- + +She achieved or reached a significant level in her studies + +--- + +She needs to get more resources for studying + +### --feedback-- + +`Got` here refers to past progress, not a current need for more resources. + +--- + +She didn't make any progress in her studies + +### --feedback-- + +`Got` in this sentence clearly indicates significant progress, not a lack of it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md new file mode 100644 index 00000000000..3ea0498bbbe --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md @@ -0,0 +1,15 @@ +--- +id: 657b2dd7745fdcd03e5160f4 +title: "Dialogue 5: Anna Talks About her Experience" +challengeType: 21 +dashedName: dialogue-5-anna-talks-about-her-experience +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md new file mode 100644 index 00000000000..8a3ff270f80 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -0,0 +1,54 @@ +--- +id: 657b2e0666d4a9d1b851f90e +title: Task 63 +challengeType: 19 +dashedName: task-63 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `tech recruiter` refers to a professional role focused on recruiting candidates for technology-related positions. This role involves understanding the tech industry, identifying qualified candidates, and matching them with suitable tech job openings. + +# --question-- + +## --text-- + +What is Tom asking about when he mentions `Tech recruiter` in his question? + +## --answers-- + +The technical skills needed to be a recruiter + +### --feedback-- + +`Tech recruiter` here refers to the job role, not the specific skills required for the job. + +--- + +The technology used by recruiters + +### --feedback-- + +While technology is involved, `Tech recruiter` refers to the profession itself, not the tools used. + +--- + +The person's career path in becoming a technology recruitment specialist + +--- + +Recruiting people to learn technology + +### --feedback-- + +`Tech recruiter` is about hiring for tech roles, not recruiting people to learn technology. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md new file mode 100644 index 00000000000..340203d5990 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md @@ -0,0 +1,49 @@ +--- +id: 657b2ec6c054efd71e503a27 +title: Task 64 +challengeType: 19 +dashedName: task-64 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `actually` is often used to express a fact or reality, sometimes contrasting with what was thought, believed, or said before. It adds emphasis to a statement to clarify a truth or correct a previous assumption or statement. + +# --question-- + +## --text-- + +What does `actually` imply in a sentence like `I actually prefer working remotely`? + +## --answers-- + +The truth is contrary to what might have been assumed or stated before + +--- + +I never work remotely + +### --feedback-- + +`Actually` in this context is used to express a real preference. + +--- + +I always work in an office setting + +### --feedback-- + +Using `actually` here is meant to reveal a preference for remote work, not office work. + +--- + +I don't have any work preferences + +### --feedback-- + +`Actually` suggests a specific preference, contradicting the idea of having none. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md new file mode 100644 index 00000000000..51c4c579915 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md @@ -0,0 +1,33 @@ +--- +id: 657b2eeb31e435d89ecce6f3 +title: Task 65 +challengeType: 22 +dashedName: task-65 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn about `actual` in this task. It's a describing word (adjective). It means what something is really like. For example, `the actual color` means the real color. You often add `-ly` to an adjective to form an adverb. This rule helps change many describing words into words that tell people how something is said or done. Here, you add `-ly` to `actual` and it's the adverb `actually`. + +# --fillInTheBlank-- + +## --sentence-- + +`The _ size of the room was quite small. She _ likes small cozy spaces.` + +## --blanks-- + +`actual` + +### --feedback-- + +This word describes the real size of the room. + +--- + +`actually` + +### --feedback-- + +This word is used to say she really likes small spaces. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md new file mode 100644 index 00000000000..101e280ee29 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md @@ -0,0 +1,54 @@ +--- +id: 657b2f0b3bcfe7d9f4151854 +title: Task 66 +challengeType: 19 +dashedName: task-66 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The terms `therapist` and `counselor` refer to professionals who provide guidance and support to people dealing with emotional, psychological, or mental health issues. Both play a vital role in helping individuals work through personal challenges. In Anna's statement, these terms describe the career paths she was considering. + +# --question-- + +## --text-- + +In Anna's statement, what does `therapist or counselor` refer to? + +## --answers-- + +Jobs in the technology industry + +### --feedback-- + +`Therapist or counselor` refers to mental health and emotional support roles, not technology-related jobs. + +--- + +Career paths in mental health and emotional support + +--- + +Educational courses she wanted to take + +### --feedback-- + +While these roles require education, the terms directly refer to the job roles, not the courses. + +--- + +Hobbies that she was interested in + +### --feedback-- + +`Therapist or counselor` are professional career paths, not hobbies. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md new file mode 100644 index 00000000000..40c9c66ce5e --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md @@ -0,0 +1,49 @@ +--- +id: 657b2f3bf7a2cbdb58d959d5 +title: Task 67 +challengeType: 19 +dashedName: task-67 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `last` is used to refer to the most recent past occurrence of a period or event. For example, `last year` means the year before this one, `last month` refers to the month before the current one, and `last week` points to the week before this week. Understanding time expressions like `last year`, `last month`, `last week`, or `last day` helps in talking about events that happened in the recent past. + +# --question-- + +## --text-- + +When someone mentions in a discussion about changes, `I switched careers last year.` What does `last year` indicate about the timing of their career change? + +## --answers-- + +They are planning to switch careers in the near future + +### --feedback-- + +This suggests a future action, but `last year` indicates the change already occurred in the past. + +--- + +They have been considering a career change for a long time + +### --feedback-- + +Though they might have considered it for a long time, `last year` specifically identifies when the change took place. + +--- + +The career change is happening currently + +### --feedback-- + +`Last year` refers to a completed action in the past, not something happening in the present. + +--- + +The career switch happened in the previous year + +## --video-solution-- + +4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md new file mode 100644 index 00000000000..796bb1e6c39 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md @@ -0,0 +1,49 @@ +--- +id: 657b2f6cb66826dcbac08094 +title: Task 68 +challengeType: 19 +dashedName: task-68 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Organizational psychology` is a field of psychology that studies how people interact within groups, particularly in workplace settings. It focuses on understanding workplace dynamics, employee behavior, and organizational structure to improve the work environment and increase productivity. + +# --question-- + +## --text-- + +What does `organizational psychology` typically involve? + +## --answers-- + +It deals with organizing office spaces + +### --feedback-- + +While organization is a part of the field, `organizational psychology` primarily focuses on people and behavior, not physical space. + +--- + +It's about the psychology of organizing events + +### --feedback-- + +`Organizational psychology` is not specifically about event planning but rather about behavior in workplace groups. + +--- + +It's the study of how people behave and interact in workplace groups + +--- + +It focuses on individual psychological treatment + +### --feedback-- + +`Organizational psychology` looks at group dynamics in workplaces, not individual therapy. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md new file mode 100644 index 00000000000..e185bc5a457 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md @@ -0,0 +1,38 @@ +--- +id: 657b2fa89ddc20de629ca21f +title: Task 69 +challengeType: 22 +dashedName: task-69 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will fill in the blanks with words you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ studied psychology in college. My plan was to become a _ or counselor.` + +## --blanks-- + +`actually` + +### --feedback-- + +This word is used to emphasize the accuracy or truth of a statement. + +--- + +`therapist` + +### --feedback-- + +This word refers to a professional role focused on mental health and emotional support. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md new file mode 100644 index 00000000000..ecc1ceb6792 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md @@ -0,0 +1,46 @@ +--- +id: 657b2fc9c0f96bdfddfce4d9 +title: Task 70 +challengeType: 22 +dashedName: task-70 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this exercise, you will explore the phrase `pique one's interest`. This phrase means to stimulate or arouse someone's curiosity or interest in something. It's often used when something catches your attention and makes you want to learn more about it. Alongside this phrase, you will fill in the blanks with familiar words that you've already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ a course in organizational _, and it _ my interest in the workplace and employee dynamics.` + +## --blanks-- + +`took` + +### --feedback-- + +This word refers to the action of participating in or completing a course. + +--- + +`psychology` + +### --feedback-- + +This word describes the study of the mind and behavior, particularly in a workplace setting in this context. + +--- + +`piqued` + +### --feedback-- + +This word means to arouse or stimulate interest or curiosity. You should correctly use its simple past tense. diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md new file mode 100644 index 00000000000..acc29551124 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md @@ -0,0 +1,49 @@ +--- +id: 657b2fea728c2be14a8a98c4 +title: Task 71 +challengeType: 19 +dashedName: task-71 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Employee dynamics` refers to the way employees interact and work together in a workplace. It's an example of using one noun (`employee`) to describe another noun (`dynamics`). This type of descriptive noun helps give more specific information about the subject. Other examples include `race car`, where `race` describes the type of car, and `garden hose`, where `garden` describes the type of hose. + +# --question-- + +## --text-- + +What does `employee dynamics` refer to in a workplace context? + +## --answers-- + +The dynamics of machines used by employees + +### --feedback-- + +`Employee dynamics` specifically refers to interactions and relationships among employees, not machinery. + +--- + +The interactions and relationships among employees + +--- + +The employment status of workers + +### --feedback-- + +`Employee dynamics` is about how employees work together, not their employment status. + +--- + +The dynamics of hiring new employees + +### --feedback-- + +`Employee dynamics` refers to existing employee interactions, not the hiring process. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md new file mode 100644 index 00000000000..bcbb031c907 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md @@ -0,0 +1,54 @@ +--- +id: 657b3026ff79fbe2dda6cb39 +title: Task 72 +challengeType: 19 +dashedName: task-72 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `That's a cool twist` is often used to express that something is interestingly unexpected or surprisingly different. The word `twist` here refers to a change or development in a situation or story that is unusual or unexpected. `Cool` in this context means it's positively received. + +# --question-- + +## --text-- + +What is Tom expressing when he says `That's a cool twist`? + +## --answers-- + +He finds the unexpected change or development interesting + +--- + +He thinks the situation is confusing + +### --feedback-- + +While a `twist` can be surprising, Tom's use of `cool` suggests he finds it interesting rather than confusing. + +--- + +He is unhappy with the new development + +### --feedback-- + +`Cool twist` usually indicates a positive reaction, not dissatisfaction. + +--- + +He expected the development all along + +### --feedback-- + +The term `twist` implies that the development was unexpected. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md new file mode 100644 index 00000000000..6a30241c1a2 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md @@ -0,0 +1,55 @@ +--- +id: 657b306fe94f29e4b4aa9105 +title: Task 73 +challengeType: 19 +dashedName: task-73 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `not right away` is used to indicate that something didn't happen immediately or at the earliest opportunity. It suggests that there was a delay or a period before the action or change took place. This phrase helps to set the timeline of events or actions. + +# --question-- + +## --text-- + +What does Anna mean when she says `not right away`? + +## --answers-- + +She immediately started working in HR at a tech company + +### --feedback-- + +`Not right away` indicates a delay or period before taking action, not immediate action. + +--- + +She started working in a different role before moving to HR at a tech company + +--- + +She has never worked in HR + +### --feedback-- + +The statement implies she did work in HR, just not immediately. + +--- + +She was always focused on training and development + +### --feedback-- + +`Not right away` suggests a progression or change over time, not a constant focus. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md new file mode 100644 index 00000000000..b21bdf5b3e6 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md @@ -0,0 +1,49 @@ +--- +id: 657b30ac03b523e6640deaf1 +title: Task 74 +challengeType: 22 +dashedName: task-74 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will practice filling in the blanks with words that you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`Tom: That's a cool _. _ you immediately start working as a tech recruiter after college? Anna: Not right away. I _ in a general HR role at a non-tech company first, focusing on training and development.` + + +## --blanks-- + +`twist` + +### --feedback-- + +It refers to an interesting or unexpected change in a situation. + +--- + +`Did` + +### --feedback-- + +The auxiliary verb used to form a question in the past simple tense. The first letter should be capitalized. + +--- + +`worked` + +### --feedback-- + +Past tense form of `work`, indicating an action completed in the past. + diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md new file mode 100644 index 00000000000..f843ccf34aa --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md @@ -0,0 +1,54 @@ +--- +id: 657b30e1b9f035e7e656fd01 +title: Task 75 +challengeType: 19 +dashedName: task-75 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `employee` is someone who works for a company or a person. When you talk about `employees' well-being`, you are talking about the health and happiness of all the people who work there. The `'s` after `employees` means that the well-being belongs to the employees. It's like `the cat's toy` (one cat) and `the cats' toy` (more than one cat). + +# --question-- + +## --text-- + +What does Anna mean by saying `employees' well-being.` + +## --answers-- + +It's about the health of the company + +### --feedback-- + +`Employees'` means the people who work, not the company. + +--- + +One worker's health and happiness + +### --feedback-- + +`Employees'` with an `'s` shows it's about all workers, not just one. + +--- + +Where the employees work + +### --feedback-- + +`Well-being` is about health and happiness, not a place. + +--- + +The health and happiness of all the workers + +## --video-solution-- + +4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md new file mode 100644 index 00000000000..8e17e595d98 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md @@ -0,0 +1,54 @@ +--- +id: 657b315533e4edeba65111b8 +title: Task 76 +challengeType: 19 +dashedName: task-76 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +A `psychologist` is a professional who studies the human mind and behavior. They often help people understand and manage their emotions, behaviors, and mental processes. In Anna's statement, she refers to becoming a psychologist, indicating her professional choice related to studying and working with psychology. + +# --question-- + +## --text-- + +What does `psychologist` mean in Anna's statement? + +## --answers-- + +It means someone who studies physics + +### --feedback-- + +`Psychologist` refers to a person who studies the mind and behavior, not physics. + +--- + +It's a type of medical doctor + +### --feedback-- + +While related to health, a psychologist is different from a medical doctor and focuses on mental processes. + +--- + +A professional who studies and works with the human mind and behavior + +--- + +A teacher at a school + +### --feedback-- + +A psychologist may teach, but their primary role is studying and working with the mind and behavior, not general teaching. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md new file mode 100644 index 00000000000..40eee7185d9 --- /dev/null +++ b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md @@ -0,0 +1,15 @@ +--- +id: 657b46c9be150f577f5a1086 +title: "Dialogue 2: Another Job Interview" +challengeType: 21 +dashedName: dialogue-2-another-job-interview +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md deleted file mode 100644 index 0a0f3472141..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0feadb1dd77f6cda623f -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md deleted file mode 100644 index e1563f9b06b..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0f39ee87517d584d81f9 -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md deleted file mode 100644 index 7aa1e30008d..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5a46ffb500e3f2ce47b -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -*** - -Giving a job description. - -*** - -Making a statement based on her assumption. - -*** - -Expressing a possibility. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md deleted file mode 100644 index 2ee50fe5647..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5e46ffb500e3f2ce47e -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md b/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md deleted file mode 100644 index adc4b41f091..00000000000 --- a/curriculum/challenges/japanese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd6071d697d0aab7833b6 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md deleted file mode 100644 index 118572ff511..00000000000 --- a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: bd7158d8c242eddfaeb5bd13 -title: Criar uma página de portfólio pessoal -challengeType: 14 -forumTopicId: 301143 -dashedName: build-a-personal-portfolio-webpage ---- - -# --description-- - -**Objetivo:** criar uma aplicação que funcione de modo semelhante a https://personal-portfolio.freecodecamp.rocks - -**Histórias de usuário:** - -1. O portfólio deve ter uma seção de boas-vindas com o `id` `welcome-section` -1. A seção de boas-vindas deve ter um elemento `h1` que contenha texto -1. O portfólio deve ter uma seção de projetos com o `id` `projects` -1. A seção de projetos deve conter pelo menos um elemento com a `class` `project-tile` que contenha um projeto -1. A seção de projetos deve conter pelo menos um link para um projeto -1. O portfólio precisa ter uma barra de navegação com o id `navbar` -1. A barra de navegação deve conter pelo menos um link clicável que navegue para seções diferentes da página -1. O portfólio deve ter um link com o id `profile-link`, que abra seu perfil no GitHub ou no freeCodeCamp em uma nova aba -1. O portfólio deve ter pelo menos uma media query -1. A altura da seção de boas-vindas deve ser igual à altura da viewport -1. A barra de navegação deve estar sempre na parte superior da viewport - -Atenda às histórias de usuário e passe em todos os testes abaixo para concluir este projeto. Dê ao projeto o seu próprio estilo pessoal. Boa programação! - -**Observação:** não se esqueça de adicionar `` em seu HTML para vincular sua folha de estilo e aplicar seu CSS - -# --hints-- - -O portfólio deve ter uma seção de boas-vindas com o `id` `welcome-section`. - -```js -const el = document.getElementById('welcome-section') -assert(!!el); -``` - -O elemento `#welcome-section` deve conter um elemento `h1`. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1').length, - 0, - 'Welcome section should contain an h1 element ' -); -``` - -Você não deve ter elementos `h1` vazios dentro de `#welcome-section`. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, - 0, - 'h1 element in welcome section should contain your name or camper ' + - 'name ' -); -``` - -Você deve ter uma seção de projetos com o `id` `projects`. - -```js -const el = document.getElementById('projects') -assert(!!el); -``` - -O portfólio deve conter pelo menos um elemento com a classe `project-tile`. - -```js -assert.isAbove( - document.querySelectorAll('#projects .project-tile').length, - 0 -); -``` - -O elemento `#projects` deve conter pelo menos um elemento `a`. - -```js -assert.isAbove(document.querySelectorAll('#projects a').length, 0); -``` - -O portfólio precisa ter uma barra de navegação com o `id` `navbar`. - -```js -const el = document.getElementById('navbar'); -assert(!!el); -``` - -O elemento `#navbar` deve conter pelo menos um elemento `a`, cujo atributo `href` comece com `#`. - -```js -const links = [...document.querySelectorAll('#navbar a')].filter( - (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#' -); - -assert.isAbove( - links.length, - 0, - 'Navbar should contain an anchor link ' -); -``` - -O portfólio deve ter um elemento `a` com o `id` `profile-link`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.tagName === 'A') -``` - -O elemento `#profile-link` deve ter um atributo `target` `_blank`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.target === '_blank') -``` - -O portfólio deve usar pelo menos uma media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -O elemento `#navbar` deve estar sempre na parte superior da viewport. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const navbar = document.getElementById('navbar'); - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - "Navbar's parent should be body and it should be at the top of " + - 'the viewport ' - ); - - window.scroll(0, 500); - - await timeout(1); - - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - 'Navbar should be at the top of the viewport even after ' + - 'scrolling ' - ); - window.scroll(0, 0); -})(); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Personal Portfolio - - - - - -
                                                                    -
                                                                    -
                                                                    -

                                                                    It's me!

                                                                    - -

                                                                    Naomi Carrigan

                                                                    -

                                                                    Welcome to my portfolio page!

                                                                    -
                                                                    -
                                                                    -

                                                                    Projects

                                                                    -

                                                                    Here's what I've worked on!

                                                                    -

                                                                    - - - - -

                                                                    -
                                                                    -

                                                                    Contact me!

                                                                    -

                                                                    Use the links below to get in touch.

                                                                    -

                                                                    FreeCodeCamp.org | GitHub | Facebook | LinkedIn -

                                                                    - - - -``` - -```css -nav{ - position: fixed; - width: 100%; - text-align: right; - font-size: 24pt; - top: 0%; - right: 5px; - background-color: #000000; - color: #ffffff; -} -@media (max-width: 500px){ - nav{ - display: none; - } -} -a{ - color: #ffffff; -} -main{ - text-align: center; - background-color: black; - font-family:Pacifico -} -h1{ - font-size: 48pt; -} -h2{ - font-size: 24pt; -} -p{ - font-size: 12pt; -} -#welcome-section{ - background-color:#251a4a; - color: #FFFFFF; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#projects{ - background-color: #060a9c; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#contact{ - background-color: #03300b; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md deleted file mode 100644 index e8604f90d81..00000000000 --- a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: Criar uma landing page para um produto -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**Objetivo:** criar uma aplicação que funcione de modo semelhante a https://product-landing-page.freecodecamp.rocks - -**Histórias de usuário:** - -1. A página inicial do produto deve ter um elemento `header` com um `id="header"` correspondente -1. Você pode ver uma imagem dentro do elemento `header` com um `id="header-img"` correspondente (um logotipo seria uma boa imagem aqui) -1. Dentro do elemento `#header`, deve haver um elemento `nav` com um `id="nav-bar"` correspondente -1. Deve haver pelo menos três elementos clicáveis dentro do elemento `nav` e cada um deles deve ter a classe `nav-link` -1. Ao clicar em um botão com a classe `.nav-link` no elemento `nav`, o usuário deve ser levado para a seção correspondente na página inicial -1. Você pode assistir a um vídeo de produto integrado com `id="video"` -1. A página inicial do produto deve ter um elemento `form` com um `id="form"` correspondente -1. Dentro do formulário, deve haver um `input` com `id="email"`, onde deve ser possível inserir um endereço de e-mail -1. O campo de entrada `#email` deve ter um placeholder (texto ilustrativo) para que o usuário saiba para que serve o campo -1. O campo de entrada `#email` deve usar a validação do próprio HTML5 para confirmar que o texto inserido é um endereço de e-mail -1. Dentro do formulário, deve haver um `input` do tipo botão de envio com o `id="submit"` correspondente -1. Ao clicar no elemento `#submit`, o e-mail deve ser enviado para uma página estática (use este URL fictício: `https://www.freecodecamp.com/email-submit`) -1. A barra de navegação deve estar sempre na parte superior da viewport -1. A página inicial deve ter pelo menos uma media query -1. A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez - -Atenda às histórias de usuário e passe em todos os testes abaixo para concluir este projeto. Dê ao projeto o seu próprio estilo pessoal. Boa programação! - -**Observação:** não se esqueça de adicionar `` em seu HTML para vincular sua folha de estilo e aplicar seu CSS - -# --hints-- - -Você deve ter um elemento `header` com o `id` `header`. - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -Você deve ter um elemento `img` com o `id` `header-img`. - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -O elemento `#header-img` deve estar aninhado dentro de `#header`. - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -O elemento `#header-img` deve ter um atributo `src`. - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -O `src` de `#header-img` deve ser um URL válido (que comece por `http`). - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -Você deve ter um elemento `nav` com o `id` `nav-bar`. - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -O elemento `#nav-bar` deve estar aninhado dentro de `#header`. - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -Você deve ter pelo menos 3 elementos `.nav-link` dentro de `#nav-bar`. - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -Cada elemento `.nav-link` deve ter um atributo `href`. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -Cada elemento `.nav-link` deve vincular a um elemento correspondente na página inicial (ter um `href` com o valor do id de outro elemento, como `#footer`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -Você deve ter um elemento `video` ou um elemento `iframe` com o `id` `video`. - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -O elemento `#video` deve ter um atributo `src`. - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -Você deve ter um elemento `form` com o `id` `form`. - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -Você deve ter um elemento `input` com o `id` de `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -O elemento `#email` deve estar aninhado dentro de `#form`. - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -O elemento `#email` deve ter o atributo `placeholder` e um texto ilustrativo. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -O elemento `#email` deve usar a validação de HTML5 definindo seu `type` como `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -Você deve ter um elemento `input` com o `id` `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -O elemento `#submit` deve estar aninhado dentro de `#form`. - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -O elemento `#submit` deve ter o atributo `type` com o valor `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Seu `#form` deve ter um atributo `action` definido como `https://www.freecodecamp.com/email-submit`. - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -O elemento `#email` deve ter um atributo `name` definido como `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -O elemento `#nav-bar` deve estar sempre na parte superior da viewport. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const header = document.getElementById('header'); - const headerChildren = header.children; - const navbarCandidates = [header, ...headerChildren]; - - // Return smallest top position of all navbar candidates - const getNavbarPosition = (candidates = []) => { - return candidates.reduce( - (min, candidate) => - Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)), - Infinity - ); - }; - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the viewport ' - ); - - window.scroll(0, 500); - await timeout(1); - - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the ' + - 'viewport even after scrolling ' - ); - - window.scroll(0, 0); -})(); -``` - -A página inicial deve ter pelo menos uma media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez. - -```js -const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display) -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media') -const usesFlex = cssRules.find(rule => hasFlex(rule)) -const usesFlexMedia = mediaRules.find(mediaRule => { - return [...mediaRule.cssRules].find(rule => hasFlex(rule)) -}) -assert(usesFlex || usesFlexMedia) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Product Landing Page - - - -
                                                                    -

                                                                    - Pokemon Daycare Service -

                                                                    -
                                                                    -

                                                                    What we offer

                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    Guaranteed friendly and loving staff!
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - Comfortable environment for Pokemon to explore and play! -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - Multiple membership plans to fit your lifestyle! -
                                                                    -
                                                                    -
                                                                    -
                                                                    -

                                                                    Check us out!

                                                                    - A sneak peek into our facility: -
                                                                    - -
                                                                    -
                                                                    -

                                                                    Membership Plans

                                                                    -
                                                                    -
                                                                    - Basic Membership
                                                                    -
                                                                      -
                                                                    • One Pokemon
                                                                      • -
                                                                    • Food and berries provided
                                                                      • -
                                                                    - $9.99/month -
                                                                    -
                                                                    - Silver Membership
                                                                    -
                                                                      -
                                                                    • Up to Three Pokemon
                                                                      • -
                                                                    • Food and berries provided
                                                                      • -
                                                                    • Grooming and accessories included
                                                                      • -
                                                                    - $19.99/month -
                                                                    -
                                                                    - Gold Membership
                                                                    -
                                                                      -
                                                                    • Up to six Pokemon!
                                                                      • -
                                                                    • Food and berries provided
                                                                      • -
                                                                    • Grooming and accessories included
                                                                      • -
                                                                    • Personal training for each Pokemon
                                                                      • -
                                                                    • Breeding and egg hatching
                                                                      • -
                                                                    - $29.99/month -
                                                                    -
                                                                    -
                                                                    -
                                                                    -

                                                                    Sign up for our newsletter!

                                                                    - - -
                                                                    - -
                                                                    - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md deleted file mode 100644 index bf5644018e0..00000000000 --- a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: Criar um formulário de pesquisa -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**Objetivo:** criar uma aplicação que funcione de modo semelhante a https://survey-form.freecodecamp.rocks - -**Histórias de usuário:** - -1. Você deve ter um título de página em um elemento `h1` com o `id` `title` -1. Você deve ter uma breve explicação em um elemento `p` com o `id` `description` -1. Você deve ter um elemento `form` com o `id` `survey-form` -1. Dentro do elemento do formulário, deve ser **obrigatório** inserir seu nome em um campo `input` que tenha um `id` `name` e um `type` `text` -1. Dentro do elemento do formulário, deve ser **obrigatório** inserir seu e-mail em um campo `input` que tenha um `id` `email` -1. Se for informado um e-mail que não esteja formatado corretamente, um erro de validação HTML5 deve ser mostrado -1. Dentro do formulário, você pode inserir um número em um campo `input` que tenha o `id` `number` -1. A entrada de número não deve aceitar não-números, impedindo que você os digite ou mostrando um erro de validação do HTML5 (dependendo do seu navegador). -1. Se forem inseridos números fora do intervalo do campo de entrada do número, intervalo esse definido pelos atributos `min` e `max`, um erro de validação de HTML5 deve ser mostrado -1. Para os campos de entrada (inputs) name, email e number dentro do formulário, deve haver elementos `label` correspondentes que descrevam o propósito de cada campo com os seguintes ids: `id="name-label"`, `id="email-label"` e `id="number-label"` -1. Para os campos de entrada name, email e number, deve haver um texto placeholder (texto ilustrativo) que forneça uma descrição ou instruções para cada campo -1. Dentro do elemento do formulário, você deve ter um elemento de menu suspenso `select` com um `id` `dropdown` e pelo menos duas opções para escolher -1. Dentro do elemento do formulário, você pode selecionar uma opção de um grupo de pelo menos dois botões de opção (radio) que serão agrupados usando o atributo `name` -1. Dentro do elemento de formulário, deve ser possível selecionar vários campos de uma série de caixas de seleção (checkboxes). Cada um desses campos deve ter um atributo `value` -1. Dentro do elemento de formulário, você receberá uma `textarea` para comentários adicionais -1. Dentro do elemento de formulário, você receberá um botão com o `id` `submit` para enviar as informações - -Atenda às histórias de usuário e passe em todos os testes abaixo para concluir este projeto. Dê ao projeto o seu próprio estilo pessoal. Boa programação! - -**Observação:** não se esqueça de adicionar `` em seu HTML para vincular sua folha de estilo e aplicar seu CSS - -# --hints-- - -Você deve ter um elemento `h1` com o `id` `title`. - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -O elemento `#title` não deve estar vazio. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -Você deve ter um elemento `p` com o `id` `description`. - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -O elemento `#description` não deve estar vazio. - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -Você deve ter um elemento `form` com o `id` `survey-form`. - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -Você deve ter um elemento `input` com o `id` `name`. - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -O elemento `#name` deve ter o atributo `type` com o valor `text`. - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -O elemento `#name` deve exigir a entrada. - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -O elemento `#name` deve ser um descendente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -Você deve ter um elemento `input` com o `id` de `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -O elemento `#email` deve ter o atributo `type` com o valor `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -O elemento `#email` deve exigir a entrada. - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -O elemento `#email` deve ser um descendente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -Você deve ter um elemento `input` com o `id` `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -O elemento `#number` deve ser um descendente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -O elemento `#number` deve ter o atributo `type` com o valor `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -O elemento `#number` deve ter um atributo `min` com um valor numérico. - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -O elemento `#number` deve ter um atributo `max` com um valor numérico. - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -Você deve ter um elemento `label` com o `id` `name-label`. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Você deve ter um elemento `label` com o `id` `email-label`. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Você deve ter um elemento `label` com o `id` `number-label`. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -`#name-label` deve conter um texto que descreva a entrada. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -`#email-label` deve conter um texto que descreva a entrada. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -`#number-label` deve conter um texto que descreva a entrada. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -O elemento `#name-label` deve ser um descendente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -O elemento `#email-label` deve ser um descendente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -O elemento `#number-label` deve ser um descendente de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -O elemento `#name` deve ter o atributo `placeholder` e um valor. - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -O elemento `#email` deve ter o atributo `placeholder` e um valor. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -O elemento `#number` deve ter o atributo `placeholder` e um valor. - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Você deve ter um campo `select` com o `id` `dropdown`. - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -O elemento `#dropdown` deve ter pelo menos dois elementos selecionáveis (não desativados) `option`. - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -O elemento `#dropdown` deve estar aninhado dentro de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -Você deve ter pelo menos dois elementos `input` com `type` `radio` (botões de opção). - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -Você deve ter pelo menos dois botões de opção aninhados dentro de `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -Todos os seus botões de opção devem ter um atributo `value` e um valor. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -Todos os seus botões de opção devem ter um atributo `name` e um valor. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -Todos os grupos de botões de opção devem ter pelo menos 2 botões de opção. - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -Você deve ter pelo menos dois elementos `input` com `type` `checkbox` (caixas de seleção) aninhados dentro de `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -Todas as caixas de seleção dentro de `#survey-form` devem ter um atributo `value` e um valor. - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -Você deve ter pelo menos um elemento `textarea` aninhado dentro de `#survey-form`. - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -Você deve ter um elemento `input` ou um elemento `button` com o `id` `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -O elemento `#submit` deve ter o atributo `type` com o valor `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -O elemento `#submit` deve estar aninhado dentro de `#survey-form`. - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Survey Form - - -

                                                                    Survey Form

                                                                    -

                                                                    The card below was built as a sample survey form for freeCodeCamp.

                                                                    -
                                                                    -

                                                                    Join the Togepi Fan Club!

                                                                    -

                                                                    - Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -

                                                                    -
                                                                    - - - - -

                                                                    Who is your favourite Pokemon?

                                                                    - - - -

                                                                    Which communications do you want to receive?

                                                                    - - - -

                                                                    Any other information you would like to share?

                                                                    - -

                                                                    - Please note: This form is a proof of concept. Submitting the form - will not actually transmit your data. -

                                                                    - -
                                                                    -
                                                                    - - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md deleted file mode 100644 index 9d1d312f3d9..00000000000 --- a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: Criar uma página de documentação técnica -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**Objetivo:** criar uma aplicação que funcione de modo semelhante a https://technical-documentation-page.freecodecamp.rocks - -**Histórias de usuário:** - -1. Deve haver um elemento `main` com um `id="main-doc"` correspondente, que contenha o conteúdo principal da página (documentação técnica) -1. Dentro do elemento `#main-doc`, deve haver vários elementos `section`, cada um com a classe `main-section`. Deve haver, pelo menos, cinco -1. O primeiro elemento de cada `.main-section` deve ser um elemento `header` que contenha o texto que descreve o tópico daquela seção. -1. Cada elemento `section` com a classe `main-section` também deve ter um `id` que corresponda ao texto de cada `header` contido dentro dela. Os espaços existentes devem ser substituídos por sublinhados (por exemplo, a seção que contém o cabeçalho "JavaScript e Java" deve ter um `id="JavaScript_and_Java"`) -1. Os elementos `.main-section` devem conter, juntos, pelo menos dez elementos `p` no total (não 10 para cada elemento) -1. Os elementos `.main-section` devem conter, juntos, pelo menos cinco elementos `code` no total (não 5 para cada elemento) -1. Os elementos `.main-section` devem conter, juntos, pelo menos cinco elementos `li` no total (não 5 para cada elemento) -1. Deve haver um elemento `nav` com um `id="navbar"` correspondente -1. O elemento da barra de navegação (navbar) deve conter um elemento `header` que contenha o texto que descreve o tópico da documentação técnica -1. Além disso, a barra de navegação deve conter elementos de âncora (`a`) com a classe `nav-link`. Deve haver um para cada elemento com a classe `main-section` -1. O elemento `header` em `#navbar` deve vir antes de qualquer elemento de link (`a`) na barra de navegação -1. Cada elemento com a classe `nav-link` deve conter um texto que corresponda ao texto do `header` dentro de cada `section` (exemplo: se você tem uma seção/cabeçalho "Olá mundo", sua barra de navegação deve ter um elemento que contenha o texto "Olá mundo") -1. Ao clicar em um elemento da barra de navegação, a página deve navegar para a seção correspondente do elemento `#main-doc` (exemplo: ao clicar em um elemento `.nav-link` que contenha o texto "Olá mundo", a página deve navegar para o elemento `section` que tenha esse id e contenha o cabeçalho correspondente) -1. Em dispositivos com tamanho regular (laptops, desktops), o elemento com `id="navbar"` deve ser mostrado no lado esquerdo da tela e deve sempre estar visível para o usuário -1. A documentação técnica deve utilizar pelo menos uma media query - -Atenda às histórias de usuário e passe em todos os testes abaixo para concluir este projeto. Dê ao projeto o seu próprio estilo pessoal. Boa programação! - -**Observação:** não se esqueça de adicionar `` em seu HTML para vincular sua folha de estilo e aplicar seu CSS - -# --hints-- - -Você deve ter um elemento `main` com o `id` `main-doc`. - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -Você deve ter pelo menos cinco elementos `section` com a classe `main-section`. - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -Todos os elementos com a classe `.main-section` devem ser elementos `section`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -Você deve ter pelo menos cinco elementos `.main-section` aninhados dentro de `#main-doc`. - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -O primeiro filho de `.main-section` deve ser um elemento `header`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -Nenhum dos elementos `header` deve estar vazio. - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -Todos os elementos com a classe `.main-section` devem ter um `id`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -Cada `.main-section` deve ter um `id` que corresponda ao texto de seu primeiro filho, e todos os espaços no texto do filho devem ser substituídos por sublinhados (`_`) no id. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -Você precisa ter, pelo menos, 10 elementos `p` (ao todo) dentro dos elementos `.main-section`. - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -Você precisa ter, pelo menos, cinco elementos `code` (ao todo) dentro dos elementos `.main-section`. - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -Você precisa ter, pelo menos, cinco elementos `li` dentro dos elementos `.main-section`. - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -Você deve ter um elemento `nav` com o `id` `navbar`. - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -O elemento `#navbar` deve ter exatamente um elemento `header` dentro dele. - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -Você deve ter pelo menos um elemento `a` com a classe `nav-link`. - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -Todos os elementos com a classe `.nav-link` devem ser elementos âncora (`a`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -Todos os elementos com a classe `.nav-link` devem estar dentro de `#navbar`. - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -Você deve ter o mesmo número de elementos `.nav-link` e de elementos `.main-section`. - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -O elemento `header` em `#navbar` deve vir antes de qualquer elemento de link (`a`) que também esteja em `#navbar`. - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -Cada elemento com a classe `.nav-link` deve conter um texto que corresponda ao texto do `header` da `section` relacionada (por exemplo: se você tem uma seção/cabeçalho "Olá mundo", sua `#navbar` deve ter um elemento `.nav-link` que contenha o texto "Olá mundo"). - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -Cada `.nav-link` deve ter um atributo `href` que vincule à sua `.main-section` correspondente (por exemplo: se você clicar em um elemento `.nav-link` que contenha o texto "Olá mundo", a página navegará para o elemento `section` com aquele id). - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -O elemento `#navbar` deve estar sempre na parte superior da viewport. - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -O projeto de documentação técnica deve utilizar pelo menos uma media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Technical Documentation Page - - - -
                                                                    -
                                                                    -
                                                                    Introduction
                                                                    -

                                                                    - Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -

                                                                    -
                                                                    -
                                                                    -
                                                                    Definitions
                                                                    -

                                                                    - To start with, let's define some of the more common terms used in - algebra: -

                                                                    -
                                                                      -
                                                                    • - Variable: A variable is an unknown value, usually represented - by a letter. -
                                                                      • -
                                                                    • - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. -
                                                                      • -
                                                                    • - Equation: An equation is a mathematical argument in which two - expressions result in the same value. -
                                                                      • -
                                                                    -
                                                                    -
                                                                    -
                                                                    Examples
                                                                    -

                                                                    - Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.

                                                                    - x + 5 = 12

                                                                    - In this above example, we have: -

                                                                    -
                                                                      -
                                                                    • Variable: The variable in the example is "x".
                                                                      • -
                                                                    • - Expression: There are two expressions in this example. They - are "x+5" and "12". -
                                                                      • -
                                                                    • - Equation: The entire example, "x+5=12", is an equation. -
                                                                      • -
                                                                    -
                                                                    -
                                                                    -
                                                                    Solving Equations
                                                                    -

                                                                    - The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".

                                                                    - x + 5 = 12

                                                                    - In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
                                                                    For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.

                                                                    - x + 5 - 5 = 12 - 5

                                                                    - The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:

                                                                    - x = 7

                                                                    - We now have our solution to this equation! -

                                                                    -
                                                                    -
                                                                    -
                                                                    Solving Equations II
                                                                    -

                                                                    - Let us look at a slightly more challenging equation.

                                                                    - 3x + 4 = 13

                                                                    - Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:

                                                                    - 3x = 9

                                                                    - "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.

                                                                    - x = 3

                                                                    - And now we have our solution! -

                                                                    -
                                                                    -
                                                                    -
                                                                    Solving Equations III
                                                                    -

                                                                    - Now we are getting in to more complex operations. Here is another - equation for us to look at:

                                                                    - x^2 - 8 = 8

                                                                    - Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.

                                                                    - x^2 = 16

                                                                    - But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
                                                                    - An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -

                                                                    - x = √9

                                                                    - Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:

                                                                    - x = 3 -

                                                                    -
                                                                    -
                                                                    -
                                                                    System of Equations
                                                                    -

                                                                    - As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:

                                                                    - y = 3x

                                                                    - An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
                                                                    - Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:

                                                                    - y = 3x | y - 6 = x - A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:

                                                                    - 3x - 6 = x

                                                                    - Now we can solve for "x"! We start by adding 6 to each side.

                                                                    - 3x = x + 6

                                                                    - We still need to get "x" by itself, so we subtract "x" from both sides - and get:

                                                                    - 2x = 6

                                                                    - If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!

                                                                    - x = 3

                                                                    - However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:

                                                                    - y = 3x

                                                                    - We have a value for "x" now, so let's see what happens if we put that - value in.

                                                                    - y = 3*3

                                                                    - We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:

                                                                    - x = 3 and y = 9

                                                                    -

                                                                    -
                                                                    -
                                                                    -
                                                                    Try it Yourself!
                                                                    -

                                                                    Coming Soon!

                                                                    -

                                                                    Keep an eye out for new additions!

                                                                    -
                                                                    -
                                                                    -
                                                                    More Information
                                                                    -

                                                                    Check out the following links for more information!

                                                                    - -
                                                                    -
                                                                    - - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md deleted file mode 100644 index dca999f511a..00000000000 --- a/curriculum/challenges/portuguese/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: Criar uma página de homenagem -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**Objetivo:** criar uma aplicação que funcione de modo semelhante a https://tribute-page.freecodecamp.rocks - -**Histórias de usuário:** - -1. A página de homenagem deve ter um elemento `main` com o `id` `main` correspondente, que envolva todos os demais elementos -1. Deve haver um elemento com `id` `title`, que contenha uma string (ou seja, um texto) que descreva a pessoa a quem a página presta homenagem (por exemplo, "Dr. Norman Borlaug") -1. Você deve ter um elemento `figure` ou um elemento `div` com o `id` `img-div` -1. Dentro do elemento `#img-div`, deve haver um elemento `img` com um `id="image"` correspondente -1. Dentro do elemento `#img-div`, deve haver um elemento com um `id="img-caption"` correspondente que contenha um conteúdo textual descrevendo a imagem mostrada em `#img-div` -1. Deve haver um elemento com `id="tribute-info"`, que contenha conteúdo textual descrevendo a pessoa a quem a página presta homenagem -1. Deve haver um elemento `a` com um `id="tribute-link"`, que leve a um site externo que contenha informações adicionais sobre a pessoa a quem a página presta homenagem. DICA: você deve dar ao seu elemento um atributo `target` e definir o valor para `_blank` para que seu link possa ser aberto em uma nova aba -1. O elemento `#image` deve usar `max-width` e `height` para redimensionar de forma responsiva, em relação à largura de seu elemento pai, sem exceder seu tamanho original -1. O elemento `img` deve ser centralizado dentro de seu elemento pai - -Atenda às histórias de usuário e passe em todos os testes abaixo para concluir este projeto. Dê ao projeto o seu próprio estilo pessoal. Boa programação! - -**Observação:** não se esqueça de adicionar `` em seu HTML para vincular sua folha de estilo e aplicar seu CSS - -# --hints-- - -Você deve ter um elemento `main` com o `id` `main`. - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -Os elementos `#img-div`, `#image`, `#img-caption`, `#tribute-info` e `#tribute-link` devem estar aninhados dentro de `#main`. - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -Você deve ter um elemento com o `id` `title`. - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -O elemento `#title` não deve estar vazio. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -Você deve ter um elemento `figure` ou um elemento `div` com o `id` `img-div`. - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -Você deve ter um elemento `img` com o `id` `image`. - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -O elemento `#image` deve estar aninhado dentro de `#img-div`. - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -Você deve ter um elemento `figcaption` ou um elemento `div` com o `id` `img-caption`. - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -O elemento `#img-caption` deve estar aninhado dentro de `#img-div`. - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -O elemento `#img-caption` não deve estar vazio. - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -Você deve ter um elemento com o `id` `tribute-info`. - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -O elemento `#tribute-info` não deve estar vazio. - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -Você deve ter um elemento `a` com o `id` `tribute-link`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -O elemento `#tribute-link` deve ter o atributo `href` e um valor. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -O elemento `#tribute-link` deve ter um atributo `target` definido como `_blank`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -O elemento `img` deve ter o atributo `display` com o valor `block`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -O elemento `#image` deve ter o atributo `max-width` com o valor `100%`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -O elemento `#image` deve ter o atributo `height` com o valor `auto`. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -O elemento `#image` deve ser centralizado dentro de seu elemento pai. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - - Tribute Page - - -

                                                                    Tribute Page

                                                                    -

                                                                    The below card was designed as a tribute page for freeCodeCamp.

                                                                    -
                                                                    -
                                                                    - An image of Togepi -
                                                                    Togepi, happy as always.
                                                                    -
                                                                    -

                                                                    Togepi

                                                                    -
                                                                    -
                                                                    -

                                                                    - Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -

                                                                    -

                                                                    - Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -

                                                                    -
                                                                    -

                                                                    Battle Information

                                                                    -
                                                                      -
                                                                    • Type: Fairy
                                                                      • -
                                                                    • Evolutions: Togepi -> Togetic -> Togekiss
                                                                      • -
                                                                    • Moves: Growl, Pound, Sweet Kiss, Charm
                                                                      • -
                                                                    • Weaknesses: Poison, Steel
                                                                      • -
                                                                    • Resistances: Dragon
                                                                      • -
                                                                    -

                                                                    - Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -

                                                                    -
                                                                    -
                                                                    - - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md deleted file mode 100644 index 4937c77c6f7..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05b -title: Crie suas próprias funções -challengeType: 11 -videoId: nLDychdBwUg -bilibiliIds: - aid: 249487483 - bvid: BV1Fv411J7bS - cid: 376340281 -dashedName: build-your-own-functions ---- - -# --description-- - -Mais recursos: - -\- Exercício - -# --question-- - -## --text-- - -Qual será a impressão do seguinte programa em Python?: - -```python -def fred(): - print("Zap") -def jane(): - print("ABC") - -jane() -fred() -jane() -``` - -## --answers-- - -
                                                                    Zap
-ABC
-jane
-fred
-jane
                                                                    - ---- - -
                                                                    Zap
-ABC
-Zap
                                                                    - ---- - -
                                                                    ABC
-Zap
-jane
                                                                    - ---- - -
                                                                    ABC
-Zap
-ABC
                                                                    - ---- - -
                                                                    Zap
-Zap
-Zap
                                                                    - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index 0956044bad3..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: Comparação e ordenação de tuplas -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -Mais recursos: - -\- Exercício - -# --question-- - -## --text-- - -Qual das alternativas produz o mesmo resultado que o código seguinte?: - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index 0d3189cf9a5..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: Execução condicional -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -Qual código está indentado corretamente para imprimir "Yes" se x = 0 e y = 10? - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index 6337d75c6c3..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: 'Visualização de dados: listas de e-mails' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -Mais recursos: - -\- Exercício: Geodata - -\- Exercício: Gmane Model - -\- Exercício: Gmane Spider - -\- Exercício: Gmane Viz - -\- Exercício: Ranking de páginas - -\- Exercício: Page Spider - -\- Exercício: Page Viz - -# --question-- - -## --text-- - -Qual das alternativas é uma biblioteca comum de visualização em JavaScript? - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index c7f15388522..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: 'Visualização de dados: Classificação de página' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -Como funciona o algoritmo da PageRank? - -## --answers-- - -Determina quais as páginas mais ligadas entre si. - ---- - -Ele classifica as páginas baseadas na contagem de visualização. - ---- - -Ele descobre quais páginas contêm o conteúdo mais importante. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index ad9cdb45d63..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: Dicionários e laços de repetição -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -Mais recursos: - -\- Exercício - -# --question-- - -## --text-- - -O que será impresso pelo código a seguir?: - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -
                                                                    annie 42
-jan 100
                                                                    - ---- - -
                                                                    chuck 1
-annie 42
-jan 100
                                                                    - ---- - -
                                                                    chuck 1
                                                                    - ---- - -
                                                                    [Error]
                                                                    - -## --video-solution-- - -1 diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index 6801de05150..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: 'Dicionários: aplicações comuns' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -O que será impresso pelo código a seguir? - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[retornará erro] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index e794373ad64..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: Arquivos como sequências -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -Mais recursos: - -\- Exercício - -# --question-- - -## --text-- - -O que faz a palavra "continue" no meio de um laço de repetição? - -## --answers-- - -Pula para o código diretamente após o laço. - ---- - -Pula para a próxima linha do código. - ---- - -Pula para a próxima iteração do laço. - ---- - -Pula o próximo bloco de código. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index 111e589c94e..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: Expressões intermediárias -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -Mais recursos: - -\- Exercício 1 - -\- Exercício 2 - -# --question-- - -## --text-- - -O que será impresso após a execução deste código: - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index 7cd2c676b39..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: Strings intermediárias -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -Mais recursos: - -\- Exercício - -# --question-- - -## --text-- - -Qual é o valor de i no seguinte código? - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index 4bd40e098e1..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: 'Introdução: elementos de Python' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -Qual será a impressão do seguinte programa em Python: - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index ff9a3504362..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: 'Introdução: arquitetura de hardware' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -Onde seus programas são armazenados quando estão sendo executados? - -## --answers-- - -Disco rígido. - ---- - -Memória. - ---- - -Unidade de Processamento Central. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index 1c3b36c72c3..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: 'Introdução: Python como uma linguagem' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -O que será impresso após a execução destas duas linhas de código: - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index 7d2f810bc5b..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: 'Introdução: Por que programar?' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -Mais recursos: - -\- Instale Python no Windows - -\- Instale Python no MacOS - -# --question-- - -## --text-- - -Quem deveria aprender a programar? - -## --answers-- - -Estudantes universitários. - -### --feedback-- - -Alunos do ensino superior deveriam aprender a programar, mas há uma resposta melhor. - ---- - -Pessoas que querem se tornar desenvolvedores de software. - -### --feedback-- - -Pessoas que querem se tornar desenvolvedores de software devem aprender a programar, mas há uma resposta melhor. - ---- - -Todos. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index 722fc25665e..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: 'Iterações: laços definidos' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -Quantas linhas serão impressas pelo seguinte código?: - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index 7211b0d70d6..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: 'Iterações: idiomas de loop' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -Abaixo está o código para encontrar o menor valor de uma lista de valores. Uma linha tem um erro que fará com que o código não funcione como esperado. Qual é a linha?: - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index 490dfa110b4..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: 'Iterações: mais padrões' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -Mais recursos: - -\- Exercício - -# --question-- - -## --text-- - -Qual das alternativas será avaliada como falsa? - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 4e335158c19..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: Laços e iterações -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -O que será impresso pelo código a seguir?: - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -
                                                                    0
-1
-2
                                                                    - ---- - -
                                                                    0
-1
-2
-3
                                                                    - ---- - -
                                                                    1
-2
                                                                    - ---- - -
                                                                    1
-2
-3
                                                                    - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index f5d2d3efdd7..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: Construa um banco de dados relacional -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -Qual comando SQL você usaria para recuperar todos os usuários que têm o endereço de e-mail `quincy@freecodecamp.org`? - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index bc48867fb23..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: Mais estruturas condicionais -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -Mais recursos: - -\- Exercício 1 - -\- Exercício 2 - -# --question-- - -## --text-- - -Dado o seguinte código: - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -Qual linha/linhas devem ser incluídas em um bloco `try`? - -## --answers-- - -1 - ---- - -3 - ---- - -3,4 - ---- - -4 - ---- - -Nenhuma - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index 396df8b520c..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: Protocolo de rede -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -Que tipo de requisição HTTP é geralmente usada para acessar um site? - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index ed6ad926380..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: 'Rede: processamento de texto' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -Que tipo de codificação a maioria dos sites usa? - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index 13429576d64..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: 'Rede: usando urllib em Python' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -Como será a saída do seguinte código?: - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -Apenas o conteúdo de "romeo.txt". - ---- - -Um header e o conteúdo de "romeo.txt". - ---- - -Um header, um footer e o conteúdo de "romeo.txt". - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index 67c32f6924b..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: 'Rede: Web Scraping com Python' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -Mais recursos: - -\- Exercício: socket1 - -\- Exercício: urllib - -\- Exercício: urllinks - -# --question-- - -## --text-- - -Qual biblioteca Python é usada para analisar documentos HTML e extrair dados de documentos HTML? - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index 8874c931480..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: Redes com Python -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -Qual biblioteca Python dá acesso a soquetes TCP? - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index 3999210e17f..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: 'Redes: Escreva um navegador da Web' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -O que será criado pelo código abaixo? - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -Um servidor web simples. - ---- - -Um client de e-mail simples. - ---- - -Uma lista de tarefas simples. - ---- - -Um navegador web simples. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index 74d32fbebfc..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: Ciclo de vida de um objeto -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -O que será impresso pelo código a seguir?: - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - -
                                                                    -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 2
-Quincy party count 3
-
                                                                    - ---- - -
                                                                    -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 1
-Quincy party count 2
-
                                                                    - ---- - -
                                                                    -Quincy constructed
-Quincy party count 1
-Quincy party count 2
-Miya constructed
-Miya party count 1
-
                                                                    - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index ee6be841907..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: 'Objetos: exemplo de uma classe' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -O que será impresso pelo código a seguir?: - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - -
                                                                    -Até agora 1
-Até agora 2
-
                                                                    - ---- - -
                                                                    -0
-0
-
                                                                    - ---- - -
                                                                    -2
-2
-
                                                                    - ---- - -
                                                                    -2
-4
-
                                                                    - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index 009d27779db..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: 'Objetos: Herança' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -O que é herança na programação orientada para objetos? - -## --answers-- - -Uma nova classe criada quando a classe mãe é estendida. - ---- - -Uma instância construída de uma classe. - ---- - -A capacidade de criar uma nova classe, estendendo uma classe existente. - ---- - -Um método que é invocado no momento em que uma classe é usada para construir um objeto. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index 40d104e5149..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Dicionários do Python -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -Qual será o valor de dict após executar este código?: - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index 21f66d358d5..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Funções do Python -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -Qual é a finalidade da palavra-chave "def" em Python? - -## --answers-- - -É uma gíria que significa "O código a seguir é muito legal." - ---- - -É a indicação do início de uma função. - ---- - -É a indicação de que a seção de código indentada a seguir será armazenada para mais tarde. - ---- - -É a indicação do início de uma função e de que a seção de código indentada a seguir será armazenada para mais tarde. - ---- - -Nenhuma das anteriores. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index 2779ab5c82f..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Listas em Python -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -Qual é o valor x após a execução deste código: - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index 2ce81c0f3e9..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Objetos do Python -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -Qual das alternativas NÃO é verdadeira sobre objetos no Python? - -## --answers-- - -Os objetos são criados e usados. - ---- - -Objetos são pedaços de código e dados. - ---- - -Objetos escondem detalhes. - ---- - -Os objetos são um dos cinco tipos de dados padrão. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index 735834279e4..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: Leitura de arquivos -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -O que é usado para indicar uma nova linha em uma string? - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index 20c2232c16b..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: 'Expressões regulares: correspondência e extração de dados' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -O que será impresso pelo código a seguir?: - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index bb75e39893c..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: 'Expressões regulares: aplicações práticas' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -O que o "$" vai procurar em uma expressão regular? - -## --answers-- - -$ - ---- - -\\cifrão\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index 7d87d0d95d9..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: Expressões regulares -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -Qual regex corresponde apenas a um caractere de espaço em branco? - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index 11a6691f775..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: Design de banco de dados relacional -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -Qual é a prática recomendada com relação ao número de vezes que um dado do tipo string pode ser armazenado em um banco de dados? - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index 7055cac49d0..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: Bancos de dados relacionais e SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -Baixe o SQLite -Baixe o DB Browser for SQLite -Uso do SQLite - -# --question-- - -## --text-- - -Qual dessas NÃO é uma estrutura de dados primária em um banco de dados? - -## --answers-- - -índice - ---- - -tabela - ---- - -linha - ---- - -coluna - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index ad4c70b024a..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: 'Bancos de dados relacionais: operação de join' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -Ao usar uma instrução JOIN em uma declaração do SQL, o que faz o ON? - -## --answers-- - -Indica em quais tabelas se deve realizar o JOIN. - ---- - -Especifica os campos a serem utilizados para o JOIN. - ---- - -Indica como as duas tabelas serão unidas. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index 6918b08d3f2..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: 'Bancos de dados relacionais: relações de muitos para muitos' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -Mais recursos: - -\- Exercício: e-mail - -\- Exercício: registro - -\- Exercício: trilhas - -\- Exercício: Twfriends - -\- Exercício: Twspider - -# --question-- - -## --text-- - -Qual destes é um exemplo de relação de muitos para muitos? - -## --answers-- - -professor para aluno - ---- - -cliente para pedido - ---- - -livro para páginas - ---- - -cidade para país - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index 57969abed85..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: 'Bancos de dados relacionais: construção de relacionamentos' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -O que o comando INSERT faz em SQL? - -## --answers-- - -Define uma nova linha listando os campos que queremos incluir seguida dos valores que queremos que sejam colocados nessa nova linha. - ---- - -Define uma nova coluna listando as linhas que queremos incluir seguida dos valores que queremos que sejam colocados nessa nova coluna. - ---- - -Define uma nova tabela listando as linhas e campos que queremos incluir seguidos dos valores que queremos que sejam colocados na tabela. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index b5fb69e6af4..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: Representação de relacionamentos em um banco de dados relacional -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -O que é uma chave estrangeira? - -## --answers-- - -Uma chave que não devia estar ali. - ---- - -Uma chave que usa caracteres não latinos. - ---- - -Um número que aponta para a chave primária de uma linha associada em uma tabela diferente. - ---- - -Uma chave que o "mundo real" poderia usar para procurar uma linha. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index 80031b46036..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: Strings e listas -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -Mais recursos: - -\- Exercício - -# --question-- - -## --text-- - -O que representa n neste código? - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -mail - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index fc705f07ce0..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Strings em Python -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -O que será impresso pelo código a seguir?: - -```python -for n in "banana": - print(n) -``` - -## --answers-- - -
                                                                    -n
-n
-
                                                                    - ---- - -
                                                                    -0
-1
-
                                                                    - ---- - -
                                                                    -0
-1
-2
-3
-4
-5
-
                                                                    - ---- - -
                                                                    -b
-a
-n
-a
-n
-a
-
                                                                    - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index 136dc496981..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: A coleção de tuplas -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -O que será impresso pelo código a seguir?: - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - -
                                                                    -k i
-k i
-k i
-
                                                                    - ---- - -
                                                                    -quincy 0
-beau 1
-kris 2
-
                                                                    - ---- - -
                                                                    -quincy 1
-beau 5
-kris 9
-
                                                                    - ---- - -
                                                                    -1 quincy
-5 beau
-9 kris
-
                                                                    - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index 9a3b2316baf..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: Utilização de serviços da web -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -Quais são as duas formas mais comuns de enviar dados pela internet? - -## --answers-- - -JSON e TXT - ---- - -JSON e XML - ---- - -XML e TXT - ---- - -XML e PHP - ---- - -PHP e TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index ef6b05f4a9a..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: 'Variáveis, expressões e declarações' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -Qual é o símbolo usado em uma instrução da atribuição? - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index 5ada7950e73..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: Visualização de dados com Python -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -A maior parte dos dados precisa ser \_\_\_\_\_\_ antes de ser usada. - -## --answers-- - -convertida para o formato JSON - ---- - -transformada em gráfico - ---- - -limpa - ---- - -memorizada - ---- - -transformada em música - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index bef762eb58c..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'Serviços da web: Limitador de taxa de API e segurança' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -Mais recursos: - -\- Exercício: GeoJSON - -\- Exercício: JSON - -\- Exercício: Twitter - -\- Exercício: XML - -# --question-- - -## --text-- - -Ao fazer uma solicitação a partir da API do Twitter, quais informações devem ser sempre enviadas com ela? - -## --answers-- - -Nome de usuário do Twitter - ---- - -intervalo de dados - ---- - -termo de pesquisa - ---- - -chave - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index 83d46b976e1..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'Serviços da web: APIs' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -O que significa API? - -## --answers-- - -Inteligência portátil de aplicativos - ---- - -Programação associada internacional - ---- - -Interface do programa de aplicação - ---- - -Interface portátil de ação - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index d653f144da5..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'Serviços da web: JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -O que será impresso pelo código a seguir?: - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[Error] - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index d991db14e9e..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'Serviços da web: Abordagem orientada a serviços' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -Com uma abordagem orientada a serviços para o desenvolvimento de aplicativos da web, onde os dados estarão localizados? - -## --answers-- - -Espalhados por vários sistemas de computadores conectados pela Internet ou pela rede interna. - ---- - -Em diferentes serviços no servidor principal da web. - ---- - -Em um servidor de banco de dados separado. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index 0965b67e173..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'Serviços da web: Schema XML' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -O que é XSD? - -## --answers-- - -A especificação do schema do W3C para XML. - ---- - -O schema padrão de JSON da MOZ. - ---- - -Driver situacional extensível - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index 123b35dc2cf..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'Serviços da web: XML' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -O que há de errado com o XML a seguir? - -```xml - - Chuck - - +1 734 303 4456 - - -``` - -## --answers-- - -A tag de e-mail está sem a tag de fechamento. - ---- - -O espaçamento fará com que o XML seja inválido. - ---- - -A tag phone está sem a tag de fechamento. - ---- - -O texto sem formatação será codificado usando UTF-8. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md deleted file mode 100644 index ab07ad82c14..00000000000 --- a/curriculum/challenges/portuguese/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f065 -title: Trabalhando com listas -challengeType: 11 -videoId: lCnHfTHkhbE -bilibiliIds: - aid: 376965958 - bvid: BV1No4y1S7oi - cid: 376387989 -dashedName: working-with-lists ---- - -# --question-- - -## --text-- - -Qual método é usado para adicionar um item no final de uma lista? - -## --answers-- - -insert - ---- - -push - ---- - -append - ---- - -new - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md deleted file mode 100644 index 0b46955f226..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f33310c1851c6c4da013250 -title: Passo 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -É hora de adicionar o conteúdo do menu. Adicione um elemento `main` abaixo do elemento existente `header`. Mais pra frente ele conterá informações sobre preços dos cafés e sobremesas oferecidas pela cafeteria. - -# --hints-- - -Você deve acrescentar uma tag de abertura `
                                                                    `. - -```js -assert(code.match(/
                                                                    /i)); -``` - -Você deve acrescentar uma tag de fechamento `
                                                                    `. - -```js -assert(code.match(/<\/main>/i)); -``` - -Você deve manter o elemento preexistente `header`. Verifique se você não excluiu a tag de fechamento. - -```js -assert($('header').length === 1); -``` - -O elemento `main` deve estar depois do elemento `header`. - -```js -const main = document.querySelectorAll('main')[0]; -assert(main.previousElementSibling.tagName === 'HEADER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - ---fcc-editable-region-- -
                                                                    -

                                                                    CAMPER CAFE

                                                                    -

                                                                    Est. 2020

                                                                    -
                                                                    ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index 7ebde7e3c8e..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: Passo 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Flexbox é um layout de CSS unidimensional que pode controlar a forma como os itens são espaçados e alinhados dentro de um contêiner. - -Para usá-lo, dê a um elemento uma propriedade `display` de `flex`. Isto fará do elemento um contêiner flex. Todos os filhos direto de um contêiner flex são chamados de itens flex. - -Crie um seletor `.gallery` e torne-o um contêiner flex. - -# --hints-- - -Você deve ter um seletor `.gallery`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); -``` - -O seletor `.gallery` deve ter uma propridade `display` definida como `flex`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
                                                                    -

                                                                    css flexbox photo gallery

                                                                    -
                                                                    -
                                                                    - - - - - - - - - -
                                                                    - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; -} - -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { - width: 100%; - max-width: 350px; - height: 300px; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index ddccd2bf849..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: Passo 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Comece configurando a estrutura do HTML. Adicione uma declaração `` e um elemento `html` com um atributo `lang` definido como `en`. Dentro do elemento `html`, adicione um elemento `head` e um elemento `body`. - -# --hints-- - -O código deve conter a referência `DOCTYPE`. - -```js -assert(code.match(/` após o tipo. - -```js -assert(code.match(/html\s*>/gi)); -``` - -A declaração `DOCTYPE` deve estar no ínicio do HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -O elemento `html` deve ter uma tag de abertura com um atributo `lang` de `en`. - -```js -assert(code.match(//gi)); -``` - -O elemento `html` deve ter uma tag de fechamento. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Você deve ter uma tag de abertura para `head`. - -```js -assert(code.match(//i)); -``` - -Você deve ter uma tag de fechamento para `head`. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -Você deve ter uma tag de abertura para `body`. - -```js -assert(code.match(//i)); -``` - -Você deve ter uma tag de fechamento para `body`. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -Os elementos `head` e `body` devem ser irmãos. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -O elemento `head` deve ser filho do elemento `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -O elemento `body` deve ser filho do elemento `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md deleted file mode 100644 index 3b8b0e6c650..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: Passo 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Dentro do elemento `head`, adicione uma `meta` com o atributo `charset` definido como `utf-8`. Adicione também um elemento `title` com o texto `Picasso Painting`. - -# --hints-- - -Você deve adicionar exatamente um elemento `meta`. - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -O elemento `meta` deve ter o atributo `charset`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -O atributo `charset` deve ser definido como `utf-8`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -``` - -Você deve adicionar exatamente um elemento `title`. - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -O elemento `title` deve ter o texto `Picasso Painting`. Atente-se a ortografia e letras maiúsculas. - -```js -assert(document.querySelector('title')?.innerText === 'Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md deleted file mode 100644 index 62cb6908f1d..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: Passo 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -FontAwesome é uma biblioteca de ícones que utiliza SVG, muitos deles estão livremente disponíveis para uso. Você usará alguns desses ícones no projeto, então precisará associar a folha de estilos externa ao HTML. - -Adicione um elemento `link` com um `rel` de `stylesheet` e um `href` de `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -# --hints-- - -Você deve ter dois elementos `link`. - -```js -assert(document.querySelectorAll('link').length === 2); -``` - -O elemento `link` deve ter o atributo `rel` com o valor `stylesheet`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); -``` - -O elemento `link` deve ter para o atributo `href` o valor de `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index 71ccfd40c29..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: Passo 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Para começar com a pintura, dê ao elemento `body` uma `background-color` de `rgb(184, 132, 46)`. - -# --hints-- - -Você deve usar o seletor `body`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -O elemento `body` deve ter a propriedade `background-color` definida como `rgb (184, 132, 46)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index 59fb9e3f2b2..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: Passo 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Dentro da tag body, crie um elemento `div`. Dê a ele um `id` de `back-wall`. - -# --hints-- - -Você deve adicionar exatamente 1 elemento `div`. - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -O elemento `div` deve ter o valor de `id` de `back-wall`. - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index e38fa6023bd..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: Passo 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Use um seletor de id para dar ao elemento com o id `back-wall` uma `background-color` de `#8B4513`. - -# --hints-- - -Você deve usar um seletor `#back-wall`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -O elemento `#back-wall` deve ter a `background-color` com o valor de `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index 3886fdfb47e..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: Passo 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Dê ao elemento `#back-wall` uma `width` de `100%` e uma `height` de `60%`. - -# --hints-- - -Você deve definir a `width` do seletor `#back-wall` como `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -Você deve definir a `height` do seletor `#back-wall` como `60%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index ea13da1f79e..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: Passo 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Normalmente, o HTML é renderizado de cima para baixo. Os elementos na parte superior do código são posicionados na parte superior da página. No entanto, muitas vezes você pode querer mover os elementos para posições diferentes. Você pode fazer isso com a propriedade `position`. - -Defina a propriedade `position` do elemento `#back-wall` como `absolute`. Uma posição `absolute` retira o elemento daquele fluxo do documento de cima para baixo e permite que você o ajuste relativo ao contêiner. - -Quando um elemento é posicionado manualmente, você pode mudar seu layout com `top`, `left`, `right`e `bottom`. Defina o elemento `#back-wall` de modo que tenha um valor de `top` de `0` e um valor de `left` de `0`. - - -# --hints-- - -O seletor `#back-wall` deve ter uma propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -O seletor `#back-wall` deve ter a propriedade `top` definida como `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -O seletor `#back-wall` deve ter a propriedade `left` definida como `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index 80ff09d66e9..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: Passo 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -A propriedade `z-index` é usada para criar "camadas" para os elementos HTML. Se você já está familiarizado com as ferramentas de edição de imagem, deve ter trabalhado com camadas antes. Este é um conceito semelhante. - -Elementos com um valor de `z-index` maior aparecerão como se estivessem sobrepostos aos elementos com um valor de `z-index` inferior. Elas podem ser combinadas com o posicionamento da lição anterior para criar efeitos exclusivos. - -Como o elemento `back-wall` precisará aparecer "atrás" dos outros elementos que você vai criar, dê ao elemento `back-wall` um `z-index` de `-1`. - -# --hints-- - -O seletor `#back-wall` deve ter a propriedade `z-index` definida como `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index fafd9b9428a..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: Passo 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Abaixo do elemento `#back-wall`, crie uma `div` com a `class` `characters`. Aqui, você criará os personagens da pintura. - -# --hints-- - -Você deve adicionar apenas um elemento `div`. - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -O novo elemento `div` deve estar depois do elemento `#back-wall`. - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -O novo elemento `div` deve ter a `class` definida como `characters`. - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index b0ddeb33962..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: Passo 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Dentro do elemento `.characters`, crie outra `div` com um `id` de `offwhite-character`. - -# --hints-- - -Você deve criar apenas 1 elemento `div` adicional. - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -O novo elemento `div` deve estar dentro do elemento `.characters`. - -```js -assert(document.querySelector('.characters div')); -``` - -O novo elemento `div` deve ter um `id` definido como `offwhite-character`. - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index 5b93408eaa1..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: Passo 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Crie quatro elementos `div` dentro do elemento `offwhite-character`. Dê a esses elementos `div` os seguintes valores de `id`, em ordem: `white-hat`, `black-mask`, `gray-instrument` e `tan-table`. - -# --hints-- - -Você deve adicionar quatro elementos `div` dentro do elemento `.offwhite-character`. - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -A primeira nova `div` deve ter para o atributo `id` o valor de `white-hat`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -A segunda nova `div` deve ter para o atributo `id` o valor de `black-mask`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -A terceira nova `div` deve ter para o atributo `id` o valor de `gray-instrument`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -A quarta nova `div` deve ter para o atributo `id` o valor de `tan-table`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index 3cd6faad78f..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: Passo 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Esse personagem precisa de olhos. Crie dois elementos `div` dentro do elemento `#black-mask`. Dê a eles as classes `eyes left` e `eyes right`, nessa ordem. - -# --hints-- - -Você deve criar 2 elementos `div` dentro do elemento `#black-mask`. - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -A primeira nova `div` deve ter as classes `eyes` e `left`. - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -A segunda nova `div` deve ter as classes `eyes` e `right`. - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index 8b94aa31f98..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: Passo 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Crie alguns "pontos" para o instrumento. Adicione cinco elementos `div` dentro do elemento `#gray-instrument`. Defina a `class` de cada um como `black-dot`. - -# --hints-- - -Você deve ter cinco novos elementos `div` dentro do elemento `#gray-instrument`. - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -Os cinco elementos `div` devem ter a classe `black-dot`. - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index b8cb41efe67..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: Passo 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Usando um seletor de id, crie uma regra para o elemento com o id `offwhite-character`. Dê a ele uma `width` de `300px`, uma `height` de `550px` e uma `background-color` de `GhostWhite`. - -# --hints-- - -Você deve usar o seletor `#offwhite-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -`#offwhite-character` deve ter a propriedade `width` definida como `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -`#offwhite-character` deve ter a propriedade `height` definida como `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -`#offwhite-character` deve ter a propriedade `background-color` definida como `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index 99b58877a08..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: Passo 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Mova `#offwhite-character` para o lugar certo dando a ele uma `position` `absolute`, um valor de `top` de `20%` e um valor de `left` de `17.5%`. - -# --hints-- - -O seletor `#offwhite-character` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -O seletor `#offwhite-character` deve ter a propriedade `top` definida como `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -O seletor `#offwhite-character` deve ter a propriedade `left` definida como `17.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index 7007dd8ffaf..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: Passo 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Usando um seletor de ids, estilize o elemento com id `white-hat`. Dê a ele uma `width` e uma `height` de `0` e um `border-style` de `solid`. - -# --hints-- - -Você deve usar um seletor `#white-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -O seletor `#white-hat` deve ter a propriedade `width` definida como `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -O seletor `#white-hat` deve ter a propriedade `height` definida como `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -O seletor `#white-hat` deve ter a propriedade `border-style` definida como `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index f58a6c3be23..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: Passo 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Isso não parece muito certo. Defina uma `border-width` de `0 120px 140px 180px` para dimensionar o chapéu corretamente. - -# --hints-- - -O seletor `#white-hat` deve ter a propriedade `border-width` definida como `0 120px 140px 180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index e541ed986f1..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: Passo 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Agora você tem uma caixa grande. Dê a ele uma `border-top-color`, uma `border-right-color` e uma `border-left-color` `transparent`. Defina a `border-bottom-color` como `GhostWhite`. Isso vai fazer com que pareça mais com um chapéu. - -# --hints-- - -O seletor `#white-hat` deve ter a propriedade `border-top-color` definida como `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -O seletor `#white-hat` deve ter a propriedade `border-right-color` definida como `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -O seletor `#white-hat` deve ter a propriedade `border-left-color` definida como `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -O seletor `#white-hat` deve ter a propriedade `border-bottom-color` definida como `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index 65abcbd6980..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: Passo 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Dê ao chapéu uma `position` `absolute`, um valor de `top` de `-140px` e um valor de `left` de `0`. - -# --hints-- - -O seletor `#white-hat` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -O seletor `#white-hat` deve ter a propriedade `top` definida como `-140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -O seletor `#white-hat` deve ter a propriedade `left` definida como `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index e352528e0ec..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: Passo 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Usando um seletor de id, crie uma regra para o elemento com o id `black-mask`. Dê a ele uma `width` de `100%`, uma `height` de `50px` e uma `background-color` de `rgb(45, 31, 19)`. - -# --hints-- - -Você deve ter um seletor `#black-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -O seletor `#black-mask` deve ter a propriedade `width` definida como `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -O seletor `#black-mask` deve ter a propriedade `height` definida como `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -O seletor `#black-mask` deve ter a propriedade `background-color` definida como `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index 344f076a7cb..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: Passo 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Dê a máscara uma `position` `absolute` e um `top` e um `left` de `0`. - -# --hints-- - -O seletor `#black-mask` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -O seletor `#black-mask` deve ter a propriedade `top` definida como `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -O seletor `#black-mask` deve ter a propriedade `left` definida como `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index c3025f30e00..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: Passo 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Para garantir que você possa ver a máscara, dê a ela um `z-index` de `1`. - -# --hints-- - -O seletor `#black-mask` deve ter a propriedade `z-index` definida como `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index b30f32b4fca..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: Passo 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Usando um seletor de id, dê ao elemento com o id `gray-instrument` uma `width` de `15%`, uma `height` de `40%` e uma `background-color` de `rgb(167, 162, 117)`. - -# --hints-- - -Você deve ter um seletor `#gray-instrument`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -O seletor `#gray-instrument` deve ter a propriedade `width` definida como `15%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -O seletor `#gray-instrument` deve ter a propriedade `height` definida como `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -O seletor `#gray-instrument` deve ter a propriedade `background-color` definida como `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index 577f2defc26..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: Passo 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Agora, mova o elemento para o lugar certo com uma `position` `absolute`, um valor de `top` de `50px` e um valor de `left` de `125px`. - -# --hints-- - -O seletor `#gray-instrument` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -O seletor `#gray-instrument` deve ter o valor de `top` definido como `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -O seletor `#gray-instrument` deve ter o valor de `left` definido como `125px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index b628f0b26bf..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: Passo 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Defina o `z-index` como `1`. - -# --hints-- - -O seletor `#gray-instrument` deve ter a propriedade `z-index` definida como `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index 27ce4a9d623..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: Passo 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Use um seletor de classe para criar uma regra para os elementos com a classe `black-dot`. Defina a `width` como `10px`, a `height` como `10px` e a `background-color` como `rgb(45, 31, 19)`. - -# --hints-- - -Você deve ter um seletor `.black-dot`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -O seletor `.black-dot` deve ter a propriedade `width` definida como `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -O seletor `.black-dot` deve ter a propriedade `height` definida como `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -O seletor `.black-dot` deve ter a propriedade `background-color` definida como `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index 4fbeb7d2da2..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: Passo 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Esses pontos estão um pouco quadrados demais. Dê à classe `black-dot` um `border-radius` de `50%` para corrigi-lo. - -# --hints-- - -O seletor `.black-dot` deve ter a propriedade `border-radius` definida como `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index 715f6b2aab4..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: Passo 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Mova os pontos para o lugar certo definindo `display` como `block`, a `margin` como `auto` e `margin-top` como `65%`. - -# --hints-- - -O seletor `.black-dot` deve ter a propriedade `display` definida como `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -O seletor `.black-dot` deve ter a propriedade `margin` definida como `auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -O seletor `.black-dot` deve ter a propriedade `margin-top` definida como `65%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index 07020be5c91..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: Passo 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Use um seletor de id para estilizar o elemento com id `tan-table`. Dê a ele uma `width` de `450px`, uma `height` de `140px` e uma `background-color` de `#D2691E`. - -# --hints-- - -Você deve ter um seletor `#tan-table`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -O seletor `#tan-table` deve ter a propriedade `width` definida como `450px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -O seletor `#tan-table` deve ter a propriedade `height` definida como `140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -O seletor `#tan-table` deve ter a propriedade `background-color` definida como `#D2691E`. - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index f9f0d98d71a..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: Passo 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Agora, mova a tabela para o lugar certo dando a ela uma `position` `absolute`, um valor de `top` de `275px` e um valor de `left` de `15px`. - -# --hints-- - -O seletor `#tan-table` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -O seletor `#tan-table` deve ter a propriedade `top` definida como `275px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -O seletor `#tan-table` deve ter a propriedade `left` definida como `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index 1e9987d2af2..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: Passo 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Dê à tabela um `z-index` de `1`. - -# --hints-- - -O seletor `#tan-table` deve ter a propriedade `z-index` definida como `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index 6da6436d865..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: Passo 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Depois do elemento `div#offwhite-character`, adicione uma `div` com o `id` `black-character`. - -# --hints-- - -Você deve adicionar um novo elemento `div` dentro do elemento `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -O novo elemento `div` deve ter `id` definido como `black-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index 031242debc8..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: Passo 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Dentro do novo elemento `#black-character`, adicione três elementos `div` com os seguintes valores de `id`, em ordem: `black-hat`, `gray-mask` e `white-paper`. - -# --hints-- - -Você deve ter três novos elementos `div` dentro do elemento `#black-character`. - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -O primeiro novo elemento `div` deve ter o `id` definido como `black-hat`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -O segundo novo elemento `div` deve ter para o `id` definido como `gray-mask`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -O terceiro novo elemento `div` deve ter o `id` definido como `white-paper`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index 659fcccc156..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: Passo 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -A máscara precisa de olhos. Dentro do elemento `#gray-mask`, adicione dois elementos `div`. O primeiro deve ter a `class` definida como `eyes left` e o segundo deve ter a `class` definida como `eyes right`. - -# --hints-- - -Você deve ter dois elementos `div` dentro do elemento `#gray-mask`. - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -O primeiro novo elemento `div` deve ter a `class` definida como `eyes left`. - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -O segundo novo elemento `div` deve ter a `class` definida como `eyes right`. - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index e4263ddcc1a..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: Passo 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Hora de usar alguns ícones FontAwesome. - -O elemento `i` é usado para texto idiomático ou para texto separado do conteúdo de texto "normal". Isso pode valer para o texto em _itálico_, em termos científicos ou para ícones como os fornecidos por FontAwesome. - -Dentro do elemento `#white-paper`, adicione quatro elementos `i`. Dê a todos eles o valor de `class` de `fas fa-music`. - -Essa classe especial é como FontAwesome determina qual ícone carregar. `fas` indica a categoria de ícones (FontAwesome Solid, aqui), enquanto `fa-music` seleciona o ícone específico. - -# --hints-- - -Você deve ter quatro novos elementos `i` dentro do elemento `#white-paper`. - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -Todos os elementos `i` devem ter a `class` definida como `fas fa-music`. - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index 83057bc9f5b..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: Passo 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Use um seletor de id para criar uma regra para o elemento com o id `black-character`. Defina a `width` como `300px`, a `height` como `500px` e a `background-color` como `rgb(45, 31, 19)`. - -# --hints-- - -Você deve usar um seletor `#black-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -O seletor `#black-character` deve ter a propriedade `width` definida como `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -O seletor `#black-character` deve ter a propriedade `height` definida como `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -O seletor `#black-character` deve ter a propriedade `background-color` definida como `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index e45e5fe3a47..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: Passo 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Mova o elemento `#black-character` para a posição correta com uma `position` `absolute`, um `top` de `30%` e um `left` de `59%`. - -# --hints-- - -O seletor `#black-character` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -O seletor `#black-character` deve ter a propriedade `top` definida como `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -O seletor `#black-character` deve ter a propriedade `left` definida como `59%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index d247aaf95f9..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: Passo 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Use um seletor de id para criar uma regra para o elemento com o id `black-hat`. Dê a ele uma `width` de `0`, uma `height` de `0` e um `border-style` de `solid`. - -# --hints-- - -Você deve ter um seletor `#black-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -O seletor `#black-hat` deve ter a propriedade `width` definida como `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -O seletor `#black-hat` deve ter a propriedade `height` definida como `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -O seletor `#black-hat` deve ter a propriedade `border-style` definida como `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index f38fac8373c..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: Passo 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Assim como em `#white-hat`, você deve estilizar a borda do elemento `#black-hat`. Dê a ele uma `border-top-color`, uma `border-right-color` e uma `border-bottom-color` de `transparent`. Defina a `border-left-color` como `rgb(45, 31, 19)`. - -# --hints-- - -O seletor `#black-hat` deve ter a propriedade `border-top-color` definida como `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -O seletor `#black-hat` deve ter a propriedade `border-right-color` definida como `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -O seletor `#black-hat` deve ter a propriedade `border-bottom-color` definida como `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -O seletor `#black-hat` deve ter a propriedade `border-left-color` definida como `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index 01c900d9c25..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: Passo 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Agora, posicione o elemento `#black-hat`. Dê a ele uma `position` `absolute`, um valor de `top` de `-150px` e um valor de `left` de `0`. - -# --hints-- - -O seletor `#black-hat` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -O seletor `#black-hat` deve ter a propriedade `top` definida como `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -O seletor `#black-hat` deve ter a propriedade `left` definida como `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index 1b651c8f7e7..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: Passo 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Usando um seletor de ids, estilize o elemento com id `gray-mask`. Dê a ele uma `width` de `150px`, uma `height` de `150px` e uma `background-color` de `rgb(167, 162, 117)`. - -# --hints-- - -Você deve ter um seletor `#gray-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -O seletor `#gray-mask` deve ter a propriedade `width` definida como `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -O seletor `#gray-mask` deve ter a propriedade `height` definida como `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -O seletor `#gray-mask` deve ter a propriedade `background-color` definida como `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index 8cfa4495a75..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: Passo 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Posicione o elemento `#gray-mask` definindo `position` como `absolute`, `top` como `-10px` e `left` como `70px`. - -# --hints-- - -O seletor `#gray-mask` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -O seletor `#gray-mask` deve ter a propriedade `top` definida como `-10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -O seletor `#gray-mask` deve ter a propriedade `left` definida como `70px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index 64ce3767438..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: Passo 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Usando um seletor de id, crie uma regra para o elemento `white-paper`. Defina a `width` como `400px`, a `height` como `100px` e a `background-color` como `GhostWhite`. - -# --hints-- - -Você deve ter um seletor `#white-paper`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -O seletor `#white-paper` deve ter a propriedade `width` definida como `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -O seletor `#white-paper` deve ter a propriedade `height` definida como `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -O seletor `#white-paper` deve ter a propriedade `background-color` definida como `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index d34f02b122f..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: Passo 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Dê a `#white-paper` uma `position` `absolute`, um `top` de `250px` e um `left` de `-150px` para colocá-lo no lugar certo. - -# --hints-- - -O seletor `#white-paper` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -O seletor `#white-paper` deve ter a propriedade `top` definida como `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -O seletor `#white-paper` deve ter a propriedade `left` definida como `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index 1ce0e8c96b4..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: Passo 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Defina o `z-index` do elemento `#white-paper` como `1`. - -# --hints-- - -O seletor `#white-paper` deve ter a propriedade `z-index` definida como `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index b5ff249fe15..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: Passo 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Os ícones de FontAwesome vêm com seu próprio estilo para definir o ícone. No entanto, você também pode definir o estilo por conta própria para mudar coisas como a cor e o tamanho. Por enquanto, use um seletor de classe para selecionar os ícones com a classe `fa-music`. Defina `display` como `inline-block`, `margin-top` como `8%` e `margin-left` como `13%`. - -# --hints-- - -Você deve ter um seletor `.fa-music`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -O seletor `.fa-music` deve ter a propriedade `display` definida como `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -O seletor `.fa-music` deve ter uma propriedade `margin-top` definida como `8%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -O seletor `.fa-music` deve ter uma propriedade `margin-left` definida como `13%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index ceb320a8882..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: Passo 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Abaixo do elemento `#black-character`, adicione dois elementos `div` novos. Eles serão o xale. Dê aos dois uma `class` `blue`. Em seguida, dê ao primeiro um `id` de `blue-left` e ao segundo um `id` de `blue-right`. - -# --hints-- - -Você deve ter dois novos elementos `div` dentro do elemento `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -Os dois novos elementos `div` devem ter `class` definida como `blue`. - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -A primeira nova `div` deve ter para o atributo `id` o valor de `blue-left`. - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -A segunda nova `div` deve ter para o atributo `id` o valor de `blue-right`. - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index f6a7e8f6929..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: Passo 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Use um seletor de classe para selecionar os novos elementos com a classe `blue`. Defina a`background-color` como `#1E90FF`. - -# --hints-- - -Você deve ter um seletor `.blue`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -O seletor `.blue` deve ter a propriedade `background-color` definida como `#1E90FF`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index 4f0636cd7b9..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: Passo 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Selecione o elemento com o id `blue-left` usando um seletor de id. Dê a ele uma `width` de `500px` e uma `height` de `300px`. - -# --hints-- - -Você deve ter um seletor `#blue-left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -O seletor `#blue-left` deve ter a propriedade `width` definida como `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -O seletor `#blue-left` deve ter a propriedade `height` definida como `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index cf8474454bf..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: Passo 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Agora, defina a `position` como `absolute`, `top` como `20%` e `left` como `20%`. - -# --hints-- - -O seletor `#blue-left` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -O seletor `#blue-left` deve ter a propriedade `top` definida como `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -O seletor `#blue-left` deve ter a propriedade `left` definida como `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index 30e88c68035..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: Passo 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Em seguida, selecione o elemento com o id `blue-right` usando um seletor de id. Defina a `width` como `400px` e a `height` como `300px`. - -# --hints-- - -Você deve ter um seletor `#blue-right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -O seletor `#blue-right` deve ter a propriedade `width` definida como `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -O seletor `#blue-right` deve ter a propriedade `height` definida como `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index d37b4b25a87..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: Passo 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Dê ao elemento `#blue-right` o posicionamento correto com `position` definida como `absolute`, `top` definido como `50%` e `left` definido como `40%`. - -# --hints-- - -O seletor `#blue-right` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -O seletor `#blue-right` deve ter a propriedade `top` definida como `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -O seletor `#blue-right` deve ter a propriedade `left` definida como `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index 6579528f218..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: Passo 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Abaixo dos elementos `.blue`, adicione outra `div`. Dê a ele o valor de `id` de `orange-character`. - -# --hints-- - -Você deve ter um novo elemento `div` dentro do elemento `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -O novo elemento `div` deve ter `id` definido como `orange-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index f0491614424..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: Passo 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Dentro do elemento `#orange-character`, adicione quatro elementos `div`. Dê a eles os valores de `id` de `black-round-hat`, `eyes-div`, `triangles` e `guitar`, nessa ordem. - -# --hints-- - -Você deve ter dois novos elementos `div` dentro do elemento `#orange-character`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -O primeiro novo elemento `div` deve ter o `id` definido como `black-round-hat`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -O segundo novo elemento `div` deve ter o `id` definido como `eyes-div`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -O terceiro novo elemento `div` deve ter para o atributo `id` o valor de `triangles`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -O quarto novo elemento `div` deve ter para o atributo `id` o valor de `guitar`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index af94f86b573..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: Passo 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -O elemento `#eyes-div` deve ter olhos. Adicione dois elementos `div` dentro dele. Dê ao primeiro uma `class` de `eyes left` e ao segundo uma `class` de `eyes right`. - -# --hints-- - -Você deve ter dois elementos `div` dentro do elemento `#eyes-div`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -A primeira nova `div` deve ter a `class` definida como `eyes left`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -A segunda nova `div` deve ter a `class` definida como `eyes right`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index 1fdff3b9814..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: Passo 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Dentro da div `#triangles`, você precisará adicionar os elementos que se tornarão os triângulos. Crie trinta elementos `div` e dê a cada um deles a classe `triangle`. - -# --hints-- - -Você deve ter 30 elementos `div` dentro do elemento `#triangles`. - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -Os 30 novos elementos `div` devem ter a `class` definida como `triangle`. - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index a2806ad9cee..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: Passo 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Dentro do elemento `#guitar`, crie três elementos `div`. Dê aos dois primeiros o valor de `class` de `guitar`. Em seguida, dê ao primeiro um `id` de `guitar-left` e ao segundo um `id` de `guitar-right`. Adicione um `id` à terceira `div` com o valor `guitar-neck`. - -A terceira `div` não deve ter a classe `guitar`. - -# --hints-- - -Você deve ter três novos elementos `div` dentro do elemento `#guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -A primeira nova `div` deve ter a `class` definida como `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -A primeira nova `div` deve ter um `id` definido como `guitar-left`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -A segunda nova `div` deve ter a `class` definida como `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -A segunda nova `div` deve ter um `id` definido como `guitar-right`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -A terceira nova `div` deve ter um `id` definido como `guitar-neck`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -Você não deve dar à terceira `div` uma `class` `guitar`. - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index 1f5e16c5433..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: Passo 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Use outro ícone de FontAwesome para `.guitar`. Dentro dos elementos `#guitar-left` e `#guitar-right`, adicione um elemento `i` e dê a ele uma `class` de `fas fa-bars`. - -# --hints-- - -Dentro do elemento `#guitar-left`, adicione um elemento `i`. - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -Dentro do elemento `#guitar-right`, adicione um elemento `i`. - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -Os dois novos elementos `i` devem ter `class` definida como `fas fa-bars`. - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - --fcc-editable-region-- -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    - --fcc-editable-region-- -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index 7e1d724788f..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: Passo 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Selecione o elemento `orange-character` com um seletor de id. Dê a ele uma `width` de `250px`, uma `height` de `550px` e uma `background-color` de `rgb(240, 78, 42)`. - -# --hints-- - -Você deve ter um seletor `#orange-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -O seletor `#orange-character` deve ter a propriedade `width` definida como `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -O seletor `#orange-character` deve ter a propriedade `height` definida como `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -O seletor `#orange-character` deve ter a propriedade `background-color` definida como `rgb(240, 78, 42)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index e1b9b735a8d..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: Passo 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Dê ao elemento `#orange-character` uma `position` `absolute`, um `top` de `25%` e um `left` de `40%`. - -# --hints-- - -O seletor `#orange-character` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -O seletor `#orange-character` deve ter a propriedade `top` definida como `25%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -O seletor `#orange-character` deve ter a propriedade `left` definida como `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index 9a0ff2b2d52..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: Passo 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Estilize o elemento com o id `black-round-hat` usando um seletor de id. Defina a `width` como `180px`, a `height` como `150px` e a `background-color` como `rgb(45, 31, 19)`. - -# --hints-- - -Você deve ter um seletor `#black-round-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -O seletor `#black-round-hat` deve ter a propriedade `width` definida como `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -O seletor `#black-round-hat` deve ter a propriedade `height` definida como `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -O seletor `#black-round-hat` deve ter a propriedade `background-color` definida como `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index 9997359e24a..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: Passo 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -O elemento `#black-round-hat` provavelmente deve ser redondo. Dê a ele um `border-radius` de `50%` para corrigir isso. - -# --hints-- - -O seletor `#black-round-hat` deve ter a propriedade `border-radius` definida como `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index 1cee7c34af8..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: Passo 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Mova o elemento `#black-round-hat` para o lugar com uma `position` `absolute`, um `top` de `-100px` e um `left` de `5px`. - -# --hints-- - -O seletor `#black-round-hat` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -O seletor `#black-round-hat` deve ter a propriedade `top` definida como `-100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -O seletor `#black-round-hat` deve ter a propriedade `left` definida como `5px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index b1800086fdb..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: Passo 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Coloque o elemento `#black-round-hat` na camada correta com um `z-index` de `-1`. - -# --hints-- - -O seletor `#black-round-hat` deve ter a propriedade `z-index` definida como `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index be896e604be..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: Passo 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -Use um seletor de id para criar uma regra para o elemento com o id `eyes-div`. Defina a `width` como `180px` e a `height` como `50px`. - -# --hints-- - -Você deve criar um seletor `#eyes-div`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -O seletor `#eyes-div` deve ter a propriedade `width` definida como `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -O seletor `#eyes-div` deve ter a propriedade `height` definida como `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index a93996e6d5f..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: Passo 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Agora, mova o elemento `#eyes-div` para a posição correta com `position` definida como `absolute`, `top` definido como `-40px` e `left` definido como `20px`. - -# --hints-- - -O seletor `#eyes-div` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -O seletor `#eyes-div` deve ter a propriedade `top` definida como `-40px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -O seletor `#eyes-div` deve ter a propriedade `left` definida como `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index 28074840db4..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: Passo 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Dê ao elemento `#eyes-div` um `z-index` de `3`. - -# --hints-- - -O seletor `#eyes-div` deve ter a propriedade `z-index` definida para `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index 91983f4764b..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: Passo 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -Agora, use um seletor class para selecionar `guitar`. Isto estilizará as duas "metades" do violão. Defina a `width` como `150px`, `height` como `120px`, `background-color` como `Goldenrod` e `border-radius` como `50%`. - -# --hints-- - -Você deve criar um seletor `.guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -O seletor `.guitar` deve ter a propriedade `width` definida como `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -O seletor `.guitar` deve ter a propriedade `height` definida como `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -O seletor `.guitar` deve ter a propriedade `background-color` definida como `Goldenrod`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -O seletor `.guitar` deve ter a propriedade `border-radius` definida como `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index 15df5362b06..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: Passo 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Selecione o `id` com valor `guitar-left` e defina a `position` como `absolute` e `left` como `0px`. - -# --hints-- - -Você deve criar um seletor `#guitar-left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -O seletor `#guitar-left` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index 0078d6662ed..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: Passo 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Selecione o `id` com valor `guitar-right` e também defina `position` como `absolute`. Dessa vez, defina `left` como `100px`. - -# --hints-- - -Você deve criar um seletor `#guitar-right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -O seletor `#guitar-right` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -O seletor `#guitar-right` deve ter a propriedade `left` definida como `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index 0385dec237c..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: Passo 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Agora, você precisa mover os ícones de barra para o lugar certo. Crie um seletor class para a classe `fa-bars`. Defina `display` como `block`, `margin-top` como `30%` e `margin-left` como `40%`. - -# --hints-- - -Você deve criar um seletor `.fa-bars`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -O seletor `.fa-bars` deve ter a propriedade `display` definida como `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -O seletor `.fa-bars` deve ter uma propriedade `margin-top` definida como `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -O seletor `.fa-bars` deve ter uma propriedade `margin-left` definida como `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index 1df7639be0c..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: Passo 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -Use um seletor de id para criar uma regra para o id `guitar-neck`. Defina a `width` como `200px`, a `height` como `30px` e a `background-color` como `#D2691E`. - -# --hints-- - -Você deve criar um seletor `#guitar-neck`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -O seletor `#guitar-neck` deve ter a propriedade `width` definida como `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -O seletor `#guitar-neck` deve ter a propriedade `height` definida como `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -O seletor `#guitar-neck` deve ter a propriedade `background-color` definida como `#D2691E`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index 38ca538d66e..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: Passo 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Agora, mova o elemento `#guitar-neck` com uma `position` `absolute`, um valor de `top` de `45px` e um valor de `left` de `200px`. - -# --hints-- - -O seletor `#guitar-neck` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -O seletor `#guitar-neck` deve ter a propriedade `top` definida como `45px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -O seletor `#guitar-neck` deve ter a propriedade `left` definida como `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index 715b297e50c..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: Passo 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Dê ao elemento `#guitar-neck` um `z-index` de `3`. - -# --hints-- - -O seletor `#guitar-neck` deve ter a propriedade `z-index` definida como `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index e94558c244b..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: Passo 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -É a hora de estilizar os elementos com a classe `eyes`. Use um seletor class para definir a `width` como `35px`, `height` como `20px`, `background-color` como `#8B4513` e `border-radius` como `20px 50%`. - -# --hints-- - -Você deve criar um seletor `.eyes`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -O seletor `.eyes` deve ter a propriedade `width` definida como `35px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -O seletor `.eyes` deve ter a propriedade `height` definida como `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -O seletor `.eyes` deve ter a propriedade `background-color` definida como `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -O seletor `.eyes` deve ter a propriedade `border-radius` definida como `20px 50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index 351ccffecd5..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: Passo 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Vincule a `class` com o valor `right` e defina a `position` como `absolute`, `top` como `15px` e `right` como `30px`. - -# --hints-- - -Você deve criar um seletor `.right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -O seletor `.right` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -O seletor `.right` deve ter a propriedade `top` definida como `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -O seletor `.right` deve ter a propriedade `right` definida como `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index b9ccd34f418..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: Passo 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Para a `class` com o valor `left`, crie o seletor e defina `position` como `absolute`, `top` como `15px` e `left` como `30px`. - -# --hints-- - -Você deve criar um seletor `.left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -O seletor `.left` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -O seletor `.left` deve ter a propriedade `top` definida como `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -O seletor `.left` deve ter a propriedade `left` definida como `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index 20b06223322..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: Passo 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Um último passo. Os ícones de FontAwesome estão pequenos demais. Vincule todos eles com o seletor class para `fas` e defina o `font-size` como `30px`. - -Com isso, a pintura de Picasso estará completa! - -# --hints-- - -Você deve criar um seletor `.fas`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -O seletor `.fas` deve ter a propriedade `font-size` definida como `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index cd92530fccb..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: Passo 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Vincule o arquivo CSS agora, mesmo que você ainda não tenha escrito o CSS. - -Adicione um elemento `link` com um `rel` de `stylesheet` e um `href` de `styles.css`. - -# --hints-- - - -O código deve ter um elemento `link`. - -```js -assert.match(code, / link')); -``` - -O elemento `link` deve ter o atributo `rel` com o valor `stylesheet`. - -```js -const link_element = document.querySelector('link'); -const rel = link_element.getAttribute("rel"); -assert.equal(rel, "stylesheet"); -``` - -O elemento `link` deve ter o atributo `href` com o valor `styles.css`. - -```js -const link = document.querySelector('link'); -assert.equal(link.dataset.href, "styles.css"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index 928bd5b2f80..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: Passo 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Ajuste o layout dos elementos `.triangle` com um `display` de `inline-block`. - -# --hints-- - -O seletor `.triangle` deve ter a propriedade `display` definida como `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index 0abcfb605cc..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: Passo 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Dê aos elementos `.triangle` a cor correta. Defina a `border-top-color`, a `border-bottom-color` e a `border-left-color` como `transparent`. Defina a `border-right-color` como `Gold`. - -# --hints-- - -O seletor `.triangle` deve ter a propriedade `border-top-color` definida como `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -O seletor `.triangle` deve ter a propriedade `border-bottom-color` definida como `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -O seletor `.triangle` deve ter a propriedade `border-left-color` definida como `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -O seletor `.triangle` deve ter a propriedade `border-right-color` definida como `Gold`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index 89f107d8e0e..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: Passo 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -Estilize a borda dos elementos `.triangle`. Defina o `border-style` como `solid` e a `border-width` como `42px 45px 45px 0`. - -# --hints-- - -O seletor `.triangle` deve ter a propriedade `border-style` definida como `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -O seletor `.triangle` deve ter a propriedade `border-width` definida como `42px 45px 45px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index 4152fcb6599..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: Passo 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Crie um seletor de classe para os elementos com a classe `triangle`. Defina a `width` como `0` e a `height` como `0`. - -# --hints-- - -Você deve criar um seletor `.triangle`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -O seletor `.triangle` deve ter a propriedade `width` definida para `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -O seletor `.triangle` deve ter a propriedade `height` definida para `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index 8286b560a3e..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: Passo 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Marque o elemento com o id `triangles` usando um seletor de id. Defina a `width` como `250px` e a `height` como `550px`. - -# --hints-- - -Você deve adicionar um seletor `#triangles`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -O seletor `#triangles` deve ter a propriedade `width` definida como `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -O seletor `#triangles` deve ter a propriedade `height` definida para `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index 995b2a2a4e5..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: Passo 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Agora, use um seletor de id para `guitar`. Defina a `width` como `100%` e a `height` como `100px`. - -# --hints-- - -Você deve criar um seletor `#guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -O seletor `#guitar` deve ter a propriedade `width` definida como `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -O seletor `#guitar` deve ter a propriedade `height` definida como `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index d4fd1b7a04f..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: Passo 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -No mesmo seletor `#guitar`, defina `position` como `absolute`, `top` como `120px` e `left` como `0px`. - -# --hints-- - -O seletor `#guitar` deve ter a propriedade `position` definida como `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -O seletor `#guitar` deve ter a propriedade `top` definida como `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -O seletor `#guitar` deve ter a propriedade `left` definida como `0px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index 70fce0ac439..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: Passo 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -Dê à regra `#guitar` um `z-index` de `3`. - -# --hints-- - -O seletor `#guitar` deve ter a propriedade `z-index` definida como `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - -
                                                                    -
                                                                    - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index b791fcbf562..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: Passo 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Defina a `border-width` de `#black-hat` como `150px 0 0 300px`. - -# --hints-- - -O seletor `#black-hat` deve ter a propriedade `border-width` definida como `150px 0 0 300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    -
                                                                    - - - - -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md deleted file mode 100644 index 21e66cff724..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f5c1cb7575c7551ed8a40 -title: Passo 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -O tamanho maior da fonte do número `230` está fazendo com que ele transborde. Dê a `.calories-info h1` uma propriedade `overflow` definido para `hidden` para evitar isso. - -# --hints-- - -O seletor `.calories-info h1` deve ter a propriedade `overflow` definida como `hidden`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                                    -
                                                                    -

                                                                    Nutrition Facts

                                                                    -
                                                                    -

                                                                    8 servings per container

                                                                    -

                                                                    Serving size 2/3 cup (55g)

                                                                    -
                                                                    -
                                                                    -
                                                                    -

                                                                    Amount per serving

                                                                    -

                                                                    Calories 230

                                                                    -
                                                                    -
                                                                    - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- -.calories-info h1 { - margin: -5px -2px; -} ---fcc-editable-region-- - -.calories-info span { - font-size: 1.2em; -} -``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md deleted file mode 100644 index 0c29ef1e173..00000000000 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f6a7d4ba8037bc086c2c7 -title: Passo 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Dê ao seletor `.divider` a propriedade `clear` com o valor `right`. Isto limpará a propriedade `float`, empurrando o divisor e qualquer conteúdo abaixo do texto `float`. - -# --hints-- - -O seletor `.divider` deve ter uma propriedade `clear` definida como `right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                                    -
                                                                    -

                                                                    Nutrition Facts

                                                                    -
                                                                    -

                                                                    8 servings per container

                                                                    -

                                                                    Serving size 2/3 cup (55g)

                                                                    -
                                                                    -
                                                                    -
                                                                    -

                                                                    Amount per serving

                                                                    -

                                                                    Calories 230

                                                                    -
                                                                    -
                                                                    -
                                                                    -

                                                                    % Daily Value *

                                                                    -
                                                                    -
                                                                    -
                                                                    - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - ---fcc-editable-region-- -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} ---fcc-editable-region-- - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md deleted file mode 100644 index 08053819211..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 56533eb9ac21ba0edf2244e2 -title: Crie uma cifra de César -challengeType: 5 -forumTopicId: 16003 -dashedName: build-a-caesars-cipher ---- - -# --description-- - -Uma das cifras mais simples e mais conhecidas é a cifra de César, também conhecida como uma cifra de mudança. Em uma cifra de transferência, os significados das letras são deslocados de acordo com a quantidade definida. - -Um uso moderno comum é a cifra ROT13, onde os valores das letras são deslocados em 13 lugares. Da seguinte forma: `A ↔ N`, `B ↔ O` e assim por diante. - -Escreva uma função que recebe uma string codificada de ROT13 como entrada e retorna uma string decodificada. - -Todas as letras serão maiúsculas. Não transforme nenhum caractere não-alfabético (ou seja, espaços, pontuação), mas passe por eles. - -# --hints-- - -`rot13("SERR PBQR PNZC")` deve decodificar para a string `FREE CODE CAMP` - -```js -assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); -``` - -`rot13("SERR CVMMN!")` deve decodificar para a string `FREE PIZZA!` - -```js -assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); -``` - -`rot13("SERR YBIR?")` deve decodificar para a string `FREE LOVE?` - -```js -assert(rot13('SERR YBIR?') === 'FREE LOVE?'); -``` - -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")`deve decodificar para a string `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` - -```js -assert( - rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === - 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function rot13(str) { - return str; -} - -rot13("SERR PBQR PNZC"); -``` - -# --solutions-- - -```js -var lookup = { - 'A': 'N','B': 'O','C': 'P','D': 'Q', - 'E': 'R','F': 'S','G': 'T','H': 'U', - 'I': 'V','J': 'W','K': 'X','L': 'Y', - 'M': 'Z','N': 'A','O': 'B','P': 'C', - 'Q': 'D','R': 'E','S': 'F','T': 'G', - 'U': 'H','V': 'I','W': 'J','X': 'K', - 'Y': 'L','Z': 'M' -}; - -function rot13(encodedStr) { - var codeArr = encodedStr.split(""); // String to Array - var decodedArr = []; // Your Result goes here - // Only change code below this line - - decodedArr = codeArr.map(function(letter) { - if(lookup.hasOwnProperty(letter)) { - letter = lookup[letter]; - } - return letter; - }); - - // Only change code above this line - return decodedArr.join(""); // Array to String -} -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md deleted file mode 100644 index 511d2fe7e29..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: aa2e6f85cab2ab736c9a9b24 -title: Crie uma caixa registradora -challengeType: 5 -forumTopicId: 16012 -dashedName: build-a-cash-register ---- - -# --description-- - -Implemente uma função de caixa registradora `checkCashRegister()` que aceita o preço de compra como o primeiro argumento (`price`), pagamento como o segundo argumento (`cash`) e dinheiro na registradora (`cid`) como o terceiro argumento. - -`cid` é um array de duas dimensões listando a moeda disponível e a quantidade. - -A função `checkCashRegister()` deve sempre retornar um objeto com a chave `status` e uma chave `change`. - -Retorne `{status: "INSUFFICIENT_FUNDS", change: []}` se o dinheiro no caixa for menor que o troco devido, ou se você não pode retornar o troco exato. - -Retorne `{status: "CLOSED", change: [...]}` com dinheiro no caixa como o valor para a chave `change` se for igual ao troco devido. - -Caso contrário, retorne `{status: "OPEN", change: [...]}`, com o troco devido em moedas e notas, ordenado do maior para o menor, como o valor da chave `change`. - -
                                                                    Unidade de moedaQuantidade
                                                                    Penny$0,01 (PENNY)
                                                                    Nickel$0,05 (NICKEL)
                                                                    Dime$0,1 (DIME)
                                                                    Quarter$0,25 (QUARTER)
                                                                    Dólar$1 (ONE)
                                                                    Cinco dólares$5 (FIVE)
                                                                    Dez dólares$10 (TEN)
                                                                    Vinte dólares$20 (TWENTY)
                                                                    Cem dólares$100 (ONE HUNDRED)
                                                                    - -Veja abaixo um exemplo de um array de dinheiro no caixa (cid): - -```js -[ - ["PENNY", 1.01], - ["NICKEL", 2.05], - ["DIME", 3.1], - ["QUARTER", 4.25], - ["ONE", 90], - ["FIVE", 55], - ["TEN", 20], - ["TWENTY", 60], - ["ONE HUNDRED", 100] -] -``` - -# --hints-- - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` deve retornar um objeto. - -```js -assert.deepEqual( - Object.prototype.toString.call( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]) - ), - '[object Object]' -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` deve retornar `{status: "OPEN", change: [["QUARTER", 0.5]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { status: 'OPEN', change: [['QUARTER', 0.5]] } -); -``` - -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` deve retornar `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. - -```js -assert.deepEqual( - checkCashRegister(3.26, 100, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { - status: 'OPEN', - change: [ - ['TWENTY', 60], - ['TEN', 20], - ['FIVE', 15], - ['ONE', 1], - ['QUARTER', 0.5], - ['DIME', 0.2], - ['PENNY', 0.04] - ] - } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` deve retornar `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` deve retornar `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 1], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` deve retornar `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { - status: 'CLOSED', - change: [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ] - } -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function checkCashRegister(price, cash, cid) { - let change; - return change; -} - -checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); -``` - -# --solutions-- - -```js -const denom = [ - { name: "ONE HUNDRED", val: 100 }, - { name: "TWENTY", val: 20 }, - { name: "TEN", val: 10 }, - { name: "FIVE", val: 5 }, - { name: "ONE", val: 1 }, - { name: "QUARTER", val: 0.25 }, - { name: "DIME", val: 0.1 }, - { name: "NICKEL", val: 0.05 }, - { name: "PENNY", val: 0.01 }, -]; - -function checkCashRegister(price, cash, cid) { - const output = { status: null, change: [] }; - let change = cash - price; - const register = cid.reduce( - function (acc, curr) { - acc.total += curr[1]; - acc[curr[0]] = curr[1]; - return acc; - }, - { total: 0 } - ); - if (register.total === change) { - output.status = "CLOSED"; - output.change = cid; - return output; - } - if (register.total < change) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - const change_arr = denom.reduce(function (acc, curr) { - let value = 0; - while (register[curr.name] > 0 && change >= curr.val) { - change -= curr.val; - register[curr.name] -= curr.val; - value += curr.val; - change = Math.round(change * 100) / 100; - } - if (value > 0) { - acc.push([curr.name, value]); - } - return acc; - }, []); - if (change_arr.length < 1 || change > 0) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - output.status = "OPEN"; - output.change = change_arr; - return output; -} -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md deleted file mode 100644 index c08ee55d79a..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: aaa48de84e1ecc7c742e1124 -title: Crie um verificador de palíndromo -challengeType: 5 -forumTopicId: 16004 -dashedName: build-a-palindrome-checker ---- - -# --description-- - -Retorne `true` se a string fornecida for um palíndromo. Caso contrário, retorne `false`. - -Um palíndromo é uma palavra ou frase que é dita da mesma maneira na ordem natural que na ordem inversa, ignorando pontuação, capitalização e espaçamento. - -**Observação:** você precisará remover **todos os caracteres não alfanuméricos** (pontuação, espaços e símbolos) e transforme tudo na mesma capitalização (letra em minúsculo ou maiúsculo) para verificar se determinada palavra ou frase é um palíndromo. - -Vamos passar strings em diferentes formatos, como `racecar`, `RaceCar` e `race CAR` entre outros. - -Nós também passaremos strings com símbolos especiais, como `2A3*3a2`, `2A3 3a2` e `2_A3*3#A2`. - -# --hints-- - -`palindrome("eye")` deve retornar um booleano. - -```js -assert(typeof palindrome('eye') === 'boolean'); -``` - -`palindrome("eye")` deve retornar `true`. - -```js -assert(palindrome('eye') === true); -``` - -`palindrome("_eye")` deve retornar `true`. - -```js -assert(palindrome('_eye') === true); -``` - -`palindrome("race car")` deve retornar `true`. - -```js -assert(palindrome('race car') === true); -``` - -`palindrome("not a palindrome")` deve retornar `false`. - -```js -assert(palindrome('not a palindrome') === false); -``` - -`palindrome("A man, a plan, a canal. Panama")` deve retornar `true`. - -```js -assert(palindrome('A man, a plan, a canal. Panama') === true); -``` - -`palindrome("never odd or even")` deve retornar `true`. - -```js -assert(palindrome('never odd or even') === true); -``` - -`palindrome("nope")` deve retornar `false`. - -```js -assert(palindrome('nope') === false); -``` - -`palindrome("almostomla")` deve retornar `false`. - -```js -assert(palindrome('almostomla') === false); -``` - -`palindrome("My age is 0, 0 si ega ym.")` deve retornar `true`. - -```js -assert(palindrome('My age is 0, 0 si ega ym.') === true); -``` - -`palindrome("1 eye for of 1 eye.")` deve retornar `false`. - -```js -assert(palindrome('1 eye for of 1 eye.') === false); -``` - -`palindrome("0_0 (: /-\ :) 0-0")` deve retornar `true`. - -```js -assert(palindrome('0_0 (: /- :) 0-0') === true); -``` - -`palindrome("five|\_/|four")` deve retornar `false`. - -```js -assert(palindrome('five|_/|four') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function palindrome(str) { - return true; -} - -palindrome("eye"); -``` - -# --solutions-- - -```js -function palindrome(str) { - var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); - var aux = string.split(''); - if (aux.join('') === aux.reverse().join('')){ - return true; - } - - return false; -} -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md deleted file mode 100644 index 0522ef06cd4..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: a7f4d8f2483413a6ce226cac -title: Crie um conversor de números romanos -challengeType: 5 -forumTopicId: 16044 -dashedName: build-a-roman-numeral-converter ---- - -# --description-- - -Converta o número dado em um número romano. - -| Números romanos | Números arábicos | -| --------------- | ---------------- | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| C | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -Todos os números romanos devem ser em maiúsculas. - -# --hints-- - -`convertToRoman(2)` deve retornar a string `II`. - -```js -assert.deepEqual(convertToRoman(2), 'II'); -``` - -`convertToRoman(3)` deve retornar a string `III`. - -```js -assert.deepEqual(convertToRoman(3), 'III'); -``` - -`convertToRoman(4)` deve retornar a string `IV`. - -```js -assert.deepEqual(convertToRoman(4), 'IV'); -``` - -`convertToRoman(5)` deve retornar a string `V`. - -```js -assert.deepEqual(convertToRoman(5), 'V'); -``` - -`convertToRoman(9)` deve retornar a string `IX`. - -```js -assert.deepEqual(convertToRoman(9), 'IX'); -``` - -`convertToRoman(12)` deve retornar a string `XII`. - -```js -assert.deepEqual(convertToRoman(12), 'XII'); -``` - -`convertToRoman(16)` deve retornar a string `XVI`. - -```js -assert.deepEqual(convertToRoman(16), 'XVI'); -``` - -`convertToRoman(29)` deve retornar a string `XXIX`. - -```js -assert.deepEqual(convertToRoman(29), 'XXIX'); -``` - -`convertToRoman(44)` deve retornar a string `XLIV`. - -```js -assert.deepEqual(convertToRoman(44), 'XLIV'); -``` - -`convertToRoman(45)` deve retornar a string `XLV`. - -```js -assert.deepEqual(convertToRoman(45), 'XLV'); -``` - -`convertToRoman(68)` deve retornar a string `LXVIII` - -```js -assert.deepEqual(convertToRoman(68), 'LXVIII'); -``` - -`convertToRoman(83)` deve retornar a string `LXXXIII` - -```js -assert.deepEqual(convertToRoman(83), 'LXXXIII'); -``` - -`convertToRoman(97)` deve retornar a string `XCVII` - -```js -assert.deepEqual(convertToRoman(97), 'XCVII'); -``` - -`convertToRoman(99)` deve retornar a string `XCIX` - -```js -assert.deepEqual(convertToRoman(99), 'XCIX'); -``` - -`convertToRoman(400)` deve retornar a string `CD` - -```js -assert.deepEqual(convertToRoman(400), 'CD'); -``` - -`convertToRoman(500)` deve retornar a string `D` - -```js -assert.deepEqual(convertToRoman(500), 'D'); -``` - -`convertToRoman(501)` deve retornar a string `DI` - -```js -assert.deepEqual(convertToRoman(501), 'DI'); -``` - -`convertToRoman(649)` deve retornar a string `DCXLIX` - -```js -assert.deepEqual(convertToRoman(649), 'DCXLIX'); -``` - -`convertToRoman(798)` deve retornar a string `DCCXCVIII` - -```js -assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); -``` - -`convertToRoman(891)` deve retornar a string `DCCCXCI` - -```js -assert.deepEqual(convertToRoman(891), 'DCCCXCI'); -``` - -`convertToRoman(1000)` deve retornar a string `M` - -```js -assert.deepEqual(convertToRoman(1000), 'M'); -``` - -`convertToRoman(1004)` deve retornar a string `MIV` - -```js -assert.deepEqual(convertToRoman(1004), 'MIV'); -``` - -`convertToRoman(1006)` deve retornar a string `MVI` - -```js -assert.deepEqual(convertToRoman(1006), 'MVI'); -``` - -`convertToRoman(1023)` deve retornar a string `MXXIII` - -```js -assert.deepEqual(convertToRoman(1023), 'MXXIII'); -``` - -`convertToRoman(2014)` deve retornar a string `MMXIV` - -```js -assert.deepEqual(convertToRoman(2014), 'MMXIV'); -``` - -`convertToRoman(3999)` deve retornar a string `MMMCMXCIX` - -```js -assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); -``` - -# --seed-- - -## --seed-contents-- - -```js -function convertToRoman(num) { - return num; -} - -convertToRoman(36); -``` - -# --solutions-- - -```js -function convertToRoman(num) { - var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; - var res = []; - ref.forEach(function(p) { - while (num >= p[1]) { - res.push(p[0]); - num -= p[1]; - } - }); - return res.join(''); -} -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md deleted file mode 100644 index 7149e6e79ad..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: aff0395860f5d3034dc0bfc9 -title: Crie um validador de números de telefone -challengeType: 5 -forumTopicId: 16090 -dashedName: build-a-telephone-number-validator ---- - -# --description-- - -Retorna `true` se a string fornecida se parece com um número telefônico dos Estados Unidos válido. - -O usuário pode preencher o campo do formulário de qualquer maneira que escolher contanto que tenha o formato de um número válido dos EUA. Os seguintes são exemplos de formatos válidos para números nos EUA (consulte os testes abaixo para outras variantes): - -
                                                                    555-555-5555
                                                                    (555)555-5555
                                                                    (555) 555-5555
                                                                    555 555 5555
                                                                    5555555555
                                                                    1 555 555 5555
                                                                    - -Para este desafio, você vai receber uma string como `800-692-7753` ou `8oo-six427676;laskdjf`. Seu trabalho é validar ou rejeitar o número de telefone dos EUA com base em qualquer combinação dos formatos fornecidos acima. O código de área é obrigatório. Se o código do país é fornecido, você deve confirmar que o código do país é `1`. Retorne `true` se a seqüência de caracteres for um número válido de telefone dos EUA; caso contrário, retorne `false`. - -# --hints-- - -`telephoneCheck("555-555-5555")` deve retornar um boolean. - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` deve retornar `true`. - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` deve retornar `true`. - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` deve retornar `true`. - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` deve retornar `true`. - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` deve retornar `true`. - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` deve retornar `true`. - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` deve retornar `false`. - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` deve retornar `false`. - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` deve retornar `false`. - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` deve retornar `true`. - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` deve retornar `true`. - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` deve retornar `false`. - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` deve retornar `false`. - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` deve retornar `false`. - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` deve retornar `false`. - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` deve retornar `false`. - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` deve retornar `false`. - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` deve retornar `false`. - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` deve retornar `false`. - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` deve retornar `false`. - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` deve retornar `false`. - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` deve retornar `false`. - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` deve retornar `false`. - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` deve retornar `false`. - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` deve retornar `false`. - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` deve retornar `false`. - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` deve retornar `false`. - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` deve retornar `false`. - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index 9f0207f3b83..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: Passo 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Você vem declarando as variáveis com a palavra-chave `var`. No entanto, em JavaScript moderno, é a melhor prática usar a palavra-chave `let` em vez disso. Isso corrige vários comportamentos incomuns com `var` que podem tornar o código difícil de depurar. - -Altere todas as palavras-chave `var` para `let`. - -# --hints-- - -Você não deve ter palavras-chave `var` no código. - -```js -assert.notMatch(code, /var/); -``` - -Você deve usar a palavra-chave `let` para declarar a variável `xp`. - -```js -assert.match(code, /let xp/); -``` - -Você deve usar a palavra-chave `let` para declarar a variável `health`. - -```js -assert.match(code, /let health/); -``` - -Você deve usar a palavra-chave `let` para declarar a variável `gold`. - -```js -assert.match(code, /let gold/); -``` - -Você deve usar a palavra-chave `let` para declarar a variável `currentWeapon`. - -```js -assert.match(code, /let currentWeapon/); -``` - -Você não deve alterar os valores das variáveis. - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - - -
                                                                    -
                                                                    - XP: 0 - Health: 100 - Gold: 50 -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    - Monster Name: - Health: -
                                                                    -
                                                                    - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                                    -
                                                                    - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js ---fcc-editable-region-- -var xp = 0; -var health = 100; -var gold = 50; -var currentWeapon = 0; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md deleted file mode 100644 index 2ffb495353d..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 62a8f2bc37675e77d5835235 -title: Passo 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -O JavaScript tem um operador condicional chamado operador ternário. Ele pode ser usado como uma expressão `if-else` de uma linha. A sintaxe é: `condition ? true : false`. - -Aqui está um exemplo de uma expressão `if-else` alterada para uma operação ternária: - -```js -if (num > 5) { - bigger() -} else { - smaller() -} - -num > 5 ? bigger() : smaller(); -``` - -Mude a nova expressão `if-else` para uma operação ternária. - -# --hints-- - -Você deve remover o `if` e `else` do bloco `else if`. - -```js -const block = attack.toString().split("else if"); -assert.notMatch(block[1], /if/); -assert.notMatch(block[1], /else/); -``` - -Você deve verificar se `fighting` é igual a `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2/); -``` - -Usando a sintaxe ternária, você deve chamar `winGame` se `fighting` for igual a `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); -``` - -Usando a sintaxe ternária, você deve chamar `defeatMonster` se `fighting` não for igual a `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - -
                                                                    -
                                                                    - XP: 0 - Health: 100 - Gold: 50 -
                                                                    -
                                                                    - - - -
                                                                    -
                                                                    - Monster Name: - Health: -
                                                                    -
                                                                    - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                                    -
                                                                    - - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js -let xp = 0; -let health = 100; -let gold = 50; -let currentWeapon = 0; -let fighting; -let monsterHealth; -let inventory = ["stick"]; - -const button1 = document.querySelector('#button1'); -const button2 = document.querySelector("#button2"); -const button3 = document.querySelector("#button3"); -const text = document.querySelector("#text"); -const xpText = document.querySelector("#xpText"); -const healthText = document.querySelector("#healthText"); -const goldText = document.querySelector("#goldText"); -const monsterStats = document.querySelector("#monsterStats"); -const monsterName = document.querySelector("#monsterName"); -const monsterHealthText =document.querySelector("#monsterHealth"); -const weapons = [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]; -const monsters = [ - { - name: "slime", - level: 2, - health: 15 - }, - { - name: "fanged beast", - level: 8, - health: 60 - }, - { - name: "dragon", - level: 20, - health: 300 - } -] -const locations = [ - { - name: "town square", - "button text": ["Go to store", "Go to cave", "Fight dragon"], - "button functions": [goStore, goCave, fightDragon], - text: "You are in the town square. You see a sign that says \"Store\"." - }, - { - name: "store", - "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], - "button functions": [buyHealth, buyWeapon, goTown], - text: "You enter the store." - }, - { - name: "cave", - "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], - "button functions": [fightSlime, fightBeast, goTown], - text: "You enter the cave. You see some monsters." - }, - { - name: "fight", - "button text": ["Attack", "Dodge", "Run"], - "button functions": [attack, dodge, goTown], - text: "You are fighting a monster." - }, - { - name: "kill monster", - "button text": ["Go to town square", "Go to town square", "Go to town square"], - "button functions": [goTown, goTown, goTown], - text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' - }, - { - name: "lose", - "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], - "button functions": [restart, restart, restart], - text: "You die. ☠️" - } -]; - -// initialize buttons -button1.onclick = goStore; -button2.onclick = goCave; -button3.onclick = fightDragon; - -function update(location) { - monsterStats.style.display = "none"; - button1.innerText = location["button text"][0]; - button2.innerText = location["button text"][1]; - button3.innerText = location["button text"][2]; - button1.onclick = location["button functions"][0]; - button2.onclick = location["button functions"][1]; - button3.onclick = location["button functions"][2]; - text.innerText = location.text; -} - -function goTown() { - update(locations[0]); -} - -function goStore() { - update(locations[1]); -} - -function goCave() { - update(locations[2]); -} - -function buyHealth() { - if (gold >= 10) { - gold -= 10; - health += 10; - goldText.innerText = gold; - healthText.innerText = health; - } else { - text.innerText = "You do not have enough gold to buy health."; - } -} - -function buyWeapon() { - if (currentWeapon < weapons.length - 1) { - if (gold >= 30) { - gold -= 30; - currentWeapon++; - goldText.innerText = gold; - let newWeapon = weapons[currentWeapon].name; - text.innerText = "You now have a " + newWeapon + "."; - inventory.push(newWeapon); - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "You do not have enough gold to buy a weapon."; - } - } else { - text.innerText = "You already have the most powerful weapon!"; - button2.innerText = "Sell weapon for 15 gold"; - button2.onclick = sellWeapon; - } -} - -function sellWeapon() { - if (inventory.length > 1) { - gold += 15; - goldText.innerText = gold; - let currentWeapon = inventory.shift(); - text.innerText = "You sold a " + currentWeapon + "."; - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "Don't sell your only weapon!"; - } -} - -function fightSlime() { - fighting = 0; - goFight(); -} - -function fightBeast() { - fighting = 1; - goFight(); -} - -function fightDragon() { - fighting = 2; - goFight(); -} - -function goFight() { - update(locations[3]); - monsterHealth = monsters[fighting].health; - monsterStats.style.display = "block"; - monsterName.innerText = monsters[fighting].name; - monsterHealthText.innerText = monsterHealth; -} - ---fcc-editable-region-- -function attack() { - text.innerText = "The " + monsters[fighting].name + " attacks."; - text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; - health -= monsters[fighting].level; - monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; - healthText.innerText = health; - monsterHealthText.innerText = monsterHealth; - if (health <= 0) { - lose(); - } else if (monsterHealth <= 0) { - if (fighting === 2) { - winGame(); - } else { - defeatMonster(); - } - } -} ---fcc-editable-region-- - -function dodge() { - text.innerText = "You dodge the attack from the " + monsters[fighting].name; -} - -function defeatMonster() { - gold += Math.floor(monsters[fighting].level * 6.7); - xp += monsters[fighting].level; - goldText.innerText = gold; - xpText.innerText = xp; - update(locations[4]); -} - -function lose() { - update(locations[5]); -} - -function restart() { - xp = 0; - health = 100; - gold = 50; - currentWeapon = 0; - inventory = ["stick"]; - goldText.innerText = gold; - healthText.innerText = health; - xpText.innerText = xp; - goTown(); -} -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md new file mode 100644 index 00000000000..d178d5a5a2b --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -0,0 +1,682 @@ +--- +id: 659b0093d7db5a1a1122b7bd +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +```js +const animals = ["dog", "cat", "horse"]; +animals.indexOf("cat") // 1 +``` + +Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`. + +# --hints-- + +You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/) +``` + +You should pass in `userData.currentSong` into the `indexOf()` method. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +

                                                                    freeCodeCamp

                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    + song cover art +
                                                                    +
                                                                    +
                                                                    +

                                                                    +

                                                                    +
                                                                    +
                                                                    + + + + + +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +

                                                                    Playlist

                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                    +
                                                                      +
                                                                      +
                                                                      + + + +``` + +```css +:root { + /* colors */ + --primary-color: #dfdfe2; + --secondary-color: #ffffff; + --app-background-color: #4d4d62; + --background-color: #1b1b32; + --foreground-color: #3b3b4f; + --highlight-color: #f1be32; + + /* font sizes */ + --root-font-size: 16px; + font-size: var(--root-font-size); + + /* font-families */ + --font-headline: "Roboto Mono", monospace; + --font-family: "Lato", sans-serif; +} + +*, +*::after, +*::before { + box-sizing: border-box; +} + +body { + background-color: var(--app-background-color); + color: var(--primary-color); + font-family: var(--font-family); +} + +h1 { + font-size: 1.125rem; + line-height: 1.6; +} + +h2 { + font-size: var(--root-font-size); +} + +ul { + margin: 0; +} + +.container { + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; +} + +.player, +.playlist { + width: 450px; + background-color: var(--background-color); + border: 3px solid var(--foreground-color); +} + +.player { + height: 260px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +.player-bar, +.playlist-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + width: 100%; + height: 30px; + background-color: var(--foreground-color); +} + +.parallel-lines { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + padding: 0 5px; +} + +.parallel-lines > div { + height: 2px; + width: 100%; + min-width: 75px; + background-color: var(--highlight-color); +} + +.fcc-title, +.playlist-title { + color: var(--secondary-color); + margin: 0 10px; + font-family: var(--font-headline); +} + +.player-content { + display: flex; + background-color: var(--foreground-color); + width: 430px; + height: 200px; + column-gap: 13px; + align-items: center; + justify-content: center; +} + +#player-album-art { + background-color: var(--secondary-color); + border: 6px solid var(--background-color); +} + +#player-album-art img { + width: 150px; + display: block; +} + +.player-display { + display: flex; + flex-direction: column; + row-gap: 20px; + padding: 14px; + background-color: var(--background-color); + height: 153px; + width: 226px; +} + +.player-display-song-artist { + height: 80px; +} + +.player-buttons svg { + fill: var(--primary-color); +} + +.playing > svg { + fill: var(--highlight-color); +} + +.player-buttons { + display: flex; + justify-content: space-around; +} + +button { + background: transparent; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: var(--root-font-size); + outline-color: var(--highlight-color); + text-align: center; +} + +.playlist-song { + outline-color: var(--highlight-color); +} + +.playlist li:not(:last-child) { + border-bottom: 1px solid var(--background-color); +} + +button:focus, +.playlist-song:focus { + outline-style: dashed; + outline-width: 2px; +} + +/* Playlist */ +.playlist { + height: auto; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +#playlist-songs { + width: 430px; + height: 100%; + background-color: var(--foreground-color); + display: flex; + flex-direction: column; + row-gap: 8px; + padding: 8px 9px; + visibility: visible; + justify-content: start; + list-style: none; +} + +.playlist-song { + display: flex; + height: 55px; + justify-content: space-between; + align-items: center; + padding: 5px; +} + +[aria-current="true"] { + background-color: var(--background-color); +} + +[aria-current="true"] p { + color: var(--highlight-color); +} + +.playlist-song-info { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + column-gap: 7px; + padding: 5px 0; + font-family: var(--font-family); +} + +#player-song-title, +#player-song-artist { + margin: 0; +} + +#player-song-artist { + color: var(--highlight-color); + font-size: 0.75rem; +} + +#player-song-title { + font-size: 1.125rem; +} + +.playlist-song-title { + font-size: 0.85rem; + width: 241px; + text-align: left; +} + +.playlist-song-artist { + font-size: 0.725rem; + width: 80px; +} + +.playlist-song-duration { + font-size: 0.725rem; + margin: auto; + font-family: var(--font-headline); + width: 30px; +} + +.playlist-song-delete { + padding: 0; + width: 20px; + height: 20px; +} + +.playlist-song-delete, +.playlist-song-delete { + fill: var(--foreground-color); +} + +.playlist-song-delete:hover circle, +.playlist-song-delete:focus circle { + fill: #ff0000; +} + +@media (max-width: 700px) { + .player, + .playlist { + width: 300px; + } + + .player { + height: 340px; + } + + #playlist-songs { + height: 280px; + padding: 5px 6px; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-color: var(--background-color) var(--secondary-color); + scrollbar-width: thin; + } + + #playlist-songs::-webkit-scrollbar { + width: 5px; + } + + #playlist-songs::-webkit-scrollbar-track { + background: var(--background-color); + } + + #playlist-songs::-webkit-scrollbar-thumb { + background: var(--secondary-color); + } + + h1 { + font-size: 0.813rem; + } + + h2 { + font-size: 0.75rem; + } + + .player-bar, + .playlist-bar, + .player-content, + #playlist-songs { + width: 280px; + } + + .playlist-song { + justify-content: space-between; + } + + .playlist-song-title { + width: 140px; + } + + .playlist-song-artist { + width: 40px; + } + + .playlist-song-duration > button { + padding: 0; + } + + .player-content { + display: inline; + position: relative; + justify-items: center; + height: 100%; + } + + #player-album-art { + z-index: -100; + height: 280px; + box-shadow: none; + background: #000; + } + + #player-album-art img { + width: 100%; + opacity: 0.6; + } + + .player-display-song-artist { + padding: 0 10px; + } + + .player-display-song-artist > p { + white-space: pre-wrap; + } + + .player-display { + position: absolute; + width: 100%; + z-index: 1000; + background-color: transparent; + top: 0; + height: 280px; + justify-content: space-between; + text-align: center; + } +} +``` + +```js +const playlistSongs = document.getElementById("playlist-songs"); +const playButton = document.getElementById("play"); +const pauseButton = document.getElementById("pause"); +const nextButton = document.getElementById("next"); +const previousButton = document.getElementById("previous"); +const shuffleButton = document.getElementById("shuffle"); + +const allSongs = [ + { + id: 0, + title: "Scratching The Surface", + artist: "Quincy Larson", + duration: "4:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3", + }, + { + id: 1, + title: "Can't Stay Down", + artist: "Quincy Larson", + duration: "4:15", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3", + }, + { + id: 2, + title: "Still Learning", + artist: "Quincy Larson", + duration: "3:51", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3", + }, + { + id: 3, + title: "Cruising for a Musing", + artist: "Quincy Larson", + duration: "3:34", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3", + }, + { + id: 4, + title: "Never Not Favored", + artist: "Quincy Larson", + duration: "3:35", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3", + }, + { + id: 5, + title: "From the Ground Up", + artist: "Quincy Larson", + duration: "3:12", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3", + }, + { + id: 6, + title: "Walking on Air", + artist: "Quincy Larson", + duration: "3:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3", + }, + { + id: 7, + title: "Can't Stop Me. Can't Even Slow Me Down.", + artist: "Quincy Larson", + duration: "3:52", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3", + }, + { + id: 8, + title: "The Surest Way Out is Through", + artist: "Quincy Larson", + duration: "3:10", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3", + }, + { + id: 9, + title: "Chasing That Feeling", + artist: "Quincy Larson", + duration: "2:43", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3", + }, +]; + +const audio = new Audio(); +let userData = { + songs: [...allSongs], + currentSong: null, + songCurrentTime: 0, +}; + +const playSong = (id) => { + const song = userData?.songs.find((song) => song.id === id); + audio.src = song.src; + audio.title = song.title; + + if (userData?.currentSong === null || userData?.currentSong.id !== song.id) { + audio.currentTime = 0; + } else { + audio.currentTime = userData.songCurrentTime; + } + userData.currentSong = song; + playButton.classList.add("playing"); + + audio.play(); +}; + +const pauseSong = () => { + userData.songCurrentTime = audio.currentTime; + + playButton.classList.remove("playing"); + audio.pause(); +}; + +const renderSongs = (array) => { + const songsHTML = array + .map((song)=> { + return ` +
                                                                    • + + +
                                                                      • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +const getCurrentSongIndex = () => { + +} +--fcc-editable-region-- + +playButton.addEventListener("click", () => { + if (userData?.currentSong === null) { + playSong(userData?.songs[0].id); + } else { + playSong(userData?.currentSong.id); + } +}); + +pauseButton.addEventListener("click", pauseSong); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md deleted file mode 100644 index 2ae535f3d52..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 63ec14d1c216aa063f0be4af -title: Passo 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Você criará uma aplicação de carrinho de compras. O HTML e CSS já estão fornecidos, mas você precisará criar o JavaScript para tornar a página interativa. - -Para começar, você precisará obter alguns dos elementos do DOM. Comece usando `document.getElementById()` para obter os elementos `#cart-container`, `#products-container` e `#dessert-card-container`. Armazene-os em variáveis chamadas `cartContainer`, `productsContainer` e `dessertCards`, respectivamente. - -Como elas não mudarão, lembre-se de usar `const` para declará-las. - -# --hints-- - -Você deve usar `document.getElementById()` para obter o elemento `#cart-container`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -Você deve atribuir o elemento `#cart-container` a uma variável chamada `cartContainer`. Lembre-se de usar `const` para declarar a variável. - -```js -assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -Você deve usar `document.getElementById()` para obter o elemento `#products-container`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -Você deve atribuir o elemento `#products-container` a uma variável chamada `productsContainer`. Lembre-se de usar `const` para declarar a variável. - -```js -assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -Você deve usar `document.getElementById()` para obter o elemento `#dessert-card-container`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -Você deve atribuir o elemento `#dessert-card-container` a uma variável chamada `dessertCards`. Lembre-se de usar `const` para declarar a variável. - -```js -assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md deleted file mode 100644 index 9a3d43748a0..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 63ec19978a066607e23439f8 -title: Passo 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Agora, você precisa obter os dois botões. Continuando com o padrão, obtenha os elementos `#cart-btn` e `#clear-cart-btn`. Armazene-os em variáveis chamadas `cartBtn` e `clearCartBtn`, respectivamente. - -# --hints-- - -Você deve usar `document.getElementById()` para obter o elemento `#cart-btn`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -Você deve atribuir o elemento `#cart-btn` a uma variável chamada `cartBtn`. Lembre-se de usar `const` para declarar a variável. - -```js -assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -Você deve usar `document.getElementById()` para obter o elemento `#clear-cart-btn`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -Você deve atribuir o elemento `#clear-cart-btn` a uma variável chamada `clearCartBtn`. Lembre-se de usar `const` para declarar a variável. - -```js -assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md deleted file mode 100644 index d328bb03b3c..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 63ec1a16f930b108b8a76806 -title: Passo 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Em seguida, você receberá seus totais. Obtenha os elementos `#total-items`, `#subtotal`, `#taxes` e `#total`. Armazene-os em variáveis chamadas `totalNumberOfItems`, `cartSubTotal`, `cartTaxes` e `cartTotal`, respectivamente. - -# --hints-- - -Você deve usar `document.getElementById()` para obter o elemento `#total-items`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -Você deve atribuir o elemento `#total-items` a uma variável chamada `totalNumberOfItems`. Lembre-se de usar `const` para declarar a variável. - -```js -assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -Você deve usar `document.getElementById()` para obter o elemento `#subtotal`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -Você deve atribuir o elemento `#subtotal` a uma variável chamada `cartSubTotal`. Lembre-se de usar `const` para declarar a variável. - -```js -assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -Você deve usar `document.getElementById()` para obter o elemento `#taxes`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -Você deve atribuir o elemento `#taxes` a uma variável chamada `cartTaxes`. Lembre-se de usar `const` para declarar a variável. - -```js -assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -Você deve usar `document.getElementById()` para obter o elemento `#total`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -Você deve atribuir o elemento `#total` a uma variável chamada `cartTotal`. Lembre-se de usar `const` para declarar a variável. - -```js -assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md deleted file mode 100644 index 360ecb68985..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 63ec1bbf5584390a7d08d41f -title: Passo 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -O último elemento a ser obtido é o elemento `#show-hide-cart`. Armazene-o em uma variável chamada `showHideCartSpan`. - -Em seguida, use `let` para declarar uma variável chamada `isCartShowing` e defina-a como `false`. - -# --hints-- - -Você deve usar `document.getElementById()` para obter o elemento `#show-hide-cart`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -Você deve atribuir o elemento `#show-hide-cart` a uma variável chamada `showHideCartSpan`. Lembre-se de usar `const` para declarar a variável. - -```js -assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -Você deve usar `let` para declarar uma variável chamada `isCartShowing`. - -```js -assert.match(code, /let\s+isCartShowing/); -``` - -Você deve definir a variável `isCartShowing` como `false`. - -```js -assert.match(code, /let\s+isCartShowing\s*=\s*false/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md deleted file mode 100644 index cd52e054f54..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 63ec1cb59f2a4c0be5b6dfa0 -title: Passo 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Um carrinho de compras não tem muito propósito sem produtos. Declare uma variável `products` e defina-a com um array vazio. O uso de um array permitirá que você armazene vários produtos. - -# --hints-- - -Você deve declarar uma variável `products` com `const`. - -```js -assert.match(code, /const\s+products/); -``` - -Você deve definir a variável `products` como um array vazio. - -```js -assert.match(code, /const\s+products\s*=\s*\[\s*\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md deleted file mode 100644 index 6f623e4a97f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 63ec20a06fff670d37befbd9 -title: Passo 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Agora, você precisa começar a adicionar os produtos. Antes de fazer isso, você precisa considerar a estrutura dos dados de produtos. Um produto precisará de um identificador único para diferenciá-lo de outros produtos, um preço para que as pessoas saibam quanto custa e um nome para que as pessoas saibam o que estão comprando. Você também deve adicionar uma categoria a cada produto. - -Adicione outro objeto ao array `products`. Dê a esse objeto uma propriedade `id` definida como o número `1`, uma propriedade `name` definida como `Vanilla Cupcakes (6 Pack)`, uma propriedade `price` definido como o número `12.99` e uma propriedade `category` definida como `Cupcake`. - -# --hints-- - -O array de produtos deve ter um valor. - -```js -assert.equal(products.length, 1); -``` - -O array de produtos deve ter um objeto como seu primeiro valor. - -```js -assert.isObject(products[0]); -``` - -O array de produtos deve ter um objeto com a propriedade `id` definida como o número `1`. - -```js -assert.equal(products[0].id, 1); -``` - -O array de produtos deve ter um objeto com a propriedade `name` definida como `Vanilla Cupcakes (6 Pack)`. - -```js -assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)'); -``` - -O array de produtos deve ter um objeto com a propriedade `price` definida como o número `12.99`. - -```js -assert.equal(products[0].price, 12.99); -``` - -O array de produtos deve ter um objeto com a propriedade `category` definida como `Cupcake`. - -```js -assert.equal(products[0].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md deleted file mode 100644 index 7cc37826cf1..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md +++ /dev/null @@ -1,472 +0,0 @@ ---- -id: 63ec3287b182ec0efe8a3135 -title: Passo 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Seguindo a mesma estrutura de dados, adicione os produtos desta tabela (em ordem) ao array `products`. Aumente o `id` para cada produto, contando para cima. - -| `name` | `price` | `category` | -| ------------------------------ | ------- | ----------- | -| `French Macaroon` | `3.99` | `Macaroon` | -| `Pumpkin Cupcake` | `3.99` | `Cupcake` | -| `Chocolate Cupcake` | `5.99` | `Cupcake` | -| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` | -| `Strawberry Ice Cream` | `2.99` | `Ice Cream` | -| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` | -| `Strawberry Pretzel` | `4.99` | `Pretzel` | -| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` | -| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` | -| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` | -| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` | - -# --hints-- - -O segundo objeto no array `products` deve ter uma propriedade `id` definida como o número `2`. - -```js -assert.equal(products[1].id, 2); -``` - -O segundo objeto no array `products` deve ter uma propriedade `name` definida como `French Macaroon`. - -```js -assert.equal(products[1].name, 'French Macaroon'); -``` - -O segundo objeto no array `products` deve ter uma propriedade `price` definida como o número `3.99`. - -```js -assert.equal(products[1].price, 3.99); -``` - -O segundo objeto no array `products` deve ter uma propriedade `category` definida como `Macaroon`. - -```js -assert.equal(products[1].category, 'Macaroon'); -``` - -O terceiro objeto no array `products` deve ter uma propriedade `id` definida como o número `3`. - -```js -assert.equal(products[2].id, 3); -``` - -O terceiro objeto no array `products` deve ter uma propriedade `name` definida como `Pumpkin Cupcake`. - -```js -assert.equal(products[2].name, 'Pumpkin Cupcake'); -``` - -O terceiro objeto no array `products` deve ter uma propriedade `price` definida como o número `3.99`. - -```js -assert.equal(products[2].price, 3.99); -``` - -O terceiro objeto no array `products` deve ter uma propriedade `category` definida como `Cupcake`. - -```js -assert.equal(products[2].category, 'Cupcake'); -``` - -O quarto objeto no array `products` deve ter uma propriedade `id` definida como o número `4`. - -```js -assert.equal(products[3].id, 4); -``` - -O quarto objeto no array `products` deve ter uma propriedade `name` definida como `Chocolate Cupcake`. - -```js -assert.equal(products[3].name, 'Chocolate Cupcake'); -``` - -O quarto objeto no array `products` deve ter uma propriedade `price` definida como o número `5.99`. - -```js -assert.equal(products[3].price, 5.99); -``` - -O quarto objeto no array `products` deve ter uma propriedade `category` definida como `Cupcake`. - -```js -assert.equal(products[3].category, 'Cupcake'); -``` - -O quinto objeto no array `products` deve ter uma propriedade `id` definida como o número `5`. - -```js -assert.equal(products[4].id, 5); -``` - -O quinto objeto no array `products` deve ter uma propriedade `name` definida como `Chocolate Pretzels (4 Pack)`. - -```js -assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)'); -``` - -O quinto objeto no array `products` deve ter uma propriedade `price` definida como o número `10.99`. - -```js -assert.equal(products[4].price, 10.99); -``` - -O quinto objeto no array `products` deve ter uma propriedade `category` definida como `Pretzel`. - -```js -assert.equal(products[4].category, 'Pretzel'); -``` - -O sexto objeto no array `products` deve ter uma propriedade `id` definida como o número `6`. - -```js -assert.equal(products[5].id, 6); -``` - -O sexto objeto no array `products` deve ter uma propriedade `name` definida como `Strawberry Ice Cream`. - -```js -assert.equal(products[5].name, 'Strawberry Ice Cream'); -``` - -O sexto objeto no array `products` deve ter uma propriedade `price` definida como o número `2.99`. - -```js -assert.equal(products[5].price, 2.99); -``` - -O sexto objeto no array `products` deve ter uma propriedade `category` definida como `Ice Cream`. - -```js -assert.equal(products[5].category, 'Ice Cream'); -``` - -O sétimo objeto no array `products` deve ter uma propriedade `id` definida como o número `7`. - -```js -assert.equal(products[6].id, 7); -``` - -O sétimo objeto no array `products` deve ter uma propriedade `name` definida como `Chocolate Macaroons (4 Pack)`. - -```js -assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)'); -``` - -O sétimo objeto no array `products` deve ter uma propriedade `price` definida como o número `9.99`. - -```js -assert.equal(products[6].price, 9.99); -``` - -O sétimo objeto no array `products` deve ter uma propriedade `category` definida como `Macaroon`. - -```js -assert.equal(products[6].category, 'Macaroon'); -``` - -O oitavo objeto no array `products` deve ter uma propriedade `id` definida como o número `8`. - -```js -assert.equal(products[7].id, 8); -``` - -O oitavo objeto no array `products` deve ter uma propriedade `name` definida como `Strawberry Pretzel`. - -```js -assert.equal(products[7].name, 'Strawberry Pretzel'); -``` - -O oitavo objeto no array `products` deve ter uma propriedade `price` definida como o número `4.99`. - -```js -assert.equal(products[7].price, 4.99); -``` - -O oitavo objeto no array `products` deve ter uma propriedade `category` definida como `Pretzel`. - -```js -assert.equal(products[7].category, 'Pretzel'); -``` - -O nono objeto no array `products` deve ter uma propriedade `id` definida como o número `9`. - -```js -assert.equal(products[8].id, 9); -``` - -O nono objeto no array `products` deve ter uma propriedade `name` definida como `Butter Pecan Ice Cream`. - -```js -assert.equal(products[8].name, 'Butter Pecan Ice Cream'); -``` - -O nono objeto no array `products` deve ter uma propriedade `price` definida como o número `2.99`. - -```js -assert.equal(products[8].price, 2.99); -``` - -O nono objeto no array `products` deve ter uma propriedade `category` definida como `Ice Cream`. - -```js -assert.equal(products[8].category, 'Ice Cream'); -``` - -O décimo objeto no array `products` deve ter uma propriedade `id` definida como o número `10`. - -```js -assert.equal(products[9].id, 10); -``` - -O décimo objeto no array `products` deve ter uma propriedade `name` definida como `Rocky Road Ice Cream`. - -```js -assert.equal(products[9].name, 'Rocky Road Ice Cream'); -``` - -O décimo objeto no array `products` deve ter uma propriedade `price` definida como o número `2.99`. - -```js -assert.equal(products[9].price, 2.99); -``` - -O décimo objeto no array `products` deve ter uma propriedade `category` definida como `Ice Cream`. - -```js -assert.equal(products[9].category, 'Ice Cream'); -``` - -O décimo primeiro objeto no array `products` deve ter uma propriedade `id` definida como o número `11`. - -```js -assert.equal(products[10].id, 11); -``` - -O décimo primeiro objeto no array `products` deve ter uma propriedade `name` definida como `Vanilla Macaroons (5 Pack)`. - -```js -assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)'); -``` - -O décimo primeiro objeto no array `products` deve ter uma propriedade `price` definida como o número `11.99`. - -```js -assert.equal(products[10].price, 11.99); -``` - -O décimo primeiro objeto no array `products` deve ter uma propriedade `category` definida como `Macaroon`. - -```js -assert.equal(products[10].category, 'Macaroon'); -``` - -O décimo segundo objeto no array `products` deve ter uma propriedade `id` definida como o número `12`. - -```js -assert.equal(products[11].id, 12); -``` - -O décimo segundo objeto no array `products` deve ter uma propriedade `name` definida como `Lemon Cupcakes (4 Pack)`. - -```js -assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)'); -``` - -O décimo segundo objeto no array `products` deve ter uma propriedade `price` definida como o número `12.99`. - -```js -assert.equal(products[11].price, 12.99); -``` - -O décimo segundo objeto no array `products` deve ter uma propriedade `category` definida como `Cupcake`. - -```js -assert.equal(products[11].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md deleted file mode 100644 index 0157186bc26..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 63ec3427fc3e9214c9ed2a14 -title: Passo 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Agora que você tem sua lista de produtos, pode usar o JavaScript para inseri-los no HTML. Com essa abordagem, se você decidir adicionar mais produtos, o HTML refletirá isso automaticamente. - -Comece chamando o método `.forEach` do array `products`. Use a sintaxe das arrow functions para criar uma função de callback vazia. - -# --hints-- - -Você deve chamar o método `.forEach` do array `products`. - -```js -assert.match(code, /products\.forEach\(/); -``` - -Você deve usar a sintaxe das arrow functions para criar uma função de callback vazia. - -```js -assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/) -``` - -Você deve passar uma função de callback vazia para o método `.forEach`. - -```js -assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md deleted file mode 100644 index a4b3a5260a4..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 63ec36f6133df7160be3ec66 -title: Passo 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Lembre-se de que você pode usar a desestruturação para extrair vários valores de um array ou objeto em uma única instrução. - -Para o primeiro parâmetro da função de callback, desestruture as propriedades do objeto `name`, `id`, `price` e `category` que você passou. - -# --hints-- - -Você deve usar a desestruturação para declarar os parâmetros `name`, `id`, `price` e `category`. Para este teste, a ordem é importante. - -```js -assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/); -``` - -A desestruturação deve ser o primeiro parâmetro da função de callback. - -```js -assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - () => {} -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md deleted file mode 100644 index bf258f1bda6..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 63ec47b454495519739486a7 -title: Passo 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Você precisa exibir os produtos disponíveis no HTML. Comece usando o operador da atribuição de adição para adicionar uma string de template literals vazia à propriedade `innerHTML` da variável `dessertCards`. - -# --hints-- - -Você deve acessar a propriedade `innerHTML` do elemento `dessertCards`. - -```js -assert.match(code, /dessertCards\.innerHTML/); -``` - -Você deve usar o operador de atribuição de adição na propriedade `innerHTML`. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/); -``` - -Você deve adicionar uma string de template literals vazia à propriedade `innerHTML`. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md deleted file mode 100644 index b03249face6..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 63ee5d38a5d29d0696f8d820 -title: Passo 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -No template literal, crie um elemento `div` com a classe `dessert-card`. Naquela `div`, crie um elemento `h2` e dê a ele o texto da variável `name`. - -# --hints-- - -Você deve criar um elemento `div`. - -```js -assert.isAtLeast(document.querySelectorAll('div')?.length, 12); -``` - -O elemento `div` deve ter a classe `dessert-card`. - -```js -assert.equal(document.querySelectorAll('.dessert-card')?.length, 12); -``` - -Você deve criar um elemento `h2`. - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.length, 12); -``` - -O elemento `h2` deve conter o texto da variável `name`. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)'); -``` - -O elemento `h2` deve estar dentro do elemento `div`. - -```js -assert.equal(document.querySelectorAll('div h2')?.length, 12); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` - - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md deleted file mode 100644 index a42e757b560..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63ee5d8f9e7168076e932fe2 -title: Passo 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Após o elemento `h2`, crie dois elementos `p`. Dê ao primeiro a `class` `dessert-price` e o texto da variável `price` com um sinal de dólar na frente. Dê ao segundo a `class` `product-category` e o texto `Category:` seguido pelo valor da variável `category`. - -# --hints-- - -Você deve criar dois elementos `p`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children.length, 3); -assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2) -``` - -Os elementos `p` devem vir depois do elemento `h2`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2'); -assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P'); -assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P'); -``` - -O primeiro elemento `p` deve ter uma `class` definida como `dessert-price`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price'); -``` - -O primeiro elemento `p` deve ter o texto da variável `price` com um sinal de dólar na frente. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99'); -``` - -O segundo elemento `p` deve ter uma `class` definida como `product-category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category'); -``` - -O segundo elemento `p` deve ter o texto `Category:` seguido pelo valor da variável `category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      - -
                                                                      - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md deleted file mode 100644 index 7827a1e7f7f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 63ee5e0f08e82208364c4128 -title: Passo 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Por fim, após os elementos `p`, crie um elemento `button`. Dê a ele um `id` definido com o valor da variável `id`, uma `class` `btn add-to-cart-btn` e use `Add to cart` como texto. - -# --hints-- - -Você deve criar um elemento `button`. - -```js -assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12); -``` - -O elemento `button` deve vir depois do elemento `p`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P'); -assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling); -``` - -O elemento `button` deve ter um `id` definido como o valor da variável `id`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.id, '1'); -``` - -O elemento `button` deve ter uma `class` definida como `btn add-to-cart-btn`. - -```js -assert.include(document.querySelector('.dessert-card button')?.className, 'btn'); -assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn'); -``` - -O elemento `button` dever ter o texto `Add to cart`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md deleted file mode 100644 index 5989df069ba..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 63ee5ea8be892e0955ab346c -title: Passo 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Você já está familiarizado com a `class` do HTML, mas o JavaScript também tem uma classe. Em JavaScript, uma classe é como um diagrama para a criação de objetos. Ela permite que você defina um conjunto de propriedades e métodos, além de instanciar (ou criar) objetos com essas propriedades e métodos. - -A palavra-chave `class` é usada para declarar uma classe. Aqui está um exemplo de como declarar uma classe `Computer`: - -```js -class Computer {}; -``` - -Declare uma classe `ShoppingCart`. - -# --hints-- - -Você deve declarar uma variável `ShoppingCart`. - -```js -assert.match(code, /ShoppingCart/); -``` - -Você deve usar a palavra-chave `class` para declarar a classe `ShoppingCart`. - -```js -assert.match(code, /class\s+ShoppingCart\s*/); -``` - -A classe `ShoppingCart` deve estar vazia. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md deleted file mode 100644 index 6661a632838..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 63ee5fc113bcb20a5db9214b -title: Passo 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -As classes têm um método especial chamado `constructor`, que é usado quando uma instância da classe é criada. O método `constructor` é um ótimo lugar para inicializar propriedades da classe. Aqui está um exemplo de uma classe com um método `constructor`: - -```js -class Computer { - constructor() { - } -} -``` - -Adiciona um método `constructor` vazio à classe `ShoppingCart`. - -# --hints-- - -Você deve adicionar um método `constructor` à classe `ShoppingCart`. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/) -``` - -O método `constructor` deve estar vazio. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md deleted file mode 100644 index 4f7c6a8eabf..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 63ee611d478dca0b77f6a393 -title: Passo 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -A palavra-chave `this` em JavaScript é usada para se referir ao objeto atual. Dependendo do local onde `this` é usado, a referência que ele tem muda. No caso de uma classe, ele se refere à instância do objeto sendo construído. Você pode usar a palavra-chave `this` para definir as propriedades do objeto que está sendo instanciado. Aqui está um exemplo: - -```js -class Computer { - constructor() { - this.ram = 16; - } -} -``` - -No construtor, use a palavra-chave `this` para definir a propriedade `items` como um array vazio. Além disso, defina a propriedade `total` como `0` e a propriedade `taxRate` como `8.25`. - -# --hints-- - -Você deve usar a palavra-chave `this` para definir a propriedade `items` como um array vazio. - -```js -assert.match(code, /this\.items/); -const cart = new ShoppingCart(); -assert.isArray(cart.items); -assert.isEmpty(cart.items); -``` - -Você deve usar a palavra-chave `this` para definir a propriedade `total` como `0`. - -```js -assert.match(code, /this\.total/); -const cart = new ShoppingCart(); -assert.equal(cart.total, 0); -``` - -Você deve usar a palavra-chave `this` para definir a propriedade `taxRate` como `8.25`. - -```js -assert.match(code, /this\.taxRate/); -const cart = new ShoppingCart(); -assert.equal(cart.taxRate, 8.25); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - - } -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md deleted file mode 100644 index 29b73e9edcc..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 63ee7c664f9b65137d925c8a -title: Passo 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -A classe `ShoppingCart` precisa ter a capacidade de adicionar itens. Crie um método `addItem` vazio, que recebe dois parâmetros: `id` e `products`. Criar um método terá esta aparência: - -```js -class Computer { - constructor() { - this.ram = 16; - } - - addRam(amount) { - this.ram += amount; - } -} -``` - -O primeiro parâmetro, `id`, é o `id` do produto que o usuário adicionou ao carrinho. O segundo parâmetro, `products`, é um array de objetos do produto. Usando um parâmetro em vez de fazer referência direta ao array `products` existente, este método será mais flexível se você quiser adicionar outras listas de produtos no futuro. - -# --hints-- - -A classe `ShoppingCart` deve ter o método `addItem`. - -```js -const cart = new ShoppingCart(); -assert.isFunction(cart.addItem); -``` - -O método `addItem` deve receber dois parâmetros: `id` e `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/); -``` - -O método `addItem` deve estar vazio. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md deleted file mode 100644 index 84f8b458f0d..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 63eea5cea403a81a68ae493c -title: Passo 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Você precisa encontrar o produto que o usuário está adicionando ao carrinho. Lembre-se de que arrays têm um método `.find()`. Na função `addItem`, declare uma variável `product` e atribua a ela o valor da chamada do método `.find()` no array `products`. - -Para a função de callback de `.find()`, passe uma função que receba um único parâmetro `item` e retorne se a propriedade `id` do `item` é estritamente igual ao parâmetro `id` passado para `addItem`. - -# --hints-- - -Você deve declarar uma variável `product` na função `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=/); -``` - -Você deve chamar o método `.find()` do array `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(/); -``` - -Você deve passar uma função de callback para o método `.find()`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/); -``` - -A função de callback deve receber um único parâmetro. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/); -``` - -A função de callback deve retornar se a propriedade `id` do `item` é estritamente igual ao parâmetro `id` passado para `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/); -``` - -Você deve atribuir o valor do método `.find()` à variável `product`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md deleted file mode 100644 index 642a45737bd..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63eea817673c8e1c22927fa6 -title: Passo 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Use `const` e a desestruturação para extrair as variáveis `name` e `price` de `product`. - -# --hints-- - -Você deve usar a desestruturação para obter as variáveis `name` e `price`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/); -``` - -Você deve usar `const` para declarar as variáveis `name` e `price`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/); -``` - -Você deve usar a desestruturação para extrair as variáveis `name` e `price` de `product`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md deleted file mode 100644 index ceda2a8676f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 63eea8e1e143ae1d098c8c9d -title: Passo 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Agora, você precisa inserir `product` no array `items` do carrinho. Lembre-se de usar a palavra chave `this`. - -# --hints-- - -Você deve usar o método `push` no array `items`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.push\(/); -``` - -Lembre-se de que você precisa usar a palavra-chave `this` para acessar o array `items`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.push\(/); -``` - -Você deve usar `push` para inserir a variável `product` no array `items`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.deepEqual(cart.items, [products[0]]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md deleted file mode 100644 index ca5ac82931f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 63eeb8e86becbf1e75c2cb0d -title: Passo 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Agora, você precisa de uma contagem total de cada produto que o usuário tem no carrinho. Declare uma variável `totalCountPerProduct` e atribua a ela um objeto vazio. - -# --hints-- - -Você deve declarar uma variável `totalCountPerProduct` na função `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/); -``` - -Você deve usar `const` para declarar `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/); -``` - -Você deve atribuir um objeto vazio a `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md deleted file mode 100644 index 9bf4670e9e8..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63eedebb0ec0231ff1cede1a -title: Passo 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Use o método `.forEach()` para percorrer o array `items`. Passe uma função de callback vazia que recebe um único parâmetro `dessert`. - -# --hints-- - -Você deve usar o método `.forEach()` do array `items`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.forEach\(/); -``` - -Lembre-se de usar a palavra-chave `this` para acessar o array `items`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(/); -``` - -Você deve passar uma função de callback para o método `.forEach()`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/); -``` - -A função de callback deve receber um único parâmetro. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/); -``` - -A função de callback deve estar vazia. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md deleted file mode 100644 index 6bc175e7859..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 63efdbc22a0c56070beabed7 -title: Passo 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Na função de callback de `forEach`, você precisa atualizar o objeto `totalCountPerProduct`. Usando o `id` da `dessert` (sobremesa) atual como sua propriedade, atualize o valor da propriedade para que seja o valor atual mais um. Não use o operador de atribuição de adição para isso. - -# --hints-- - -Você deve usar a notação de ponto para acessar a propriedade `id` de `dessert`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /dessert\.id/); -``` - -Você deve usar a notação de colchete para acessar a propriedade de `totalCountPerProduct` que corresponde a `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -Você deve usar o operador de atribuição para atualizar o valor da propriedade de `totalCountPerProduct` que corresponde a `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/); -``` - -Você deve atualizar o valor de `totalCountPerProduct` para que seja o valor atual mais um. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md deleted file mode 100644 index ba23334f560..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 63efe370bbfc4a08d500118e -title: Passo 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Agora, você tem um pequeno erro. Se você tentar acessar uma propriedade de um objeto e se a propriedade não existe, você obtém `undefined`. Isto significa que, se a sobremesa já não está presente no objeto `totalCountPerProduct`, você acaba tentando adicionar `1` a `undefined`, o que resulta em `NaN`. - -Para consertar isso, você pode usar o operador `||` para definir o valor como `0`, se ele não existir. Envolva o lado direito de `totalCountPerProduct[data.id]` em parênteses e adicione `|| 0` ao final da expressão. - -# --hints-- - -Você deve envolver o lado direito de `totalCountPerProduct[data.id]` em parênteses. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -Você deve usar o operador `||`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/); -``` - -Você deve usar `0` como valor de fallback. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/); -``` - -Você ainda deve adicionar `1` ao valor. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1; - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md deleted file mode 100644 index 90d5bf5bba4..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 63eff02f00e69a0b2ac10b43 -title: Passo 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Agora, você precisa se preparar para atualizar a tela com o novo produto que o usuário adicionou. Declare uma variável `currentProductCount` e atribua a ela o valor da propriedade do objeto `totalCountPerProduct` que corresponde ao `id` de `product`. - -# --hints-- - -Você deve declarar uma variável `currentProductCount` na função `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=/); -``` - -Você deve usar `const` para declarar `currentProductCount`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCount\s*=/); -``` - -Você deve atribuir o valor de `totalCountPerProduct[product.id]` como `currentProductCount`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md deleted file mode 100644 index 0f20d9e76fb..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 63eff98ffb1d5a0d24ec79cb -title: Passo 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Você ainda não escreveu o código para gerar o HTML, mas, se um produto já foi adicionado ao carrinho do usuário, haverá um elemento correspondente do qual você precisará. - -Use `.getElementById()` para obter o elemento correspondente. Você definirá o valor de `id` como `product-count-for-id${product.id}`. Então, use um template literal para consultar esse valor. - -Atribua a consulta a uma variável `currentProductCountSpan`. - -# --hints-- - -Você deve declarar uma variável `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/); -``` - -Você deve usar `const` para declarar `currentProductCountSpan`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/); -``` - -Você deve usar `document.getElementById()` para obter o elemento correspondente. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /document\.getElementById\(/); -``` - -Você deve usar um template literal para consultar o valor de `id`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/); -``` - -Você deve atribuir o valor de `document.getElementById()` a `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md deleted file mode 100644 index 7f2b06cc0cd..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63effe558c87a70e7072e447 -title: Passo 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -O comportamento do método `addItem` precisa mudar conforme o produto estiver no carrinho ou não. Crie um operador ternário que verifique se o produto atual já está no carrinho. Use `undefined` para expressões verdadeiras e falsas para evitar um erro de sintaxe. - -# --hints-- - -Você deve verificar se `currentProductCount` é maior que `1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/); -``` - -Você deve usar um operador ternário com a condição `currentProductCount > 1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/); -``` - -Você deve usar `undefined` como a expressão verdadeira. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -Você deve usar `undefined` como a expressão falsa. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md deleted file mode 100644 index 3f059ca5a3f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 63f0165121a9181342d5bc66 -title: Passo 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Para a expressão verdadeira, remova o `undefined`. Você precisa atualizar o `textContent` de `currentProductCountSpan` para que seja `currentProductCount` seguido por um `x`. Use um template literal para fazer isso. - -# --hints-- - -Você deve remover `undefined` da expressão verdadeira. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -Você deve acessar a propriedade `textContent` de `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/); -``` - -Você deve usar a sintaxe de template literals para atualizar `textContent` para que seja igual a `${currentProductCount}x`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 ? undefined : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md deleted file mode 100644 index 5c4f443a64e..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 63f017b4ad028a148eb713c0 -title: Passo 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Para a expressão falsa, você precisará adicionar um novo HTML a `productsContainer`. Comece removendo o `undefined`. Em seguida, use o operador da atribuição de adição e a sintaxe das template literals para adicionar uma `div` com a `class` definida como `product` e o `id` definido como `dessert${id}` para a propriedade `innerHTML` de `productsContainer`. - -# --hints-- - -Você deve remover `undefined` da expressão falsa. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /undefined/); -``` - -Você deve usar o operador de atribuição de adição para adicionar HTML a `productsContainer`. Lembre-se de que o HTML vai na propriedade `innerHTML`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/); -``` - -Você deve usar a sintace de template literals para adicionar HTML a `productsContainer`. - -```js -assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/); -``` - -Você deve adicionar uma `div` a `productsContainer`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.tagName, "DIV"); -``` - -A `div` deve ter a `class` definida como `product`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.className, "product"); -``` - -A `div` deve ter o `id` definido como `dessert${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.id, "dessert1"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md deleted file mode 100644 index fd4002dcaca..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 63f01861f813e01564c95315 -title: Passo 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Dentro da `div`, adicione dois elementos `p`. Defina o texto do segundo elemento `p` como o valor da variável `price`. - -# --hints-- - -Você deve adicionar dois elementos `p` dentro do elemento `div`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children.length, 2); -assert.equal(div?.children[0].tagName, 'P'); -assert.equal(div?.children[1].tagName, 'P'); -``` - -O segundo elemento `p` deve conter o texto da variável `price`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children[1].textContent, '12.99'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      - -
                                                                      - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md deleted file mode 100644 index 6f1ed129adb..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 63f018f04e487e164dc27bd9 -title: Passo 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -No primeiro elemento `p`, adicione um elemento `span`. Dê ao `span` a classe `product-count` e um `id` de `product-count-for-id${id}`. Então, após o span, dê ao elemento `p` o texto da variável `name`. - -# --hints-- - -O primeiro elemento `p` deve ter um elemento `span`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children.length, 1); -assert.equal(p.children[0].tagName, 'SPAN'); -``` - -O elemento `span` deve ter uma `class` definida como `product-count`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].className, 'product-count'); -``` - -O elemento `span` deve ter um `id` definido como `product-count-for-id${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].id, 'product-count-for-id1'); -``` - -O primeiro elemento `p` deve ter o texto da variável `name`. Ele deve estar fora do span. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md deleted file mode 100644 index ed891f1727f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 63f01c9791a0aa1751c73760 -title: Passo 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -O `ShoppingCart` ainda precisa de mais funcionalidades, mas, primeiro, você precisa ser capaz de testar o código que escreveu até o momento. Você precisará instanciar um novo objeto `ShoppingCart` e atribuí-lo a uma variável. Aqui está um exemplo de como instanciar a classe `Computer` dos exemplos anteriores: - -```js -const myComputer = new Computer(); -``` - -Declare uma variável `cart` e atribua a ela um novo objeto `ShoppingCart`. Observe o uso da palavra-chave `new` ao instanciar o objeto. - -# --hints-- - -Você deve usar `const` para declarar uma variável `cart`. - -```js -assert.match(code, /const\s+cart\s*=/); -``` - -Você deve usar a palavra-chave `new` para instanciar o novo objeto `ShoppingCart`. - -```js -assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/); -``` - -Você deve atribuir o novo objeto `ShoppingCart` à variável `cart`. - -```js -assert.isTrue(cart instanceof ShoppingCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } -}; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md deleted file mode 100644 index dbe94804072..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f0224ceb16dc196d2c860a -title: Passo 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Você precisa obter todos os botões `Add to cart` que você adicionou anteriormente ao DOM. Declare uma variável `addToCartBtns` e atribua a ela o valor da chamada do método `getElementsByClassName()` no objeto `document`, passando a string `add-to-cart-btn`. - -# --hints-- - -Você deve usar `const` para declarar uma variável `addToCartBtns`. - -```js -assert.match(code, /const\s+addToCartBtns\s*=/); -``` - -Você deve chamar o método `getElementsByClassName()` no objeto `document`. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/); -``` - -Você deve passar a string `add-to-cart-btn` para o método `getElementsByClassName()`. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/); -``` - -Você deve atribuir o valor retornado pelo método `getElementsByClassName()` à variável `addToCartBtns`. - -```js -assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } -}; - -const cart = new ShoppingCart(); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md deleted file mode 100644 index 6fdb1e4b2d5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f026d041bc6c1a3d5cba0f -title: Passo 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Você precisa iterar pelos botões da variável `addToCartBtns`. No entanto, `.getElementsByClassName()` retorna uma coleção, que não tem um método `forEach`. - -Use o operador spread na variável `addToCartBtns` para convertê-la em um array. Você deve usar o método `forEach` para percorrer o array. Não passe uma função de callback ainda. - -# --hints-- - -Você deve usar o operador spread na variável `addToCartBtns`. - -```js -assert.match(code, /\.\.\.addToCartBtns/); -``` - -Você deve colocar a variável `addToCartBtns` em um array com spread. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/); -``` - -Você deve usar o método `forEach` no array que você criou. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/); -``` - -Você não deve passar uma função de callback para o método `forEach`. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md deleted file mode 100644 index fa4bfebd0a8..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0284532742c1b26c7a052 -title: Passo 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Adicione a função de callback ao método `forEach`. Ela deve receber um único parâmetro `btn`. Em seguida, na função de callback, adicione um "ouvinte" de evento para o `btn`. O "ouvinte" de evento deve escutar um evento de `click` e deve receber outra função de callback com um parâmetro `event`. A segunda função de callback deve estar vazia. - -# --hints-- - -Você deve usar a sintaxe das arrow functions para adicionar uma função de callback ao método `forEach`, que recebe um parâmetro `btn`. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/); -``` - -Você deve adicionar um "ouvinte" de evento à variável `btn`. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/); -``` - -Você deve escutar um evento de `click` na variável `btn`. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/); -``` - -Você deve adicionar uma função de callback vazia ao "ouvinte" de evento. Lembre-se de dar a ele um parâmetro `event`. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md deleted file mode 100644 index d27db8e0b8d..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0289df84a581bbdbd29b7 -title: Passo 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Na função de callback do ouvinte de evento, chame o método `.addItem()` do objeto `cart` e passe `event.target.id`. Lembre-se de que o `id` aqui será uma string. Então, você precisa convertê-la para um número. - -Passe o array `products` como o segundo argumento. - -# --hints-- - -A função de callback do ouvinte de evento deve chamar o método `.addItem()` do objeto `cart`. - -```js -assert.match(code, /cart\.addItem\(/); -``` - -O método `.addItem()` deve ser chamado com o `event.target.id` como o primeiro argumento. Lembre-se de converter o `id` para um número usando `Number()`. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/); -``` - -O método `.addItem()` deve ser chamado com o array `products` como o primeiro argumento. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - - }) - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md deleted file mode 100644 index 0fa1ffe9180..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 63f0295e673b661ccb299e8a -title: Passo 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Você precisa de uma maneira de acessar o número total de itens no carrinho. A melhor maneira de se fazer isso é adicionar outro método à classe `ShoppingCart`, em vez de acessar diretamente o array `items`. - -Adiciona um método `getCounts` à classe `ShoppingCart`. Ele deve retornar o número de itens no array `items`. - -# --hints-- - -A classe `ShoppingCart` deve ter o método `getCounts`. - -```js -assert.isFunction(cart.getCounts); -``` - -Lembre-se de usar a palavra-chave `this` para acessar o array `items`. - -```js -const afterCounts = code.split('getCounts')[1]; -assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/); -``` - -O método `getCounts` deve retornar o número de itens no array `items`. - -```js -assert.equal(cart.getCounts(), 0); -cart.addItem(1, products); -assert.equal(cart.getCounts(), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md deleted file mode 100644 index 76adf6940ca..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 63f029b96b9e9e1df93be951 -title: Passo 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Agora, você pode atualizar o número total de itens na página da web. Atribua o valor do método `.getCounts()` do objeto `cart` para o `textContent` da variável `totalNumberOfItems`. - -# --hints-- - -Você deve acessar a propriedade `textContent` do elemento `totalNumberOfItems`. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent/) -``` - -Você deve atribuir o valor do método `.getCounts()` do objeto `cart` para a propriedade `textContent` da variável `totalNumberOfItems`. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md deleted file mode 100644 index cb9e7ae790e..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 63f02a4ef92d711ec1ff618c -title: Passo 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Você também precisa atualizar o preço total do carrinho quando o usuário adicionar um item. Crie um método `calculateTotal` na classe `ShoppingCart`. - -Nesse método, declare uma variável `subTotal` e use o método `reduce` no array `items` para calcular a soma da propriedade `price` de cada item no array. Use `total` e `item` como os parâmetros para a função de callback. - -Lembre-se de definir o valor inicial no método `reduce`. - -# --hints-- - -Você deve criar um método `calculateTotal` na classe `ShoppingCart`. - -```js -assert.isFunction(cart.calculateTotal); -``` - -O método `calculateTotal` deve ter uma variável `subTotal` declarada com `const`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+subTotal\s*=/); -``` - -O método `calculateTotal` deve usar o método `reduce` no array `items`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/); -``` - -A função de callback de `reduce` deve usar `total` e `item` como primeiro e segundo parâmetros. Lembre-se de usar a sintaxe das arrow functions. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/); -``` - -A função de callback de `reduce` deve retornar a soma de `total` e `item.price`. Use um retorno implícito. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/); -``` - -A chamada de `reduce` deve ter um valor inicial igual a `0`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md deleted file mode 100644 index bf21fe79dcb..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f02b22cce1c11fe9604381 -title: Passo 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Parte do custo total incluirá o imposto. Assim, é necessário calculá-lo também. Crie um método `calculateTaxes` na classe `ShoppingCart`. Esse método deve receber um parâmetro `amount`. - -# --hints-- - -Você deve criar um método `calculateTaxes` na classe `ShoppingCart`. - -```js -assert.isFunction(cart.calculateTaxes); -``` - -O método `calculateTaxes` deve receber um parâmetro `amount`. - -```js -assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md deleted file mode 100644 index ab52645f107..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f02bdeb9b428208b97eb6b -title: Passo 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -O método `calculateTaxes` deve retornar o valor de `taxRate` (dividido por 100, para convertê-lo em uma porcentagem) multiplicado pelo parâmetro `amount`. - -Para ser claro, envolva o cálculo de `taxRate / 100` entre parênteses. - -# --hints-- - -Você deve dividir `taxRate` por 100 no método `calculateTaxes`. Lembre-se de usar a palavra-chave `this`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/); -``` - -Você deve envolver o cálculo de `this.taxRate / 100` entre parênteses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/); -``` - -Você deve multiplicar o parâmetro `amount` por `taxRate` dividido por 100 no método `calculateTaxes`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/); -``` - -O método `calculateTaxes` deve retornar o valor de `taxRate` (dividido por 100, para convertê-lo em uma porcentagem) multiplicado pelo parâmetro `amount`. - -```js -console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md deleted file mode 100644 index 4b9eca7f803..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 63f02c6e18773921ba50aa53 -title: Passo 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Por causa do modo como os computadores armazenam e trabalham com números, cálculos envolvendo números decimais podem resultar em algum comportamento estranho. Por exemplo, `0.1 + 0.2` não é igual a `0.3`. Isso ocorre porque os computadores armazenam números decimais como frações binárias. Algumas frações binárias não podem ser representadas exatamente como frações decimais. - -Queremos limpar o resultado numérico do cálculo. Envolva o cálculo entre parênteses (não inclua a instrução `return`!) e chame o método `.toFixed()` nele. Passe o número `2` para o método `.toFixed()` como um argumento. Isso arredondará o número para duas casas decimais e retornará uma string. - -# --hints-- - -Você deve envolver o cálculo de entre parênteses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/) -``` - -Você deve chamar o método `.toFixed()` no cálculo. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/) -``` - -Você deve passar o número `2` para o método `.toFixed()` como um argumento. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return (this.taxRate / 100) * amount; - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md deleted file mode 100644 index 7b871e5cc06..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 63f0311f5ea9382388d6124f -title: Passo 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -O problema com `.toFixed()` retornar uma string é que você quer ser capaz de realizar cálculos com a taxa de imposto. Para corrigir isso, você pode passar a chamada de `.toFixed()` (incluindo o cálculo) para a função `parseFloat()`. Isso converterá a string fixa novamente em um número, preservando as casas decimais existentes. - -Passe a chamada de `.toFixed()` para `parseFloat()`. - -# --hints-- - -Você deve passar o cálculo inteiro (excluindo a instrução `return`) para `parseFloat()`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return ((this.taxRate / 100) * amount).toFixed(2); - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md deleted file mode 100644 index 198f5a135e8..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f033fdb1fbcc254999fcc3 -title: Passo 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -O carrinho, no momento, não está visível na página da web. Para torná-lo visível, comece adicionando um ouvinte de evento à variável `cartBtn`, que escuta o evento de clique. A função de callback não precisa de parâmetros. - -# --hints-- - -Você deve adicionar um "ouvinte" de evento à variável `cartBtn`. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/); -``` - -Você deve escutar um evento de `click` na variável `cartBtn`. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/); -``` - -Você deve adicionar uma função de callback vazia (usando a sintaxe das arrow functions) ao "ouvinte" de evento. Lembre-se de que ela não precisa de parâmetros. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md deleted file mode 100644 index 6450fecee60..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f03446c2ed3e264be6c7fc -title: Passo 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Comece invertendo o valor de `isCartShowing`. Lembre-se de que você pode usar o operador lógico `!` para inverter o valor de um booleano. Atribua o valor invertido a `isCartShowing`. - -# --hints-- - -Você deve inverter o valor de `isCartShowing`. - -```js -assert.match(code, /!isCartShowing/); -``` - -Você deve atribuir o valor invertido de `isCartShowing` a `isCartShowing`. - -```js -assert.match(code, /isCartShowing\s*=\s*!isCartShowing/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md deleted file mode 100644 index 9b74fa555f8..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f0348a54a177272071a595 -title: Passo 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Agora, atribua ao `textContent` da variável `showHideCartSpan` o resultado de uma expressão ternária que verifica se `isCartShowing` é verdadeiro. Se for, defina `textContent` como `Hide`. Caso contrário, defina-o como `Show`. - -# --hints-- - -Você deve usar o operador da atribuição na propriedade `textContent` da variável `showHideCartSpan`. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/) -``` - -Você deve usar sintaxe ternária para verificar se `isCartShowing` é verdadeiro. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/) -``` - -Você deve definir o `textContent` da variável `showHideCartSpan` como `Hide` se `isCartShowing` for verdadeiro. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/) -``` - -Você deve definir o `textContent` da variável `showHideCartSpan` como `Show` se `isCartShowing` for falso. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md deleted file mode 100644 index 6a0ed7d58f2..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 63f034d012f74627ce538d3a -title: Passo 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Por fim, atualize a propriedade `display` do objeto `style` da variável `cartContainer` para que tenha outro ternário que verifica se `isCartShowing` é verdadeiro. Se for, defina `display` como `block`. Caso contrário, defina-o como `none`. - -Agora, você deverá poder ver o carrinho e adicionar produtos a ele. - -# --hints-- - -Você deve acessar a propriedade `display` da propriedade `style` da variável `cartContainer`. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/) -``` - -Você deve acessar o operador de atribuição na propriedade `display` da propriedade `style` da variável `cartContainer`. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/) -``` - -Você deve usar sintaxe ternária para verificar se `isCartShowing` é verdadeiro. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/) -``` - -Você deve definir a propriedade `display` da propriedade `style` da variável `cartContainer` como `block` se `isCartShowing` for verdadeiro. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/) -``` - -Você deve definir a propriedade `display` da propriedade `style` da variável `cartContainer` como `none` se `isCartShowing` for falso. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md deleted file mode 100644 index 80ccbf903df..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f03686c5ea863533ec71f4 -title: Passo 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Declare uma variável `tax` e atribua a ela o valor da chamada do novo método `.calculateTaxes()`, passando `subTotal` como argumento. - -# --hints-- - -Use `const` para declarar uma variável chamada `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+tax\s*=/); -``` - -Atribua o valor da chamada do novo método `.calculateTaxes()`, passando `subTotal` como argumento, para a variável `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md deleted file mode 100644 index 2048ba00617..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f036ec91fdf238c90665f5 -title: Passo 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Atualize o valor de `total` para que seja a soma dos valores de `subTotal` e `tax`. - -# --hints-- - -Você deve atualizar o valor de `total`. Lembre-se de usar a palavra-chave `this`. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total/); -``` - -Você deve definir o valor de `total` para que seja a soma dos valores de `subTotal` e `tax`. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md deleted file mode 100644 index 0704ecb4513..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 63f0370b340915399d31e5eb -title: Passo 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Você também vai atualizar o HTML neste método. Defina o `textContent` de `cartSubTotal` como o valor de `subTotal` com 2 casas decimais fixas. Use a sintaxe de template literals para adicionar o sinal de dólar no início do valor. - -# --hints-- - -Você deve acessar a propriedade `textContent` do elemento `cartSubTotal`. - -```js -assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/); -``` - -Você deve chamar o método `.toFixed()` na variável `subTotal`, passando `2` como o argumento. - -```js -assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/); -``` - -Você deve usar a sintaxe de template literals para adicionar o sinal de dólar antes da chamada de `.toFixed()`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -Você deve definir o `textContent` do elemento `cartSubTotal` como uma string de template literals. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md deleted file mode 100644 index 9ee54060c83..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 63f0374d5351223a747c301d -title: Passo 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Seguindo o mesmo padrão que o `cartSubTotal`, atualize `cartTaxes` para que exiba o valor de `tax` e para que `cartTotal` exiba a propriedade `total`. - -# --hints-- - -Você deve acessar a propriedade `textContent` do elemento `cartTaxes`. - -```js -assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/); -``` - -Você deve chamar o método `.toFixed()` na variável `tax`, passando `2` como o argumento. - -```js -assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/); -``` - -Você deve usar a sintaxe de template literals para adicionar o sinal de dólar antes da chamada de `.toFixed()`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -Você deve definir o `textContent` do elemento `cartTaxes` como a string de template literals `tax.toFixed`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -Você deve acessar a propriedade `textContent` do elemento `cartTotal`. - -```js -assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/); -``` - -Você deve chamar o método `.toFixed()` na variável `total`, passando `2` como o argumento. Lembre-se de usar a palavra-chave `this`. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/); -``` - -Você deve usar a sintaxe de template literals para adicionar o sinal de dólar antes da chamada de `.toFixed()`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -Você deve definir o `textContent` do elemento `cartTotal` como a string de template literals `total.toFixed`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md deleted file mode 100644 index c5bab5684bd..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f0378e173e3c3b7638b528 -title: Passo 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Por fim, retorne o valor de `total`. Lembre-se da palavra chave `this`. - -# --hints-- - -O método `calculateTotal` deve retornar o valor da propriedade `total`. - -```js -assert.equal(cart.calculateTotal(), 0); -cart.addItem(1, products); -assert.approximately(cart.calculateTotal(), 14.06, 0.1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md deleted file mode 100644 index f06a1513ba3..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f038a0ae041d3c5b0cdf23 -title: Passo 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -O último recurso é permitir que os usuários limpem o carrinho. Adicione um método `clearCart()` à classe `ShoppingCart`. - -# --hints-- - -A classe `ShoppingCart` deve ter o método `clearCart`. - -```js -assert.isFunction(cart.clearCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md deleted file mode 100644 index 6160c8d16b5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -id: 63f038e671d3f73d5a041973 -title: Passo 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -A primeira coisa que você deve fazer é verificar se o array `items` está vazio. Se estiver, exiba um `alert` para o usuário com o texto `Your shopping cart is already empty`. Em seguida, retorne a partir da função. - -Lembre-se de que `0` é um valor falso. Assim, você pode usar o operador `!` para verificar se o array está vazio. - -Depois de exibir o alerta, retorne a partir da função para parar a execução. - -# --hints-- - -Você deve criar uma instrução `if` que verifica se o array `items` está vazio, usando o operador de negação. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/); -``` - -A instrução `if` deve exibir um `alert` para o usuário com o texto `Your shopping cart is already empty`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/); -``` - -A instrução `if` deve retornar a partir da função. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md deleted file mode 100644 index 3e4ec7bac04..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 63f039dbcef7673e4e758fa3 -title: Passo 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Os navegadores têm uma função `confirm()` incorporada que exibe um prompt de confirmação para o usuário. `confirm()` aceita uma string, que é a mensagem exibida ao usuário. Ele retorna `true`, se o usuário confirmar, e `false`, se o usuário cancelar. - -Declare a variável `isCartCleared` e atribua a ela o valor da chamada de `confirm()` com a string `"Are you sure you want to clear all items from your shopping cart?"`. - -# --hints-- - -Você deve usar `const` para declarar ma variável `isCartCleared`. - -```js -const afterClearCart = code.split('clearCart()')[1]; -assert.match(afterClearCart, /const\s+isCartCleared\s*=/); -``` - -Você deve chamar a função `confirm()`. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(/); -``` - -Você deve passar a string `Are you sure you want to clear all items from your shopping cart?` para a função `confirm()`. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -Você deve atribuir o valor da função `confirm()` à variável `isCartCleared`. - -```js -assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md deleted file mode 100644 index 8de9b89abfd..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -id: 63f03a7143a6ef3f7f3344f0 -title: Passo 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Você quer apenas limpar o carrinho se o usuário confirmar o aviso. Crie uma instrução `if` que verifica se o usuário confirmou o aviso. - -Na instrução `if`, defina a propriedade `items` como um array vazio novamente. Em seguida, defina a propriedade `total` como `0`. - -# --hints-- - -Você deve criar uma instrução `if`, que verifica se o usuário confirmou o aviso. Lembre-se de que você pode verificar o valor verdadeiro de `isCartCleared` diretamente. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/); -``` - -A instrução `if` deve definir a propriedade `items` como um array vazio novamente. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/); -``` - -A instrução `if` deve definir a propriedade `total` como `0`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md deleted file mode 100644 index c136c7ead38..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f03ac2b428b2404a5a7518 -title: Passo 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Você também precisa começar a limpar o HTML. Defina a propriedade `innerHTML` de `productsContainer` como uma string vazia novamente. - -# --hints-- - -Na instrução `if`, você deve definir a propriedade `innerHTML` de `productsContainer` como uma string vazia novamente. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md deleted file mode 100644 index 0077eec472d..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 63f03af535682e4138fdb915 -title: Passo 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Defina o `textContent` dos elementos `totalNumberOfItems`, `cartSubTotal`, `cartTaxes` e `cartTotal` como o número `0`. - -# --hints-- - -Você deve definir o `textContent` do elemento `totalNumberOfItems` como `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/); -``` - -Você deve definir o `textContent` do elemento `cartSubTotal` como `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/); -``` - -Você deve definir o `textContent` do elemento `cartTaxes` como `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/); -``` - -Você deve definir o `textContent` do elemento `cartTotal` como `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTotal\.textContent\s*=\s*0/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md deleted file mode 100644 index 30b9963b453..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md +++ /dev/null @@ -1,744 +0,0 @@ ---- -id: 63f03b1ed5ab15420c057463 -title: Passo 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -O último passo é deixar seu botão de limpar funcional. Adicione um ouvinte do evento de `click` para `clearCartBtn`. Para a função de callback, você pode passar `cart.clearCart` diretamente. - -No entanto, fazer isso não funcionará, pois o contexto de `this` será o elemento `clearCartBtn`. Você precisa vincular o método `clearCart` ao objeto `cart`. - -Você pode fazer isso passando `cart.clearCart.bind(cart)` como função de callback. - -Com isso, o projeto do carrinho de compras está completo! - -# --hints-- - -Você deve adicionar um "ouvinte" de evento à variável `clearCartBtn`. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(/); -``` - -O "ouvinte" de evento deve "ouvir" o evento de `click`. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/); -``` - -O ouvinte de evento deve receber `cart.clearCart.bind(cart)` como função de callback. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - -clearCartBtn.addEventListener("click", cart.clearCart.bind(cart)); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md deleted file mode 100644 index 76a1843abe0..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f6721d5110af243ef8f3d9 -title: Passo 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Agora, chame o método `.calculateTotal()` dentro do laço `forEach`. - -# --hints-- - -Você deve chamar o método `cart.calculateTotal()` dentro do laço `forEach`. - -```js -const afterForEach = code.split('[...addToCartBtns].forEach(')[1]; -assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                      -

                                                                      Desserts Page

                                                                      -
                                                                      -
                                                                      - -
                                                                      - -
                                                                      -

                                                                      Total number of items: 0

                                                                      -

                                                                      Subtotal: $0

                                                                      -

                                                                      Taxes: $0

                                                                      -

                                                                      Total: $0

                                                                      -
                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                      -

                                                                      ${name}

                                                                      -

                                                                      $${price}

                                                                      -

                                                                      Category: ${category}

                                                                      - -
                                                                      - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                      -

                                                                      - ${name} -

                                                                      -

                                                                      ${price}

                                                                      -
                                                                      - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md deleted file mode 100644 index a2ce162457c..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9a -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. - -In JavaScript, you can access the DOM by referencing the global `document` object. - -To view the DOM, log it to the console with `console.log(document)`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast
                                                                      - Lunch
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md deleted file mode 100644 index aab244748d6..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9b -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -In our HTML document, we have a form element with an `id` attribute: `
                                                                      ` - -To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. - -The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      - -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - - -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md deleted file mode 100644 index 31afd7303fc..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9c -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. - -Forms have an `onsubmit` event that can execute a function when the form is submitted. - -For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. - -Assign a function named `calculate` to the `onsubmit` event of your form. - -You will create the `calculate` function later. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md deleted file mode 100644 index bcd3b1bc287..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9d -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. Here is an example of an empty function called `square`: - -```js -function square() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(typeof calculate === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md deleted file mode 100644 index 8a02a67b570..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9e -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -By default, `onsubmit` will pass the event object as a parameter to the function it calls. People usually call it `e`, short for event. Update the `calculate()` function to accept `e` as parameter. - -Here is an example of an empty function called `square` that takes a `number` as a parameter: - -```js -function square(number) {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md deleted file mode 100644 index 0cd5d1525fd..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9f -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. - -Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md deleted file mode 100644 index ee8e8356f0d..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da0 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. - -To access elements with a certain class name, we use the `getElementsByClassName()` method. - -Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md deleted file mode 100644 index 9b80e0f827c..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da1 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md deleted file mode 100644 index c5a2856f2c3..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da2 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -To make the document objects easier to handle, let's turn them into an array. Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md deleted file mode 100644 index 40f6a846fd5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da3 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md deleted file mode 100644 index 725bff25987..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da4 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md deleted file mode 100644 index fead88a0598..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da5 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. - -The `map()` method allows us to do exactly that. - -Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .toString() - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md deleted file mode 100644 index 714497fddbb..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da6 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Now we need to provide a function to `map()` that will be performed on each item of the array. - -This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: - -```js -function(meal){} -``` - -Enter in the above function as an argument in between the parentheses of the `.map()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md deleted file mode 100644 index 7d58167b80c..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da7 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. - -If you want, console log `total` to see what results you are getting. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md deleted file mode 100644 index 4a199951818..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da8 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md deleted file mode 100644 index 6058cea614a..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da9 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md deleted file mode 100644 index 46dfade8b55..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daa -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. - -Chain the `reduce()` method to the `Array.from()` expression. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md deleted file mode 100644 index 065b5dce513..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dab -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: - -```js -function(accumulator, currentValue) { /* code to run */ } -``` - -or using arrow functions: - -```js -(accumulator, currentValue) => { /* code to run */ } -``` - -Insert the above callback function as an argument in the `.reduce()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md deleted file mode 100644 index 448c7702610..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dac -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. - -Here is an example of a `reduce()` method with an empty object as its initial value: - -```js -arr.reduce((accumulator, currentValue) => { - /* code to run */ -}, {}); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md deleted file mode 100644 index 4134f0401a2..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dad -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. - -We can use the reduce function as follows: - -```js -arr.reduce((accumulator, currentValue) => { - return accumulator + currentValue; -}, 0); -``` - -At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, since `arr[0] = 1 = currentValue`. - -At `arr[1]`, the function is `(1, 3) => 1 + 3`, - -Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. - -In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md deleted file mode 100644 index c9d4f5bd8ad..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 5e302e80e003129199103c78 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` - -You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. - -When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md deleted file mode 100644 index b36ed2d97b6..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5e302e8ce003129199103c79 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Now let's simplify the `reduce()` callback function by refactoring it. - -Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. - -So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. - -Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md deleted file mode 100644 index 8825fbe6dd0..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dae -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. - -Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. - -If you inspect the Female radio button you will notice its id: `` - -Create a variable named `maxCalories` and set it equal to the document element with the id of `female`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md deleted file mode 100644 index 1e19c715fcf..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daf -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` - -Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md deleted file mode 100644 index 21d83417535..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db0 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. - -For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: - -```js -if (5 - 3 === 4) { - return 'Yes'; -} else { - return 'No'; -} -``` - -`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md deleted file mode 100644 index abe960e3120..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db1 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Now that we have `total` and `maxCalories`, we need to find out the difference between them. - -Create a variable named `difference` and set it equal to `total - maxCalories` - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md deleted file mode 100644 index ad3abc0bfe5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db2 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. - -To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). - -If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. - -Use the same ternary syntax that you used to determine `maxCalories`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md deleted file mode 100644 index 2dbdd8b547b..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db3 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
                                                                      `. - -We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. - -Create a variable named `output` and set it equal to this division element with the `id` of `output`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md deleted file mode 100644 index 87062f28e7f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db4 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Now it's time to create the HTML elements that we will add inside of `output`. - -To create an element, use `createElement()`. For example: - -```js -const myHeading1 = document.createElement('h1') -``` - -Create an `h3` element and assign it to a variable named `result`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md deleted file mode 100644 index 90ad3c91cb4..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db5 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Next, we will create a text node that we will later append to the `result` element. - -JavaScript has a function called `createTextNode()` to accomplish this. For example: - -```js -const myText = document.createTextNode("Hello world!") -``` - -Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md deleted file mode 100644 index b93248efe69..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db6 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -We can now use the `difference` variable that we created above. - -Insert the `difference` variable inside the parentheses of `.createTextNode()` - -If you want to see what the text currently looks like, try `console.log(resultText)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md deleted file mode 100644 index fd08248b5f0..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db7 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Notice how if `total` is less than `maxCalories`, `difference` is a negative number. - -We want to show the absolute value of the difference so it displays "300" rather than "-300". - -Wrap the `difference` in a `Math.abs()` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md deleted file mode 100644 index f066a2b3607..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db8 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md deleted file mode 100644 index d2e8c9a31c3..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db9 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Next we want to add the text from the `surplusOrDeficit` variable that we previously created. - -Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md deleted file mode 100644 index 1311c2ac849..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dba -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. - -Some people consider this a little cumbersome and prefer to use template literals instead. - -Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. - -For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. - -Convert the data inside of `createTextNode()` to be a template literal. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md deleted file mode 100644 index 923d7d02e23..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbb -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: - -```js -result.appendChild(resultText); -``` - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md deleted file mode 100644 index 09da32b6cb5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbc -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Similarly, append the `result` to the `output` element with the `appendChild()` method. - -Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md deleted file mode 100644 index ccb8660bf13..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbd -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Next, let's create and add a horizontal rule (`hr`) element to the output. - -Create an `hr` element and assign it to a variable named `line`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md deleted file mode 100644 index e0f9bd9c47c..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbe -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Add the `line` to the `output` element using the `appendChild()` method. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md deleted file mode 100644 index 4c4b069fb43..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbf -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Let's create a few more HTML elements to add to the `output`. - -Create an `h4` element and assign it to a variable named `recommended`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md deleted file mode 100644 index 0becd375fa5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc0 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Create a text node and assign it to a variable named `recommendedText`. - -This is similar to how your created the `resultText` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md deleted file mode 100644 index fd2d846ab52..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc1 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. - -Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". - -This is similar to template literal syntax previously used to create `resultText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md deleted file mode 100644 index 9e9d9c9c3f2..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc2 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Append the `recommendedText` node to the `recommended` element. - -This is similar to how the `resultText` is appended to `result` previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md deleted file mode 100644 index 9264e8ac9cf..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc3 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Append the `recommended` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md deleted file mode 100644 index 0fd8978f093..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc4 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. - -Create an `h4` element and assign it to a variable named `consumed`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md deleted file mode 100644 index 6bb2536f422..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc5 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. - -For example: - -```js -consumed.innerHTML = `Hello world`; -``` - -Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md deleted file mode 100644 index 29d043f4c6e..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc6 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Append the `consumed` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md deleted file mode 100644 index c34dcad8f68..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc7 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Now it's time to add some styling which can be added directly as attributes or classes. - -In our CSS file, we have a styling rule for any elements with the class name `green-text`. - -On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. - -Now if you submit the form again and inspect the `result` element, you will see it as `

                                                                      ` and notice that the text is now green. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md deleted file mode 100644 index 7298971ffec..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc8 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. - -For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. - -Set the `class` attribute of the `output` element equal to a class named `bordered-class`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md deleted file mode 100644 index 1b0bd348910..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc9 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. - -Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. - -The `calculate()` function is now finished! - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                      -
                                                                      -

                                                                      Calorie Counter

                                                                      -
                                                                      - Sex -
                                                                      - - - -
                                                                      - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - Breakfast -
                                                                      - Lunch -
                                                                      - Dinner -
                                                                      - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md deleted file mode 100644 index 56bbb142804..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dca -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. - -In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: - -```html - - - - -
                                                                      -

                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md deleted file mode 100644 index db8f9bc95c1..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcb -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -We want a function to run every time the user clicks the "Add Entry" button. - -Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: - -```js -function() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md deleted file mode 100644 index 886f041422c..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcc -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Inside the function, create an `input` document element and assign it to a variable named `foodInput`. - -This is similar to how you created the `result` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md deleted file mode 100644 index 6860d68731d..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcd -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Set the `placeholder` property of the `foodInput` equal to `'food name'`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md deleted file mode 100644 index 89e37a9f626..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dce -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. - -In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. - -Add the class name `food-control` to the `foodInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md deleted file mode 100644 index e0ab30e27b5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcf -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Notice that parent container of all of the inputs has an `id` of `entries`: `
                                            `. - -Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. - -This is similar to the other `appendChild()` methods that you have used previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md deleted file mode 100644 index ea1faf6c59c..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md deleted file mode 100644 index 594af428356..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd1 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. - -This is similar to how to set the class of the `output` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md deleted file mode 100644 index 962a0309894..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd2 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -The `calorieInput` element should only accept numbers that are 0 or above. - -Set the `min` attribute of `calorieInput` to `0`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md deleted file mode 100644 index eac60b49fce..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd3 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. - -We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md deleted file mode 100644 index 7ffb7021744..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd4 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. - -To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md deleted file mode 100644 index 8e15285d2a9..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd5 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. - -The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md deleted file mode 100644 index df36314c4ae..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd6 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. - -Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md deleted file mode 100644 index 1e5b3e9b048..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd7 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. - -# --hints-- - -See description above for instructions. - -```js -assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md deleted file mode 100644 index 7a941b6559c..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd8 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Create a variable named `clearOutput` and set it equal to a blank arrow function: - -```js -const clearOutput = () => {} -``` - -This is similar to `function clearOutput () {}`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearOutput === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md deleted file mode 100644 index e6a2d2c6337..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd9 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -We need to remove the contents inside of element with the `id` of `output`. - -In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md deleted file mode 100644 index f8984120835..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dda -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. - -Remove the `bordered-class` class. For example: - -```js -document.getElementById('my-div').classList.remove('my-class') -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md deleted file mode 100644 index 93a258c395b..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddb -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. - -In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/clearOutput\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md deleted file mode 100644 index 6a07e9aa83b..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddc -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearForm === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md deleted file mode 100644 index 88284a00280..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddd -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. - -Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. - -This is similar to how you declared the `total` variable previously in the `calculate` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md deleted file mode 100644 index 9cc201d5194..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dde -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. - -Add `foodInputs.forEach()`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md deleted file mode 100644 index 8044dac1e60..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddf -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -We need to provide a callback function in the parentheses of `forEach()`. - -This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. - -In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md deleted file mode 100644 index dd34b193b4c..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de0 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. - -Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. - -This is similar to how you declared the `foodInputs` variable previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md deleted file mode 100644 index 652c8f99281..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de1 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md deleted file mode 100644 index b3cf00545fa..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de2 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. - -Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md deleted file mode 100644 index ead4dfe0e77..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de3 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Congratulations! Have fun playing with your completed calorie counter. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                            -
                                            -

                                            Calorie Counter

                                            -
                                            - Sex -
                                            - - - -
                                            - - -
                                            -
                                            -
                                            -
                                            - Breakfast -
                                            - Lunch -
                                            - Dinner -
                                            - - - -
                                            -
                                            -
                                            - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md deleted file mode 100644 index 08bc2a4aa43..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 5d79253297c0ebb149ea9fed -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -In functional programming, we prefer immutable values over mutable values. - -Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. - -Start by creating an empty `infixToFunction` object using `const`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md deleted file mode 100644 index 3159f1d2410..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 5d7925323be8848dbc58a07a -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md deleted file mode 100644 index c5dbbab705c..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792532f631702ae6d23e11 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now return the sum of `x` and `y` using the `return` keyword. - -# --hints-- - -See description above for instructions. - -```js -assert(add(1, 2) === 3 && add(100, 2000) === 2100); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md deleted file mode 100644 index 0a9d327d798..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5d7925329445167ecc2ac9c9 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. - -Assign `add` to a new variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md deleted file mode 100644 index 4e85d64fbe2..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792532b07918c3a5904913 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: - -```js -function(x) { - return x -} -``` - -First, remove the `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md deleted file mode 100644 index a9aa387addd..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792533cc8b18b6c133edc7 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: - -```js -const fn = function(x) { - return x; -} - -fn(); -``` - -Assign the anonymous function to the variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md deleted file mode 100644 index 68c44b16619..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 5d7925337954ed57a565a135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. - -Rewrite `addVar` using ES6's arrow syntax: - -```js -const fn = (x, y) => x; -``` - -Note that the value is returned implicitly. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md deleted file mode 100644 index 676f6c6f4ff..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d79253352e33dd59ec2f6de -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Add the key `+` to `infixToFunction` and assign it the value `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(infixToFunction['+'].toString() === addVar.toString()); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md deleted file mode 100644 index c44846417a5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792533d31e4f7fad33011d -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md deleted file mode 100644 index 2096072d738..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d792533e7707b9645d7b540 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Remove the now redundant `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof addVar === 'undefined'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md deleted file mode 100644 index 526e706eb08..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 5d79253378595ec568f70ab6 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Add similar definitions for `-`, `*` and `/` in `infixToFunction`. - -# --hints-- - -See description above for instructions. - -```js -assert( - infixToFunction['-'](10, 2) === 8 && - infixToFunction['*'](10, 10) === 100 && - infixToFunction['/'](100, 10) === 10 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md deleted file mode 100644 index 37432637ac6..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5d7925330918ae4a2f282e7e -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md deleted file mode 100644 index 3d09b3967f2..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5d792533ed00e75d129e1b18 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). - -Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. - -This is how you would pass the `-` function: - -```js -str.replace(regex, infixToFunction["-"]) -``` - -# --hints-- - -See description above for instructions. - -```js -assert(infixEval('ab', /(a)b/) === 'aba'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md deleted file mode 100644 index 0926459ef14..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5d792533a5c42fb4d1a4b70d -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md deleted file mode 100644 index 23968d2e070..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5d79253358e8f646cbeb2bb0 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Change the `"+"` in the call to `infixToFunction` to `fn`. - -`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md deleted file mode 100644 index f3dd1211e6a..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5d792533bb38fab70b27f527 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". - -Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). - -# --hints-- - -See description above for instructions. - -```js -const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; -assert( - infixEval('23+35', regex) === '58' && - infixEval('100-20', regex) === '80' && - infixEval('10*10', regex) === '100' && - infixEval('120/6', regex) === '20' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md deleted file mode 100644 index e295114e777..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5d79253386060ed9eb04a070 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. - -To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. - -Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md deleted file mode 100644 index 1af15a10b8e..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d792533717672657b81aa69 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -When defining an arrow function with a single argument, the parentheses can be omitted: - -```js -const greeting = name => `Hello !`; -``` - -Define a function `highPrecedence` which takes a single argument `str` and returns it. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('a') === 'a'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md deleted file mode 100644 index 5c2d8560932..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5d7925335ab63018dcec11fe -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Arrow functions can have multiple statements: - -```js -const fn = (x, y) => { - const result = x + y; - return result; // explicit return statement required -}; -``` - -Use this syntax for the `highPrecedence` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md deleted file mode 100644 index 1ddd40ce5d8..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5d7925330f300c342315066d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md deleted file mode 100644 index 3bfba3454a9..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5d792533aa6443215c9b16bf -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md deleted file mode 100644 index 333b8bcb122..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925334c5e22586dd72962 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -The ternary operator has the following syntax: - -```js -const result = condition ? valueIfTrue : valueIfFalse; -const result = 1 === 1 ? 1 : 0; // 1 -const result = 9 > 10 ? "Yes" : "No"; // "No" -``` - -Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2') === '' && - highPrecedence('2+2') === '2+2' && - code.includes('?') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md deleted file mode 100644 index c5f666b8a05..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5d79253307ecd49e030bdcd1 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. - -Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2*2') === '8' && - highPrecedence('2*2') === '4' && - highPrecedence('2+2') === '2+2' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md deleted file mode 100644 index c837d8e94e1..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5d792534257122211d3043af -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. - -# --hints-- - -See description above for instructions. - -```js -assert(spreadsheetFunctions['']('x') === 'x'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md deleted file mode 100644 index 58109dce7a4..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925346f4f2da6df4354a6 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md deleted file mode 100644 index 313db4427d6..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5d792534cac2dbe0a719ea7a -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Set `noHigh` to `highPrecedence(str)` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md deleted file mode 100644 index bc94c78c155..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d792534857332d07ccba3ad -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md deleted file mode 100644 index 7972802a8b8..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5d792534d586ef495ea9df90 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Set `str2` to `infixEval(noHigh, infix)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md deleted file mode 100644 index f957c47d628..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5d79253410532e13d13fe574 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - applyFn - .toString() - .replace(/\s/g, '') - .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md deleted file mode 100644 index 42b80301fc6..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d7925342415527083bd6667 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: - -```js -"a b c".split(" "); // ["a", "b", "c"]; -``` - -Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md deleted file mode 100644 index 33e85a097cc..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d792534c3d26890ac1484d4 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: - -```js -[1, 2, 3].map(x => x + 1); // [2, 3, 4] -``` - -In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md deleted file mode 100644 index abb91060f5e..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d792534b92f3d1cd4410ce3 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md deleted file mode 100644 index bb2f8da03a5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 5d7925341193948dfe6d76b4 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md deleted file mode 100644 index f32c582d3ef..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d792534cf81365cfca58794 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md deleted file mode 100644 index a460b595da1..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d7925348ee084278ff15556 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. - -Now return `str2.replace(regex, "")` at the end of `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md deleted file mode 100644 index 45e848ecbeb..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d7925348a6a41c32f7a4e3e -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md deleted file mode 100644 index 7394c7c6472..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d792534408c5be896b0a46e -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. - -Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md deleted file mode 100644 index c86fe809104..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 5d792534f0eda837510e9192 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md deleted file mode 100644 index bfa91d4503f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d7925346b911fce161febaf -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md deleted file mode 100644 index 24d94216931..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d79253483eada4dd69258eb -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -`range` should set `arr` to `[start]` and should then return `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constarr=[start]') && - JSON.stringify(range(1)) === '[1]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md deleted file mode 100644 index 4307ef2889a..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d7925342b2b993ef18cd45f -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md deleted file mode 100644 index 0fa8e6fe0fb..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5d7925341747ad42b12f8e68 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. - -The `concat` method returns a new array instead of modifying an existing one: - -```js -[1,2,3].concat(4); // [1, 2, 3, 4] -[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] -``` - -Use `concat` instead of `push` to return the result of adding `end` to `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(1, 2)) === '[1,2]' && - code.includes('concat') && - !code.includes('push') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md deleted file mode 100644 index 448578598f5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: 5d792535b0b3c198ee3ed6f9 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -The `concat` method can also accept arrays: - -```js -[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] -[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] -``` - -Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md deleted file mode 100644 index 6e89d44a236..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d7925357a0533eb221b005d -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('arr') && - code.replace(/\s/g, '').includes('[start].concat([end])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md deleted file mode 100644 index 0d876da26b6..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d792535591db67ee15b4106 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(3, 2)) === '[]' && - JSON.stringify(range(1, 3)) === '[1,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md deleted file mode 100644 index ee94e71d4a4..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d792535f1f7adf77de5831d -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md deleted file mode 100644 index 497b63c634b..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925353d2c505eafd50cd9 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Remove the curly braces and `return` keyword from `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md deleted file mode 100644 index 862a0002f2f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d79253539b5e944ba3e314c -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md deleted file mode 100644 index 9845839bbeb..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535a4f1cbff7a8b9a0b -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Make `charRange` return `range(start, end)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md deleted file mode 100644 index 43167394a7b..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535e3304f15a8890162 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md deleted file mode 100644 index f5bb024255e..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 5d792535a40ea5ac549d6804 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md deleted file mode 100644 index 8369854b752..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925358c220e5b2998909e -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Now, pass `x` to `String.fromCharCode` in the arrow function. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md deleted file mode 100644 index 6253e20d545..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5d7925357729e183a49498aa -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md deleted file mode 100644 index 03ceaf96068..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253555aa652afbb68086 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md deleted file mode 100644 index 27b4b66f7f2..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253582be306d339564f6 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md deleted file mode 100644 index 72223dddb2c..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d7925352047e5c54882c436 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md deleted file mode 100644 index 1870ab8b951..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 5d79253568e441c0adf9db9f -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md deleted file mode 100644 index b394d603ed4..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925356ab117923b80c9cd -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md deleted file mode 100644 index e79d2b6f857..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d792535e54a8cd729a0d708 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md deleted file mode 100644 index 3d6a5a955b7..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -id: 5d7925353b307724a462b06b -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Finally, return `fn("A")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md deleted file mode 100644 index 994e931f57f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d792536735f71d746ee5d99 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. - -Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md deleted file mode 100644 index b06f86f5495..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d792536ad340d9dff2e4a96 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Now, remove the curly braces and return statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md deleted file mode 100644 index d1492aa5cbf..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925369614afd92d01fed5 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md deleted file mode 100644 index 8d17549a291..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d792536504e68254fe02236 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. - -Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md deleted file mode 100644 index 1c388711e2f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536c8d2f0fdfad768fe -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -You can add more arguments by simply adding another arrow with another argument name: - -```js -const manyArguments = a => b => c => d => [a, b, c, d] -``` - -Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md deleted file mode 100644 index 45e6af501cc..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d79253639028b8ec56afcda -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md deleted file mode 100644 index 19bbc068cd3..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d792536834f2fd93e84944f -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -You call curried functions like this: - -```js -const result = add(1)(2); -``` - -Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md deleted file mode 100644 index e220cf656e5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536ddff9ea73c90a994 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. - -Change `x => elemValue(n)(x)` to `elemValue(n)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md deleted file mode 100644 index eaff17e3511..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d7925361596f84067904f7f -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('const fn') && - code.includes('varRangeExpanded') && - evalFormula('A1:J133') === '3' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md deleted file mode 100644 index 03ec1f65ba2..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dd8a4daf255488ac -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md deleted file mode 100644 index b1139d99d92..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536449c73004f265fb1 -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md deleted file mode 100644 index a481e918c67..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d79253685fc69b8fe60a0d2 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. - -This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md deleted file mode 100644 index 64e48966f02..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dc6e3ab29525de9e -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md deleted file mode 100644 index 57da365160d..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536cfd0fd893c630abb -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.includes('varRegex') && - code.includes('varExpanded') && - evalFormula('aC12bc') === 'abc' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md deleted file mode 100644 index 2dc9ec5c8ab..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 5d7925366a5ff428fb483b40 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md deleted file mode 100644 index 0516f1f77e6..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5d7925365d4035eeb2e395fd -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md deleted file mode 100644 index a1022f45c6a..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 5d7925364c106e9aaf05a16f -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. - -Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(evalFormula('(2+2)*2') === '8'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md deleted file mode 100644 index 5617221e798..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: 5d792536970cd8e819cc8a96 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -You can define arrow functions without arguments: - -```js -const two = () => 2; -``` - -Define an empty arrow function without arguments and assign it to `window.onload`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('window.onload=()=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md deleted file mode 100644 index 06b401c7e8e..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5d792536e33baeaa60129e0a -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md deleted file mode 100644 index 59443f50dc9..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 5d7925379e2a488f333e2d43 -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Now define a function `createLabel` which takes an argument `name` and has an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md deleted file mode 100644 index 3a3a6f126c8..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5d7925379000785f6d8d9af3 -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Inside `createLabel`, assign `document.createElement("div")` to `label`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md deleted file mode 100644 index a9a1dcc5726..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 5d79253791391b0acddd0ac5 -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Add the following code to `createLabel`: - -```js -label.className = "label"; -label.textContent = name; -container.appendChild(label); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md deleted file mode 100644 index 780a9dab7fe..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373104ae5ae83f20a5 -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -The `forEach` method takes a function and calls it with each element of the array. - -Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md deleted file mode 100644 index ccfac003142..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373b7127cfaeb50c26 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). - -# --hints-- - -See description above for instructions. - -```js -assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md deleted file mode 100644 index 5216d89d1d9..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d792537cb3a5cd6baca5e1a -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md deleted file mode 100644 index 544000db907..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 5d79253742f3313d55db981f -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md deleted file mode 100644 index bf8bee8395a..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 5d7925379e0180a438ce7f95 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md deleted file mode 100644 index d57aa617713..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d792537c80984dfa5501b96 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Inside `letters.forEach`, assign `document.createElement("input")` to `input`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md deleted file mode 100644 index 4568ec50b24..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925377b54d8a76efb5657 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Add the following code to `letters.forEach`: - -```js -input.type = "text"; -input.id = y + x; -input.onchange = update; -container.appendChild(input); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md deleted file mode 100644 index 6543d3124fb..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925371398513549bb6395 -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md deleted file mode 100644 index 378c01975ac..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d792537ea3eaf302bf2d359 -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md deleted file mode 100644 index 93968d4e378..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 5d792537533b1c7843bfd029 -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -The `includes` method works on a string and checks if the argument is its substring. - -Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md deleted file mode 100644 index dcc989ea328..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537dc0fe84345d4f19e -title: Step 93 -challengeType: 0 -dashedName: step-93 ---- - -# --description-- - -Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md deleted file mode 100644 index ce97294c369..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537b6cadae0f4b0cda1 -title: Step 94 -challengeType: 0 -dashedName: step-94 ---- - -# --description-- - -The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. - -Use the `slice` method to log the first two letters of `value` to the console. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md deleted file mode 100644 index 1eaf868ad16..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 5d79253770083fb730c93a93 -title: Step 95 -challengeType: 0 -dashedName: step-95 ---- - -# --description-- - -You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. - -Change the call to `slice` to log all characters except the first instead. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md deleted file mode 100644 index cd6f2405a86..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d792537fef76b226b63b93b -title: Step 96 -challengeType: 0 -dashedName: step-96 ---- - -# --description-- - -Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md deleted file mode 100644 index fb91f29be96..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d79253760fca25ccbbd8990 -title: Step 97 -challengeType: 0 -dashedName: step-97 ---- - -# --description-- - -The array destructuring syntax can be used to extract values from arrays: - -```js -const [x, y] = [1, 2]; // in variables -const fn = ([x, y]) => x + y // in functions -``` - -Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && - spreadsheetFunctions['random']([1, 2]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md deleted file mode 100644 index c933b24aaac..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d7925374321824cba309875 -title: Step 98 -challengeType: 0 -dashedName: step-98 ---- - -# --description-- - -Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( - code.replace(/\s/g, '') - ) && spreadsheetFunctions['random']([1, 1]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md deleted file mode 100644 index 2a5ee766e3d..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md +++ /dev/null @@ -1,276 +0,0 @@ ---- -id: 5d7925381e8565a5c50ba7f1 -title: Step 99 -challengeType: 0 -dashedName: step-99 ---- - -# --description-- - -In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. - -You can check if this is the case by comparing a call to a function with another call (with the same arguments): - -```js -console.log(f(2) === f(2)); // always true for pure functions -``` - -Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md deleted file mode 100644 index 2f419cf2876..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925383f1b77db7f1ff59e -title: Step 100 -challengeType: 0 -dashedName: step-100 ---- - -# --description-- - -This is (probably) false, so `random` is certainly impure. - -The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. - -Call `window.onload()` in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md deleted file mode 100644 index 176257a88b5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d792538de9fa3f298bcd5f6 -title: Step 101 -challengeType: 0 -dashedName: step-101 ---- - -# --description-- - -Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md deleted file mode 100644 index ad427105522..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -id: 5d7925385b74f69642e1fea5 -title: Step 102 -challengeType: 0 -dashedName: step-102 ---- - -# --description-- - -Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. - -Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md deleted file mode 100644 index 231159b2b34..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d7925380ea76d55b2c97d7b -title: Step 103 -challengeType: 0 -dashedName: step-103 ---- - -# --description-- - -This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. - -Remove the `console.log` statement. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.includes('console.log')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md deleted file mode 100644 index 36fd2f83b90..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d792538be4fe331f1a6c008 -title: Step 104 -challengeType: 0 -dashedName: step-104 ---- - -# --description-- - -Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. - -But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. - -Change these calls to `""` - the function is now pure but doesn't work. - -# --hints-- - -See description above for instructions. - -```js -const nos = code.replace(/\s/g, ''); -assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md deleted file mode 100644 index 4b9e711aae6..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 5d792538d169f33142175b95 -title: Step 105 -challengeType: 0 -dashedName: step-105 ---- - -# --description-- - -To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. - -Add an argument `cells` to `evalFormula`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md deleted file mode 100644 index 39584a049ae..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538e48b5a2c6e5bbe12 -title: Step 106 -challengeType: 0 -dashedName: step-106 ---- - -# --description-- - -When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md deleted file mode 100644 index 1ab52bf8124..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d7925387f3e9da5ec856dbe -title: Step 107 -challengeType: 0 -dashedName: step-107 ---- - -# --description-- - -Update the recursive call to `evalFormula` by passing in `cells` as the second argument. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md deleted file mode 100644 index 11e0b2d0bbc..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253824ae9b4a6e6f3108 -title: Step 108 -challengeType: 0 -dashedName: step-108 ---- - -# --description-- - -Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. - -# --hints-- - -See description above for instructions. - -```js -assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md deleted file mode 100644 index d4c961be237..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 5d7925383f122a279f4c54ad -title: Step 109 -challengeType: 0 -dashedName: step-109 ---- - -# --description-- - -The `find` method returns the first element of an array that satisfies the function passed to it. - -Chain `find` onto `cells` and pass it `cell => cell === id`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md deleted file mode 100644 index abdc6794679..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d7925387b682e962f209269 -title: Step 110 -challengeType: 0 -dashedName: step-110 ---- - -# --description-- - -In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md deleted file mode 100644 index 4baca0e6cc3..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538de774217b173288e -title: Step 111 -challengeType: 0 -dashedName: step-111 ---- - -# --description-- - -Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md deleted file mode 100644 index a2c5b9b1bef..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253891d93585323d1f3c -title: Step 112 -challengeType: 0 -dashedName: step-112 ---- - -# --description-- - -Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md deleted file mode 100644 index 637af181723..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925384e34e944ecb4612d -title: Step 113 -challengeType: 0 -dashedName: step-113 ---- - -# --description-- - -Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md deleted file mode 100644 index d12140aa462..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d792538631844ad0bdfb4c3 -title: Step 114 -challengeType: 0 -dashedName: step-114 ---- - -# --description-- - -`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. - -Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md deleted file mode 100644 index c966a9161ed..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -id: 5d792538e2a8d20cc580d481 -title: Step 115 -challengeType: 0 -dashedName: step-115 ---- - -# --description-- - -The `slice` method can also work on arrays. - -Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md deleted file mode 100644 index 5483ee8a3e9..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 5d792538f5004390d6678554 -title: Step 116 -challengeType: 0 -dashedName: step-116 ---- - -# --description-- - -You can also pass in a negative argument to `slice` to specify that index from the end: - -```js -[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] -``` - -Use a negative index to add a function `lasttwo` which returns the last two elements of an array. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md deleted file mode 100644 index 3e61d996f85..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 5d792539dd4fd4c96fd85f7e -title: Step 117 -challengeType: 0 -dashedName: step-117 ---- - -# --description-- - -The `%` operator returns the remainder: - -```js -4 % 3; // 1 -5 % 3; // 2 -6 % 3; // 0 -``` - -Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. - -# --hints-- - -See description above for instructions. - -```js -assert(isEven(20) && !isEven(31)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md deleted file mode 100644 index 8c4b6a9e314..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md +++ /dev/null @@ -1,292 +0,0 @@ ---- -id: 5d79253949802f8587c8bbd3 -title: Step 118 -challengeType: 0 -dashedName: step-118 ---- - -# --description-- - -The `filter` method keeps only the elements of an array that satisfy the function passed to it: - -```js -[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] -``` - -Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && - code.includes('filter') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md deleted file mode 100644 index c441a9459d8..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 5d7925395888767e9304c082 -title: Step 119 -challengeType: 0 -dashedName: step-119 ---- - -# --description-- - -The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. - -The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. - -For example, here's how to multiply all the value in an array: - -```js -[2, 3, 4].reduce((a, x) => a * x); // 24 -``` - -Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md deleted file mode 100644 index 787472aea1d..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 5d7925393b30099e37a34668 -title: Step 120 -challengeType: 0 -dashedName: step-120 ---- - -# --description-- - -The `includes` method checks if an element is in an array. - -Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md deleted file mode 100644 index f032db3ac16..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 5d7925398157757b23730fdd -title: Step 121 -challengeType: 0 -dashedName: step-121 ---- - -# --description-- - -The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: - -```js -[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] -// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array -// now it first tries [].concat(1) which works -``` - -Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md deleted file mode 100644 index 6b5714247b5..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d792539de4b9ac14dd40409 -title: Step 122 -challengeType: 0 -dashedName: step-122 ---- - -# --description-- - -Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === - '[1,3,5,7,9]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md deleted file mode 100644 index 8f15f9adfd4..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539534f1bf991bb987f -title: Step 123 -challengeType: 0 -dashedName: step-123 ---- - -# --description-- - -ES6 introduced a shorthand object literal syntax: - -```js -const a = 10; -const myObject = { a }; -console.log(myObject); // { a: 10 } -``` - -First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. - -# --hints-- - -See description above for instructions. - -```js -assert(sum([1, 2, 3]) === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md deleted file mode 100644 index eef96f2d471..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d7925394089b762f93ffa52 -title: Step 124 -challengeType: 0 -dashedName: step-124 ---- - -# --description-- - -Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. - -This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. - -# --hints-- - -See description above for instructions. - -```js -assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md deleted file mode 100644 index cb3b30d8c4f..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539ec758d45a6900173 -title: Step 125 -challengeType: 0 -dashedName: step-125 ---- - -# --description-- - -The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. - -As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md deleted file mode 100644 index 621e4cc4fbc..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md +++ /dev/null @@ -1,308 +0,0 @@ ---- -id: 5d7925398d525f61a9ff3a79 -title: Step 126 -challengeType: 0 -dashedName: step-126 ---- - -# --description-- - -The spread operator allow you to pass multiple arguments instead of an array: - -```js -const arr = [1, 2, 3]; -const sum3 = (a, b, c) => a + b + c; -sum3(...arr); // 6 -``` - -Use the spread operator to add `range` to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && - code.includes('...') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md deleted file mode 100644 index 8d27ee2bf76..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 5d792539a222f385c5c17d2b -title: Step 127 -challengeType: 0 -dashedName: step-127 ---- - -# --description-- - -Now define a `median` function which takes an argument `nums` (in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md deleted file mode 100644 index 08ffbd94e4a..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d7925398a7184b41b12a0e0 -title: Step 128 -challengeType: 0 -dashedName: step-128 ---- - -# --description-- - -The `sort` method sorts an array alphabetically: - -```js -["B", "C", "A"].sort(); // ["A", "B", "C"] -``` - -Assign the sorted `nums` to `sorted` in `median`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md deleted file mode 100644 index 49b025f4b1e..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d7925399afb905c34730a75 -title: Step 129 -challengeType: 0 -dashedName: step-129 ---- - -# --description-- - -But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: - -```js -[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] -``` - -If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. - -Use `sort` to sort `nums` in ascending order. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md deleted file mode 100644 index cad2f5aa466..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d792539728d1aa7788e2c9b -title: Step 130 -challengeType: 0 -dashedName: step-130 ---- - -# --description-- - -Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. - -You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md deleted file mode 100644 index df39b579f78..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d79253939434a2724c0ec41 -title: Step 131 -challengeType: 0 -dashedName: step-131 ---- - -# --description-- - -Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md deleted file mode 100644 index 1e4f1aca372..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 5d792539b9e1d3c54d8fe94a -title: Step 132 -challengeType: 0 -dashedName: step-132 ---- - -# --description-- - -Add a return statement to `median` so that it returns `isEven(length)`. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md deleted file mode 100644 index 4cf66a6dd6a..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5d792539b2e0bd8f9e8213e4 -title: Step 133 -challengeType: 0 -dashedName: step-133 ---- - -# --description-- - -Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. - -Note that the `middle` variable is close to the middle but is not actually the middle. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md deleted file mode 100644 index 2428ff3a79d..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 5d792539239148965a1a59a5 -title: Step 134 -challengeType: 0 -dashedName: step-134 ---- - -# --description-- - -Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.median([1, 20, 3]) === 3 && - spreadsheetFunctions.median([27, 7, 20, 10]) === 15 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md deleted file mode 100644 index ff91ae909fd..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d792539e1446045d0df6d28 -title: Step 135 -challengeType: 0 -dashedName: step-135 ---- - -# --description-- - -The `some` method checks if any element of the array satisfies the provided testing function. - -Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.someeven([1, 5, 4, 3]) && - !spreadsheetFunctions.someeven([3, 5, 9]) && - code.includes('.some') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md deleted file mode 100644 index ddede0016d6..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a2febbb77098730b9 -title: Step 136 -challengeType: 0 -dashedName: step-136 ---- - -# --description-- - -The `every` method checks if all elements of an array satisfy the provided testing function. - -Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && - !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && - code.includes('.every') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md deleted file mode 100644 index c475cf8ba22..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d79253a98bd9fdf7ce68d0a -title: Step 137 -challengeType: 0 -dashedName: step-137 ---- - -# --description-- - -We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. - -While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. - -Replace the body of `range` with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md deleted file mode 100644 index 52e294c3655..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 5d79253a1e9abf29de64c177 -title: Step 138 -challengeType: 0 -dashedName: step-138 ---- - -# --description-- - -The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. - -Make `range` return an array of `undefined` with size `end - start + 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md deleted file mode 100644 index ce1e1c87c73..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a8b29d78984369e4b -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -The `fill` method takes an argument and replaces all elements of the array with that argument. - -Use it on the array in `range` to replace everything with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md deleted file mode 100644 index 9630c3210b7..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 5d79253ad297a31cbe073718 -title: Step 140 -challengeType: 0 -dashedName: step-140 ---- - -# --description-- - -The function in the `map` method can actually take a second argument: the index of the element. - -This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). - -Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md deleted file mode 100644 index 7531f12a5a3..00000000000 --- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5dc10b8b93704f41d279eb5b -title: Step 141 -challengeType: 0 -dashedName: step-141 ---- - -# --description-- - -Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                            -
                                            -
                                            -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md new file mode 100644 index 00000000000..d522cf2c5ab --- /dev/null +++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md @@ -0,0 +1,388 @@ +--- +id: 659ebe52d74b132a1d75c891 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug. + +The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function. +# --hints-- + +You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`. + +```js +assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn localStorage by Building a Todo App + + + + +
                                            +

                                            Todo App

                                            +
                                            + + + +
                                            +

                                            Discard unsaved changes?

                                            +
                                            + + +
                                            +
                                            +                                             +
                                            +
                                            +
                                            + + + + +``` + +```css +:root { + --white: #fff; + --light-grey: #f5f6f7; + --dark-grey: #0a0a23; + --yellow: #f1be32; + --golden-yellow: #feac32; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--dark-grey); +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + color: var(--light-grey); + margin: 20px 0 40px 0; +} + +.todo-app { + background-color: var(--white); + width: 300px; + height: 350px; + border: 5px solid var(--yellow); + border-radius: 8px; + padding: 15px; + position: relative; + display: flex; + flex-direction: column; + gap: 10px; +} + +.btn { + cursor: pointer; + width: 100px; + margin: 10px; + color: var(--dark-grey); + background-color: var(--golden-yellow); + background-image: linear-gradient(#fecc4c, #ffac33); + border-color: var(--golden-yellow); + border-width: 3px; +} + +.btn:hover { + background-image: linear-gradient(#ffcc4c, #f89808); +} + +.large-btn { + width: 80%; + font-size: 1.2rem; + align-self: center; + justify-self: center; +} + +.close-task-form-btn { + background: none; + border: none; + cursor: pointer; +} + +.close-icon { + width: 20px; + height: 20px; +} + +.task-form { + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--white); + border-radius: 5px; + padding: 15px; + width: 300px; + height: 350px; + flex-direction: column; + justify-content: space-between; + overflow: auto; +} + +.task-form-header { + display: flex; + justify-content: flex-end; +} + +.task-form-body { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.task-form-footer { + display: flex; + justify-content: center; +} + +.task-form-label, +#title-input, +#date-input, +#description-input { + display: block; +} + +.task-form-label { + margin-bottom: 5px; + font-size: 1.3rem; + font-weight: bold; +} + +#title-input, +#date-input, +#description-input { + width: 100%; + margin-bottom: 10px; + padding: 2px; +} + +#confirm-close-dialog { + padding: 10px; + margin: 10px auto; + border-radius: 15px; +} + +.confirm-close-dialog-btn-container { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.discard-message-text { + font-weight: bold; + font-size: 1.5rem; +} + +#tasks-container { + height: 100%; + overflow-y: auto; +} + +.task { + margin: 5px 0; +} + +.hidden { + display: none; +} + +@media (min-width: 576px) { + .todo-app, + .task-form { + width: 400px; + height: 450px; + } + + .task-form-label { + font-size: 1.5rem; + } + + #title-input, + #date-input { + height: 2rem; + } + + #title-input, + #date-input, + #description-input { + padding: 5px; + margin-bottom: 20px; + } +} +``` + +```js +const taskForm = document.getElementById("task-form"); +const confirmCloseDialog = document.getElementById("confirm-close-dialog"); +const openTaskFormBtn = document.getElementById("open-task-form-btn"); +const closeTaskFormBtn = document.getElementById("close-task-form-btn"); +const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); +const cancelBtn = document.getElementById("cancel-btn"); +const discardBtn = document.getElementById("discard-btn"); +const tasksContainer = document.getElementById("tasks-container"); +const titleInput = document.getElementById("title-input"); +const dateInput = document.getElementById("date-input"); +const descriptionInput = document.getElementById("description-input"); + +const taskData = []; +let currentTask = {}; + +const addOrUpdateTask = () => { + --fcc-editable-region-- + + --fcc-editable-region-- + const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); + const taskObj = { + id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, + title: titleInput.value, + date: dateInput.value, + description: descriptionInput.value, + }; + + if (dataArrIndex === -1) { + taskData.unshift(taskObj); + } else { + taskData[dataArrIndex] = taskObj; + } + + updateTaskContainer() + reset() +}; + +const updateTaskContainer = () => { + tasksContainer.innerHTML = ""; + + taskData.forEach( + ({ id, title, date, description }) => { + (tasksContainer.innerHTML += ` +
                                            +

                                            Title: ${title}

                                            +

                                            Date: ${date}

                                            +

                                            Description: ${description}

                                            + + +
                                            + `) + } + ); +}; + + +const deleteTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + buttonEl.parentElement.remove(); + taskData.splice(dataArrIndex, 1); +} + +const editTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + currentTask = taskData[dataArrIndex]; + + titleInput.value = currentTask.title; + dateInput.value = currentTask.date; + descriptionInput.value = currentTask.description; + + addOrUpdateTaskBtn.innerText = "Update Task"; + + taskForm.classList.toggle("hidden"); +} + +const reset = () => { + titleInput.value = ""; + dateInput.value = ""; + descriptionInput.value = ""; + taskForm.classList.toggle("hidden"); + currentTask = {}; +} + +openTaskFormBtn.addEventListener("click", () => + taskForm.classList.toggle("hidden") +); + +closeTaskFormBtn.addEventListener("click", () => { + const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; + if (formInputsContainValues) { + confirmCloseDialog.showModal(); + } else { + reset(); + } +}); + +cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); + +discardBtn.addEventListener("click", () => { + confirmCloseDialog.close(); + reset() +}); + +taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + addOrUpdateTask(); +}); +``` diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md deleted file mode 100644 index 69ba84075dd..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e0e72c65bc8e73dfe1e -videoId: LGQuIIv2RVA -title: Questão A sobre elementos e tags -challengeType: 15 -dashedName: elements-and-tags-question-a ---- - -# --description-- - -Quase todos os elementos de uma página HTML são trechos de conteúdo envolvidos nas tags de abertura e de fechamento do HTML. - -As tags de abertura dizem ao navegador que este é o início de um elemento HTML. Elas são compostas por uma palavra-chave contida em sinais de menor e maior que `<>`. Por exemplo, uma tag de abertura de um parágrafo terá esta aparência: `

                                            `. - -As tags de fechamento dizem ao navegador onde um elemento termina. Quase sempre, elas são iguais às tags de abertura. A única diferença está no fato de terem uma barra antes da palavra-chave. Por exemplo, uma tag de fechamento de um parágrafo terá esta aparência: `

                                            `. - -Um elemento de parágrafo completo terá esta aparência: - -diagrama de elemento - -Você pode pensar em elementos como contêineres de conteúdo. As tags de abertura e fechamento informam ao navegador o conteúdo que o elemento contém. O navegador pode, então, usar essas informações para determinar como deve interpretar e formatar o conteúdo. - -Existem alguns elementos do HTML que não possuem uma tag de fechamento. Esses elementos geralmente têm esta aparência: `
                                            ` ou ``. Alguns, porém, também podem ser vistos sem a barra de fechamento, como `
                                            ` ou ``. Essas tags são conhecidos como tags de fechamento próprio ou como elementos vazios, pois não envolvem nenhum conteúdo. Você encontrará algumas delas em lições posteriores, mas a maior parte dos elementos terá tags de abertura e de fechamento. - -O HTML tem uma vasta lista de tags predefinidas que você pode usar para criar tipos diferentes de elementos. É importante usar as tags corretas para o conteúdo. Usar as tags corretas pode ter um grande impacto em dois aspectos dos seus sites: como eles são classificados em mecanismos de busca e se eles serão acessíveis aos usuários que dependem de tecnologias assistivas para usar a internet, como, por exemplo, os leitores de telas. - -Usar os elementos corretos para o conteúdo é chamado de HTML semântico. Você explorará isso com muito mais profundidade mais tarde no currículo. - -# --question-- - -## --assignment-- - -Assista ao vídeo de Kevin Powell [Introduction to HTML](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) - -## --text-- - -O que são as tags do HTML? - -## --answers-- - -As tags do HTML informam ao navegador o conteúdo que um elemento contém. - ---- - -As tags do HTML dizem ao navegador quando carregar seu conteúdo. - ---- - -As tags do HTML informam ao navegador o conteúdo que o próximo elemento contém. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md deleted file mode 100644 index 97f89632c78..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 637f4e1672c65bc8e73dfe1f -title: Questão B sobre elementos e tags -challengeType: 15 -dashedName: elements-and-tags-question-b ---- - -# --description-- - -Quase todos os elementos de uma página HTML são trechos de conteúdo envolvidos nas tags de abertura e de fechamento do HTML. - -As tags de abertura dizem ao navegador que este é o início de um elemento HTML. Elas são compostas por uma palavra-chave contida em sinais de menor e maior que <>. Por exemplo, uma tag de abertura de um parágrafo terá esta aparência: `

                                            `. - -As tags de fechamento dizem ao navegador onde um elemento termina. Quase sempre, elas são iguais às tags de abertura. A única diferença está no fato de terem uma barra antes da palavra-chave. Por exemplo, uma tag de fechamento de um parágrafo terá esta aparência: `

                                            `. - -Um elemento de parágrafo completo terá esta aparência: - -diagrama de elemento - -Você pode pensar em elementos como contêineres de conteúdo. As tags de abertura e fechamento informam ao navegador o conteúdo que o elemento contém. O navegador pode, então, usar essas informações para determinar como deve interpretar e formatar o conteúdo. - -Existem alguns elementos do HTML que não possuem uma tag de fechamento. Esses elementos geralmente têm esta aparência: `
                                            ` ou ``. Alguns, porém, também podem ser vistos sem a barra de fechamento, como `
                                            ` ou ``. Essas tags são conhecidos como tags de fechamento próprio ou como elementos vazios, pois não envolvem nenhum conteúdo. Você encontrará algumas delas em lições posteriores, mas a maior parte dos elementos terá tags de abertura e de fechamento. - -O HTML tem uma vasta lista de tags predefinidas que você pode usar para criar tipos diferentes de elementos. É importante usar as tags corretas para o conteúdo. Usar as tags corretas pode ter um grande impacto em dois aspectos dos seus sites: como eles são classificados em mecanismos de busca e se eles serão acessíveis aos usuários que dependem de tecnologias assistivas para usar a internet, como, por exemplo, os leitores de telas. - -Usar os elementos corretos para o conteúdo é chamado de HTML semântico. Você explorará isso com muito mais profundidade mais tarde no currículo. - -# --question-- - -## --text-- - -Quais são as três partes da maioria dos elementos do HTML? - -## --answers-- - -Uma tag de abertura, uma tag de fechamento próprio e o conteúdo. - ---- - -Uma tag de abertura, uma tag de fechamento e o conteúdo. - ---- - -Uma tag de abertura, uma tag de fechamento e um atributo. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md deleted file mode 100644 index 8f145f24115..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e1c72c65bc8e73dfe20 -title: Questão A sobre o boilerplate do HTML -challengeType: 15 -dashedName: html-boilerplate-question-a ---- - -# --description-- - -Para demonstrar um boilerplate de HTML, você primeiro precisa de um arquivo HTML como o qual vamos trabalhar. - -Crie uma pasta em seu computador e dê a ela o nome de `html-boilerplate`. Dentro dessa pasta, crie um arquivo e dê a ele o nome de `index.html`. - -Você, provavelmente, já está familiarizado com muitos tipos diferentes de arquivos, como, por exemplo, arquivos .doc, .pdf e arquivos de imagem. - -Para que o computador saiba que você deseja criar um arquivo HTML, é preciso anexar ao nome do arquivo a extensão `.html`, como você fez ao criar o arquivo `index.html`. - -Vale a pena observar que você nomeou o seu arquivo HTML como index. Você sempre deve dar ao arquivo HTML que conterá a página inicial do seu site o nome de `index.html`. Isso ocorre porque os servidores da web procurarão, por padrão, por uma página index.html quando os usuários chegarem ao seu site – não ter uma página com esse nome poderá causar grandes problemas. - -## O DOCTYPE - -Toda página HTML começa com uma declaração de doctype. O propósito do doctype é informar ao navegador qual versão de HTML ele deve usar para renderizar o documento. A versão mais recente do HTML é o HTML5. O tipo doctype para essa versão é simplesmente ``. - -Os doctypes para versões mais antigas do HTML eram um pouco mais complicados. Por exemplo, esta era a declaração de doctype para o HTML4: - -```html - -``` - -No entanto, você provavelmente não vai mais querer usar uma versão mais antiga do HTML. Então, use sempre ``. - -Abra o arquivo `index.html` criado anteriormente no seu editor de texto e adicione `` à primeira linha. - -# --question-- -## --text-- - -Qual é a finalidade da declaração de `DOCTYPE`? - -## --answers-- - -Informar ao navegador qual versão de HTML usar para renderizar o documento. - ---- - -Informar ao navegador que este documento usa JavaScript. - ---- - -Informar ao navegador o título do documento. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md deleted file mode 100644 index 1cb40dfbe31..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 637f4e2872c65bc8e73dfe21 -title: Questão B sobre o boilerplate do HTML -challengeType: 15 -dashedName: html-boilerplate-question-b ---- - -# --description-- - -Depois de declarar o doctype, você precisará fornecer um elemento ``. Esse é o elemento principal do documento, o que significa que todos os outros elementos do documento serão descendentes dele. - -Isso se torna mais importante posteriormente, quando você aprender sobre manipulação do HTML com JavaScript. Por enquanto, apenas saiba que o elemento `html` deve ser incluído em todos os documentos HTML. - -De volta ao arquivo `index.html`, vamos adicionar o elemento `` digitando suas tags de abertura e de fechamento, assim: - -```html - - - -``` - -## O que é o atributo lang? -`lang` especifica o idioma do conteúdo do texto naquele elemento. Esse atributo é usado principalmente para melhorar a acessibilidade da página da web. Ele permite que as tecnologias assistivas, como, por exemplo, os leitores de telas, se adaptem de acordo com o idioma e invoquem a pronúncia correcta. - -# --question-- - -## --text-- - -O que é o elemento `html`? - -## --answers-- - -Ele é o elemento raiz do documento e diz ao navegador qual versão do HTML ele deve usar. - ---- - -Ele é o elemento raiz do documento e todos os outros elementos devem ser seus descendentes. - ---- - -Ele é o elemento raiz do documento e todos os outros elementos devem vir depois dele. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md deleted file mode 100644 index 80920945d61..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e2f72c65bc8e73dfe22 -title: Questão C sobre o boilerplate do HTML -challengeType: 15 -dashedName: html-boilerplate-question-c ---- - -# --description-- - -O elemento `` é onde você coloca as metainformações importantes sobre suas páginas da web, além de coisas necessárias para que suas páginas da web sejam renderizadas corretamente no navegador. Dentro de ``, você não deve usar elementos que exibam conteúdo na página. - -## O elemento meta charset -Você deve sempre ter a tag `meta` para a codificação do conjunto de caracteres, ou `charset`, da página no elemento `head`: ``. - -Definir a codificação é muito importante, pois garante que a página da web exibirá símbolos especiais e caracteres de diferentes idiomas corretamente no navegador. - -## Elemento title -Outro elemento que você sempre deve incluir na head de um documento HTML é o elemento `title`: - -```html -My First Webpage -``` - -O elemento `title` é usado para dar às páginas da web um título legível, o qual é exibido na guia do navegador da sua página. - -Se você não incluir um elemento `title`, o título da página da web seria o padrão para o nome do arquivo. No seu caso, seria `index.html`, o que não é muito significativo para usuários. Isto tornaria muito difícil encontrar sua página da web se o usuário tivesse muitas abas do navegador abertas. - -Há muito mais elementos que podem ser inseridos em `head` em um documento HTML. No entanto, por agora, é crucial saber apenas os dois elementos que vemos aqui. Você verá mais elementos que serão colocados em `head` durante a continuação do currículo. - -De volta ao arquivo `index.html`, vamos adicionar um elemento `head` e, dentro dele, um elemento `meta` `charset` e um elemento `title`. O elemento head vai dentro do elemento HTML e deve ser sempre o primeiro elemento após a tag de abertura de ``: - - -```html - - - - - - My First Webpage - - -``` - -# --question-- - -## --text-- - -Qual é a finalidade do elemento `head`? - -## --answers-- - -O elemento `head` é usado para exibir todos os elementos que são exibidos na página da web. - ---- - -O elemento `head` é usado para exibir informações importantes sobre sua página da web e é usado para renderizar as páginas da web corretamente com elementos `meta`. - ---- - -O elemento `head` é usado para exibir o conteúdo do cabeçalho na parte superior da página da web. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md deleted file mode 100644 index c7ab8d91565..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e3672c65bc8e73dfe23 -videoId: V8UAEoOvqFg -title: Questão D sobre o boilerplate do HTML -challengeType: 15 -dashedName: html-boilerplate-question-d ---- - -# --description-- - -O elemento final necessário para completar o boilerplate do HTML é o elemento ``. Aqui vai todo o conteúdo que será exibido aos usuários - texto, imagens, listas, links e assim por diante. - -Para completar o boilerplate, adicione um elemento `body` ao arquivo `index.html`. O elemento `body` também deve ir dentro do elemento `html` e estará sempre abaixo do elemento `head`, assim: - -# --question-- - -## --assignment-- - -Assista e acompanhe o vídeo de Kevin Powell, Build your first web page. O vídeo está acima. - ---- - -Desenvolva sua memória muscular excluindo o conteúdo do arquivo `index.html` e tente escrever todo o boilerplate novamente de memória. Não se preocupe se precisar dar uma olhada no conteúdo da aula nas primeiras vezes caso não saiba o que fazer. Apenas siga fazendo isso até que você possa fazer o processo algumas vezes de memória. - ---- - -Teste seu boilerplate através deste [validador de HTML](https://www.freeformatter.com/html-validator.html). Os validadores garantem que a marcação está correta e são uma excelente ferramenta de aprendizado, pois fornecem feedback sobre erros de sintaxe que você pode estar cometendo de vez em quando sem saber, como deixar de colocar tags de fechamento ou adicionar espaços a mais em seu HTML. - -## --text-- - -Qual é a finalidade do elemento `body`? - -## --answers-- - -É aqui que todas as informações importantes sobre a página da web são exibidas, como as tags `title` e `meta`. - ---- - -É aqui que você informa ao navegador como renderizar a página da web corretamente. - ---- - -É aqui que vai todo o conteúdo que será exibido na página, como imagens, textos e links. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md deleted file mode 100644 index 635aa6eb91e..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 6374f208de18c50e48ba767b -title: Questão A de Introdução ao HTML e ao CSS -challengeType: 15 -dashedName: introduction-to-html-and-css-question-a ---- - -# --description-- - -O HTML e o CSS são duas linguagens que trabalham em conjunto para criar tudo o que você vê quando está na internet. O HTML são os dados brutos que constituem uma página da web. Todos os textos, links, cards, listas e botões são criados em HTML. O CSS é o que adiciona estilo a esses elementos simples. O HTML coloca informações em uma página da web e o CSS posiciona essas informações, dá cor a elas, muda as fontes, o que dá a elas uma aparência melhor! - -Muitos recursos úteis seguem se referindo ao HTML e ao CSS como linguagens de programação. Se quisermos ser técnicos, no entanto, chamá-las assim não é algo preciso. Isso ocorre porque se tratam apenas de apresentar informações. Elas não são usadas para programar a lógica. O JavaScript, que você aprenderá na próxima seção, é uma linguagem de programação, pois é usada para fazer as páginas da web fazerem coisas. No entanto, há muito que você pode fazer apenas com o HTML e o CSS – e você, definitivamente, vai precisar dos dois. As lições a seguir visam dar a você as ferramentas necessárias para que possa seguir com sucesso ao alcançar o conteúdo do JavaScript. - -# --question-- - -## --assignment-- - -Leia o artigo sobre HTML, CSS e JavaScript (texto em inglês). É uma visão geral rápida das relações entre HTML, CSS e JavaScript. - -## --text-- - -Qual das seguintes afirmações é verdadeira? - -## --answers-- - -O CSS é usado para criar a estrutura básica de uma página web e o HTML é usado para adicionar estilo. - ---- - -HTML é usado para criar a estrutura básica de uma página web e o CSS é usado para adicionar estilo. - ---- - -O HTML e o CSS são usados para adicionar estilo a uma página da web, enquanto o JavaScript é usado para criar a estrutura básica. - - -## --video-solution-- - -2 - - diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md deleted file mode 100644 index d5e9e2c6577..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 6376327e2724a688c04636e3 -title: Questão B de Introdução ao HTML e ao CSS -challengeType: 15 -dashedName: introduction-to-html-and-css-question-b ---- - -# --description-- - - -O HTML e o CSS são duas linguagens que trabalham em conjunto para criar tudo o que você vê quando está na internet. O HTML são os dados brutos que constituem uma página da web. Todos os textos, links, cards, listas e botões são criados em HTML. O CSS é o que adiciona estilo a esses elementos simples. O HTML coloca informações em uma página da web e o CSS posiciona essas informações, dá cor a elas, muda as fontes, o que dá a elas uma aparência melhor! - -Muitos recursos úteis seguem se referindo ao HTML e ao CSS como linguagens de programação. Se quisermos ser técnicos, no entanto, chamá-las assim não é algo preciso. Isso ocorre porque se tratam apenas de apresentar informações. Elas não são usadas para programar a lógica. O JavaScript, que você aprenderá na próxima seção, é uma linguagem de programação, pois é usada para fazer as páginas da web fazerem coisas. No entanto, há muito que você pode fazer apenas com o HTML e o CSS – e você, definitivamente, vai precisar dos dois. As lições a seguir visam dar a você as ferramentas necessárias para que possa seguir com sucesso ao alcançar o conteúdo do JavaScript. - -# --question-- - -## --text-- - -Entre o HTML e o CSS, o que você deve usar para adicionar parágrafos de texto em uma página da web? - -## --answers-- - -CSS - ---- - -JavaScript - ---- - -HTML - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md deleted file mode 100644 index 64fd0018607..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 637633162724a688c04636e4 -title: Questão C de Introdução ao HTML e ao CSS -challengeType: 15 -dashedName: introduction-to-html-and-css-question-c ---- - -# --description-- - -O HTML e o CSS são duas linguagens que trabalham em conjunto para criar tudo o que você vê quando está na internet. O HTML são os dados brutos que constituem uma página da web. Todos os textos, links, cards, listas e botões são criados em HTML. O CSS é o que adiciona estilo a esses elementos simples. O HTML coloca informações em uma página da web e o CSS posiciona essas informações, dá cor a elas, muda as fontes, o que dá a elas uma aparência melhor! - -Muitos recursos úteis seguem se referindo ao HTML e ao CSS como linguagens de programação. Se quisermos ser técnicos, no entanto, chamá-las assim não é algo preciso. Isso ocorre porque se tratam apenas de apresentar informações. Elas não são usadas para programar a lógica. O JavaScript, que você aprenderá na próxima seção, é uma linguagem de programação, pois é usada para fazer as páginas da web fazerem coisas. No entanto, há muito que você pode fazer apenas com o HTML e o CSS – e você, definitivamente, vai precisar dos dois. As lições a seguir visam dar a você as ferramentas necessárias para que possa seguir com sucesso ao alcançar o conteúdo do JavaScript. -# --question-- - -## --text-- - -Entre o HTML e o CSS, qual deles você deve usar para alterar a cor de fundo e a fonte de um botão? - -## --answers-- - -Você deve usar o CSS para alterar a cor de fundo e a fonte de um botão. - ---- - -Você deve usar o JavaScript para alterar a cor de fundo e a fonte de um botão. - ---- - -Você deve usar o HTML para alterar a cor de fundo e fonte de um botão. - -## --video-solution-- - -1 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md deleted file mode 100644 index 62ed52d50fc..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 637633672724a688c04636e5 -title: Questão D de Introdução ao HTML e ao CSS -challengeType: 15 -dashedName: introduction-to-html-and-css-question-d ---- - -# --description-- - -O HTML e o CSS são duas linguagens que trabalham em conjunto para criar tudo o que você vê quando está na internet. O HTML são os dados brutos que constituem uma página da web. Todos os textos, links, cards, listas e botões são criados em HTML. O CSS é o que adiciona estilo a esses elementos simples. O HTML coloca informações em uma página da web e o CSS posiciona essas informações, dá cor a elas, muda as fontes, o que dá a elas uma aparência melhor! - -Muitos recursos úteis seguem se referindo ao HTML e ao CSS como linguagens de programação. Se quisermos ser técnicos, no entanto, chamá-las assim não é algo preciso. Isso ocorre porque se tratam apenas de apresentar informações. Elas não são usadas para programar a lógica. O JavaScript, que você aprenderá na próxima seção, é uma linguagem de programação, pois é usada para fazer as páginas da web fazerem coisas. No entanto, há muito que você pode fazer apenas com o HTML e o CSS – e você, definitivamente, vai precisar dos dois. As lições a seguir visam dar a você as ferramentas necessárias para que possa seguir com sucesso ao alcançar o conteúdo do JavaScript. - -# --question-- - -## --text-- - -Qual é a diferença entre HTML, CSS e JavaScript? - -## --answers-- - -O HTML serve para criar elementos interativos, o CSS é para a aparência e o JavaScript é para criar a estrutura de uma página da web. - ---- - -O CSS é para a aparência, o JavaScript é para criar elementos interativos e o HTML é para criar a estrutura de uma página da web. - ---- - -O JavaScript é para a aparência, o CSS é para criar a estrutura e o HTML é para criar elementos interativos de uma página da web. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md deleted file mode 100644 index 1ce94fb92fe..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f704072c65bc8e73dfe36 -videoId: tsEQgGjSmkM -title: Questão A de Links e imagens -challengeType: 15 -dashedName: links-and-images-question-a ---- - -# --description-- - -Para fazer alguns exercícios práticos usando links e imagens nesta lição, você precisa de um projeto de HTML para trabalhar. - -- Crie um diretório chamado `odin-links-and-images`. - -- Dentro desse diretório, crie um arquivo e dê a ele o nome de `index.html`. - -- Preencha o boilerplate do HTML de sempre. - -- Por fim, adicione o seguinte `h1` ao `body`: `

                                            Homepage

                                            ` - -## Elementos de âncora -Para criar um link em HTML, use o elemento de âncora. Um elemento de âncora é definido agregando o texto ou outro elemento do HTML que você que seja um link à tag ``. Adicione o seguinte ao `body` da página `index.html` que você criou e abra a página no navegador: - -```html -click me -``` - -Você pode ter notado que, ao clicar nesse link, nada acontece. Isso ocorre porque uma tag de âncora sozinha não saberá para onde você quer ir. Você tem que informar a ela um destino. Você faz isso utilizando um atributo do HTML. - -Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento. Um atributo é geralmente composto por duas partes: um nome e um valor. No entanto, nem todos os atributos requerem um valor. No seu caso, você precisa adicionar um atributo `href` (referência de hiperlink) à tag de abertura do elemento de âncora. O valor do atributo `href` é o destino para o qual você quer o seu link vá. - -Adicione o atributo `href` abaixo ao elemento âncora que você criou anteriormente e tente clicar novamente. Não se esqueça de atualizar o navegador para que as novas alterações possam ser aplicadas. - -```html -click me -``` - -Por padrão, qualquer texto agregado a uma tag de âncora sem um atributo `href` parecerá texto simples. Se o atributo `href` estiver presente, o navegador dará ao texto uma cor azul e vai sublinhá-lo para representar um link. - -Vale a pena notar que você pode usar tags de âncora para vincular qualquer tipo de recurso na internet, não apenas outros documentos HTML. Você pode vincular vídeos, arquivos em PDF, imagens e assim por diante. Na maioria das vezes, no entanto, você vinculará a tag a outros documentos HTML. - -# --question-- - -## --assignment-- - -Assista ao vídeo de Kevin Powell sobre links do HTML acima. - -## --text-- - -Qual é a tag do HTML usada para criar um link? - -## --answers-- - -`` - ---- - -`

                                            ` - ---- - -`

                                              ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md deleted file mode 100644 index 294643cd845..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f703572c65bc8e73dfe35 -title: Questão B de Links e imagens -challengeType: 15 -dashedName: links-and-images-question-b ---- - -# --description-- - -Para fazer alguns exercícios práticos usando links e imagens nesta lição, você precisa de um projeto de HTML para trabalhar. - -- Crie um diretório chamado `odin-links-and-images`. - -- Dentro desse diretório, crie um arquivo e dê a ele o nome de `index.html`. - -- Preencha o boilerplate do HTML de sempre. - -- Por fim, adicione o seguinte `h1` ao `body`: `

                                              Homepage

                                              ` - -## Elementos de âncora -Para criar um link em HTML, use o elemento de âncora. Um elemento de âncora é definido agregando o texto ou outro elemento do HTML que você que seja um link à tag `                                              `. Adicione o seguinte ao `body` da página `index.html` que você criou e abra a página no navegador: - -```html -click me -``` - -Você pode ter notado que, ao clicar nesse link, nada acontece. Isso ocorre porque uma tag de âncora sozinha não saberá para onde você quer ir. Você tem que informar a ela um destino. Você faz isso utilizando um atributo do HTML. Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento. Um atributo é geralmente composto por duas partes: um nome e um valor. No entanto, nem todos os atributos requerem um valor. No seu caso, você precisa adicionar um atributo `href` (referência de hiperlink) à tag de abertura do elemento de âncora. O valor do atributo `href` é o destino para o qual você quer o seu link vá. Adicione o atributo `href` abaixo ao elemento âncora que você criou anteriormente e tente clicar novamente. Não se esqueça de atualizar o navegador para que as novas alterações possam ser aplicadas. - -```html -click me -``` - -Por padrão, qualquer texto agregado a uma tag de âncora sem um atributo `href` parecerá texto simples. Se o atributo `href` estiver presente, o navegador dará ao texto uma cor azul e vai sublinhá-lo para representar um link. Vale a pena notar que você pode usar tags de âncora para vincular qualquer tipo de recurso na internet, não apenas outros documentos HTML. Você pode vincular vídeos, arquivos em PDF, imagens e assim por diante. Na maioria das vezes, no entanto, você vinculará a tag a outros documentos HTML. - -# --question-- -## --text-- - -O que é um atributo? -## --answers-- - -Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de fechamento do elemento. - ---- - -Um atributo do HTML é usado para informar ao navegador o que o elemento contém. - ---- - -Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md deleted file mode 100644 index 9b7f9726f6e..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 637f703072c65bc8e73dfe34 -title: Questão C de Links e imagens -challengeType: 15 -dashedName: links-and-images-question-c ---- - -# --description-- - -Para fazer alguns exercícios práticos usando links e imagens nesta lição, você precisa de um projeto de HTML para trabalhar. - -- Crie um diretório chamado `odin-links-and-images`. - -- Dentro desse diretório, crie um arquivo e dê a ele o nome de `index.html`. - -- Preencha o boilerplate do HTML de sempre. - -- Por fim, adicione o seguinte `h1` ao `body`: `

                                              Homepage

                                              ` - -## Elementos de âncora -Para criar um link em HTML, use o elemento de âncora. Um elemento de âncora é definido agregando o texto ou outro elemento do HTML que você que seja um link à tag ``. Adicione o seguinte ao `body` da página `index.html` que você criou e abra a página no navegador: - -```html -click me -``` - -Você pode ter notado que, ao clicar nesse link, nada acontece. Isso ocorre porque uma tag de âncora sozinha não saberá para onde você quer ir. Você tem que informar a ela um destino. Você faz isso utilizando um atributo do HTML. Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento. Um atributo é geralmente composto por duas partes: um nome e um valor. No entanto, nem todos os atributos requerem um valor. No seu caso, você precisa adicionar um atributo `href` (referência de hiperlink) à tag de abertura do elemento de âncora. O valor do atributo `href` é o destino para o qual você quer o seu link vá. Adicione o atributo `href` abaixo ao elemento âncora que você criou anteriormente e tente clicar novamente. Não se esqueça de atualizar o navegador para que as novas alterações possam ser aplicadas. - -```html -click me -``` - -Por padrão, qualquer texto agregado a uma tag de âncora sem um atributo `href` parecerá texto simples. Se o atributo `href` estiver presente, o navegador dará ao texto uma cor azul e vai sublinhá-lo para representar um link. Vale a pena notar que você pode usar tags de âncora para vincular qualquer tipo de recurso na internet, não apenas outros documentos HTML. Você pode vincular vídeos, arquivos em PDF, imagens e assim por diante. Na maioria das vezes, no entanto, você vinculará a tag a outros documentos HTML. - -# --question-- - -## --text-- - -Qual atributo diz aos links para onde ir? - -## --answers-- - -`src` - ---- - -`href` - ---- - -`link` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md deleted file mode 100644 index 50463f3244d..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 637f702872c65bc8e73dfe33 -videoId: ta3Oxx7Yqbo -title: Questão D de Links e imagens -challengeType: 15 -dashedName: links-and-images-question-d ---- - -# --description-- - - -Geralmente, existem dois tipos de links que você criará: - -- Links para páginas em outros sites na internet - -- Links para páginas localizadas em seus próprios sites - - -## Links absolutos -Os links para páginas em outros sites na internet são chamados de links absolutos. Um link absoluto típico será composto das seguintes partes: `protocol://domain/path`. Um link absoluto conterá sempre o protocolo e o domínio do destino. - -Você já viu um link absoluto em ação. O link que você criou para a página About do The Odin Project anteriormente era um link absoluto, pois contém o protocolo e domínio. - -`https://www.theodinproject.com/about` - -## Links relativos -Os links para outras páginas dentro de seu próprio site são chamados de links relativos. Links relativos não incluem o nome de domínio. Já que estamos falando de outra página no mesmo site, eles assumem que o nome do domínio será o mesmo da página que você criou no link. - -Os links relativos incluem apenas o caminho do arquivo para a outra página, em relação à página em que você está criando o link. Isso é bastante abstrato. Vamos ver isso em ação usando um exemplo. - -No diretório `odin-links-and-images`, crie outro arquivo HTML chamado `about.html` e cole o seguinte código dentro dele: - -```html - - - - - Odin Links and Images - - - -

                                              About Page

                                              - - -``` - -De volta à página `index`, adicione o seguinte elemento de âncora para criar um link para a página `about`: - -```html - -

                                              Homepage

                                              - click me - - About - -``` - -Abra o arquivo `index.html` em um navegador e clique no link de about para se certificar de que tudo esteja ligado corretamente. Clicar no link deve enviá-lo para a página `about` na que você acabou de criar. - -Isso funciona porque as páginas `index` e `about` estão no mesmo diretório. Isso significa que você pode simplesmente usar o nome (`about.html`) como o valor do link `href`. - -Você, no entanto, geralmente vai querer organizar os diretórios do site um pouco melhor. Normalmente, você só teria o `index.html` no diretório raiz e todos os outros arquivos HTML em seus próprios diretórios. - -Crie um diretório chamado `pages` dentro do diretório `odin-links-and-images` e mova o arquivo `about.html` para este novo diretório. - -Atualize a página `index` no navegador e, em seguida, clique no link `about`. Agora, você terá um link quebrado. Isso ocorre porque o local do arquivo da página `about` foi alterado. - -Para corrigir isto, você só precisa atualizar o valor de `href` do link da página `about` para incluir o diretório de `pages/`, já que esse é o novo local de `about.html` em relação ao arquivo `index.html`. - -```html - -

                                              Homepage

                                              - About - -``` - -Atualize a página `index` no navegador e tente clicar no link para `about` novamente. Agora, estará tudo em ordem novamente. - -Em muitos casos, isso funcionará muito bem. No entanto, com essa abordagem, ainda podemos encontrar problemas inesperados. Adicionar `./` antes do link impedirá, na maioria dos casos, esses problemas. Ao adicionar `./`, você estará especificando para o código que ele deve começar a procurar o arquivo/diretório a partir de sua relação com o **diretório atual**. - -```html - -

                                              Homepage

                                              - About - -``` - -# --question-- - -## --assignment-- - -Assista ao vídeo de Kevin Powell sobre a estrutura dos arquivos do HTML acima. - -## --text-- - -Qual é a diferença entre um link absoluto e um relativo? - -## --answers-- - -Um link absoluto é um link para outra página no site atual. Um link relativo é um link para outro site. - ---- - -Um link absoluto é um link para outro site. Um link relativo é um link para outra página no site atual. - ---- - -Não há diferença entre um link absoluto e um relativo. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md deleted file mode 100644 index 02d88e21085..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 637f702372c65bc8e73dfe32 -videoId: 0xoztJCHpbQ -title: Questão E de Links e imagens -challengeType: 15 -dashedName: links-and-images-question-e ---- - -# --description-- - -Os sites da web seriam muito chatos se apenas pudessem exibir texto. Felizmente, o HTML fornece uma grande variedade de elementos para exibir todos os tipos diferentes de mídias. O mais utilizado é o elemento de imagem. - -Para exibir uma imagem em HTML, você usa o elemento ``. Diferente dos outros elementos que você encontrou, o elemento `` tem fechamento próprio. Os elementos vazios ou de fechamento próprio do HTML não precisam de uma tag de fechamento. - -Em vez de envolver o conteúdo com uma tag de abertura e fechamento, esse elemento incorpora uma imagem na página usando um atributo `src`, que informa ao navegador onde o arquivo da imagem está localizado. O atributo `src` funciona muito como o atributo `href` para tags de âncora. Ele pode incorporar uma imagem usando caminhos relativos e absolutos. - -Por exemplo, ao usar um caminho absoluto, você pode exibir uma imagem localizada no site do The Odin Project: - - - -Para usar imagens que você tem em seus próprios sites, você pode usar um caminho relativo. - -- Crie um diretório chamado `images` dentro do projeto `odin-links-and-images`. - -- Em seguida, faça o download [desta imagem](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e mova-a para o diretório `images` que você acabou de criar. - -- Renomeie a imagem para `dog.jpg`. - -Por fim, adicione a imagem ao arquivo `index.html`: - -```html - -

                                              Homepage

                                              - click me - - About - - - -``` - -Salve o arquivo `index.html` e abra-o em um navegador para conhecer o Charles e ver como ele é lindo. - - -## Diretórios pai - -Como usar a imagem do cachorro na página `about`? Primeiro, você precisa subir um nível no diretório de páginas para o diretório pai para depois poder acessar o diretório de imagens. - -Para subir para o diretório pai, você precisa usar dois pontos no caminho relativo, assim: `../.` Vamos ver isso em ação, dentro do `body` do arquivo `about.html`, adicione a seguinte imagem abaixo do título que você adicionou anteriormente: - -```html - -``` - -Em detalhes: - -- Primeiro, você vai ao diretório pai do diretório das páginas, que é o `odin-links-and-images`. - -- Em seguida, a partir do diretório pai, você pode ir para o diretório `images`. - -- Por fim, você pode acessar o arquivo `dog.jpg`. - -Usando a metáfora que usamos anteriormente, usar `../` em um caminho de arquivo é como sair do quarto em que você está no momento, indo para o corredor principal para que você possa chegar à sala. - -## Atributo `Alt` - -Além do atributo `src`, cada elemento de imagem deve ter também um atributo `alt` (texto alternativo). - -O atributo `alt` é usado para descrever uma imagem. Ele será usado no lugar da imagem, caso ela não possa ser carregada. Ele também é usado com leitores de tela para descrever a imagem para usuários com deficiência visual. - -É assim que o logotipo do The Odin Project que você usou anteriormente fica com um atributo `alt` incluído: - - -# --question-- - -## --assignment-- - -Assista ao vídeo de Kevin Powell sobre imagens do HTML acima. - -## --text-- - -Qual é a tag usada para exibir uma imagem? - -## --answers-- - -`` - ---- - -`` - ---- - -`` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md deleted file mode 100644 index 4dc78a87b31..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701c72c65bc8e73dfe31 -title: Questão F de Links e imagens -challengeType: 15 -dashedName: links-and-images-question-f ---- - -# --description-- - -Os sites da web seriam muito chatos se apenas pudessem exibir texto. Felizmente, o HTML fornece uma grande variedade de elementos para exibir todos os tipos diferentes de mídias. O mais utilizado é o elemento de imagem. - -Para exibir uma imagem em HTML, você usa o elemento ``. Diferente dos outros elementos que você encontrou, o elemento `` tem fechamento próprio. Os elementos vazios ou de fechamento próprio do HTML não precisam de uma tag de fechamento. - -Em vez de envolver o conteúdo com uma tag de abertura e fechamento, esse elemento incorpora uma imagem na página usando um atributo `src`, que informa ao navegador onde o arquivo da imagem está localizado. O atributo `src` funciona muito como o atributo `href` para tags de âncora. Ele pode incorporar uma imagem usando caminhos relativos e absolutos. - -Por exemplo, ao usar um caminho absoluto, você pode exibir uma imagem localizada no site do The Odin Project: - - - -Para usar imagens que você tem em seus próprios sites, você pode usar um caminho relativo. - -- Crie um diretório chamado `images` dentro do projeto `odin-links-and-images`. - -- Em seguida, faça o download [desta imagem](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e mova-a para o diretório de imagens que você acabou de criar. - -- Renomeie a imagem para `dog.jpg`. - -Por fim, adicione a imagem ao arquivo `index.html`: - -```html - -

                                              Homepage

                                              -                                               click me - - About - - - -``` - -Salve o arquivo `index.html` e abra-o em um navegador para conhecer o Charles e ver como ele é lindo. - - -## Diretórios pai - -Como usar a imagem do cachorro na página `about`? Primeiro, você precisa subir um nível no diretório de páginas para o diretório pai para depois poder acessar o diretório de imagens. - -Para subir para o diretório pai, você precisa usar dois pontos no caminho relativo, assim: `../.` Vamos ver isso em ação, dentro do `body` do arquivo `about.html`, adicione a seguinte imagem abaixo do título que você adicionou anteriormente: - -```html - -``` - -Em detalhes: - -- Primeiro, você vai ao diretório pai do diretório das páginas, que é o `odin-links-and-images`. - -- Em seguida, a partir do diretório pai, você pode ir para o diretório `images`. - -- Por fim, você pode acessar o arquivo `dog.jpg`. - -Usando a metáfora que usamos anteriormente, usar `../` em um caminho de arquivo é como sair do quarto em que você está no momento, indo para o corredor principal para que você possa chegar à sala. - -## Atributo alt - -Além do atributo `src`, cada elemento de imagem deve ter também um atributo `alt` (texto alternativo). - -O atributo `alt` é usado para descrever uma imagem. Ele será usado no lugar da imagem, caso ela não possa ser carregada. Ele também é usado com leitores de tela para descrever a imagem para usuários com deficiência visual. - -É assim que o logotipo do The Odin Project que você usou anteriormente fica com um atributo alt incluído: - - -# --question-- - -## --text-- - -Quais são os dois atributos que as imagens sempre precisam ter? - -## --answers-- - -`href` e `alt` - ---- - -`name` e `href` - ---- - -`alt` e `src` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md deleted file mode 100644 index 9d78d96be23..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701572c65bc8e73dfe30 -title: Questão G de Links e imagens -challengeType: 15 -dashedName: links-and-images-question-g ---- - -# --description-- - -Os sites da web seriam muito chatos se apenas pudessem exibir texto. Felizmente, o HTML fornece uma grande variedade de elementos para exibir todos os tipos diferentes de mídias. O mais utilizado é o elemento de imagem. - -Para exibir uma imagem em HTML, você usa o elemento ``. Diferente dos outros elementos que você encontrou, o elemento `` tem fechamento próprio. Os elementos vazios ou de fechamento próprio do HTML não precisam de uma tag de fechamento. - -Em vez de envolver o conteúdo com uma tag de abertura e fechamento, esse elemento incorpora uma imagem na página usando um atributo `src`, que informa ao navegador onde o arquivo da imagem está localizado. O atributo `src` funciona muito como o atributo `href` para tags de âncora. Ele pode incorporar uma imagem usando caminhos relativos e absolutos. - -Por exemplo, ao usar um caminho absoluto, você pode exibir uma imagem localizada no site do The Odin Project: - - - -Para usar imagens que você tem em seus próprios sites, você pode usar um caminho relativo. - -- Crie um diretório chamado `images` dentro do projeto `odin-links-and-images`. - -- Em seguida, faça o download [desta imagem](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e mova-a para o diretório de imagens que você acabou de criar. - -- Renomeie a imagem para `dog.jpg`. - -Por fim, adicione a imagem ao arquivo `index.html`: - -```html - -

                                              Homepage

                                              - click me - - About - - - -``` - -Salve o arquivo `index.html` e abra-o em um navegador para conhecer o Charles e ver como ele é lindo. - - -## Diretórios pai - -Como usar a imagem do cachorro na página `about`? Primeiro, você precisa subir um nível no diretório de páginas para o diretório pai para depois poder acessar o diretório de imagens. - -Para subir para o diretório pai, você precisa usar dois pontos no caminho relativo, assim: `../.` Vamos ver isso em ação, dentro do `body` do arquivo `about.html`, adicione a seguinte imagem abaixo do título que você adicionou anteriormente: - -```html - -``` - -Em detalhes: - -- Primeiro, você vai ao diretório pai do diretório das páginas, que é o `odin-links-and-images`. - -- Em seguida, a partir do diretório pai, você pode ir para o diretório `images`. - -- Por fim, você pode acessar o arquivo `dog.jpg`. - -Usando a metáfora que usamos anteriormente, usar `../` em um caminho de arquivo é como sair do quarto em que você está no momento, indo para o corredor principal para que você possa chegar à sala. - -## Atributo alt - -Além do atributo `src`, cada elemento de imagem deve ter também um atributo `alt` (texto alternativo). - -O atributo `alt` é usado para descrever uma imagem. Ele será usado no lugar da imagem, caso ela não possa ser carregada. Ele também é usado com leitores de tela para descrever a imagem para usuários com deficiência visual. - -É assim que o logotipo do The Odin Project que você usou anteriormente fica com um atributo alt incluído: - - -# --question-- - -## --text-- - -Como você acessa um diretório pai em um caminho de arquivo? - -## --answers-- - -`../` - ---- - -`./` - ---- - -`.../` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md deleted file mode 100644 index ad335cec674..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 637f700b72c65bc8e73dfe2f -title: Questão H de Links e imagens -challengeType: 15 -dashedName: links-and-images-question-h ---- - -# --description-- - -Os sites da web seriam muito chatos se apenas pudessem exibir texto. Felizmente, o HTML fornece uma grande variedade de elementos para exibir todos os tipos diferentes de mídias. O mais utilizado é o elemento de imagem. - -Para exibir uma imagem em HTML, você usa o elemento ``. Diferente dos outros elementos que você encontrou, o elemento `` tem fechamento próprio. Os elementos vazios ou de fechamento próprio do HTML não precisam de uma tag de fechamento. - -Em vez de envolver o conteúdo com uma tag de abertura e fechamento, esse elemento incorpora uma imagem na página usando um atributo `src`, que informa ao navegador onde o arquivo da imagem está localizado. O atributo `src` funciona muito como o atributo `href` para tags de âncora. Ele pode incorporar uma imagem usando caminhos relativos e absolutos. - -Por exemplo, ao usar um caminho absoluto, você pode exibir uma imagem localizada no site do The Odin Project: - - - -Para usar imagens que você tem em seus próprios sites, você pode usar um caminho relativo. - -- Crie um diretório chamado `images` dentro do projeto `odin-links-and-images`. - -- Em seguida, faça o download [desta imagem](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e mova-a para o diretório de imagens que você acabou de criar. - -- Renomeie a imagem para `dog.jpg`. - -Por fim, adicione a imagem ao arquivo `index.html`: - -```html - -

                                              Homepage

                                              - click me - - About - - - -``` - -Salve o arquivo `index.html` e abra-o em um navegador para conhecer o Charles e ver como ele é lindo. - - -## Diretórios pai - -Como usar a imagem do cachorro na página `about`? Primeiro, você precisa subir um nível no diretório de páginas para o diretório pai para depois poder acessar o diretório de imagens. - -Para subir para o diretório pai, você precisa usar dois pontos no caminho relativo, assim: `../.` Vamos ver isso em ação, dentro do `body` do arquivo `about.html`, adicione a seguinte imagem abaixo do título que você adicionou anteriormente: - -```html - -``` - -Em detalhes: - -- Primeiro, você vai ao diretório pai do diretório das páginas, que é o `odin-links-and-images`. - -- Em seguida, a partir do diretório pai, você pode ir para o diretório `images`. - -- Por fim, você pode acessar o arquivo `dog.jpg`. - -Usando a metáfora que usamos anteriormente, usar `../` em um caminho de arquivo é como sair do quarto em que você está no momento, indo para o corredor principal para que você possa chegar à sala. - -## Atributo alt - -Além do atributo `src`, cada elemento de imagem deve ter também um atributo `alt` (texto alternativo). - -O atributo `alt` é usado para descrever uma imagem. Ele será usado no lugar da imagem, caso ela não possa ser carregada. Ele também é usado com leitores de tela para descrever a imagem para usuários com deficiência visual. - -É assim que o logotipo do The Odin Project que você usou anteriormente fica com um atributo alt incluído: - - -# --question-- - -## --assignment-- - -Leia sobre os quatro formatos principais de imagens que podem ser usados na web. - -## --text-- - -Quais são os quatro formatos principais de imagens que você pode usar na web? - -## --answers-- - -TIFF, GIF, PNG e SVG. - ---- - -JPG, PNG, GIF e SVG. - ---- - -JPG, PDF, SVG e GIF. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md deleted file mode 100644 index 6aea1ca5a35..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e3e72c65bc8e73dfe24 -videoId: kcHKFZBVtf4 -title: Questão A sobre Entender listas ordenadas e não ordenadas -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-a ---- - -# --description-- - -Se você quer ter uma lista de itens onde a ordem não importa, como uma lista de compras de itens que podem ser comprados em qualquer ordem, então você pode usar uma lista não ordenada. - -Listas não ordenadas são criadas usando o elemento `
                                                `. Cada item na lista é criado usando o elemento de item de lista `
                                              • `. - -Cada item de lista de uma lista não ordenada começa com um ponto: - - - -Se você preferir criar uma lista de itens onde a ordem importa, por outro lado, como instruções passo a passo para uma receita ou seus 10 programas favoritos de TV, então pode usar uma lista ordenada. - -Listas ordenadas são criadas usando o elemento `
                                                  `. Cada item individual dentro deles é criado usando novamente o elemento de item de lista `
                                                1. `. No entanto, cada item da lista em uma lista ordenada começa com um número: - - - -# --question-- - -## --assignment-- - -Assista os três primeiros minutos do vídeo de Kevin Powell sobre listas ordenadas e não ordenadas acima. - ---- - -Faça uma lista não ordenada de compras dos seus alimentos favoritos. - ---- - -Faça uma lista ordenada de tarefas que você precisa fazer hoje. - ---- - -Faça uma lista não ordenada de lugares que você gostaria de visitar um dia. - ---- - -Faça uma lista ordenada dos seus 5 melhores videogames ou filmes favoritos. - -## --text-- - -Qual é a tag do HTML usada para criar uma lista não ordenada? - -## --answers-- - -`
                                                2. ` - ---- - -`
                                                    ` - ---- - -`
                                                      ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md deleted file mode 100644 index 52c45758b7f..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e4672c65bc8e73dfe25 -title: Questão B sobre Entender listas ordenadas e não ordenadas -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-b ---- - -# --description-- - -Se você quer ter uma lista de itens onde a ordem não importa, como uma lista de compras de itens que podem ser comprados em qualquer ordem, então você pode usar uma lista não ordenada. - -Listas não ordenadas são criadas usando o elemento `
                                                        `. Cada item na lista é criado usando o elemento de item de lista `
                                                      • `. - -Cada item de lista de uma lista não ordenada começa com um ponto: - - - -Se você preferir criar uma lista de itens onde a ordem importa, por outro lado, como instruções passo a passo para uma receita ou seus 10 programas favoritos de TV, então pode usar uma lista ordenada. - -Listas ordenadas são criadas usando o elemento `
                                                          `. Cada item individual dentro deles é criado usando novamente o elemento de item de lista `
                                                        1. `. No entanto, cada item da lista em uma lista ordenada começa com um número: - - - -# --question-- - -## --text-- - -Qual é a tag do HTML usada para criar uma lista ordenada? - -## --answers-- - -`
                                                            ` - ---- - -`
                                                          1. ` - ---- - -`
                                                              ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md deleted file mode 100644 index 60efdeea9da..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e5172c65bc8e73dfe26 -title: Questão C sobre Entender listas ordenadas e não ordenadas -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-c ---- - -# --description-- - -Se você quer ter uma lista de itens onde a ordem não importa, como uma lista de compras de itens que podem ser comprados em qualquer ordem, então você pode usar uma lista não ordenada. - -Listas não ordenadas são criadas usando o elemento `
                                                                `. Cada item na lista é criado usando o elemento de item de lista `
                                                              • `. - -Cada item de lista de uma lista não ordenada começa com um ponto: - - - -Se você preferir criar uma lista de itens onde a ordem importa, por outro lado, como instruções passo a passo para uma receita ou seus 10 programas favoritos de TV, então pode usar uma lista ordenada. - -Listas ordenadas são criadas usando o elemento `
                                                                  `. Cada item individual dentro deles é criado usando novamente o elemento de item de lista `
                                                                1. `. No entanto, cada item da lista em uma lista ordenada começa com um número: - - - -# --question-- - -## --text-- - -Qual é a tag do HTML usada para criar itens de lista dentro de listas ordenadas e não ordenadas? - -## --answers-- - -`
                                                                    ` - ---- - -`
                                                                  1. ` - ---- - -`
                                                                      ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md deleted file mode 100644 index 2c4bc7b5114..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 637f4e5872c65bc8e73dfe27 -videoId: yqcd-XkxZNM -title: Questão A de Trabalhando com textos -challengeType: 15 -dashedName: working-with-text-question-a ---- - -# --description-- - -O que você esperaria que o seguinte texto exibisse em uma página HTML? - -```html - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. - -``` - -Parece que há dois parágrafos do texto. Ou seja, pode-se esperar que sejam exibidos desse modo. No entanto, esse não é o caso, como você pode ver pelo resultado abaixo: - - - -Quando o navegador encontrar novas linhas como essa em seu HTML, ele as comprimirá em um único espaço. O resultado desta compressão é que todo o texto é colocado em uma única linha. - -Se quiser criar parágrafos em HTML, é preciso utilizar o elemento de parágrafo, que acrescentará uma nova linha após cada um dos parágrafos. Um elemento de parágrafo é definido envolvendo o conteúdo do texto com uma tag `

                                                                      `. - -Ao mudar nosso exemplo de antes para usar elementos dos parágrafos, corrigimos o problema: - - - -# --question-- - -## --assignment-- - -Assista o vídeo de Kevin Powell sobre Parágrafos e títulos do HTML acima. - -## --text-- - -Como se cria um parágrafo em HTML? - -## --answers-- - -`

                                                                      This is a paragraph

                                                                      ` - ---- - -`

                                                                      This is a paragraph

                                                                      ` - ---- - -`This is a paragraph` - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md deleted file mode 100644 index 238bc9d802d..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 637f4e5f72c65bc8e73dfe28 -title: Questão B de Trabalhando com textos -challengeType: 15 -dashedName: working-with-text-question-b ---- - -# --description-- - -Títulos são diferentes de outros elementos de texto do HTML: eles são exibidos maiores e com a fonte mais forte do que outros textos para representar que são títulos. - -Existem 6 níveis diferentes de títulos, de `

                                                                      ` até `

                                                                      `. O número dentro de uma tag de título representa o nível desse título. O título maior e mais importante é `h1`, enquanto `h6` é o menor título, de nível mais baixo. - -Os títulos são definidos do mesmo modo que os parágrafos. Por exemplo, para criar um título `h1`, envolvemos o texto do título com uma tag `

                                                                      `. - - - -Usar o nível correto de título é importante porque os níveis fornecem uma hierarquia para o conteúdo. Um título `h1` deve ser sempre usado para o título geral da página. Os títulos de nível inferior devem ser usados como títulos para o conteúdo em seções menores da página. - -# --question-- -## --text-- - -Quantos níveis diferentes de títulos existem e qual é a diferença entre eles? - -## --answers-- - -Existem 5 níveis diferentes de títulos. `h5` é o título menor e de menor importância, enquanto `h1` é a maior e mais importante. - ---- - -Existem 6 níveis diferentes de títulos. `h6` é o título maior e de maior importância, enquanto `h1` é o menor e menos importante. - ---- - -Existem 6 níveis diferentes de títulos. `h1` é o título maior e de maior importância, enquanto `h6` é o menor e menos importante. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md deleted file mode 100644 index 80a7a3022c0..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 637f4e6672c65bc8e73dfe29 -videoId: gW6cBZLUk6M -title: Questão C de Trabalhando com textos -challengeType: 15 -dashedName: working-with-text-question-c ---- - -# --description-- - -O elemento `` deixa o texto em negrito. Ele também marca o texto semanticamente como importante. Isso afeta ferramentas, como leitores de tela, nas quais os usuários com deficiências visuais confiarão para poder usar o site. O tom de voz em alguns leitores de tela mudará para comunicar a importância do texto dentro de um elemento `strong`. Para definir um elemento `strong`, você envolve o conteúdo do texto em uma tag ``. - -Para usar `strong` sozinho: - - - -Você, provavelmente, usará o elemento `strong` muito mais em combinação com outros elementos de texto, como este: - - - -Às vezes, você vai querer deixar o texto em negrito sem dar a ele um significado importante. Você aprenderá a fazer isso nas aulas de CSS, mais tarde no currículo. - -# --question-- - -## --assignment-- - -Assista ao vídeo de Kevin Powell sobre Negrito e Itálico do HTML acima. - -## --text-- - -Qual elemento você deve usar para deixar o texto em negrito e mostrar que é importante? - -## --answers-- - -`This is an important message` - ---- - -`

                                                                      This is an important message

                                                                      ` - ---- - -`This is an important message` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md deleted file mode 100644 index 451753e3960..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 637f4e6e72c65bc8e73dfe2a -title: Questão D de Trabalhando com textos -challengeType: 15 -dashedName: working-with-text-question-d ---- - -# --description-- - -O elemento `em` torna o texto itálico. Ele também coloca ênfase semântica no texto, o que pode afetar coisas como leitores de tela. Para definir um elemento enfatizado, você encapsula o conteúdo do texto em uma tag ``. - -Para usar `em` sozinho: - - -Novamente, assim como ocorre com o elemento `strong`, você usará principalmente o elemento `em` com outros elementos de texto: - - - -# --question-- -## --text-- - -Qual é o elemento que você deve usar para deixar o texto em itálico para adicionar ênfase? - -## --answers-- - -`This is an italic message` - ---- - -`This is an italic message` - ---- - -`This is an italic message` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md deleted file mode 100644 index 8e7126693b9..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e7972c65bc8e73dfe2b -title: Questão E de Trabalhando com textos -challengeType: 15 -dashedName: working-with-text-question-e ---- - -# --description-- - -Você deve ter notado que em todos os exemplos desta lição, você faz a indentação de elementos que estejam dentro de outros elementos. Isso é conhecido como aninhamento de elementos. - -Quando você aninha elementos dentro de outros elementos, cria um relacionamento de pai e filho entre eles. Os elementos aninhados são os filhos e o elemento dentro dos quais eles estão aninhados é o pai. - -No exemplo seguinte, `body` é o pai e o elemento `p` é o filho: - -```html - - - - -

                                                                      Lorem ipsum dolor sit amet.

                                                                      - - -``` - -Assim como nas relações humanas, os elementos-pai do HTML podem ter muitos filhos. Elementos no mesmo nível de aninhamento são considerados irmãos. - -Por exemplo, os dois elementos `p` do código a seguir são irmãos, já que ambos são filhos de `body` e estão no mesmo nível de aninhamento um do outro: - -```html - - - - -

                                                                      Lorem ipsum dolor sit amet.

                                                                      -

                                                                      Ut enim ad minim veniam.

                                                                      - - -``` - -Você usa a indentação para tornar o nível de aninhamento claro e legível para você e para outros desenvolvedores que trabalharão com o seu HTML no futuro. Recomenda-se a indentação de qualquer elemento filho com dois espaços. - -As relações de pai, filho e irmãos entre os elementos se tornarão muito mais importantes depois, ao começar a estilizar seu HTML com CSS e ao adicionar um comportamento com JavaScript. Agora, porém, é apenas importante conhecer a distinção entre o modo como os elementos estão relacionados e a terminologia utilizada para descrever as suas relações. - -# --question-- - -## --text-- - -Que relação existe entre dois elementos se eles estiverem no mesmo nível de aninhamento? - -## --answers-- - -Os elementos são os pais um do outro. - ---- - -Os elementos são os filhos um do outro. - ---- - -Os elementos são irmãos. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md deleted file mode 100644 index d0d0133a099..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f4e8072c65bc8e73dfe2c -title: Questão F de Trabalhando com textos -challengeType: 15 -dashedName: working-with-text-question-f ---- - -# --description-- - -Você deve ter notado que em todos os exemplos desta lição, você faz a indentação de elementos que estejam dentro de outros elementos. Isso é conhecido como aninhamento de elementos. - -Quando você aninha elementos dentro de outros elementos, cria um relacionamento de pai e filho entre eles. Os elementos aninhados são os filhos e o elemento dentro dos quais eles estão aninhados é o pai. - -No exemplo seguinte, body é o pai e o parágrafo é o filho: - -```html - - - - -

                                                                      Lorem ipsum dolor sit amet.

                                                                      - - -``` - -Assim como nas relações humanas, os elementos-pai do HTML podem ter muitos filhos. Elementos no mesmo nível de aninhamento são considerados irmãos. - -Por exemplo, os dois parágrafos do código a seguir são irmãos, já que ambos são filhos de body e estão no mesmo nível de aninhamento um do outro: - -```html - - - - -

                                                                      Lorem ipsum dolor sit amet.

                                                                      -

                                                                      Ut enim ad minim veniam.

                                                                      - - -``` - -Você usa a indentação para tornar o nível de aninhamento claro e legível para você e para outros desenvolvedores que trabalharão com o seu HTML no futuro. Recomenda-se a indentação de qualquer elemento filho com dois espaços. - -As relações de pai, filho e irmãos entre os elementos se tornarão muito mais importantes depois, ao começar a estilizar seu HTML com CSS e ao adicionar um comportamento com JavaScript. Agora, porém, é apenas importante conhecer a distinção entre o modo como os elementos estão relacionados e a terminologia utilizada para descrever as suas relações. - -# --question-- - -## --text-- - -Qual é a relação que um elemento tem com outro elemento aninhado dentro dele? - -## --answers-- - -O elemento dentro do outro elemento é chamado de elemento pai. - ---- - -O elemento dentro do outro elemento é chamado de elemento filho. - ---- - -O elemento dentro do outro elemento é chamado de elemento irmão. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md deleted file mode 100644 index 1e73f5579ad..00000000000 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e8772c65bc8e73dfe2d -title: Questão G de Trabalhando com textos -challengeType: 15 -dashedName: working-with-text-question-g ---- - -# --description-- - -Os comentários em HTML não são visíveis para o navegador. Eles nos permitem comentar o código para que outros desenvolvedores ou você mesmo no futuro possam lê-los e ter algum contexto sobre algo que pode não estar claro no código. - -Escrever um comentário em HTML é simples: basta envolver o comentário com as tags ``. Por exemplo: - -```html -

                                                                      View the html to see the hidden comments

                                                                      - - - -

                                                                      Some paragraph text

                                                                      - - -``` - -# --question-- - -## --assignment-- - -Para praticar um pouco o trabalho com textos em HTML, crie uma página simples de artigos de blog que use títulos diferentes e parágrafos. Coloque algum texto nos parágrafos em negritos e em itálico. Você pode usar o [Lorem Ipsum](https://loremipsum.io) para gerar texto fictício, no lugar do texto real, enquanto cria seus sites. - -## --text-- - -Como você cria comentários em HTML? - -## --answers-- - -`/* This is an HTML comment */` - ---- - -`` - ---- - -`<-- This is an HTML comment --!>` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md deleted file mode 100644 index f647c60ee7b..00000000000 --- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5900f36e1000cf542c50fe80 -title: 'Problema 1: Múltiplos de 3 e 5' -challengeType: 1 -forumTopicId: 301722 -dashedName: problem-1-multiples-of-3-and-5 ---- - -# --description-- - -Se listarmos todos os números naturais abaixo de 10 que são múltiplos de 3 ou 5, obteremos 3, 5, 6 e 9. A soma destes múltiplos é 23. - -Calcule a soma de todos os múltiplos de 3 ou 5 menor que o parâmetro `number`. - -# --hints-- - -`multiplesOf3and5(10)` deve retornar um número. - -```js -assert(typeof multiplesOf3and5(10) === 'number'); -``` - -`multiplesOf3and5(49)` deve retornar 543. - -```js -assert.strictEqual(multiplesOf3and5(49), 543); -``` - -`multiplesOf3and5(1000)` deve retornar 233168. - -```js -assert.strictEqual(multiplesOf3and5(1000), 233168); -``` - -`multiplesOf3and5(8456)` deve retornar 16687353. - -```js -assert.strictEqual(multiplesOf3and5(8456), 16687353); -``` - -`multiplesOf3and5(19564)` deve retornar 89301183. - -```js -assert.strictEqual(multiplesOf3and5(19564), 89301183); -``` - -# --seed-- - -## --seed-contents-- - -```js -function multiplesOf3and5(number) { - - return true; -} - -multiplesOf3and5(1000); -``` - -# --solutions-- - -```js -const multiplesOf3and5 = (number) => { - var total = 0; - - for(var i = 0; i < number; i++) { - if(i % 3 == 0 || i % 5 == 0) { - total += i; - } - } - return total; -}; -``` diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md deleted file mode 100644 index a8abd3ff027..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 651dd5ae6ffb500e3f2ce47c -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -```js -console.log('with code'); -``` - -*** - -Making a statement based on her assumption. - -### --feedback-- - -No, that's not correct - -*** - -Expressing a possibility. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md deleted file mode 100644 index 27f5dcb5e42..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5d86ffb500e3f2ce47d -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md deleted file mode 100644 index a79f83d6f5a..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd5f41d697d0aab7833b5 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md deleted file mode 100644 index 13028d7c28a..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 651dd3e06ffb500e3f2ce478 -title: "Dialogue: Introducing" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-introducing ---- - -# --description-- - -What the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md deleted file mode 100644 index 3d67f522c07..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543abeff5f028dba112f278 -title: "I am: I'm" -challengeType: 19 -dashedName: i-am-im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, the verb `to be` is used to talk about identities, characteristics, and more. The contraction `I'm` is a combination of `I` and `am`. Here, Tom uses it to introduce himself. - -# --question-- - -## --text-- - -Which operation correctly expands the contraction `I'm`? - -## --answers-- - -`I is` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I am` - -*** - -`I was` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I have` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md deleted file mode 100644 index a2aa6a8f717..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 6543abf5f5f028dba112f279 -title: I'm -challengeType: 22 -dashedName: im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -The word `I'm` is a contraction of `I am`. Contractions are a way to shorten common combinations of words, especially with verbs. - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, that's right! _ Tom McKenzie.` - -## --blanks-- - -`I'm` diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md deleted file mode 100644 index 3b8b7cff0bd..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 6537e6ece93e5724eeb27c54 -title: Name and Job Title -challengeType: 19 -dashedName: name-and-job-title -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, we often mention our job or role in a company by saying, `I'm [Name], the [Job title].` This lets others know our position or role. - -# --question-- - -## --text-- - -What is Maria's job role at the company? - -## --answers-- - -`Graphic Designer` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Member` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Lead` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`CEO` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md deleted file mode 100644 index 2a3c405b6ad..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 651dd5386ffb500e3f2ce47a -title: Right -challengeType: 22 -dashedName: right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, to check or confirm something people sometimes use tag questions. For example, `You are a programmer, right?` Here, `right?` is used as a tag to check or confirm the previous statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, _?` - -## --blanks-- - -`are` - -### --feedback-- - -Pay attention to the verb in the sentence. - -*** - -`right` - -### --feedback-- - -Pay attention to the verb in the sentence. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md deleted file mode 100644 index 2ae09721cbf..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 6543aa3df5f028dba112f275 -title: Team Lead -challengeType: 22 -dashedName: team-lead -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -A `team lead` is a person who leads or manages a team. In the dialogue, Maria introduces herself as the team lead, meaning she has a leadership role. - -# --fillInTheBlank-- - -## --sentence-- - -`I'm Maria, the _ _.` - -## --blanks-- - -team - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -lead - -### --feedback-- - -Focus on the term Maria used to describe herself. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md deleted file mode 100644 index 3349bcfead9..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 6543aae6f5f028dba112f277 -title: "That's Right: 2" -challengeType: 22 -dashedName: thats-right-2 -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -Placeholder Description \_\_\_ \_\_ - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, _ _! I'm Tom McKenzie. It's a pleasure to meet you.` - -## --blanks-- - -`that's` - -*** - -`right` diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md deleted file mode 100644 index e85982fd561..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543aaa9f5f028dba112f276 -title: That's Right -challengeType: 19 -dashedName: thats-right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -When someone makes a correct assumption or guess about you, you can confirm it using phrases like `that's right`. It's a way of agreeing or saying yes to what is said. - -# --question-- - -## --text-- - -Which phrase does Tom use to confirm Maria's statement about him? - -## --answers-- - -`that's wrong` - -### --feedback-- - -`That's wrong` is used to disagree. - -*** - -`that's okay` - -### --feedback-- - -`that's okay` usually shows acceptance, not confirmation. - -*** - -`that's right` - -*** - -`that's left` - -### --feedback-- - -`that's left` refers to a direction, not confirmation. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md deleted file mode 100644 index dd254987129..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 651dd5296ffb500e3f2ce479 -title: You Are -challengeType: 22 -dashedName: you-are -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, when making introductions or identifying someone, you use the verb `to be`. In this case, `You are` is used to address the person Maria is talking to and affirmatively identify their occupation. - -Maria is introducing herself and confirming Tom's job role. `Are` is used in the present affirmative to make a statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, right?` - -## --blanks-- - -are - -### --feedback-- - -The verb `to be` is an irregular verb. When conjugated with the pronoun `you`, `be` becomes `are`. For example: `You are an English learner.` diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md new file mode 100644 index 00000000000..a041fbddef7 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md @@ -0,0 +1,15 @@ +--- +id: 655c0feadb1dd77f6cda623f +title: "Dialogue 1: A Job Interview" +challengeType: 21 +videoId: nLDychdBwUg +dashedName: dialogue-1-a-job-interview +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md new file mode 100644 index 00000000000..97f3f3245d8 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md @@ -0,0 +1,54 @@ +--- +id: 657b0f0be03b2137ed88b36c +title: Task 1 +challengeType: 19 +dashedName: task-1 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `interview` is a formal meeting where someone asks questions to learn about another person's experience, skills, or opinions. In job interviews, like in the dialogue, the interviewer asks about the candidate's previous job experiences. + +# --question-- + +## --text-- + +What is the purpose of Anna's meeting with the candidate? + +## --answers-- + +To discuss a new project at Acme Tech + +### --feedback-- + +The dialogue is about an interview, not a project discussion. + +--- + +To give a presentation on web development + +### --feedback-- + +The dialogue focuses on an interview, not a presentation. + +--- + +To have a casual conversation about programming + +### --feedback-- + +This is a formal interview, not a casual conversation. + +--- + +To conduct an interview about the candidate's job experience + +## --video-solution-- + +4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md new file mode 100644 index 00000000000..301a777a900 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md @@ -0,0 +1,50 @@ +--- +id: 657b106ced8c653be6b3218f +title: Task 2 +challengeType: 22 +dashedName: task-2 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Thanks for coming in for this interview. _ you _ me about your _ job experiences?` + +## --blanks-- + +`Can` + +### --feedback-- + +This word is used to ask if someone is able to do something. + +--- + +`tell` + +### --feedback-- + +This word is used when asking someone to give information. + +--- + +`previous` + +### --feedback-- + +This word is used to describe something that happened before now. + + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md new file mode 100644 index 00000000000..ad5202d23d2 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md @@ -0,0 +1,58 @@ +--- +id: 657b108cf870283d22b21e8e +title: Task 3 +challengeType: 19 +dashedName: task-3 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the simple present tense is used to describe habitual or usual actions. However, when you are talking about past roles or experiences, like in an interview, you should use the simple past tense. + +The simple past tense often involves changing verbs. For example, `is` becomes `was` for singular subjects and `are` becomes `were` for plural subjects. + +For example, `I am a teacher` in the present becomes `I was a teacher` for past experiences. Similarly, `They are engineers` changes to `They were engineers` when speaking about the past. + +# --question-- + +## --text-- + +What was the candidate's position at Acme Tech? + +## --answers-- + +`A project manager` + +### --feedback-- + +The candidate stated they were a programmer, not a project manager. + +--- + +`A database analyst` + +### --feedback-- + +The candidate mentioned being a programmer, which is different from a database analyst. + +--- + +`A programmer` + +--- + +`A software tester` + +### --feedback-- + +The candidate specifically mentioned their role as a programmer, not a software tester. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md new file mode 100644 index 00000000000..f757d7077f1 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md @@ -0,0 +1,38 @@ +--- +id: 657b110ad8afcc3f8e586362 +title: Task 4 +challengeType: 22 +dashedName: task-4 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that have been completed in the past. It involves changing verbs to show that the action happened before now. In this challenge, you'll practice using the simple past form of verb `to be`. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ there for three years. I _ responsible for developing web applications and maintaining the company's database.` + +## --blanks-- + +`was` + +### --feedback-- + +The first `was` indicates the completion of the time period the candidate spent at their previous job. + +--- + +`was` + +### --feedback-- + +The second `was` is used to describe past responsibility, indicating what the candidate used to do in their previous job. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md new file mode 100644 index 00000000000..a2258172744 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md @@ -0,0 +1,49 @@ +--- +id: 657b115008a62d41c0d7482f +title: Task 5 +challengeType: 19 +dashedName: task-5 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the context of programming and technology, the term `web applications` refers to software programs that run on a web server and are accessed through a web browser. They are an essential part of modern technology, allowing users to perform functions or access services over the internet. + +# --question-- + +## --text-- + +What does `web applications` refer to in the context of programming? + +## --answers-- + +Mobile apps that are downloaded from app stores + +### --feedback-- + +While mobile apps are a type of application, `web applications` specifically refer to those accessed through a web browser. + +--- + +Programs that run on a web server and are accessed via a web browser + +--- + +Physical hardware used in networking + +### --feedback-- + +Web applications are software, not physical hardware. + +--- + +Websites that only provide information without user interaction + +### --feedback-- + +Web applications are interactive and functional, not just informational. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md new file mode 100644 index 00000000000..6c2c5ba78bf --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md @@ -0,0 +1,49 @@ +--- +id: 657b119f0ce64343420bb850 +title: Task 6 +challengeType: 19 +dashedName: task-6 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `database` is a structured collection of data, typically stored electronically in a computer system. It is used to organize, store, and retrieve large amounts of information efficiently. In programming, `database` is essential for managing data that applications need to function. + +# --question-- + +## --text-- + +What is a `database` in the context of programming? + +## --answers-- + +A structured collection of data stored electronically + +--- + +A tool for designing websites + +### --feedback-- + +While important in web development, a database is not a tool for designing websites, but for storing data. + +--- + +A programming language used to create applications + +### --feedback-- + +A database is not a programming language; it's a system for storing and managing data. + +--- + +A type of computer virus + +### --feedback-- + +A database is a safe and structured way to store data, not a computer virus. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md new file mode 100644 index 00000000000..03e329649a9 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md @@ -0,0 +1,40 @@ +--- +id: 657b11e082e48a44eb4bfc09 +title: Task 7 +challengeType: 22 +dashedName: task-7 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's response and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ also part of the _ update team.` + +## --blanks-- + +`was` + +### --feedback-- + +This word is a past tense verb. You use it to talk about something that happened in the past. + +--- + +`software` + +### --feedback-- + +This word refers to computer programs. It's an important term in technology and programming. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md new file mode 100644 index 00000000000..67343b31705 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -0,0 +1,57 @@ +--- +id: 657b11f87368cf463ea4fe46 +title: Task 8 +challengeType: 19 +dashedName: task-8 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. For example: + + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. + `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + +# --question-- + +## --text-- + +How does Anna ask about specific projects in the past tense? + +## --answers-- + +`Where there any specific projects you'd like to mention?` + +### --feedback-- + +`Where` is used for locations. The correct form for asking about past events is `Were`. + +--- + +`Were there any specific projects you'd like to mention?` + +--- + +`Was there any specific projects you'd like to mention?` + +### --feedback-- + +`Was` is used with singular nouns. Since `projects` is plural, `Were` is the correct choice. + +--- + +`Are there any specific projects you'd like to mention?` + +### --feedback-- + +`Are` is present tense. The question is about past projects, so `Were` is needed. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md new file mode 100644 index 00000000000..e6bc643d065 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md @@ -0,0 +1,55 @@ +--- +id: 657b1240ef768447b80817ad +title: Task 9 +challengeType: 19 +dashedName: task-9 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense, as reviewed earlier, is used for actions completed in the past. In this context, `we were involved in` combines the simple past tense (`were`) with the expression `involved in`, which means being a part of something, especially in an active or important role. For example, `They were involved in organizing the event` means they played an important role in organizing it. + +# --question-- + +## --text-- + +How does the candidate describe their role in the project? + +## --answers-- + +`We had involvement in the development of the e-commerce platform.` + +### --feedback-- + +Although this phrase communicates involvement, the more common expression in English is `were involved in`. + +--- + +`We were engaged in the development of the e-commerce platform.` + +### --feedback-- + +`engaged in` is similar but not the exact phrase used by the candidate. `Involved in` specifically indicates an active participation. + +--- + +`We were involved in the development of the e-commerce platform.` + +--- + +`We participated in the development of the e-commerce platform.` + +### --feedback-- + +While `participated in` suggests involvement, the specific phrase used here is `involved in`. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md new file mode 100644 index 00000000000..f51e04c012a --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md @@ -0,0 +1,49 @@ +--- +id: 657b12ae08dd7049b300c901 +title: Task 10 +challengeType: 19 +dashedName: task-10 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +An `e-commerce platform` refers to a software application that allows businesses to manage their online sales operations. It typically includes features for displaying products, processing orders, and handling customer transactions. This term is essential in the world of online business, as it enables companies to sell goods and services over the internet. + +# --question-- + +## --text-- + +What is an `e-commerce platform` in the context of online business? + +## --answers-- + +A platform for social media marketing + +### --feedback-- + +While e-commerce platforms may use social media for marketing, they are primarily used for online sales operations. + +--- + +A software application for managing online sales + +--- + +A tool for website design and development + +### --feedback-- + +An e-commerce platform is specifically for managing online sales, not just website design. + +--- + +A system for email communication with customers + +### --feedback-- + +Though communication might be a feature, an e-commerce platform's main function is to manage online sales. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md new file mode 100644 index 00000000000..092c2b7ff32 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md @@ -0,0 +1,41 @@ +--- +id: 657b12e7c306334b7c320221 +title: Task 11 +challengeType: 22 +dashedName: task-11 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's statement and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for the checkout process, and it _ a successful implementation.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense of `are` used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense of `is` used for singular subjects or situations. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md new file mode 100644 index 00000000000..5a555480e1c --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md @@ -0,0 +1,49 @@ +--- +id: 657b13088693ef4ce21ce0e4 +title: Task 12 +challengeType: 19 +dashedName: task-12 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `checkout process` refers to the steps involved in completing a purchase, whether in a physical store or online. In a physical store, this usually involves taking items to a cashier, paying, and receiving a receipt. In online shopping, it includes adding items to a cart, entering shipping and payment details, and finalizing the order. + +# --question-- + +## --text-- + +What does the `checkout process` typically involve? + +## --answers-- + +Signing up for a store's loyalty program + +### --feedback-- + +While loyalty programs are part of customer engagement, the checkout process is specifically about completing a transaction. + +--- + +Arranging items on shelves in a store + +### --feedback-- + +Arranging items is a part of store management, not related to the checkout process of completing a purchase. + +--- + +Conducting market research + +### --feedback-- + +Market research is important for business strategy, but it's separate from the checkout process, which is directly involved in sales transactions. + +--- + +Completing a purchase through payment and receipt of goods + +## --video-solution-- + +4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md new file mode 100644 index 00000000000..db7a9bbed14 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md @@ -0,0 +1,49 @@ +--- +id: 657b133afcef714e542b557a +title: Task 13 +challengeType: 19 +dashedName: task-13 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Implementation` in a technical or business context refers to the process of putting a plan or design into effect. In software development, for instance, implementation involves the actual coding and setup of a software application based on designed specifications. It is a critical phase where ideas or plans are turned into a functioning reality. + +# --question-- + +## --text-- + +What does `implementation` mean in a project context? + +## --answers-- + +The planning stage of a project + +### --feedback-- + +Planning is the phase where strategies are formed, not the actual execution or implementation of those plans. + +--- + +The analysis of project results + +### --feedback-- + +Analysis is about evaluating outcomes, whereas implementation is about executing or carrying out the project plans. + +--- + +The process of team formation + +### --feedback-- + +Team formation is part of project setup, but implementation specifically refers to executing the planned tasks of the project. + +--- + +The execution of a plan or design + +## --video-solution-- + +4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md new file mode 100644 index 00000000000..1fa977ff3c0 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md @@ -0,0 +1,49 @@ +--- +id: 657b135e9029fb4f8141e40c +title: Task 14 +challengeType: 22 +dashedName: task-14 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. This is a great way to practice and remember these words. + +# --fillInTheBlank-- + +## --sentence-- + +`Anna: That's excellent. _ there any specific projects you'd like to mention?` + +`Candidate: Yes, in one of my team's projects, we were _ in the development of an e-commerce platform. We were responsible for the _ process, and it was a successful implementation.` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past tense form of `are`. The first letter should be capitalized. + +--- + +`involved` + +### --feedback-- + +This word means participating actively in something. + +--- + +`checkout` + +### --feedback-- + +This term refers to the process of completing a purchase. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md new file mode 100644 index 00000000000..94904516eba --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md @@ -0,0 +1,54 @@ +--- +id: 657b138d33db9e50f116b5f0 +title: Task 15 +challengeType: 19 +dashedName: task-15 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and answer the question. + +# --question-- + +## --text-- + +How does Anna ask about the candidate's educational background in computer science? + +## --answers-- + +`Are you educated in computer science?` + +### --feedback-- + +`Are you` is present tense, but Anna's question is about the candidate's past education. + +--- + +`Do you study computer science?` + +### --feedback-- + +`Do you study` is present tense. The question is about past education. + +--- + +`Were you educated in computer science?` + +--- + +`Have you studied computer science?` + +### --feedback-- + +`Have you studied` is a different form, asking if they have ever studied it at any time. `Were you educated` specifically asks about formal education in the past. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md new file mode 100644 index 00000000000..6044644f850 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md @@ -0,0 +1,49 @@ +--- +id: 657b1431076b365555784189 +title: Task 16 +challengeType: 19 +dashedName: task-16 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `bachelor's degree` is an undergraduate academic degree awarded by colleges and universities upon completion of a course of study. In the term `bachelor's degree`, the use of the noun (`bachelor`) followed by the `'s` indicates possession or association. This form is commonly used to show that something belongs to or is related to the noun, as in `today's news` or `teacher's guide`. + +# --question-- + +## --text-- + +What does `bachelor's degree` refer to? + +## --answers-- + +An undergraduate academic degree + +--- + +A type of professional certification + +### --feedback-- + +A bachelor's degree is an academic qualification, not a professional certification. + +--- + +A high school diploma + +### --feedback-- + +A bachelor's degree is a higher education qualification, more advanced than a high school diploma. + +--- + +A master's program entry requirement + +### --feedback-- + +While a bachelor's degree may be required for a master's program, it itself refers to an undergraduate degree. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md new file mode 100644 index 00000000000..299109790e0 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md @@ -0,0 +1,56 @@ +--- +id: 657b145976723b56a97b8dda +title: Task 17 +challengeType: 19 +dashedName: task-17 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `I was introduced to` uses the simple past tense form `was` of the verb `be`, combined with the past participle `introduced`. This structure, `be` followed by a verb suffixed with `-ed`, is often used to describe actions that happened to the subject in the past. For example: + +`At college, I was introduced to many programing languages` + +# --question-- + +## --text-- + +What does the candidate mean by saying `I was introduced to various programming languages and software development principles`? + +## --answers-- + +I taught myself various programming languages and principles + +### --feedback-- + +`I was introduced to` implies being formally taught or shown by someone else, not self-teaching. + +--- + +I learned about various programming languages and principles in my studies + +--- + +I have extensive experience with various programming languages and principles + +### --feedback-- + +The phrase indicates initial exposure to these topics, not necessarily extensive experience. + +--- + +I developed various programming languages and principles + +### --feedback-- + +Being introduced to something means learning about it for the first time, not creating or developing it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md new file mode 100644 index 00000000000..2e11e13fa69 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md @@ -0,0 +1,49 @@ +--- +id: 657b149630b3ea5873269a38 +title: Task 18 +challengeType: 19 +dashedName: task-18 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `various` is an adjective used to describe a number of different types or kinds of something, emphasizing diversity or variety. It is often used to indicate that there are several distinct items or examples being referred to. For example, saying `various books` means books of different kinds or genres. + +# --question-- + +## --text-- + +What does `various` imply when talking about programming languages and software development principles? + +## --answers-- + +Different types or kinds + +--- + +A specific type or kind + +### --feedback-- + +The term `various` implies diversity, not specificity. + +--- + +Only one type + +### --feedback-- + +`Various` indicates a number of different types, not just one. + +--- + +Irrelevant or unrelated types + +### --feedback-- + +`Various` does mean different types, but these are usually relevant and related to the context. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md new file mode 100644 index 00000000000..b217384d87c --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md @@ -0,0 +1,38 @@ +--- +id: 657b14d8353d665a187fe771 +title: Task 19 +challengeType: 22 +dashedName: task-19 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this challenge, you'll practice filling in key terms from the dialogue. These terms are commonly used in job interviews and are essential for understanding the context of the discussion. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Sure, I was a programmer at Acme Tech. I was there for three years. I was responsible for developing web _ and maintaining the company's _. I was also part of the software update team.` + +## --blanks-- + +`applications` + +### --feedback-- + +These are programs designed to perform specific tasks or functions. + +--- + +`database` + +### --feedback-- + +This is a collection of information organized for easy access, management, and updating. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md new file mode 100644 index 00000000000..5d81b22a9e7 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md @@ -0,0 +1,62 @@ +--- +id: 657b153ac677705c7059530d +title: Task 20 +challengeType: 19 +dashedName: task-20 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `could you tell me` is a polite way to ask someone for information. It's commonly used in formal or professional situations, like job interviews or meetings. +In English, some verbs have irregular past forms, meaning they do not follow the regular pattern of adding `-ed` to make the past tense. `Can` is one such verb, and its irregular simple past form is `could`. + +The existence of irregular forms, like `could`, often comes from the way language has evolved over time. These forms do not follow the regular patterns and need to be memorized. + +For example: + +- Present: `I can speak English.` +- Past: `I could speak English when I was six.` + +# --question-- + +## --text-- + +What does the phrase `could you tell me` in Anna's sentence express? + +## --answers-- + +A polite request for information + +--- + +A command to do something immediately + +### --feedback-- + +The phrase `could you tell me` is used for polite requests, not direct commands. + +--- + +A suggestion for future action + +### --feedback-- + +This phrase is asking for information now, not suggesting something for the future. + +--- + +An offer to help someone + +### --feedback-- + +This phrase is more about asking for information than offering help. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md new file mode 100644 index 00000000000..ecf0d666af0 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md @@ -0,0 +1,54 @@ +--- +id: 657b15dbcafe4d5f39a5de82 +title: Task 21 +challengeType: 19 +dashedName: task-21 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `previous` is used to describe something that happened before the current time or situation. It's often used to refer to past experiences, jobs, or events. + +# --question-- + +## --text-- + +In the context of Anna's question, what does `previous` refer to? + +## --answers-- + +Past roles and responsibilities + +--- + +Future roles and responsibilities + +### --feedback-- + +`Previous` refers to something that has already happened, not something in the future. + +--- + +Current roles and responsibilities + +### --feedback-- + +`Previous` means something that happened before now, not what is happening currently. + +--- + +Unrelated roles and responsibilities + +### --feedback-- + +`Previous` specifically relates to roles and responsibilities that were held before, not those unrelated. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md new file mode 100644 index 00000000000..8497f67b9bb --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md @@ -0,0 +1,53 @@ +--- +id: 657b160d6a8662610fe6a523 +title: Task 22 +challengeType: 22 +dashedName: task-22 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that were completed in the past. Regular verbs in the past tense usually end with `-ed`, while irregular verbs have unique past forms. For example, as you learned in previous tasks, `was` and `were` are the past forms of `is` and `are`. + +Examples of simple past tense: + +- `I worked at a company.` (`work` becomes `worked`) +- `I was happy.` (`is` becomes `was`) +- `We were busy.` (`are` becomes `were`) + +# --fillInTheBlank-- + +## --sentence-- + +`Hello! Certainly. I _ at Mock Corporation for five years. I _ part of a team of software engineers, and we _ responsible for developing and maintaining various applications.` + +## --blanks-- + +`worked` + +### --feedback-- + +Think of the past tense of `work`, a regular verb that follows the usual `-ed` ending pattern. + +--- + +`was` + +### --feedback-- + +Recall the past tense form of `is`, which changes to a completely different word in its irregular past form. + +--- + +`were` + +### --feedback-- + +Consider the past tense of `are`, an irregular verb that also changes to a different word in the past. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md new file mode 100644 index 00000000000..8e1b26a3bce --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md @@ -0,0 +1,46 @@ +--- +id: 657b163c9da40e62b904be1f +title: Task 23 +challengeType: 22 +dashedName: task-23 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the past simple interrogative. In questions, the simple past tense often begins with a past tense verb, followed by the subject and the rest of the sentence. This structure is used to ask about past events or states. + +# --fillInTheBlank-- + +## --sentence-- + +`That's great to hear. _ the members of the team _ _ any specific achievements or projects?` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past form of `are` used to ask about a past state or condition. + +--- + +`involved` + +### --feedback-- + +Think of a word that means `participated in` or `engaged with`. + +--- + +`in` + +### --feedback-- + +A preposition that often follows `involved` to indicate participation or inclusion. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md new file mode 100644 index 00000000000..bc7924edcf6 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md @@ -0,0 +1,54 @@ +--- +id: 657b18e71067d6680b9ac5d3 +title: Task 24 +challengeType: 19 +dashedName: task-24 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `redesign` means to design something again or differently. It's often used in the context of improving or updating the design of an existing product, service, or structure. In software and web development, redesigning is a common practice to enhance functionality, user experience, or aesthetics. + +# --question-- + +## --text-- + +What does `redesign` imply in Candidate2's statement about the website project? + +## --answers-- + +To design for the first time + +### --feedback-- + +`Redesign` implies working on something that already exists, not creating it for the first time. + +--- + +To remove the design + +### --feedback-- + +`Redesign` means to change or improve the existing design, not to remove it. + +--- + +To change or improve an existing design + +--- + +To copy a design + +### --feedback-- + +`Redesign` involves making changes or improvements, not copying a design as it is. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md new file mode 100644 index 00000000000..ed588a90563 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md @@ -0,0 +1,54 @@ +--- +id: 657b1985ae17886b05b382b1 +title: Task 25 +challengeType: 19 +dashedName: task-25 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `performance` in a technical context often refers to how well a system or component operates, especially in terms of speed, efficiency, and reliability. For websites and software, performance can relate to how quickly pages load, the responsiveness of the application, or the stability of the system under various conditions. + +# --question-- + +## --text-- + +What does `performance` refer to in Candidate2's statement about the website? + +## --answers-- + +A live presentation + +### --feedback-- + +While `performance` can mean a presentation, in this context, it relates to the functioning of the website. + +--- + +Artistic display + +### --feedback-- + +In a technical context, `performance` refers to operational effectiveness, not an artistic aspect. + +--- + +Financial success + +### --feedback-- + +`Performance` in this context is about the website's operational aspects, not its financial success. + +--- + +How well the website operates + +## --video-solution-- + +4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md new file mode 100644 index 00000000000..98e6bda774a --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md @@ -0,0 +1,54 @@ +--- +id: 657b19bf7b32af6caf763ef7 +title: Task 26 +challengeType: 19 +dashedName: task-26 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `collaborative effort` refers to a situation where people work together as a team to achieve a common goal. This kind of teamwork is essential in many work environments, especially on projects where different skills and perspectives are needed. + +# --question-- + +## --text-- + +What does `collaborative effort` imply in the context of Candidate2's statement? + +## --answers-- + +Working independently + +### --feedback-- + +`Collaborative effort` means working together as a team, not independently. + +--- + +Teamwork to achieve a goal + +--- + +Avoiding responsibility + +### --feedback-- + +`Collaborative effort` involves taking shared responsibility, not avoiding it. + +--- + +Focusing on individual skills + +### --feedback-- + +`Collaborative effort` emphasizes teamwork over individual skills. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md new file mode 100644 index 00000000000..56a621b07c6 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md @@ -0,0 +1,38 @@ +--- +id: 657b1a03df3ec46eca276046 +title: Task 27 +challengeType: 22 +dashedName: task-27 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. + +# --fillInTheBlank-- + +## --sentence-- + +`Yes, our team _ involved in a project to _ the company's website.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`redesign` + +### --feedback-- + +This word means to design something again in a different way. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md new file mode 100644 index 00000000000..66d49e9e89f --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md @@ -0,0 +1,55 @@ +--- +id: 657b1a27dc6daf6ffd52ff1f +title: Task 28 +challengeType: 19 +dashedName: task-28 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the noun suffixed with `'s` followed by a second noun structure is used to show possession or belonging. If the first noun is singular, as in `Sarah's laptop`, it indicates that the laptop belongs to Sarah. However, if the first noun is plural, the structure changes to noun suffixed with `'`, as in `teachers' office`, indicating an office for teachers. + +# --question-- + +## --text-- + +What does `master's degree` in the context of the dialogue refer to? + +## --answers-- + +A degree for school teachers + +### --feedback-- + +`Master's degree` refers to an advanced academic degree, not specifically for teachers. + +--- + +A primary level educational degree + +### --feedback-- + +`Master's degree` is a higher education qualification, beyond the primary level. + +--- + +A degree in mastering skills + +### --feedback-- + +While it implies expertise, `master's degree` specifically refers to an academic qualification. + +--- + +An advanced academic degree + +## --video-solution-- + +4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md new file mode 100644 index 00000000000..bf63c3e8d24 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md @@ -0,0 +1,49 @@ +--- +id: 657b1a637e4dc571f8f4d3d7 +title: Task 29 +challengeType: 19 +dashedName: task-29 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `appreciate` is often used to express gratitude or to acknowledge the value or importance of something or someone's actions. It's a way of showing that you recognize and are thankful for someone's help, effort, or achievement. + +# --question-- + +## --text-- + +In a work meeting, your colleague says, `I really appreciate your help on this project.` What is your colleague expressing? + +## --answers-- + +Dissatisfaction with your work + +### --feedback-- + +`Appreciate` means to be grateful or thankful, not to show dissatisfaction. + +--- + +Indifference to your contribution + +### --feedback-- + +`Appreciate` is used to express positive recognition, not indifference. + +--- + +Gratitude for your contribution + +--- + +A need for more assistance + +### --feedback-- + +`Appreciate` here indicates satisfaction with the help received, not a request for more assistance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md new file mode 100644 index 00000000000..4fa33c1c2d0 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md @@ -0,0 +1,47 @@ +--- +id: 657b1a9581015573806e1e20 +title: Task 30 +challengeType: 22 +dashedName: task-30 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words you learned. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for implementing new features and ensuring the website's performance. It _ a _ effort, and we were able to deliver the project on time.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense form of `are`, used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`collaborative` + +### --feedback-- + +This word means working together as a team. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md new file mode 100644 index 00000000000..6013cb50f86 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md @@ -0,0 +1,39 @@ +--- +id: 657b1cc072206e7ac3db88b8 +title: Task 31 +challengeType: 22 +dashedName: task-31 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the missing words correctly. This is a great way to practice what you've learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I have a _ degree in computer science. My studies _ quite intensive, and I was introduced to many different methodologies.` + +## --blanks-- + +`master's` + +### --feedback-- + +This term, using the `noun's noun` structure, refers to an advanced academic degree. + +--- + +`were` + +### --feedback-- + +This is the past tense form of `are` used for plural subjects or things. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md new file mode 100644 index 00000000000..1c7c7b4603c --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md @@ -0,0 +1,30 @@ +--- +id: 657b1d080265ba7c4f96bf79 +title: Task 32 +challengeType: 22 +dashedName: task-32 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task helps you review the word you learned. Listen to the dialogue and complete the sentence correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`Impressive! We _ candidates with strong educational backgrounds and practical experience.` + +## --blanks-- + +`appreciate` + +### --feedback-- + +This word means to recognize the value or importance of something or someone's actions. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md new file mode 100644 index 00000000000..28e4211c290 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md @@ -0,0 +1,15 @@ +--- +id: 657b1d4ec0e2587e8bcc95f7 +title: "Dialogue 3: Two Workmates Talk About Their Backgrounds" +challengeType: 21 +dashedName: dialogue-3-two-workmates-talk-about-their-backgrounds +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md new file mode 100644 index 00000000000..df8ebc66d25 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md @@ -0,0 +1,54 @@ +--- +id: 657b1da0b27fef8117827ce5 +title: Task 33 +challengeType: 19 +dashedName: task-33 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned about the simple past tense. Now, you can explore it further. The simple past tense is often formed by adding `-ed` to a verb. But, when a verb ends with an `e`, you just add a `d`. For example, `notice` becomes `noticed`. + +# --question-- + +## --text-- + +What does `noticed` in Sarah's sentence indicate? + +## --answers-- + +Sarah observed something in the past + +--- + +Sarah is planning to observe something + +### --feedback-- + +The simple past tense `noticed` indicates a completed action in the past, not a future plan. + +--- + +Sarah continuously observes something + +### --feedback-- + +The simple past tense `noticed` is used for actions that were completed, not ongoing actions. + +--- + +Sarah never observes anything + +### --feedback-- + +`Noticed` implies that Sarah did observe something, not never observing. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md new file mode 100644 index 00000000000..5a1ba6afbfc --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md @@ -0,0 +1,30 @@ +--- +id: 657b1dfec76149836ea5c7d0 +title: Task 34 +challengeType: 22 +dashedName: task-34 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you will focus on the past simple negative. It's created by adding `not` after the auxiliary verb `was` or `were`. For example, `was` becomes `wasn't` (`was not`) and `were` becomes `weren't` (`were not`). This form is used to describe something that did not happen in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`It _ exactly tech-related, but I learned a lot about problem-solving and critical thinking.` + +## --blanks-- + +`wasn't` + +### --feedback-- + +This word is used to make a negative statement in the past tense. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md new file mode 100644 index 00000000000..da30e71e20a --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md @@ -0,0 +1,49 @@ +--- +id: 657b1e2fad2ffe84ab420a56 +title: Task 35 +challengeType: 19 +dashedName: task-35 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You're already familiar with `wasn't` and `weren't` for past simple negative. Now, let's explore `didn't`, a contraction of `did not`. It's used with the base form of verbs (the infinitive without `to`) to express that an action did not happen in the past. For example, `didn't go` means the action of going did not occur. + +# --question-- + +## --text-- + +Imagine you are reading a story about a character who planned to attend a concert but couldn't. How would you describe this situation? + +## --answers-- + +The character enjoyed the concert + +### --feedback-- + +Using `didn't` suggests the character did not go to the concert, contradicting the idea of enjoying it. + +--- + +The character didn't attend the concert + +--- + +The character always goes to concerts + +### --feedback-- + +This expression refers to a regular habit, not a specific event in the past. + +--- + +The character is looking forward to the next concert + +### --feedback-- + +This option is about future anticipation. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md new file mode 100644 index 00000000000..938a8118ce2 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md @@ -0,0 +1,54 @@ +--- +id: 657b1e66159fec86336a737b +title: Task 36 +challengeType: 19 +dashedName: task-36 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned the basics of the simple past tense. Now you can dive deeper into it. Typically, the simple past tense is formed by adding `-ed` to regular verbs. For instance, the verb `play` becomes `played` in the simple past. This tense is used to describe actions that were completed at a specific time in the past. + +# --question-- + +## --text-- + +What does `I played` in Sophie's sentence suggest about her experience with coding? + +## --answers-- + +She casually experimented with coding in the past + +--- + +She is currently playing a coding game + +### --feedback-- + +`Played` is in the past tense, indicating a past action, not something happening currently. + +--- + +She plans to start coding soon + +### --feedback-- + +`Played` implies she already has some experience with coding, not that she is planning to start. + +--- + +She never tried coding + +### --feedback-- + +Using `played` confirms she did engage in coding, contradicting the idea of never trying it. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md new file mode 100644 index 00000000000..2bd70b3d732 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md @@ -0,0 +1,49 @@ +--- +id: 657b1e9a62603587747f7f45 +title: Task 37 +challengeType: 19 +dashedName: task-37 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In English, when forming questions in the simple past tense, you often use `did`. This is followed by the subject and the base form of the verb (without `ed`). For example, `Did you enjoy` is a past simple interrogative phrase where `did` is the auxiliary verb, `you` is the subject, and `enjoy` is the base form of the verb. + +# --question-- + +## --text-- + +What does a question like `Did you enjoy the concert last night?` ask about? + +## --answers-- + +Are you going to enjoy the concert? + +### --feedback-- + +This implies a future event. The question with `did` is asking about a past experience. + +--- + +Do you enjoy concerts in general? + +### --feedback-- + +This is asking about general preferences, not a specific past event. + +--- + +Did you have a good experience at the concert last night? + +--- + +Will you enjoy future concerts? + +### --feedback-- + +The question is about a past event, not future experiences. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md new file mode 100644 index 00000000000..430fa995037 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md @@ -0,0 +1,42 @@ +--- +id: 657b1ee1de7216896b5b4361 +title: Task 38 +challengeType: 22 +dashedName: task-38 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blank correctly. This task is a review. Remember, the simple past tense is used to talk about actions or situations in the past, and the negative form is used to describe things that did not happen. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: That's interesting! So, you _ work on many programming projects during your studies?` + +`Sophie: No, not really. I _ around with coding, but most of my projects involved circuit designs and electrical systems. It was a bit different.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used here to talk about something that was not done in the past. + +--- + +`played` + +### --feedback-- + +This word suggests that Sophie casually engaged in coding for pleasure or interest. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md new file mode 100644 index 00000000000..dfcc68a881a --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md @@ -0,0 +1,40 @@ +--- +id: 657b1f0585d48f8ac0b19654 +title: Task 39 +challengeType: 22 +dashedName: task-39 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you'll focus on answering questions in the simple past tense. When responding to a past simple interrogative (a question), you can answer affirmatively with `did` or negatively with `didn't`. For example, `Did you go to the party?` can be answered with `I did` (affirmative) or `I didn't` (negative). Listen to the dialogue and fill in the blanks correctly to practice this structure. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: I see. _ you enjoy your time there, even if it wasn't entirely tech-focused? Sophie: I _.` + +## --blanks-- + +`Did` + +### --feedback-- + +This word is used to form a past simple interrogative question. The first letter should be capitalized. + +--- + +`did` + +### --feedback-- + +This response is an affirmative answer to the past simple interrogative question. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md new file mode 100644 index 00000000000..92e4b28c489 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md @@ -0,0 +1,49 @@ +--- +id: 657b1f598f63008c8bdb20b8 +title: Task 40 +challengeType: 19 +dashedName: task-40 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the simple past tense, some verbs are irregular and don't follow the regular `-ed` ending pattern. One example of this is the verb `meet`, which becomes `met` in the past tense. This is important to remember when talking about past events. + +# --question-- + +## --text-- + +During a class reunion, an old friend tells you, `We met for the first time in art class.` What is your friend referring to with `met`? + +## --answers-- + +We are meeting right now in art class + +### --feedback-- + +The use of `met` indicates a past event, not something happening currently. + +--- + +Our first encounter was in the past, specifically in art class + +--- + +We will meet for the first time soon + +### --feedback-- + +`Met` indicates a past action, not a future arrangement. + +--- + +We have never been in art class together + +### --feedback-- + +`Met` suggests a past meeting. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md new file mode 100644 index 00000000000..e3cdc339c1f --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md @@ -0,0 +1,49 @@ +--- +id: 657b1f981cd42e8dc3b282d9 +title: Task 41 +challengeType: 19 +dashedName: task-41 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn another special case in this task. It's the past tense form of `have`. Unlike regular verbs that add `-ed` for the past tense, `have` becomes `had`. This irregular form is used for both singular and plural subjects in the past tense, making it a unique and important verb to remember. + +# --question-- + +## --text-- + +What does `had` imply in a sentence like `They had a meeting yesterday?` + +## --answers-- + +They possessed or experienced something in the past + +--- + +They are having a meeting right now + +### --feedback-- + +`Had` is used for past actions, indicating the meeting occurred in the past, not at the present moment. + +--- + +They will have a meeting tomorrow + +### --feedback-- + +`Had` indicates a past action, not a future plan. + +--- + +They never have meetings + +### --feedback-- + +Using `had` confirms that the meeting took place in the past. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md new file mode 100644 index 00000000000..9f86ab82bcb --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md @@ -0,0 +1,47 @@ +--- +id: 657b1fe950c0df90346e5d12 +title: Task 42 +challengeType: 22 +dashedName: task-42 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the words `met`, `had`, and `wasn't`. You have already learned these words. Listen to the dialogue and fill in the blanks with the correct words. This exercise is a good way to practice and reinforce your understanding of these words in context. + +# --fillInTheBlank-- + +## --sentence-- + +`I did. It was challenging, but I _ some fantastic people. We _ a bunch of fun coding marathons, although I _ always a very strong programmer.` + +## --blanks-- + +`met` + +### --feedback-- + +This word is used here to describe encountering people in the past. + +--- + +`had` + +### --feedback-- + +This word is used to express possession or experiences in the past. + +--- + +`wasn't` + +### --feedback-- + +This word is the negative form in the past tense, indicating something that was not the case. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md new file mode 100644 index 00000000000..2ee4e256d2a --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md @@ -0,0 +1,39 @@ +--- +id: 657b201372864e91d4f5bb53 +title: Task 43 +challengeType: 22 +dashedName: task-43 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +When a verb ends in a consonant followed by `y`, you should change the `y` to `i` and add `ed` for the past tense. For example, `carry` becomes `carried`. Note that this rule applies when the `y` follows a consonant, not a vowel, so the simple past form of `convey` is `conveyed`. For regular verbs, you simply add `ed` to form the past tense. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ at a small college as well and _ in information technology.` + +## --blanks-- + +`studied` + +### --feedback-- + +The past simple tense of `study` is formed by changing `y` to `i` and adding `ed`. + +--- + +`majored` + +### --feedback-- + +This word follows the regular past simple tense formation by just adding `ed`. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md new file mode 100644 index 00000000000..67255d1bac6 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md @@ -0,0 +1,26 @@ +--- +id: 657b20338e0802931673c1e1 +title: Task 44 +challengeType: 22 +dashedName: task-44 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + +# --description-- + +You've learned that for verbs ending in `e`, you simply add `d` to form the simple past tense. Choose the correct form of `love` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she really _ the beach vacation.` + +## --blanks-- + +`loved` + +### --feedback-- + +To form the simple past, add `d` to the base form of the verb, `love`. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md new file mode 100644 index 00000000000..4d89a2935c0 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md @@ -0,0 +1,54 @@ +--- +id: 657b20985d315095e5c3851d +title: Task 45 +challengeType: 19 +dashedName: task-45 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this context, `got` is a special case in the simple past tense. It's the past tense of `get`. Unlike regular verbs that typically add `-ed` for the past tense, `get` changes to `got`. + +# --question-- + +## --text-- + +In the context of Sarah's statement, what does `got` imply about her experience? + +## --answers-- + +She is getting the opportunity now + +### --feedback-- + +`Got` indicates a past opportunity, not something happening currently. + +--- + +She had the opportunity in the past + +--- + +She will get the opportunity in the future + +### --feedback-- + +`Got` refers to a past experience, not a future possibility. + +--- + +She never gets such opportunities + +### --feedback-- + +`Got` in this context suggests she did have this opportunity. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md new file mode 100644 index 00000000000..ac32d364daa --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md @@ -0,0 +1,50 @@ +--- +id: 657b21e28a01039cb27b4f13 +title: Task 46 +challengeType: 19 +dashedName: task-46 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `exactly` is used to emphasize the truth or accuracy of a statement or description. It can mean `precisely` or `just`. For example, if someone says, `It's exactly what I needed`, they mean that it is precisely or perfectly what was required. `Exactly` often highlights that something is correct in every detail. + +# --question-- + +## --text-- + +What does `exactly` imply in a sentence like `This is exactly the kind of work I enjoy`? + +## --answers-- + +This is somewhat similar to the work I enjoy + +### --feedback-- + +`Exactly` indicates a perfect match, not just a similarity. + +--- + +This is the opposite of the work I enjoy + +### --feedback-- + +`Exactly` implies a perfect match, not an opposite. + +--- + +I am not sure if this is the work I enjoy + +### --feedback-- + +Using `exactly` shows certainty, not uncertainty. + +--- + +This is precisely the type of work that I find enjoyable + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md new file mode 100644 index 00000000000..36c267c651b --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md @@ -0,0 +1,35 @@ +--- +id: 657b221b2ab0ac9e18a173ef +title: Task 47 +challengeType: 22 +dashedName: task-47 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Let's look at `exactly` and `exact`. You use `exactly` to show something is just right or very true. It is an adverb. For example, `You did it exactly right!`. + +`Exact` is an adjective, and it describes something very correct or precise, like in `the exact time`. + +# --fillInTheBlank-- + +## --sentence-- + +`She knew the _ time of the meeting. She arrived _ at 3 pm.` + +## --blanks-- + +`exact` + +### --feedback-- + +This word is an adjective, describing the noun `time`. + +--- + +`exactly` + +### --feedback-- + +This word is an adverb, showing that her arrival time was very precise. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md new file mode 100644 index 00000000000..82dcdea8fbb --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -0,0 +1,39 @@ +--- +id: 657b223e41ce6b9f9a01d214 +title: Task 48 +challengeType: 22 +dashedName: task-48 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You'll review the past simple negative in this task. It's formed using `was` or `were` with `not`, like `weren't` (`were not`) or `wasn't` (`was not`). It's used to talk about things that did not happen or were not true in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`They _ _ big projects.` + +## --blanks-- + +`weren't` + +### --feedback-- + +It's the negative form of `were` in the past tense, used to say something was not true or did not happen. + +--- + +`exactly` + +### --feedback-- + +This word is used to emphasize the statement, suggesting the projects were not precisely big. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md new file mode 100644 index 00000000000..06ce8ba3d76 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md @@ -0,0 +1,15 @@ +--- +id: 657b227f7ad32ea17e2cdf28 +title: "Dialogue 4: A Developer with a Different Background" +challengeType: 21 +dashedName: dialogue-4-a-developer-with-a-different-background +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md new file mode 100644 index 00000000000..abee49452c1 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md @@ -0,0 +1,56 @@ +--- +id: 657b2310b8cd52a4f15c1818 +title: Task 49 +challengeType: 19 +dashedName: task-49 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `unconventional` is used to describe something that's not based on or conforming to what is generally done or believed. It often implies a method or approach that is different from the norm. + +# --question-- + +## --text-- + +What does `unconventional` imply about Alice's background in tech? + +## --answers-- + +Her background is different from the usual way people get into tech + +--- + +Her background is exactly the same as most people in tech + +### --feedback-- + +`Unconventional` means not following the usual conventions, which contradicts being the same as most people. + +--- + +She doesn't have any background in tech + +### --feedback-- + +`Unconventional` suggests a different approach, not the absence of a background. + +--- + +She followed a very traditional path into tech + +### --feedback-- + +`Unconventional` indicates a non-traditional path, not a very traditional one. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md new file mode 100644 index 00000000000..47917952aff --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md @@ -0,0 +1,39 @@ +--- +id: 657b2340be1593a6517fe77b +title: Task 50 +challengeType: 22 +dashedName: task-50 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple negative, `did not` (contracted to `didn't`) is followed by the base form of a verb. This structure is used to express that an action did not happen in the past. In this dialogue, Alice is describing her educational background related to technology. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ _ tech at a traditional university.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used in the past simple negative to indicate that an action was not done. + +--- + +`study` + +### --feedback-- + +The base form of the verb is used after the contraction in negative past simple sentences. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md new file mode 100644 index 00000000000..e19667245f9 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md @@ -0,0 +1,54 @@ +--- +id: 657b236aa1eb9fa7b209aa03 +title: Task 51 +challengeType: 19 +dashedName: task-51 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `mostly` is used to indicate that something is true to a large extent but not completely. It suggests that while other factors or methods may be involved, the primary aspect is what is mentioned. + +# --question-- + +## --text-- + +In Alice's statement, what does `mostly` suggest about her way of learning? + +## --answers-- + +She only learned through formal education + +### --feedback-- + +`Mostly` implies a greater emphasis on self-teaching rather than exclusive formal education. + +--- + +She didn't learn anything on her own + +### --feedback-- + +The use of `mostly` indicates a significant amount of self-learning, not an absence of it. + +--- + +She learned equally through self-teaching and formal courses + +### --feedback-- + +`Mostly` suggests a greater emphasis on one method over an equal balance. + +--- + +Her learning was primarily through her own efforts, with some formal courses + +## --video-solution-- + +4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md new file mode 100644 index 00000000000..10f6121949b --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md @@ -0,0 +1,36 @@ +--- +id: 657b23a413d28da927e087ca +title: Task 52 +challengeType: 22 +dashedName: task-52 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +This task reviews how an adverb is often formed by adding `-ly` to an adjective. + + +# --fillInTheBlank-- + +## --sentence-- + +`She completed _ of her work before lunch. The office is _ quiet in the mornings.` + +## --blanks-- + +`most` + +### --feedback-- + +This word is used as an adjective to describe the quantity of work completed. + +--- + +`mostly` + +### --feedback-- + +This word is used as an adverb to describe the general state of the office. + + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md new file mode 100644 index 00000000000..8f0a554d33f --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md @@ -0,0 +1,50 @@ +--- +id: 657b23bc0e32f9aa9c62eb82 +title: Task 53 +challengeType: 19 +dashedName: task-53 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `self-taught` refers to acquiring knowledge or skills without direct teaching from a traditional teacher or educational institution. It involves learning independently. The word `taught` is the past participle of `teach`. When someone is `self-taught`, it means they have taught themselves. + +# --question-- + +## --text-- + +What does `self-taught` imply when someone says, `I am self-taught in programming`? + +## --answers-- + +They were taught programming by a professional teacher + +### --feedback-- + +`Self-taught` indicates learning independently, not being taught by a professional teacher. + +--- + +They have no knowledge of programming + +### --feedback-- + +`Self-taught` means they have acquired knowledge or skills, not that they lack them. + +--- + +They learned programming on their own, without formal education + +--- + +They are planning to learn programming in the future + +### --feedback-- + +`Self-taught` refers to learning that has already taken place, not future plans. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md new file mode 100644 index 00000000000..daa0ed7fa3b --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md @@ -0,0 +1,27 @@ +--- +id: 657b23f03b449aac2c517089 +title: Task 54 +challengeType: 22 +dashedName: task-54 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `took` is a special case in the simple past tense. It's the past tense of `take`. Unlike regular verbs that follow the standard `-ed` ending for the past tense, `take` changes to `took`. This irregular form is important to know because it's commonly used to talk about actions that happened in the past. Choose the correct past tense form of `take` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she _ a photography class.` + +## --blanks-- + +`took` + +### --feedback-- + +This word is the past tense form of `take`. It's used to talk about actions that happened in the past. + + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md new file mode 100644 index 00000000000..aa093ae629c --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md @@ -0,0 +1,49 @@ +--- +id: 657b242d06512dadaea55056 +title: Task 55 +challengeType: 19 +dashedName: task-55 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The verb `attend` means to be present at an event or place. It's often used regarding schools, colleges, meetings, or events. It implies regular participation or presence at a specific place or event. + +# --question-- + +## --text-- + +If a friend tells you, `I'm going to attend the new art workshop downtown`, what are they planning to do? + +## --answers-- + +They are planning to teach at the art workshop + +### --feedback-- + +`Attend` suggests participating as a learner or member, not as a teacher. + +--- + +They might visit the workshop once + +### --feedback-- + +`Attend` implies regular or scheduled participation, not a one-time visit. + +--- + +They are not interested in art workshops + +### --feedback-- + +Saying they will `attend` indicates interest and intent to participate, not a lack of interest. + +--- + +They plan to regularly participate in the art workshop + +## --video-solution-- + +4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md new file mode 100644 index 00000000000..4dd651ea958 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md @@ -0,0 +1,39 @@ +--- +id: 657b24542024c8af092cd6c4 +title: Task 56 +challengeType: 22 +dashedName: task-56 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple, negative sentences are formed using `did not`, contracted to `didn't`, followed by the base form of the main verb. Listen to the dialogue and fill in the blanks with these words. + +# --fillInTheBlank-- + +## --sentence-- + +`So, you _ _ a regular college or anything like that?` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used to form a negative statement in the past tense. + +--- + +`attend` + +### --feedback-- + +The word means being present at an event or place. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md new file mode 100644 index 00000000000..15b9abab580 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md @@ -0,0 +1,48 @@ +--- +id: 657b24774d8cdab052ffe2a6 +title: Task 57 +challengeType: 22 +dashedName: task-57 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and fill in the blanks correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ study tech at a traditional university. I'm _, and I _ a lot of online courses.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used to form a negative statement in the past tense. + +--- + +`self-taught` + +### --feedback-- + +This word describes acquiring knowledge or skills independently. + +--- + +`took` + +### --feedback-- + +This word is the past tense form of a verb meaning to have completed an action. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md new file mode 100644 index 00000000000..b7c7a773588 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md @@ -0,0 +1,40 @@ +--- +id: 657b24a500800cb1c6945da9 +title: Task 58 +challengeType: 22 +dashedName: task-58 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`No, not at all. I _ at a different job, but I got really interested in programming and tech, so I _ learning in my free time.` + +## --blanks-- + +`was` + +### --feedback-- + +Use `to be` in the past tense. + +--- + +`started` + +### --feedback-- + +Use the verb `start`in the past tense. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md new file mode 100644 index 00000000000..14bccd55f81 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md @@ -0,0 +1,41 @@ +--- +id: 657b2be1b19500c63fc1a467 +title: Task 59 +challengeType: 22 +dashedName: task-59 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`That's impressive! _ you _ learning on your own?` + +## --blanks-- + +`Did` + +### --feedback-- + +Auxiliary verb for questions. This word should be capitalized. + +--- + +`enjoy` + +### --feedback-- + +A verb used to describe you are having fun. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md new file mode 100644 index 00000000000..f55f7908a4f --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md @@ -0,0 +1,38 @@ +--- +id: 657b2c040bb5f6c77fa5df80 +title: Task 60 +challengeType: 22 +dashedName: task-60 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You'll be filling in blanks with words you're already familiar with. + +# --fillInTheBlank-- + +## --sentence-- + +`Absolutely. It _ challenging, but I _ it.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of the verb `to be`, used for singular subjects. + +--- + +`loved` + +### --feedback-- + +This is the past tense form of a verb expressing a strong liking or enjoyment. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md new file mode 100644 index 00000000000..dc14016d020 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md @@ -0,0 +1,38 @@ +--- +id: 657b2d618b8851cc5baf9490 +title: Task 61 +challengeType: 22 +dashedName: task-61 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Listen to the audio and complete the sentence. + + +# --fillInTheBlank-- + +Fill in the blank with correct words. + + +## --sentence-- + +`Yes, I did. I built a few small web applications, just to practice. It _ a great way to apply what I _.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `to be`, used here for a singular subject. + +--- + +`learned` + +### --feedback-- + +This is the past tense form of `learn`, indicating the acquisition of knowledge or skills in the past. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md new file mode 100644 index 00000000000..b2433b84777 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md @@ -0,0 +1,54 @@ +--- +id: 657b2d9cb974dace59024964 +title: Task 62 +challengeType: 19 +dashedName: task-62 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `got` in this context is a versatile term and can have several meanings. In its simplest form, it's the past tense of `get`, which can mean to receive, arrive, become, or reach, depending on the context. In Tom's statement, `got` refers to the progress or level Alice reached through self-study. + +# --question-- + +## --text-- + +What does `got` imply in Tom's statement about Alice's progress? + +## --answers-- + +She received something while studying + +### --feedback-- + +While `got` can mean receiving, in this context it refers to the extent or level of progress. + +--- + +She achieved or reached a significant level in her studies + +--- + +She needs to get more resources for studying + +### --feedback-- + +`Got` here refers to past progress, not a current need for more resources. + +--- + +She didn't make any progress in her studies + +### --feedback-- + +`Got` in this sentence clearly indicates significant progress, not a lack of it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md new file mode 100644 index 00000000000..3ea0498bbbe --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md @@ -0,0 +1,15 @@ +--- +id: 657b2dd7745fdcd03e5160f4 +title: "Dialogue 5: Anna Talks About her Experience" +challengeType: 21 +dashedName: dialogue-5-anna-talks-about-her-experience +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md new file mode 100644 index 00000000000..8a3ff270f80 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -0,0 +1,54 @@ +--- +id: 657b2e0666d4a9d1b851f90e +title: Task 63 +challengeType: 19 +dashedName: task-63 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `tech recruiter` refers to a professional role focused on recruiting candidates for technology-related positions. This role involves understanding the tech industry, identifying qualified candidates, and matching them with suitable tech job openings. + +# --question-- + +## --text-- + +What is Tom asking about when he mentions `Tech recruiter` in his question? + +## --answers-- + +The technical skills needed to be a recruiter + +### --feedback-- + +`Tech recruiter` here refers to the job role, not the specific skills required for the job. + +--- + +The technology used by recruiters + +### --feedback-- + +While technology is involved, `Tech recruiter` refers to the profession itself, not the tools used. + +--- + +The person's career path in becoming a technology recruitment specialist + +--- + +Recruiting people to learn technology + +### --feedback-- + +`Tech recruiter` is about hiring for tech roles, not recruiting people to learn technology. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md new file mode 100644 index 00000000000..340203d5990 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md @@ -0,0 +1,49 @@ +--- +id: 657b2ec6c054efd71e503a27 +title: Task 64 +challengeType: 19 +dashedName: task-64 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `actually` is often used to express a fact or reality, sometimes contrasting with what was thought, believed, or said before. It adds emphasis to a statement to clarify a truth or correct a previous assumption or statement. + +# --question-- + +## --text-- + +What does `actually` imply in a sentence like `I actually prefer working remotely`? + +## --answers-- + +The truth is contrary to what might have been assumed or stated before + +--- + +I never work remotely + +### --feedback-- + +`Actually` in this context is used to express a real preference. + +--- + +I always work in an office setting + +### --feedback-- + +Using `actually` here is meant to reveal a preference for remote work, not office work. + +--- + +I don't have any work preferences + +### --feedback-- + +`Actually` suggests a specific preference, contradicting the idea of having none. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md new file mode 100644 index 00000000000..51c4c579915 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md @@ -0,0 +1,33 @@ +--- +id: 657b2eeb31e435d89ecce6f3 +title: Task 65 +challengeType: 22 +dashedName: task-65 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn about `actual` in this task. It's a describing word (adjective). It means what something is really like. For example, `the actual color` means the real color. You often add `-ly` to an adjective to form an adverb. This rule helps change many describing words into words that tell people how something is said or done. Here, you add `-ly` to `actual` and it's the adverb `actually`. + +# --fillInTheBlank-- + +## --sentence-- + +`The _ size of the room was quite small. She _ likes small cozy spaces.` + +## --blanks-- + +`actual` + +### --feedback-- + +This word describes the real size of the room. + +--- + +`actually` + +### --feedback-- + +This word is used to say she really likes small spaces. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md new file mode 100644 index 00000000000..101e280ee29 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md @@ -0,0 +1,54 @@ +--- +id: 657b2f0b3bcfe7d9f4151854 +title: Task 66 +challengeType: 19 +dashedName: task-66 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The terms `therapist` and `counselor` refer to professionals who provide guidance and support to people dealing with emotional, psychological, or mental health issues. Both play a vital role in helping individuals work through personal challenges. In Anna's statement, these terms describe the career paths she was considering. + +# --question-- + +## --text-- + +In Anna's statement, what does `therapist or counselor` refer to? + +## --answers-- + +Jobs in the technology industry + +### --feedback-- + +`Therapist or counselor` refers to mental health and emotional support roles, not technology-related jobs. + +--- + +Career paths in mental health and emotional support + +--- + +Educational courses she wanted to take + +### --feedback-- + +While these roles require education, the terms directly refer to the job roles, not the courses. + +--- + +Hobbies that she was interested in + +### --feedback-- + +`Therapist or counselor` are professional career paths, not hobbies. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md new file mode 100644 index 00000000000..40c9c66ce5e --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md @@ -0,0 +1,49 @@ +--- +id: 657b2f3bf7a2cbdb58d959d5 +title: Task 67 +challengeType: 19 +dashedName: task-67 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `last` is used to refer to the most recent past occurrence of a period or event. For example, `last year` means the year before this one, `last month` refers to the month before the current one, and `last week` points to the week before this week. Understanding time expressions like `last year`, `last month`, `last week`, or `last day` helps in talking about events that happened in the recent past. + +# --question-- + +## --text-- + +When someone mentions in a discussion about changes, `I switched careers last year.` What does `last year` indicate about the timing of their career change? + +## --answers-- + +They are planning to switch careers in the near future + +### --feedback-- + +This suggests a future action, but `last year` indicates the change already occurred in the past. + +--- + +They have been considering a career change for a long time + +### --feedback-- + +Though they might have considered it for a long time, `last year` specifically identifies when the change took place. + +--- + +The career change is happening currently + +### --feedback-- + +`Last year` refers to a completed action in the past, not something happening in the present. + +--- + +The career switch happened in the previous year + +## --video-solution-- + +4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md new file mode 100644 index 00000000000..796bb1e6c39 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md @@ -0,0 +1,49 @@ +--- +id: 657b2f6cb66826dcbac08094 +title: Task 68 +challengeType: 19 +dashedName: task-68 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Organizational psychology` is a field of psychology that studies how people interact within groups, particularly in workplace settings. It focuses on understanding workplace dynamics, employee behavior, and organizational structure to improve the work environment and increase productivity. + +# --question-- + +## --text-- + +What does `organizational psychology` typically involve? + +## --answers-- + +It deals with organizing office spaces + +### --feedback-- + +While organization is a part of the field, `organizational psychology` primarily focuses on people and behavior, not physical space. + +--- + +It's about the psychology of organizing events + +### --feedback-- + +`Organizational psychology` is not specifically about event planning but rather about behavior in workplace groups. + +--- + +It's the study of how people behave and interact in workplace groups + +--- + +It focuses on individual psychological treatment + +### --feedback-- + +`Organizational psychology` looks at group dynamics in workplaces, not individual therapy. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md new file mode 100644 index 00000000000..e185bc5a457 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md @@ -0,0 +1,38 @@ +--- +id: 657b2fa89ddc20de629ca21f +title: Task 69 +challengeType: 22 +dashedName: task-69 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will fill in the blanks with words you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ studied psychology in college. My plan was to become a _ or counselor.` + +## --blanks-- + +`actually` + +### --feedback-- + +This word is used to emphasize the accuracy or truth of a statement. + +--- + +`therapist` + +### --feedback-- + +This word refers to a professional role focused on mental health and emotional support. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md new file mode 100644 index 00000000000..ecc1ceb6792 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md @@ -0,0 +1,46 @@ +--- +id: 657b2fc9c0f96bdfddfce4d9 +title: Task 70 +challengeType: 22 +dashedName: task-70 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this exercise, you will explore the phrase `pique one's interest`. This phrase means to stimulate or arouse someone's curiosity or interest in something. It's often used when something catches your attention and makes you want to learn more about it. Alongside this phrase, you will fill in the blanks with familiar words that you've already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ a course in organizational _, and it _ my interest in the workplace and employee dynamics.` + +## --blanks-- + +`took` + +### --feedback-- + +This word refers to the action of participating in or completing a course. + +--- + +`psychology` + +### --feedback-- + +This word describes the study of the mind and behavior, particularly in a workplace setting in this context. + +--- + +`piqued` + +### --feedback-- + +This word means to arouse or stimulate interest or curiosity. You should correctly use its simple past tense. diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md new file mode 100644 index 00000000000..acc29551124 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md @@ -0,0 +1,49 @@ +--- +id: 657b2fea728c2be14a8a98c4 +title: Task 71 +challengeType: 19 +dashedName: task-71 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Employee dynamics` refers to the way employees interact and work together in a workplace. It's an example of using one noun (`employee`) to describe another noun (`dynamics`). This type of descriptive noun helps give more specific information about the subject. Other examples include `race car`, where `race` describes the type of car, and `garden hose`, where `garden` describes the type of hose. + +# --question-- + +## --text-- + +What does `employee dynamics` refer to in a workplace context? + +## --answers-- + +The dynamics of machines used by employees + +### --feedback-- + +`Employee dynamics` specifically refers to interactions and relationships among employees, not machinery. + +--- + +The interactions and relationships among employees + +--- + +The employment status of workers + +### --feedback-- + +`Employee dynamics` is about how employees work together, not their employment status. + +--- + +The dynamics of hiring new employees + +### --feedback-- + +`Employee dynamics` refers to existing employee interactions, not the hiring process. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md new file mode 100644 index 00000000000..bcbb031c907 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md @@ -0,0 +1,54 @@ +--- +id: 657b3026ff79fbe2dda6cb39 +title: Task 72 +challengeType: 19 +dashedName: task-72 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `That's a cool twist` is often used to express that something is interestingly unexpected or surprisingly different. The word `twist` here refers to a change or development in a situation or story that is unusual or unexpected. `Cool` in this context means it's positively received. + +# --question-- + +## --text-- + +What is Tom expressing when he says `That's a cool twist`? + +## --answers-- + +He finds the unexpected change or development interesting + +--- + +He thinks the situation is confusing + +### --feedback-- + +While a `twist` can be surprising, Tom's use of `cool` suggests he finds it interesting rather than confusing. + +--- + +He is unhappy with the new development + +### --feedback-- + +`Cool twist` usually indicates a positive reaction, not dissatisfaction. + +--- + +He expected the development all along + +### --feedback-- + +The term `twist` implies that the development was unexpected. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md new file mode 100644 index 00000000000..6a30241c1a2 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md @@ -0,0 +1,55 @@ +--- +id: 657b306fe94f29e4b4aa9105 +title: Task 73 +challengeType: 19 +dashedName: task-73 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `not right away` is used to indicate that something didn't happen immediately or at the earliest opportunity. It suggests that there was a delay or a period before the action or change took place. This phrase helps to set the timeline of events or actions. + +# --question-- + +## --text-- + +What does Anna mean when she says `not right away`? + +## --answers-- + +She immediately started working in HR at a tech company + +### --feedback-- + +`Not right away` indicates a delay or period before taking action, not immediate action. + +--- + +She started working in a different role before moving to HR at a tech company + +--- + +She has never worked in HR + +### --feedback-- + +The statement implies she did work in HR, just not immediately. + +--- + +She was always focused on training and development + +### --feedback-- + +`Not right away` suggests a progression or change over time, not a constant focus. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md new file mode 100644 index 00000000000..b21bdf5b3e6 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md @@ -0,0 +1,49 @@ +--- +id: 657b30ac03b523e6640deaf1 +title: Task 74 +challengeType: 22 +dashedName: task-74 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will practice filling in the blanks with words that you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`Tom: That's a cool _. _ you immediately start working as a tech recruiter after college? Anna: Not right away. I _ in a general HR role at a non-tech company first, focusing on training and development.` + + +## --blanks-- + +`twist` + +### --feedback-- + +It refers to an interesting or unexpected change in a situation. + +--- + +`Did` + +### --feedback-- + +The auxiliary verb used to form a question in the past simple tense. The first letter should be capitalized. + +--- + +`worked` + +### --feedback-- + +Past tense form of `work`, indicating an action completed in the past. + diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md new file mode 100644 index 00000000000..f843ccf34aa --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md @@ -0,0 +1,54 @@ +--- +id: 657b30e1b9f035e7e656fd01 +title: Task 75 +challengeType: 19 +dashedName: task-75 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `employee` is someone who works for a company or a person. When you talk about `employees' well-being`, you are talking about the health and happiness of all the people who work there. The `'s` after `employees` means that the well-being belongs to the employees. It's like `the cat's toy` (one cat) and `the cats' toy` (more than one cat). + +# --question-- + +## --text-- + +What does Anna mean by saying `employees' well-being.` + +## --answers-- + +It's about the health of the company + +### --feedback-- + +`Employees'` means the people who work, not the company. + +--- + +One worker's health and happiness + +### --feedback-- + +`Employees'` with an `'s` shows it's about all workers, not just one. + +--- + +Where the employees work + +### --feedback-- + +`Well-being` is about health and happiness, not a place. + +--- + +The health and happiness of all the workers + +## --video-solution-- + +4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md new file mode 100644 index 00000000000..8e17e595d98 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md @@ -0,0 +1,54 @@ +--- +id: 657b315533e4edeba65111b8 +title: Task 76 +challengeType: 19 +dashedName: task-76 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +A `psychologist` is a professional who studies the human mind and behavior. They often help people understand and manage their emotions, behaviors, and mental processes. In Anna's statement, she refers to becoming a psychologist, indicating her professional choice related to studying and working with psychology. + +# --question-- + +## --text-- + +What does `psychologist` mean in Anna's statement? + +## --answers-- + +It means someone who studies physics + +### --feedback-- + +`Psychologist` refers to a person who studies the mind and behavior, not physics. + +--- + +It's a type of medical doctor + +### --feedback-- + +While related to health, a psychologist is different from a medical doctor and focuses on mental processes. + +--- + +A professional who studies and works with the human mind and behavior + +--- + +A teacher at a school + +### --feedback-- + +A psychologist may teach, but their primary role is studying and working with the mind and behavior, not general teaching. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md new file mode 100644 index 00000000000..40eee7185d9 --- /dev/null +++ b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md @@ -0,0 +1,15 @@ +--- +id: 657b46c9be150f577f5a1086 +title: "Dialogue 2: Another Job Interview" +challengeType: 21 +dashedName: dialogue-2-another-job-interview +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md deleted file mode 100644 index 0a0f3472141..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0feadb1dd77f6cda623f -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md deleted file mode 100644 index e1563f9b06b..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0f39ee87517d584d81f9 -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md deleted file mode 100644 index 7aa1e30008d..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5a46ffb500e3f2ce47b -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -*** - -Giving a job description. - -*** - -Making a statement based on her assumption. - -*** - -Expressing a possibility. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md deleted file mode 100644 index 2ee50fe5647..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5e46ffb500e3f2ce47e -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md b/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md deleted file mode 100644 index adc4b41f091..00000000000 --- a/curriculum/challenges/portuguese/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd6071d697d0aab7833b6 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md deleted file mode 100644 index afe98f114e4..00000000000 --- a/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: bd7158d8c242eddfaeb5bd13 -title: Build a Personal Portfolio Webpage -challengeType: 14 -forumTopicId: 301143 -dashedName: build-a-personal-portfolio-webpage ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://personal-portfolio.freecodecamp.rocks - -**User Stories:** - -1. Your portfolio should have a welcome section with an `id` of `welcome-section` -1. The welcome section should have an `h1` element that contains text -1. Your portfolio should have a projects section with an `id` of `projects` -1. The projects section should contain at least one element with a `class` of `project-tile` to hold a project -1. The projects section should contain at least one link to a project -1. Your portfolio should have a navbar with an id of `navbar` -1. The navbar should contain at least one link that you can click on to navigate to different sections of the page -1. Your portfolio should have a link with an id of `profile-link`, which opens your GitHub or freeCodeCamp profile in a new tab -1. Your portfolio should have at least one media query -1. The height of the welcome section should be equal to the height of the viewport -1. The navbar should always be at the top of the viewport - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -Your portfolio should have a "Welcome" section with an `id` of `welcome-section`. - -```js -const el = document.getElementById('welcome-section') -assert(!!el); -``` - -Your `#welcome-section` element should contain an `h1` element. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1').length, - 0, - 'Welcome section should contain an h1 element ' -); -``` - -You should not have any empty `h1` elements within `#welcome-section` element. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, - 0, - 'h1 element in welcome section should contain your name or camper ' + - 'name ' -); -``` - -You should have a "Projects" section with an `id` of `projects`. - -```js -const el = document.getElementById('projects') -assert(!!el); -``` - -Your portfolio should contain at least one element with a class of `project-tile`. - -```js -assert.isAbove( - document.querySelectorAll('#projects .project-tile').length, - 0 -); -``` - -Your `#projects` element should contain at least one `a` element. - -```js -assert.isAbove(document.querySelectorAll('#projects a').length, 0); -``` - -Your portfolio should have a navbar with an `id` of `navbar`. - -```js -const el = document.getElementById('navbar'); -assert(!!el); -``` - -Your `#navbar` element should contain at least one `a` element whose `href` attribute starts with `#`. - -```js -const links = [...document.querySelectorAll('#navbar a')].filter( - (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#' -); - -assert.isAbove( - links.length, - 0, - 'Navbar should contain an anchor link ' -); -``` - -Your portfolio should have an `a` element with an `id` of `profile-link`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.tagName === 'A') -``` - -Your `#profile-link` element should have a `target` attribute of `_blank`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.target === '_blank') -``` - -Your portfolio should use at least one media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -Your `#navbar` element should always be at the top of the viewport. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const navbar = document.getElementById('navbar'); - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - "Navbar's parent should be body and it should be at the top of " + - 'the viewport ' - ); - - window.scroll(0, 500); - - await timeout(1); - - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - 'Navbar should be at the top of the viewport even after ' + - 'scrolling ' - ); - window.scroll(0, 0); -})(); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Personal Portfolio - - - - - -
                                                                      -
                                                                      -
                                                                      -

                                                                      It's me!

                                                                      - -

                                                                      Naomi Carrigan

                                                                      -

                                                                      Welcome to my portfolio page!

                                                                      -
                                                                      -
                                                                      -

                                                                      Projects

                                                                      -

                                                                      Here's what I've worked on!

                                                                      -

                                                                      - - - - -

                                                                      -
                                                                      -

                                                                      Contact me!

                                                                      -

                                                                      Use the links below to get in touch.

                                                                      -

                                                                      FreeCodeCamp.org | GitHub | Facebook | LinkedIn -

                                                                      - - - -``` - -```css -nav{ - position: fixed; - width: 100%; - text-align: right; - font-size: 24pt; - top: 0%; - right: 5px; - background-color: #000000; - color: #ffffff; -} -@media (max-width: 500px){ - nav{ - display: none; - } -} -a{ - color: #ffffff; -} -main{ - text-align: center; - background-color: black; - font-family:Pacifico -} -h1{ - font-size: 48pt; -} -h2{ - font-size: 24pt; -} -p{ - font-size: 12pt; -} -#welcome-section{ - background-color:#251a4a; - color: #FFFFFF; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#projects{ - background-color: #060a9c; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#contact{ - background-color: #03300b; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -``` diff --git a/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md deleted file mode 100644 index 1dbc840e0bb..00000000000 --- a/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: Build a Product Landing Page -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://product-landing-page.freecodecamp.rocks - -**User Stories:** - -1. Your product landing page should have a `header` element with a corresponding `id="header"` -1. You can see an image within the `header` element with a corresponding `id="header-img"` (A logo would make a good image here) -1. Within the `#header` element, you can see a `nav` element with a corresponding `id="nav-bar"` -1. You can see at least three clickable elements inside the `nav` element, each with the class `nav-link` -1. When you click a `.nav-link` button in the `nav` element, you are taken to the corresponding section of the landing page -1. You can watch an embedded product video with `id="video"` -1. Your landing page has a `form` element with a corresponding `id="form"` -1. Within the form, there is an `input` field with `id="email"` where you can enter an email address -1. The `#email` input field should have placeholder text to let users know what the field is for -1. The `#email` input field uses HTML5 validation to confirm that the entered text is an email address -1. Within the form, there is a submit `input` with a corresponding `id="submit"` -1. When you click the `#submit` element, the email is submitted to a static page (use this mock URL: `https://www.freecodecamp.com/email-submit`) -1. The navbar should always be at the top of the viewport -1. Your product landing page should have at least one media query -1. Your product landing page should utilize CSS flexbox at least once - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have a `header` element with an `id` of `header`. - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -You should have an `img` element with an `id` of `header-img`. - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -Your `#header-img` should be a descendant of the `#header`. - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -Your `#header-img` should have a `src` attribute. - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -Your `#header-img`’s `src` value should be a valid URL (starts with `http`). - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -You should have a `nav` element with an `id` of `nav-bar`. - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -Your `#nav-bar` should be a descendant of the `#header`. - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -You should have at least 3 `.nav-link` elements within the `#nav-bar`. - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -Each `.nav-link` element should have an `href` attribute. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -Each `.nav-link` element should link to a corresponding element on the landing page (has an `href` with a value of another element's id. e.g. `#footer`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -You should have a `video` or `iframe` element with an `id` of `video`. - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -Your `#video` should have a `src` attribute. - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -You should have a `form` element with an `id` of `form`. - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -You should have an `input` element with an `id` of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#email` should be a descendant of the `#form`. - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -Your `#email` should have the `placeholder` attribute with placeholder text. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Your `#email` should use HTML5 validation by setting its `type` to `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -You should have an `input` element with an `id` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#submit` should be a descendant of the `#form`. - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -Your `#submit` should have a `type` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Your `#form` should have an `action` attribute of `https://www.freecodecamp.com/email-submit`. - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -Your `#email` should have a `name` attribute of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -Your `#nav-bar` should always be at the top of the viewport. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const header = document.getElementById('header'); - const headerChildren = header.children; - const navbarCandidates = [header, ...headerChildren]; - - // Return smallest top position of all navbar candidates - const getNavbarPosition = (candidates = []) => { - return candidates.reduce( - (min, candidate) => - Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)), - Infinity - ); - }; - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the viewport ' - ); - - window.scroll(0, 500); - await timeout(1); - - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the ' + - 'viewport even after scrolling ' - ); - - window.scroll(0, 0); -})(); -``` - -Your Product Landing Page should use at least one media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -Your Product Landing Page should use CSS Flexbox at least once. - -```js -const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display) -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media') -const usesFlex = cssRules.find(rule => hasFlex(rule)) -const usesFlexMedia = mediaRules.find(mediaRule => { - return [...mediaRule.cssRules].find(rule => hasFlex(rule)) -}) -assert(usesFlex || usesFlexMedia) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Product Landing Page - - - -
                                                                      -

                                                                      - Pokemon Daycare Service -

                                                                      -
                                                                      -

                                                                      What we offer

                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      Guaranteed friendly and loving staff!
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - Comfortable environment for Pokemon to explore and play! -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - Multiple membership plans to fit your lifestyle! -
                                                                      -
                                                                      -
                                                                      -
                                                                      -

                                                                      Check us out!

                                                                      - A sneak peek into our facility: -
                                                                      - -
                                                                      -
                                                                      -

                                                                      Membership Plans

                                                                      -
                                                                      -
                                                                      - Basic Membership
                                                                      -
                                                                        -
                                                                      • One Pokemon
                                                                        • -
                                                                      • Food and berries provided
                                                                        • -
                                                                      - $9.99/month -
                                                                      -
                                                                      - Silver Membership
                                                                      -
                                                                        -
                                                                      • Up to Three Pokemon
                                                                        • -
                                                                      • Food and berries provided
                                                                        • -
                                                                      • Grooming and accessories included
                                                                        • -
                                                                      - $19.99/month -
                                                                      -
                                                                      - Gold Membership
                                                                      -
                                                                        -
                                                                      • Up to six Pokemon!
                                                                        • -
                                                                      • Food and berries provided
                                                                        • -
                                                                      • Grooming and accessories included
                                                                        • -
                                                                      • Personal training for each Pokemon
                                                                        • -
                                                                      • Breeding and egg hatching
                                                                        • -
                                                                      - $29.99/month -
                                                                      -
                                                                      -
                                                                      -
                                                                      -

                                                                      Sign up for our newsletter!

                                                                      - - -
                                                                      - -
                                                                      - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md deleted file mode 100644 index 0a495af62a6..00000000000 --- a/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: Build a Survey Form -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://survey-form.freecodecamp.rocks - -**User Stories:** - -1. You should have a page title in an `h1` element with an `id` of `title` -1. You should have a short explanation in a `p` element with an `id` of `description` -1. You should have a `form` element with an `id` of `survey-form` -1. Inside the form element, you are **required** to enter your name in an `input` field that has an `id` of `name` and a `type` of `text` -1. Inside the form element, you are **required** to enter your email in an `input` field that has an `id` of `email` -1. If you enter an email that is not formatted correctly, you will see an HTML5 validation error -1. Inside the form, you can enter a number in an `input` field that has an `id` of `number` -1. The number input should not accept non-numbers, either by preventing you from typing them or by showing an HTML5 validation error (depending on your browser). -1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you will see an HTML5 validation error -1. For the name, email, and number input fields, you can see corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"` -1. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field -1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from -1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute -1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute -1. Inside the form element, you are presented with a `textarea` for additional comments -1. Inside the form element, you are presented with a button with `id` of `submit` to submit all the inputs - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have an `h1` element with an `id` of `title`. - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -Your `#title` should not be empty. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -You should have a `p` element with an `id` of `description`. - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -Your `#description` should not be empty. - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -You should have a `form` element with an `id` of `survey-form`. - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -You should have an `input` element with an `id` of `name`. - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#name` should have a `type` of `text`. - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -Your `#name` should require input. - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -Your `#name` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -You should have an `input` element with an `id` of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#email` should have a `type` of `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -Your `#email` should require input. - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -Your `#email` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -You should have an `input` element with an `id` of `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -Your `#number` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -Your `#number` should have a `type` of `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -Your `#number` should have a `min` attribute with a numeric value. - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -Your `#number` should have a `max` attribute with a numeric value. - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -You should have a `label` element with an `id` of `name-label`. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -You should have a `label` element with an `id` of `email-label`. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -You should have a `label` element with an `id` of `number-label`. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Your `#name-label` should contain text that describes the input. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -Your `#email-label` should contain text that describes the input. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -Your `#number-label` should contain text that describes the input. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -Your `#name-label` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -Your `#email-label` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -Your `#number-label` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -Your `#name` should have a `placeholder` attribute and value. - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Your `#email` should have a `placeholder` attribute and value. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Your `#number` should have a `placeholder` attribute and value. - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -You should have a `select` field with an `id` of `dropdown`. - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -Your `#dropdown` should have at least two selectable (not disabled) `option` elements. - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -Your `#dropdown` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -You should have at least two `input` elements with a `type` of `radio` (radio buttons). - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -You should have at least two radio buttons that are descendants of `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -All your radio buttons should have a `value` attribute and value. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -All your radio buttons should have a `name` attribute and value. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -Every radio button group should have at least 2 radio buttons. - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -All your checkboxes inside `#survey-form` should have a `value` attribute and value. - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -You should have at least one `textarea` element that is a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -You should have an `input` or `button` element with an `id` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -Your `#submit` should have a `type` of `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Your `#submit` should be a descendant of `#survey-form`. - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Survey Form - - -

                                                                      Survey Form

                                                                      -

                                                                      The card below was built as a sample survey form for freeCodeCamp.

                                                                      -
                                                                      -

                                                                      Join the Togepi Fan Club!

                                                                      -

                                                                      - Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -

                                                                      -
                                                                      - - - - -

                                                                      Who is your favourite Pokemon?

                                                                      - - - -

                                                                      Which communications do you want to receive?

                                                                      - - - -

                                                                      Any other information you would like to share?

                                                                      - -

                                                                      - Please note: This form is a proof of concept. Submitting the form - will not actually transmit your data. -

                                                                      - -
                                                                      -
                                                                      - - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md deleted file mode 100644 index 9b184a652c2..00000000000 --- a/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: Build a Technical Documentation Page -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://technical-documentation-page.freecodecamp.rocks - -**User Stories:** - -1. You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation) -1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five -1. The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section. -1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`) -1. The `.main-section` elements should contain at least ten `p` elements total (not each) -1. The `.main-section` elements should contain at least five `code` elements total (not each) -1. The `.main-section` elements should contain at least five `li` items total (not each) -1. You can see a `nav` element with a corresponding `id="navbar"` -1. The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation -1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section` -1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar -1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world") -1. When you click on a navbar element, the page should navigate to the corresponding section of the `#main-doc` element (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header) -1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user -1. Your technical documentation should use at least one media query - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have a `main` element with an `id` of `main-doc`. - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -You should have at least five `section` elements with a class of `main-section`. - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -All of your `.main-section` elements should be `section` elements. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -You should have at least five `.main-section` elements that are descendants of `#main-doc`. - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -The first child of each `.main-section` should be a `header` element. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -None of your `header` elements should be empty. - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -All of your `.main-section` elements should have an `id`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id's. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -You should have at least 10 `p` elements (total) within your `.main-section` elements. - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -You should have at least five `code` elements that are descendants of `.main-section` elements. - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -You should have at least five `li` elements that are descendants of `.main-section` elements. - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -You should have a `nav` element with an `id` of `navbar`. - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -Your `#navbar` should have exactly one `header` element within it. - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -You should have at least one `a` element with a class of `nav-link`. - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -All of your `.nav-link` elements should be anchor (`a`) elements. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -All of your `.nav-link` elements should be in the `#navbar`. - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -You should have the same number of `.nav-link` and `.main-section` elements. - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -The `header` element in the `#navbar` should come before any link (`a`) elements also in the `#navbar`. - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world"). - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -Each `.nav-link` should have an `href` attribute that links to its corresponding `.main-section` (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id). - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -Your `#navbar` should always be on the left edge of the window. - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -Your Technical Documentation project should use at least one media query. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Technical Documentation Page - - - -
                                                                      -
                                                                      -
                                                                      Introduction
                                                                      -

                                                                      - Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -

                                                                      -
                                                                      -
                                                                      -
                                                                      Definitions
                                                                      -

                                                                      - To start with, let's define some of the more common terms used in - algebra: -

                                                                      -
                                                                        -
                                                                      • - Variable: A variable is an unknown value, usually represented - by a letter. -
                                                                        • -
                                                                      • - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. -
                                                                        • -
                                                                      • - Equation: An equation is a mathematical argument in which two - expressions result in the same value. -
                                                                        • -
                                                                      -
                                                                      -
                                                                      -
                                                                      Examples
                                                                      -

                                                                      - Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.

                                                                      - x + 5 = 12

                                                                      - In this above example, we have: -

                                                                      -
                                                                        -
                                                                      • Variable: The variable in the example is "x".
                                                                        • -
                                                                      • - Expression: There are two expressions in this example. They - are "x+5" and "12". -
                                                                        • -
                                                                      • - Equation: The entire example, "x+5=12", is an equation. -
                                                                        • -
                                                                      -
                                                                      -
                                                                      -
                                                                      Solving Equations
                                                                      -

                                                                      - The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".

                                                                      - x + 5 = 12

                                                                      - In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
                                                                      For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.

                                                                      - x + 5 - 5 = 12 - 5

                                                                      - The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:

                                                                      - x = 7

                                                                      - We now have our solution to this equation! -

                                                                      -
                                                                      -
                                                                      -
                                                                      Solving Equations II
                                                                      -

                                                                      - Let us look at a slightly more challenging equation.

                                                                      - 3x + 4 = 13

                                                                      - Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:

                                                                      - 3x = 9

                                                                      - "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.

                                                                      - x = 3

                                                                      - And now we have our solution! -

                                                                      -
                                                                      -
                                                                      -
                                                                      Solving Equations III
                                                                      -

                                                                      - Now we are getting in to more complex operations. Here is another - equation for us to look at:

                                                                      - x^2 - 8 = 8

                                                                      - Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.

                                                                      - x^2 = 16

                                                                      - But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
                                                                      - An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -

                                                                      - x = √9

                                                                      - Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:

                                                                      - x = 3 -

                                                                      -
                                                                      -
                                                                      -
                                                                      System of Equations
                                                                      -

                                                                      - As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:

                                                                      - y = 3x

                                                                      - An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
                                                                      - Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:

                                                                      - y = 3x | y - 6 = x - A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:

                                                                      - 3x - 6 = x

                                                                      - Now we can solve for "x"! We start by adding 6 to each side.

                                                                      - 3x = x + 6

                                                                      - We still need to get "x" by itself, so we subtract "x" from both sides - and get:

                                                                      - 2x = 6

                                                                      - If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!

                                                                      - x = 3

                                                                      - However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:

                                                                      - y = 3x

                                                                      - We have a value for "x" now, so let's see what happens if we put that - value in.

                                                                      - y = 3*3

                                                                      - We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:

                                                                      - x = 3 and y = 9

                                                                      -

                                                                      -
                                                                      -
                                                                      -
                                                                      Try it Yourself!
                                                                      -

                                                                      Coming Soon!

                                                                      -

                                                                      Keep an eye out for new additions!

                                                                      -
                                                                      -
                                                                      -
                                                                      More Information
                                                                      -

                                                                      Check out the following links for more information!

                                                                      - -
                                                                      -
                                                                      - - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md deleted file mode 100644 index 7b0ca1f4c23..00000000000 --- a/curriculum/challenges/swahili/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: Build a Tribute Page -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**Objective:** Build an app that is functionally similar to https://tribute-page.freecodecamp.rocks - -**User Stories:** - -1. Your tribute page should have a `main` element with a corresponding `id` of `main`, which contains all other elements -1. You should see an element with an `id` of `title`, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug") -1. You should see either a `figure` or a `div` element with an `id` of `img-div` -1. Within the `#img-div` element, you should see an `img` element with a corresponding `id="image"` -1. Within the `#img-div` element, you should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `#img-div` -1. You should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page -1. You should see an `a` element with a corresponding `id="tribute-link"`, which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of `target` and set it to `_blank` in order for your link to open in a new tab -1. Your `#image` should use `max-width` and `height` properties to resize responsively, relative to the width of its parent element, without exceeding its original size -1. Your `img` element should be centered within its parent element - -Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! - -**Note:** Be sure to add `` in your HTML to link your stylesheet and apply your CSS - -# --hints-- - -You should have a `main` element with an `id` of `main`. - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -Your `#img-div`, `#image`, `#img-caption`, `#tribute-info`, and `#tribute-link` should all be descendants of `#main`. - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -You should have an element with an `id` of `title`. - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -Your `#title` should not be empty. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -You should have a `figure` or `div` element with an `id` of `img-div`. - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -You should have an `img` element with an `id` of `image`. - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -Your `#image` should be a descendant of `#img-div`. - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -You should have a `figcaption` or `div` element with an `id` of `img-caption`. - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -Your `#img-caption` should be a descendant of `#img-div`. - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -Your `#img-caption` should not be empty. - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -You should have an element with an `id` of `tribute-info`. - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -Your `#tribute-info` should not be empty. - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -You should have an `a` element with an `id` of `tribute-link`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -Your `#tribute-link` should have an `href` attribute and value. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -Your `#tribute-link` should have a `target` attribute set to `_blank`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -Your `img` element should have a `display` of `block`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -Your `#image` should have a `max-width` of `100%`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -Your `#image` should have a `height` of `auto`. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -Your `#image` should be centered within its parent. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - - Tribute Page - - -

                                                                      Tribute Page

                                                                      -

                                                                      The below card was designed as a tribute page for freeCodeCamp.

                                                                      -
                                                                      -
                                                                      - An image of Togepi -
                                                                      Togepi, happy as always.
                                                                      -
                                                                      -

                                                                      Togepi

                                                                      -
                                                                      -
                                                                      -

                                                                      - Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -

                                                                      -

                                                                      - Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -

                                                                      -
                                                                      -

                                                                      Battle Information

                                                                      -
                                                                        -
                                                                      • Type: Fairy
                                                                        • -
                                                                      • Evolutions: Togepi -> Togetic -> Togekiss
                                                                        • -
                                                                      • Moves: Growl, Pound, Sweet Kiss, Charm
                                                                        • -
                                                                      • Weaknesses: Poison, Steel
                                                                        • -
                                                                      • Resistances: Dragon
                                                                        • -
                                                                      -

                                                                      - Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -

                                                                      -
                                                                      -
                                                                      - - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md deleted file mode 100644 index 88df8138e5b..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05b -title: Build your own Functions -challengeType: 11 -videoId: nLDychdBwUg -bilibiliIds: - aid: 249487483 - bvid: BV1Fv411J7bS - cid: 376340281 -dashedName: build-your-own-functions ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What will the following Python program print out?: - -```python -def fred(): - print("Zap") -def jane(): - print("ABC") - -jane() -fred() -jane() -``` - -## --answers-- - -
                                                                      Zap
-ABC
-jane
-fred
-jane
                                                                      - ---- - -
                                                                      Zap
-ABC
-Zap
                                                                      - ---- - -
                                                                      ABC
-Zap
-jane
                                                                      - ---- - -
                                                                      ABC
-Zap
-ABC
                                                                      - ---- - -
                                                                      Zap
-Zap
-Zap
                                                                      - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index dc30911a305..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: Comparing and Sorting Tuples -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -Which does the same thing as the following code?: - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index c7e87b2f7ed..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: Conditional Execution -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -Which code is indented correctly to print "Yes" if x = 0 and y = 10? - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index d3770dda9e4..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: 'Data Visualization: Mailing Lists' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -More resources: - -\- Exercise: Geodata - -\- Exercise: Gmane Model - -\- Exercise: Gmane Spider - -\- Exercise: Gmane Viz - -\- Exercise: Page Rank - -\- Exercise: Page Spider - -\- Exercise: Page Viz - -# --question-- - -## --text-- - -Which is a common JavaScript visualization library? - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index db4878ed822..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: 'Data Visualization: Page Rank' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -How does the PageRank algorithm work? - -## --answers-- - -It determines which pages are most highly connected. - ---- - -It ranks pages based on view counts. - ---- - -It figures out which pages contain the most important content. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index f01b3320828..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: Dictionaries and Loops -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What will the following code print?: - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -
                                                                      annie 42
-jan 100
                                                                      - ---- - -
                                                                      chuck 1
-annie 42
-jan 100
                                                                      - ---- - -
                                                                      chuck 1
                                                                      - ---- - -
                                                                      [Error]
                                                                      - -## --video-solution-- - -1 diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index aef8d142872..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: 'Dictionaries: Common Applications' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -What will the following code print? - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[will return error] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index 75d21cc8994..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: Files as a Sequence -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What does the word 'continue' do in the middle of a loop? - -## --answers-- - -Skips to the code directly after the loop. - ---- - -Skips to the next line in the code. - ---- - -Skips to the next iteration of the loop. - ---- - -Skips the next block of code. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index d70a408080f..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: Intermediate Expressions -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -More resources: - -\- Exercise 1 - -\- Exercise 2 - -# --question-- - -## --text-- - -What will print out after running this code: - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index c2bcadfe2b0..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: Intermediate Strings -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What is the value of i in the following code? - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index 8b4f0cda163..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: 'Introduction: Elements of Python' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -What will the following program print out: - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index ca70295ff28..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: 'Introduction: Hardware Architecture' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -Where are your programs stored when they are running? - -## --answers-- - -Hard Drive. - ---- - -Memory. - ---- - -Central Processing Unit. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index a5d07b24723..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: 'Introduction: Python as a Language' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -What will print out after running these two lines of code: - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index 0d33e12e8f9..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: 'Introduction: Why Program?' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -More resources: - -\- Install Python on Windows - -\- Install Python on MacOS - -# --question-- - -## --text-- - -Who should learn to program? - -## --answers-- - -College students. - -### --feedback-- - -College students should learn to program, but there's a better answer. - ---- - -People who want to become software developers. - -### --feedback-- - -People who want to become software developers should learn to program, but there's a better answer. - ---- - -Everyone. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index 7e1ed038bca..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: 'Iterations: Definite Loops' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -How many lines will the following code print?: - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index 70a07c31848..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: 'Iterations: Loop Idioms' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -Below is code to find the smallest value from a list of values. One line has an error that will cause the code to not work as expected. Which line is it?: - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index d0c75d1cd52..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: 'Iterations: More Patterns' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -Which of these evaluates to False? - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 51ed9ff4dbc..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: Loops and Iterations -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -What will the following code print out?: - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -
                                                                      0
-1
-2
                                                                      - ---- - -
                                                                      0
-1
-2
-3
                                                                      - ---- - -
                                                                      1
-2
                                                                      - ---- - -
                                                                      1
-2
-3
                                                                      - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index 9fbd557d8d6..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: Make a Relational Database -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -What SQL command would you use to retrieve all users that have the email address `quincy@freecodecamp.org`? - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index 3ef5463b743..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: More Conditional Structures -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -More resources: - -\- Exercise 1 - -\- Exercise 2 - -# --question-- - -## --text-- - -Given the following code: - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -Which line/lines should be surrounded by `try` block? - -## --answers-- - -1 - ---- - -3 - ---- - -3,4 - ---- - -4 - ---- - -None - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index 47d6d52de45..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: Networking Protocol -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -What type of HTTP request is usually used to access a website? - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index db73bd6e5f7..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: 'Networking: Text Processing' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -Which type of encoding do most websites use? - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index 1413e0471b4..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: 'Networking: Using urllib in Python' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -What will the output of the following code be like?: - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -Just contents of "romeo.txt". - ---- - -A header and the contents of "romeo.txt". - ---- - -A header, a footer, and the contents of "romeo.txt". - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index 2d1fb18d938..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: 'Networking: Web Scraping with Python' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -More resources: - -\- Exercise: socket1 - -\- Exercise: urllib - -\- Exercise: urllinks - -# --question-- - -## --text-- - -What Python library is used for parsing HTML documents and extracting data from HTML documents? - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index f21045dff29..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: Networking with Python -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -What Python library gives access to TCP Sockets? - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index e8127560b52..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: 'Networking: Write a Web Browser' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -What does the following code create?: - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -A simple web server. - ---- - -A simple email client. - ---- - -A simple todo list. - ---- - -A simple web browser. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index be8ff0ffce1..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: Object Lifecycle -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -What will the following program print?: - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - -
                                                                      -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 2
-Quincy party count 3
-
                                                                      - ---- - -
                                                                      -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 1
-Quincy party count 2
-
                                                                      - ---- - -
                                                                      -Quincy constructed
-Quincy party count 1
-Quincy party count 2
-Miya constructed
-Miya party count 1
-
                                                                      - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index 956ee3e10ff..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: 'Objects: A Sample Class' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -What will the following program print?: - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - -
                                                                      -So far 1
-So far 2
-
                                                                      - ---- - -
                                                                      -0
-0
-
                                                                      - ---- - -
                                                                      -2
-2
-
                                                                      - ---- - -
                                                                      -2
-4
-
                                                                      - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index 285061db3ac..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: 'Objects: Inheritance' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -What is inheritance in object-oriented programming? - -## --answers-- - -A new class created when a parent class is extended. - ---- - -A constructed instance of a class. - ---- - -The ability to create a new class by extending an existing class. - ---- - -A method that is called at the moment when a class is being used to construct an object. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index 962ec931113..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Python Dictionaries -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -What does dict equal after running this code?: - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index 3b5ea72b3c7..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Python Functions -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -What is the purpose of the "def" keyword in Python? - -## --answers-- - -It is slang that means "The following code is really cool." - ---- - -It indicates the start of a function. - ---- - -It indicates that the following indented section of code is to be stored for later. - ---- - -It indicates the start of a function, and the following indented section of code is to be stored for later. - ---- - -None of the above. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index 4266a29a5e0..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Python Lists -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -What is the value of x after running this code: - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index 6e8ed9b8c55..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Python Objects -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -Which is NOT true about objects in Python? - -## --answers-- - -Objects get created and used. - ---- - -Objects are bits of code and data. - ---- - -Objects hide detail. - ---- - -Objects are one of the five standard data types. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index c4cc75d8e4d..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: Reading Files -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -What is used to indicate a new line in a string? - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index 2426a907099..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: 'Regular Expressions: Matching and Extracting Data' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -What will the following program print?: - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index 865668ab710..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: 'Regular Expressions: Practical Applications' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -What will search for a "$" in a regular expression? - -## --answers-- - -$ - ---- - -\\dollar\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index d48b4942469..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: Regular Expressions -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -Which regex matches only a white space character? - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index d891951cb05..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: Relational Database Design -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -What is the best practice for how many times a piece of string data should be stored in a database? - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index a7c898a3d22..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: Relational Databases and SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -Download SQLite -Download DB Browser for SQLite -SQLite usage - -# --question-- - -## --text-- - -Which is NOT a primary data structure in a database? - -## --answers-- - -index - ---- - -table - ---- - -row - ---- - -column - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index 85f34ae6128..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: 'Relational Databases: Join Operation' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -When using a JOIN clause in an SQL statement, what does ON do? - -## --answers-- - -It indicates what tables to perform the JOIN on. - ---- - -It specifies the fields to use for the JOIN. - ---- - -It indicates how the two tables are to be joined. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index 53b73ce222b..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: 'Relational Databases: Many-to-many Relationships' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -More resources: - -\- Exercise: Email - -\- Exercise: Roster - -\- Exercise: Tracks - -\- Exercise: Twfriends - -\- Exercise: Twspider - -# --question-- - -## --text-- - -Which is an example of a many-to-many relationship? - -## --answers-- - -teacher to student - ---- - -customer to order - ---- - -book to pages - ---- - -city to country - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index b9d6049238e..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: 'Relational Databases: Relationship Building' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -What does the INSERT command do in SQL? - -## --answers-- - -It defines a new row by listing the fields we want to include followed by the values we want placed in the new row. - ---- - -It defines a new column by listing the rows we want to include followed by the values we want placed in the new column. - ---- - -It defines a new table by listing the rows and fields we want to include followed by the values that we want placed in the table. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index 0d5729bb07a..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: Representing Relationships in a Relational Database -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -What is a foreign key? - -## --answers-- - -A key that is not supposed to be there. - ---- - -A key that uses non-latin characters. - ---- - -A number that points to the primary key of an associated row in a different table. - ---- - -A key that the "real world" might use to look up a row. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index 9ba1ca3e9c8..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: Strings and Lists -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -More resources: - -\- Exercise - -# --question-- - -## --text-- - -What does n equal in this code? - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -mail - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index 25d7a36267e..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Strings in Python -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -What will the following code print?: - -```python -for n in "banana": - print(n) -``` - -## --answers-- - -
                                                                      -n
-n
-
                                                                      - ---- - -
                                                                      -0
-1
-
                                                                      - ---- - -
                                                                      -0
-1
-2
-3
-4
-5
-
                                                                      - ---- - -
                                                                      -b
-a
-n
-a
-n
-a
-
                                                                      - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index a5bdb4ead0d..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: The Tuples Collection -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -What will the following code print?: - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - -
                                                                      -k i
-k i
-k i
-
                                                                      - ---- - -
                                                                      -quincy 0
-beau 1
-kris 2
-
                                                                      - ---- - -
                                                                      -quincy 1
-beau 5
-kris 9
-
                                                                      - ---- - -
                                                                      -1 quincy
-5 beau
-9 kris
-
                                                                      - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index efde4ee7116..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: Using Web Services -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -What are the two most common ways to send data over the internet? - -## --answers-- - -JSON and TXT - ---- - -JSON and XML - ---- - -XML and TXT - ---- - -XML and PHP - ---- - -PHP and TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index 09fc7f3864e..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: 'Variables, Expressions, and Statements' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -What is the symbol used in an assignment statement? - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index 31853c7188d..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: Visualizing Data with Python -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -Most data needs to be \_\_\_\_\_\_ before using it. - -## --answers-- - -converted to JSON format - ---- - -graphed - ---- - -cleaned - ---- - -memorized - ---- - -turned into song - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index 53f2e714cae..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'Web Services: API Rate Limiting and Security' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -More resources: - -\- Exercise: GeoJSON - -\- Exercise: JSON - -\- Exercise: Twitter - -\- Exercise: XML - -# --question-- - -## --text-- - -When making a request from the Twitter API, what information must always be sent with the request? - -## --answers-- - -Twitter username - ---- - -date range - ---- - -search term - ---- - -key - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index 64d89a2f9c9..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'Web Services: APIs' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -What does API stand for? - -## --answers-- - -Application Portable Intelligence - ---- - -Associate Programming International - ---- - -Application Program Interface - ---- - -Action Portable Interface - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index 9716520ee1b..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'Web Services: JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -What will the following code print?: - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[Error] - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index e246a3b48ff..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'Web Services: Service Oriented Approach' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -With a services oriented approach to developing web apps, where is the data located? - -## --answers-- - -Spread across many computer systems connected via the internet or internal network. - ---- - -Within different services on the main web server. - ---- - -On a separate database server. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index 585ea239633..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'Web Services: XML Schema' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -What is XSD? - -## --answers-- - -The W3C Schema specification for XML. - ---- - -The standard JSON schema from MOZ. - ---- - -Extensible Situational Driver - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index 226d773ca77..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'Web Services: XML' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -What is wrong with the following XML?: - -```xml - - Chuck - - +1 734 303 4456 - - -``` - -## --answers-- - -Email tag is missing closing tag. - ---- - -Spacing will cause XML to be invalid. - ---- - -Phone tag is missing closing tag. - ---- - -Plain text should be encoded using UTF-8. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md deleted file mode 100644 index b6712797e7d..00000000000 --- a/curriculum/challenges/swahili/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f065 -title: Working with Lists -challengeType: 11 -videoId: lCnHfTHkhbE -bilibiliIds: - aid: 376965958 - bvid: BV1No4y1S7oi - cid: 376387989 -dashedName: working-with-lists ---- - -# --question-- - -## --text-- - -Which method is used to add an item at the end of a list? - -## --answers-- - -insert - ---- - -push - ---- - -append - ---- - -new - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index ee2c4d191ab..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: Hatua ya 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Flexbox ni mpangilio wa CSS wenye mwelekeo mmoja ambao unaweza kudhibiti jinsi vipengee vinavyotenganishwa na kupangiliwa ndani ya container. - -Ili kukitumia, kipe kipengele `display` sifa ya `flex`. Hii itafanya kipengele kuwa flex-container. Watoto wowote wa moja kwa moja wa flex-container huitwa flex items. - -Unda kichaguzi cha `.gallery` na ukifanye kuwa flex container. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `.gallery`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); -``` - -Kichaguzi chako cha `.gallery` kinafaa kuwa na sifa ya `display` yenye `flex` kama thamani yake. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
                                                                      -

                                                                      css flexbox photo gallery

                                                                      -
                                                                      -
                                                                      - - - - - - - - - -
                                                                      - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; -} - -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { - width: 100%; - max-width: 350px; - height: 300px; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index fa15afa2c87..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: Hatua ya 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Anza kwa kuweka muundo wako wa HTML. Ongeza tamko la `` na kipengele cha `html` chenye sifa ya `lang` iliyowekwa kuwa `en`. Ndani ya kipengele cha `html`, ongeza kipengele cha `head` na kipengele cha `body`. - -# --hints-- - -Msimbo wako unapaswa kuwa na rejeleo la `DOCTYPE`. - -```js -assert(code.match(/` baada ya aina. - -```js -assert(code.match(/html\s*>/gi)); -``` - -Tamko lako la `DOCTYPE` linapaswa kuwa mwanzoni mwa HTML yako. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -Kipengele chako cha `html` kinafaa kuwa na tagi ya ufunguzi yenye sifa ya `lang` ya `en` - -```js -assert(code.match(//gi)); -``` - -Kipengele chako cha `html` kinapaswa kuwa na tagi ya kufunga. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Unapaswa kuwa na tagi ya kufungua ya `head`. - -```js -assert(code.match(//i)); -``` - -Unapaswa kuwa na tagi ya kufunga ya `head`. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -Unapaswa kuwa na tagi ya kufungua ya `body`. - -```js -assert(code.match(//i)); -``` - -Unapaswa kuwa na tagi ya kufunga ya `body`. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -Vipengele vya `head` na `body` vinapaswa kuwa ndugu. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -Kipengele cha `head` kinapaswa kuwa ndani ya kipengele cha `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -Kipengele cha `body` kinapaswa kuwa ndani ya kipengele cha `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md deleted file mode 100644 index d0c5a8d7b8c..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: Hatua ya 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Ndani ya kipengele chako cha `head`, ongeza tagi ya `meta` yenye sifa ya `charset` iliyowekwa kuwa `utf-8`. Pia, ongeza kipengele cha `title` chenye maandishi `Picasso Painting`. - -# --hints-- - -Unapaswa kuwa na kipengele kimoja cha `meta`. - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -Kipengele chako cha `meta` kinafaa kuwa na sifa ya `charset`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -Sifa yako ya `charset` inapaswa kuwa na thamani ya `utf-8`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -``` - -Unapaswa kuongeza kipengele kimoja cha `title`. - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -Kipengele chako cha `title` kinapaswa kuwa na maandishi `Picasso Painting`. Kumbuka kwamba tahajia na herufi ni muhimu. - -```js -assert(document.querySelector('title')?.innerText === 'Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md deleted file mode 100644 index ee2d7364a31..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: Hatua ya 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -FontAwesome ni maktaba ya ikoni zinazoendeshwa na SVG, nyingi zinapatikana kwa matumizi bila malipo. Utakuwa ukitumia baadhi ya aikoni hizi katika mradi huu, kwa hivyo utahitaji kuunganisha laha ya nje ya mtindo kwenye HTML yako. - -Ongeza kipengele cha `link` kilicho na `rel` ya `stylesheet` na `href` ya `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -# --hints-- - -Unapaswa kuwa na vipengele viwili vya `link`. - -```js -assert(document.querySelectorAll('link').length === 2); -``` - -Kipengele chako cha `link` kinafaa kuwa na `rel` ya `stylesheet`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); -``` - -Kipengele chako kipya cha `link` kinafaa kuwa na `href` ya `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index e213373ffad..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: Hatua ya 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Ili uanze uchoraji wako, kipe kipengele cha `body` `background-color` ya `rgb(184, 132, 46)`. - -# --hints-- - -Unapaswa kutumia kichaguzi cha `body`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -Kichaguzi chako cha `body` kinapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `rgb (184, 132, 46)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index 90ecd3d1cba..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: Hatua ya 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Ndani ya tagi yako ya body, ongeza kipengele cha `div`. Ipe `id` ya `back-wall`. - -# --hints-- - -Unapaswa kuongeza kipengele 1 cha `div`. - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -Kipengee chako cha `div` kinapaswa kuwa na `id` ya `back-wall`. - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index b1cc26feefe..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: Hatua ya 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Tumia kichaguzi cha id kukipa kipengele chenye id `back-wall` `background-color` ya `#8B4513`. - -# --hints-- - -Unapaswa kutumia kichaguzi cha `#back-wall`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -Kipengele chako cha `#back-wall` kinafaa kuwa na `background-color` ya `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index 2c6fb1e49b1..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: Hatua ya 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Kipe kipengele cha `#back-wall` `width` ya `100%` na `height` ya `60%`. - -# --hints-- - -Unapaswa kuweka `width` ya kichaguzi `#back-wall` kuwa `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -Unapaswa kuweka `height` ya kichaguzi `#back-wall` kuwa `60%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index 5415634eb60..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: Hatua ya 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Kwa kawaida, HTML hutolewa kwa namna ya juu-chini. Vipengele vilivyo juu ya msimbo vimewekwa juu ya ukurasa. Hata hivyo, mara nyingi unaweza kutaka kuhamisha vipengele kwenye nafasi tofauti. Unaweza kufanya hivi kwa sifa ya `position`. - -Weka `position` ya kipengele cha `#back-wall` kuwa `absolute`. Nafasi ya `absolute` huchukua kipengele kutoka kwenye mtiririko huo wa hati unaotoka juu chini na hukuruhusu kukirekebisha kulingana na chombo chake. - -Wakati kipengele kinapowekwa nafasi kwa mkono, unaweza kubadilisha mpangilio wake na `top`, `left`, `right` na `bottom`. Weka kipengele cha `#back-wall` kuwa na thamani ya `top` ya `0`, na thamani ya `left` ya `0`. - - -# --hints-- - -Kichaguzi chako cha `#back-wall` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#back-wall` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -Kichaguzi chako cha `#back-wall` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index cfed07cc3fe..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: Hatua ya 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Kipengele cha `z-index` kinatumika kuunda "tabaka" (layers) kwa vipengele vyako vya HTML. Ikiwa unafahamu wa zana za kuhariri picha, huenda ulifanya kazi na tabaka hapo awali. Hii ni dhana inayofanana. - -Vipengele vilivyo na thamani ya juu ya `z-index` vitaonekana kuwa vimewekwa juu ya vipengee vyenye thamani ya chini ya `z-index`. Hii inaweza kuunganishwa na nafasi katika somo lililopita ili kuunda athari za kipekee. - -Kwa kuwa kipengele cha `back-wall` kitahitaji kuonekana "nyuma" ya vipengele vingine utakavyounda, kipe kipengele cha `back-wall` `z-index` ya `-1`. - -# --hints-- - -Kichaguzi chako cha `#back-wall` kinafaa kuwa na sifa ya `z-index` iliyowekwa kuwa `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index 011937b87be..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: Hatua ya 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Chini ya kipengele chako cha `#back-wall`, unda `div` yenye `class` ya `characters`. Hapa ndipo utakuwa unaunda wahusika wa uchoraji wako. - -# --hints-- - -Unapaswa kuongeza tu kipengele kimoja kipya cha `div`. - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -Kipengele chako kipya cha `div` kinafaa kuja baada ya kipengele chako cha `#back-wall`. - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -Kipengee chako kipya cha `div` kinapaswa kuwa na `class` iliyowekwa kuwa `characters`. - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index feae4c9a62e..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: Hatua ya 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Ndani ya kipengele hicho cha `.characters`, unda `div` nyingine yenye `id` ya `offwhite-character`. - -# --hints-- - -Unapaswa kuunda kipengele 1 pekee cha `div`. - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -Kipengee chako kipya cha `div` kinapaswa kuwekwa ndani ya kipengele chako cha `.characters`. - -```js -assert(document.querySelector('.characters div')); -``` - -Kipengee chako kipya cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `offwhite-character`. - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index 60527b20df2..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: Hatua ya 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Unda vipengele vinne vya `div` ndani ya kipengee chako cha `offwhite-character`. Vipe vipengele hivyo vya `div` thamani zifuatazo za `id` kwa mpangilio `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. - -# --hints-- - -Unapaswa kuongeza vipengele vinne vya `div` ndani ya kipengele chako cha `.offwhite-character`. - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -Kipengele chako kipya cha kwanza cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `white-hat`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -Kipengee chako kipya cha pili cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `black-mask`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -Kipengee chako kipya cha tatu cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `gray-instrument`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -Kipengele chako kipya cha nne cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `tan-table`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index 552d8b11b7b..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: Hatua ya 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Mhusika anahitaji macho. Unda vipengele viwili vya `div` ndani ya kipengele chako cha `#black-mask`. Zipe classes za `eyes left` na `eyes right`, kwa mpangilio huo. - -# --hints-- - -Unapaswa kuunda vipengee 2 vya `div` ndani ya kipengele chako cha `#black-mask`. - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -`div` yako mpya ya kwanza inapaswa kuwa na classes za `eyes` na `left`. - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -`div` yako mpya ya pili inapaswa kuwa na classes za `eyes` na `right`. - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index fe46f7e3c14..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: Hatua ya 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Unda "dots" kadhaa za kifaa. Ongeza vipengele vitano vya `div` ndani ya kipengele chako cha `#gray-instrument`. Weka `class` ya kila moja kuwa `black-dot`. - -# --hints-- - -Unapaswa kuwa na vipengele vitano vipya vya `div` ndani ya kipengele chako cha `#gray-instrument`. - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -Vipengele vyako vitano vya `div` vyote vinapaswa kuwa na class yla `black-dot`. - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index a318601db30..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: Hatua ya 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Kwa kutumia kichaguzi cha id, tengeneza kanuni ya kipengele chenye id `offwhite-character`. Ipe `width` ya `300px`, `height` ya `550px` na `background-color` ya `GhostWhite`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#offwhite-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -`#offwhite-character` yako inapaswa kuwa na sifa ya `width` iliyowekwa kuwa `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -`#offwhite-character` yako inapaswa kuwa na sifa ya `height` iliyowekwa kuwa `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -`#offwhite-character` yako inapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index 22c4e4a0e1e..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: Hatua ya 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Sogeza kipengele cha `#offwhite-character` mahali panapofaa kwa kuipa `position` ya `absolute`, `top` ya `20%`, na `left` ya `17.5%`. - -# --hints-- - -Kichaguzi chako cha `#offwhite-character` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#offwhite-character` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -Kichaguzi chako cha `#offwhite-character` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `17.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index dc1d166b85f..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: Hatua ya 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Kwa kutumia kichaguzi cha id (id selector), tia mtindo kwenye kipengee chenye id `white-hat`. Ipe `width` na `height` ya `0`, na `border-style` ya `solid`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#white-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -Kichaguzi chako cha `#white-hat` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -Kichaguzi chako cha `#white-hat` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -Kichaguzi chako cha `#white-hat` kinafaa kuwa na sifa ya `border-style` iliyowekwa kuwa `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index 25667f36e05..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: Hatua ya 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Hiyo haionekani kuwa sawa kabisa. Weka `border-width` ya `0 120px 140px 180px` ili kuweka ukubwa wa kofia ipasavyo. - -# --hints-- - -Kichaguzi chako cha `#white-hat` kinafaa kuwa na sifa ya `border-width` iliyowekwa kuwa `0 120px 140px 180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index af7d074a99a..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: Hatua ya 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Now you have a large box. Ipatie `border-top-color`, `border-right-color`, na `border-left-color` ya `transparent`. Weka `border-bottom-color` kuwa `GhostWhite`. Hii itaifanya ionekane zaidi kama kofia. - -# --hints-- - -Kichaguzi chako cha `#white-hat` kinapaswa kuwa na sifa ya `border-top-color` iliyowekwa kuwa `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -Kichaguzi chako cha `#white-hat` kinapaswa kuwa na sifa ya `border-right-color` iliyowekwa kuwa `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -Kichaguzi chako cha `#white-hat` kinapaswa kuwa na sifa ya `border-left-color` iliyowekwa kuwa `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -Kichaguzi chako cha `#white-hat` kinapaswa kuwa na sifa ya `border-bottom-color` iliyowekwa kuwa `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index 705982bab19..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: Hatua ya 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Ipe kofia `position` ya `absolute`, thamani ya `top` ya `-140px` na thamani ya `left` ya `0`. - -# --hints-- - -Kichaguzi chako cha `#white-hat` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#white-hat` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `-140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -Kichaguzi chako cha `#white-hat` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index a5c445edfb7..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: Hatua ya 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Kwa kutumia kichaguzi cha id, tengeneza kanuni ya kipengele cha id `black-mask`. Ipe `width` ya `100%`, `height` ya `50px` na `background-color` ya `rgb(45, 31, 19)`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#black-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -Kichaguzi chako cha `#black-mask` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -Kichaguzi chako cha `#black-mask` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -Kichaguzi chako cha `#black-mask` kinapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index d7b31881957..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: Hatua ya 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Ipe mask `position` ya `absolute`, na thamani za `top` na `left` za `0`. - -# --hints-- - -Kichaguzi chako cha `#black-mask` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#black-mask` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -Kichaguzi chako cha `#black-mask` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index 8d62174e1ce..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: Hatua ya 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Ili kuhakikisha kuwa unaweza kuona mask, ipe `z-index` ya `1`. - -# --hints-- - -Kichaguzi chako cha `#black-mask` kinafaa kuwa na sifa ya `z-index` iliyowekwa kuwa `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index 317dbc2b22e..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: Hatua ya 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Kwa kutumia kichaguzi cha id, kipe kipengee chenye id `gray-instrument` `width` ya `15%`, `height` ya `40%`, na `background-color` ya `rgb(167, 162, 117)`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#gray-instrument`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -Kichaguzi chako cha `#gray-instrument` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `15%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -Kichaguzi chako cha `#gray-instrument` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -Kichaguzi chako cha `#gray-instrument` kinapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index 749fc59ec22..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: Hatua ya 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Sasa isogeze mahali kwa kutumia `position` ya `absolute`, thamani ya `top` ya `50px` na thamani ya `left` ya `125px`. - -# --hints-- - -Kichaguzi chako cha `#gray-instrument` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#gray-instrument` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -Kichaguzi chako cha `#gray-instrument` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `125px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index 836210b7e4f..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: Hatua ya 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Weka `z-index` kuwa `1`. - -# --hints-- - -Kichaguzi chako cha `#gray-instrument` kinafaa kuwa na sifa ya `z-index` iliyowekwa kuwa `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index b7ef39dd147..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: Hatua ya 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Tumia kichaguzi cha class kuunda kanuni kwa vipengele vyenye class `black-dot`. Weka `width` kuwa `10px`, `height` kuwa `10px` na `background-color` kuwa `rgb(45, 31, 19)`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `.black-dot`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -Kichaguzi chako cha `.black-dot` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -Kichaguzi chako cha `.black-dot` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -Kichaguzi chako cha `.black-dot` kinapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index d13dcef4977..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: Hatua ya 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Vitone hivi ni mraba sana. Ipe class ya `black-dot` `border-radius` ya `50%` ili kuirekebisha. - -# --hints-- - -Kichaguzi chako cha `.black-dot` kinafaa kuwa na sifa ya `border-radius` iliyowekwa kuwa `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index 9b087014472..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: Hatua ya 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Sogeza dots hizo mahali pake kwa kuweka `display` kuwa `block`, `margin` kuwa `auto` na `margin-top` kuwa `65%`. - -# --hints-- - -Kichaguzi chako cha `.black-dot` kinapaswa kuwa na sifa ya `display` iliyowekwa kuwa `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -Kichaguzi chako cha `.black-dot` kinafaa kuwa na sifa ya `margin` iliyowekwa kuwa `auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -Kichaguzi chako cha `.black-dot` kinafaa kuwa na sifa ya `margin-top` iliyowekwa kuwa `65%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index 358d1bfa5a8..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: Hatua ya 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Kwa kutumia kichaguzi cha id (id selector), tia mtindo kwenye kipengee chenye id `tan-table`. Ipe `width` ya `450px`, `height` ya `140px` na `background-color` ya `#D2691E`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#tan-table`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -Kichaguzi chako cha `#tan-table` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `450px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -Kichaguzi chako cha `#tan-table` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -Kichaguzi chako cha `#tan-table` kinafaa kuwa na sifa ya `background-color` iliyowekwa kuwa `#D2691E`. - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index 7ee39dd7a94..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: Hatua ya 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Sogeza jedwali mahali pake kwa kuipa `position` ya `absolute`, thamani ya `top` ya `275px` na thamani ya `left` ya `15px`. - -# --hints-- - -Kichaguzi chako cha `#tan-table` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#tan-table` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `275px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -Kichaguzi chako cha `#tan-table` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index d1a1a1d89b0..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: Hatua ya 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Ipe jedwali `z-index` ya `1`. - -# --hints-- - -Kichaguzi chako cha `#tan-table` kinafaa kuwa na sifa ya `z-index` iliyowekwa kuwa `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index cecb90fbc83..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: Hatua ya 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Baada ya kipengele chako cha `div#offwhite-character`, ongeza `div` kwa `id` ya `black-character`. - -# --hints-- - -Unapaswa kuongeza kipengele kipya cha `div` ndani ya kipengele cha `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -Kipengee chako kipya cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `black-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index 23f5b33554e..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: Hatua ya 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Ndani ya kipengele chako kipya cha `#black-character`, ongeza vipengele vitatu vya `div` vyenye thamani zifuatazo za `id`, kwa mpangilio huu `black-hat`, `gray-mask`, `white-paper`. - -# --hints-- - -Unapaswa kuwa na vipengele vitatu vya `div` ndani ya kipengele chako cha `#black-character`. - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -Kipengee chako kipya cha kwanza cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `black-hat`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -Kipengee chako kipya cha pili cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `gray-mask`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -Kipengee chako kipya cha tatu cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `white-paper`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index 1757213cba6..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: Hatua ya 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Mask inahitaji macho. Ndani ya kipengele chako cha `#gray-mask`, ongeza vipengele viwili vya `div`. Ya kwanza inapaswa kuwa na `class` iliyowekwa kuwa `eyes left`, na ya pili iwe na `class` iliyowekwa kuwa `eyes right`. - -# --hints-- - -Unapaswa kuwa na vipengele viwili vya `div` ndani ya kipengele chako cha `#gray-mask`. - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -Kipengele chako kipya cha kwanza cha `div` kinapaswa kuwa na `class` iliyowekwa kuwa `eyes left`. - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -Kipengele chako kipya cha pili cha `div` kinapaswa kuwa na `class` iliyowekwa kuwa `eyes right`. - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index 405ed820eab..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: Hatua ya 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Ni wakati wa kutumia aikoni za FontAwesome. - -Kipengele cha `i` kinatumika kwa maandishi ya nahau, au maandishi ambayo ni tofauti na maandishi ya "kawaida". Hii inaweza kuwa kwa maandishi ya _italic_, kama vile maneno ya kisayansi, au kwa aikoni kama zile zilizotolewa na FontAwesome. - -Ndani ya kipengele chako cha `#white-paper`, ongeza vipengele vinne vya `i`. Zipe zote thamani ya `class` ya `fas fa-music`. - -Darasa hili maalum ni jinsi FontAwesome huamua ikoni ya kupakia. `fas` inaonyesha aina ya aikoni (FontAwesome Solid, here), huku `fa-music` ikichagua ikoni mahususi. - -# --hints-- - -Unapaswa kuwa na vipengele vinne vipya vya `i` ndani ya kipengele chako cha `#white-paper`. - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -Vipengele vyako vyote vya `i` vinapaswa kuwa na `class` iliyowekwa kuwa `fas fa-music`. - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index 1fbad267875..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: Hatua ya 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Tumia kichaguzi cha id kuunda kanuni ya kipengele chenye id `black-character`. Weka `width` kuwa `300px`, `height` kuwa `500px` na `background-color` kuwa `rgb(45, 31, 19)`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#black-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -Kichaguzi chako cha `#black-character` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -Kichaguzi chako cha `#black-character` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -Kichaguzi chako cha `#black-character` kinapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index e4277ac3fb0..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: Hatua ya 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Sogeza kipengele cha `#black-character` mahali ukiwa na `position` ya `absolute`, `top` ya `30%`, na `left` ya `59%`. - -# --hints-- - -Kichaguzi chako cha `#black-character` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#black-character` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -Kichaguzi chako cha `#black-character` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `59%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index 14724c4b832..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: Hatua ya 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Tumia kichaguzi cha id kuunda kanuni ya kipengele chenye id `black-hat`. Ipe `width` ya `0`, `height` ya `0` na `border-style` ya `solid`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#black-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -Kichaguzi chako cha `#black-hat` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -Kichaguzi chako cha `#black-hat` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -Kichaguzi chako cha `#black-hat` kinafaa kuwa na sifa ya `border-style` iliyowekwa kuwa `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index cdd7f09a08e..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: Hatua ya 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Kama vile `#white-hat`, unapaswa kuweka mtindo wa mpaka kwa kipengele cha `#black-hat`. Ipatie `border-top-color`, `border-right-color`, na `border-bottom-color` ya `transparent`. Weka `border-left-color` kuwa `rgb(45, 31, 19)`. - -# --hints-- - -Kichaguzi chako cha `#black-hat` kinapaswa kuwa na sifa ya `border-top-color` iliyowekwa kuwa `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -Kichaguzi chako cha `#black-hat` kinapaswa kuwa na sifa ya `border-right-color` iliyowekwa kuwa `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -Kichaguzi chako cha `#black-hat` kinapaswa kuwa na sifa ya `border-bottom-color` iliyowekwa kuwa `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -Kichaguzi chako cha `#black-hat` kinapaswa kuwa na sifa ya `border-left-color` iliyowekwa kuwa `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index 60642ce1315..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: Hatua ya 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Sasa weka kipengele cha `#black-hat` katika nafasi yake. Weka `position` ya `absolute`, na `top` kuwa `-150px` na `left` kuwa `0`. - -# --hints-- - -Kichaguzi chako cha `#black-hat` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#black-hat` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -Kichaguzi chako cha `#black-hat` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index 4cf53eeac45..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: Hatua ya 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Kwa kutumia kichaguzi cha id, tengeneza kipengee chenye id `gray-mask`. Ipe `width` ya `150px`, `height` ya `150px` na `background-color` ya `rgb(167, 162, 117)`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#gray-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -Kichaguzi chako cha `#gray-mask` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -Kichaguzi chako cha `#gray-mask` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -Kichaguzi chako cha `#gray-mask` kinapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index 2dcfc744b00..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: Hatua ya 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Weka kipengele cha `#gray-mask` kwa kuweka `position` kuwa `absolute`, `top` kuwa `-10px`, na `left` kuwa `70px`. - -# --hints-- - -Kichaguzi chako cha `#gray-mask` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#gray-mask` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `-10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -Kichaguzi chako cha `#gray-mask` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `70px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index 37a5104c99a..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: Hatua ya 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Kwa kutumia kichaguzi cha id, tengeneza sheria ya id `white-paper`. Weka `width` kuwa `400px`, `height` kuwa `100px` na `background-color` kuwa `GhostWhite`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#white-paper`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -Kichaguzi chako cha `#white-paper` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -Kichaguzi chako cha `#white-paper` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -Kichaguzi chako cha `#white-paper` kinapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index 561e9a2b842..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: Hatua ya 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Ipe `#white-paper` `position` ya `absolute`, `top` ya `250px`, na `left` ya `-150px` ili kuisogeza mahali pake. - -# --hints-- - -Kichaguzi chako cha `#white-paper` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#white-paper` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -Kichaguzi chako cha `#white-paper` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index 7f6f9c9b39b..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: Hatua ya 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Weka `z-index` ya kipengele cha `#white-paper` kuwa `1`. - -# --hints-- - -Kichaguzi chako cha `#white-paper` kinafaa kuwa na sifa ya `z-index` iliyowekwa kuwa `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index c6bf2af5581..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: Hatua ya 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Aikoni za FontAwesome huja na mtindo wao wenyewe ili kufafanua ikoni. Walakini, bado unaweza kuweka mtindo mwenyewe pia, ili kubadilisha vitu kama rangi na saizi. Kwa sasa, tumia kichaguzi cha class kulenga aikoni za class ya `fa-music`. Weka `display` kuwa `inline-block`, `margin-top` kuwa `8%` na `margin-left` kuwa `13%`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `.fa-music`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -Kichaguzi chako cha `.fa-music` kinapaswa kuwa na sifa ya `display` iliyowekwa kuwa `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -Kichaguzi chako cha `.fa-music` kinapaswa kuwa na sifa ya `margin-top` iliyowekwa kuwa `8%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -Kichaguzi chako cha `.fa-music` kinapaswa kuwa na sifa ya `margin-left` iliyowekwa kuwa `13%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index 53ee997ddf9..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: Hatua ya 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Chini ya kipengele chako cha `#black-character`, ongeza vipengele viwili vipya vya `div`. Hizi zitakuwa shawl. Wape zote mbili `class` ya `blue`. Kisha ipe ya kwanza `id` ya `blue-left`, na ya pili `id` ya `blue-right`. - -# --hints-- - -Unapaswa kuwa na vipengele viwili vipya vya `div` ndani ya kipengele chako cha `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -Vipengele vyako viwili vipya vya `div` vinapaswa kuwa na `class` iliyowekwa kuwa `blue`. - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -`div` yako mpya ya kwanza inapaswa kuwa na `id` ya `blue-left`. - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -`div` yako mpya ya pili inapaswa kuwa na `id` ya `blue-right`. - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index decc9c62540..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: Hatua ya 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Tumia kichaguzi cha darasa kulenga vipengele vipya vilivyo na class ya `blue`. Weka `background-color` kuwa `#1E90FF`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `.blue`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -Kichaguzi chako cha `.blue` kinafaa kuwa na sifa ya `background-color` iliyowekwa kuwa `#1E90FF`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index f8ca05bf159..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: Hatua ya 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Chagua kipengele chenye id `blue-left` kwa kutumia kichaguzi cha id. Ipe `width` ya `500px` na `height` ya `300px`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#blue-left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -Kichaguzi chako cha `#blue-left` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -Kichaguzi chako cha `#blue-left` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index 68b0c7e5e4a..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: Hatua ya 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Sasa weka `position` kuwa `absolute`, `top` kuwa `20%` na `left` kuwa `20%`. - -# --hints-- - -Kichaguzi chako cha `#blue-left` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#blue-left` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -Kichaguzi chako cha `#blue-left` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index b386c6f777c..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: Hatua ya 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Ifuatayo, lenga kipengele chenye id `blue-right` kwa kutumia kichaguzi cha kitambulisho. Weka `width` kuwa `400px` na `height` kuwa `300px`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#blue-right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -Kichaguzi chako cha `#blue-right` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -Kichaguzi chako cha `#blue-right` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index 03c832c27e9..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: Hatua ya 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Kipe kipengele cha `#blue-right` nafasi sahihi kwa kutumia `position` iliyowekwa `absolute`, `top` iliyowekwa `50%`, na `left` iliyowekwa kuwa `40%`. - -# --hints-- - -Kichaguzi chako cha `#blue-right` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#blue-right` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -Kichaguzi chako cha `#blue-right` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index 05935aa2750..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: Hatua ya 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Chini ya vipengele vyako vya `.blue`, ongeza `div` nyingine. Ipe thamani ya `id` ya `orange-character`. - -# --hints-- - -Unapaswa kuwa na kipengele kipya cha `div` ndani ya kipengele chako cha `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -Kipengee chako kipya cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `orange-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index a7c411b98a2..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: Hatua ya 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Ndani ya kipengele hicho cha `#orange-character`, ongeza vipengele vinne vya `div`. Zipe thamani za `id` za `black-round-hat`, `eyes-div`, `triangles` na `guitar`, kwa utaratibu. - -# --hints-- - -Unapaswa kuwa na vipengele vinne vipya vya `div` ndani ya kipengele chako cha `#orange-character`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -Kipengee chako kipya cha kwanza cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `black-round-hat`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -Kipengee chako kipya cha pili cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `eyes-div`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -Kipengee chako kipya cha tatu cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `triangles`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -Kipengee chako kipya cha nne cha `div` kinapaswa kuwa na `id` iliyowekwa kuwa `guitar`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index 3dcb00ccc65..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: Hatua ya 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Kipengele cha `#eyes-div` kinafaa kushikilia baadhi ya macho. Ongeza vipengele viwili vya `div` ndani. Ipe ya kwanza `class` ya `eyes left`, na ya pili `class` ya `eyes right`. - -# --hints-- - -Unapaswa kuwa na vipengele viwili vya `div` vilivyowekwa kwenye kipengele chako cha `#eyes-div`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -`div` mpya ya kwanza inapaswa kuwa na `class` iliyowekwa kuwa `eyes left`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -`div` ya pili mpya inapaswa kuwa na `class` iliyowekwa kuwa `eyes right`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index 3b9e2549f49..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: Hatua ya 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Ndani ya div ya `#triangles`, utahitaji kuongeza vipengele ambavyo vitakuwa pembetatu zako. Unda vipengele thelathini vya `div` na uvipe kila class ya `triangle`. - -# --hints-- - -Unapaswa kuwa na vipengele 30 vya `div` ndani ya kipengele chako cha `#triangles`. - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -Vipengele vyako vyote 30 vya `div` vinapaswa kuwa na `class` iliyowekwa kuwa `triangle`. - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index 0e1e3d3bc71..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: Hatua ya 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Ndani ya kipengele cha `#guitar`, unda vipengele vitatu vya `div`. Zipe mbili za kwanza thamani ya `class` ya `guitar`. Kisha ipe ya kwanza `id` ya `guitar-left`, na ya pili `id` ya `guitar-right`. Ongeza `id` kwa `div` ya tatu yenye thamani `guitar-neck`. - -`div` ya tatu haipaswi kuwa na darasa la `guitar`. - -# --hints-- - -Unapaswa kuwa na vipengele vitatu vipya vya `div` ndani ya kipengele chako cha `#guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -`div` yako mpya ya kwanza inapaswa kuwa na `class` iliyowekwa kuwa `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -`div` yako mpya ya kwanza inapaswa kuwa na `id` iliyowekwa kuwa `guitar-left`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -`div` yako mpya ya pili inapaswa kuwa na `class` iliyowekwa kuwa `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -`div` yako mpya ya pili inapaswa kuwa na `id` iliyowekwa kuwa `guitar-right`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -`div` yako mpya ya tatu inapaswa kuwa na `id` iliyowekwa kuwa `guitar-neck`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -Hupaswi kuipa `div` mpya ya tatu `class` ya `guitar`. - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index d9f55eedea2..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: Hatua ya 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Tumia ikoni nyingine ya FontAwesome kwa `.guitar` yako. Ndani ya vipengele vyote viwili vya `#guitar-left` na `#guitar-right`, ongeza kipengele cha `i` na ukipe `class` ya `fas fa-bars`. - -# --hints-- - -Ndani ya kipengele chako cha `#guitar-left`, unapaswa kuongeza kipengele cha `i`. - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -Ndani ya kipengele chako cha `#guitar-right`, unapaswa kuongeza kipengele cha `i`. - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -Vipengele vyako viwili vipya vya `i` vinapaswa kuwa na `class` iliyowekwa kuwa `fas fa-bars`. - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - --fcc-editable-region-- -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      - --fcc-editable-region-- -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index 9a3df7159b4..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: Hatua ya 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Chagua kipengee chako cha `orange-character` na kichaguzi cha id. Ipe `width` ya `250px`, `height` ya `550px` na `background-color` ya `rgb(240, 78, 42)`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#orange-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -Kichaguzi chako cha `#orange-character` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -Kichaguzi chako cha `#orange-character` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -Kichaguzi chako cha `#orange-character` kinapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `rgb(240, 78, 42)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index ce5aee5937e..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: Hatua ya 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Kipe kipengele cha `#orange-character` `position` ya `absolute`, `top` ya `25%`, na `left` ya `40%`. - -# --hints-- - -Kichaguzi chako cha `#orange-character` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#orange-character` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `25%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -Kichaguzi chako cha `#orange-character` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index 693e532cc22..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: Hatua ya 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Weka mtindo wa kipengele kwa id `black-round-hat` kwa kutumia kichaguzi cha id. Weka `width` kuwa `180px`, `height` kuwa `150px` na `background-color` kuwa `rgb(45, 31, 19)`. - -# --hints-- - -Unapaswa kuwa na kichaguzi cha `#black-round-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -Kichaguzi chako cha `#black-round-hat` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -Kichaguzi chako cha `#black-round-hat` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -Kichaguzi chako cha `#black-round-hat` kinapaswa kuwa na sifa ya `background-color` iliyowekwa kuwa `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index 03208cd7d2b..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: Hatua ya 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Kipengele cha `#black-round-hat` lazima kiwe cha mviringo. Ipe `border-radius` ya `50%` ili kurekebisha hili. - -# --hints-- - -Kichaguzi chako cha `#black-round-hat` kinafaa kuwa na sifa ya `border-radius` iliyowekwa kuwa `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index 823ead670e7..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: Hatua ya 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Sogeza kipengele cha `#black-round-hat` mahali ukiwa na `position` ya `absolute`, `top` ya `-100px`, na `left` ya `5px`. - -# --hints-- - -Kichaguzi chako cha `#black-round-hat` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#black-round-hat` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `-100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -Kichaguzi chako cha `#black-round-hat` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `5px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index 59b6c559b94..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: Hatua ya 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Weka kipengele cha `#black-round-hat` kwenye safu sahihi kwa `z-index` ya `-1`. - -# --hints-- - -Kichaguzi chako cha `#black-round-hat` kinafaa kuwa na sifa ya `z-index` iliyowekwa kuwa `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index 7a37b7b2011..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: Hatua ya 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -Tumia kichaguzi cha id kuunda kanuni ya kipengele kwa id `eyes-div`. Weka `width` kuwa `180px` na `height` kuwa `50px`. - -# --hints-- - -Unapaswa kuunda kichaguzi cha `#eyes-div`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -Kichaguzi chako cha `#eyes-div` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -Kichaguzi chako cha `#eyes-div` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index 40c7c0492ed..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: Hatua ya 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Sasa sogeza kipengele cha `#eyes-div` kwenye nafasi na `position` iliyowekwa kuwa `absolute`, `top` iliyowekwa kuwa `-40px`, na `left` zimewekwa kuwa `20px`. - -# --hints-- - -Kichaguzi chako cha `#eyes-div` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#eyes-div` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `-40px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -Kichaguzi chako cha `#eyes-div` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index 157ed62cdb0..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: Hatua ya 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Kipe kipengele cha `#eyes-div` `z-index` ya `3`. - -# --hints-- - -Kichaguzi chako cha `#eyes-div` kinafaa kuwa na sifa ya `z-index` iliyowekwa kuwa `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index 51c8bbadb67..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: Hatua ya 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -Sasa tumia kichaguzi cha darasa kulenga `guitar`. Hii itaunda "nusu" mbili za gita lako. Weka `width` kuwa `150px`, `height` hadi `120px`, `background-color` kuwa `Goldenrod`, na `border-radius` kuwa `50%`. - -# --hints-- - -Unapaswa kuunda kichaguzi cha `.guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -Kichaguzi chako cha `.guitar` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -Kichaguzi chako cha `.guitar` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -Kichaguzi chako cha `.guitar` kinafaa kuwa na sifa ya `background-color` iliyowekwa kuwa `Goldenrod`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -Kichaguzi chako cha `.guitar` kinafaa kuwa na sifa ya `border-radius` iliyowekwa kuwa `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index f38457e6616..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: Hatua ya 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Chagua `id` yenye thamani `guitar-left`, na uweke `position` kuwa `absolute` na `left` kuwa`0px`. - -# --hints-- - -Unapaswa kuunda kichaguzi kipya cha `#guitar-left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -Kichaguzi chako cha `#guitar-left` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index 51df40c72cb..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: Hatua ya 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Chagua `id` yenye thamani `guitar-right`, na pia weka `position` kuwa `absolute`. Wakati huu, weka `left` kuwa `100px`. - -# --hints-- - -Unapaswa kuunda kichaguzi kipya cha `#guitar-right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -Kichaguzi chako cha `#guitar-right` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#guitar-right` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index 4203c2b9e28..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: Hatua ya 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Sasa unahitaji kuhamisha aikoni za bar mahali panapofaa. Unda kichaguzi cha darasa cha darasa la `fa-bars`. Weka `display` kuwa `block`, `margin-top` kuwa `30%` na `margin-left` kuwa `40%`. - -# --hints-- - -Unapaswa kuunda kichaguzi cha `.fa-bars`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -Kichaguzi chako cha `.fa-bars` kinapaswa kuwa na sifa ya `display` iliyowekwa kuwa `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -Kichaguzi chako cha `.fa-bars` kinapaswa kuwa na sifa ya `margin-top` iliyowekwa kuwa `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -Kichaguzi chako cha `.fa-bars` kinapaswa kuwa na sifa ya `margin-left` iliyowekwa kuwa `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index b287dbaf69c..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: Hatua ya 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -Tumia kichaguzi cha id kuunda sheria ya id `guitar-neck`. Weka `width` kuwa `200px`, `height` kuwa `30px` na `background-color` kuwa `#D2691E`. - -# --hints-- - -Unapaswa kuunda kichaguzi cha `#guitar-neck`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -Kichaguzi chako cha `#guitar-neck` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -Kichaguzi chako cha `#guitar-neck` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -Kichaguzi chako cha `#guitar-neck` kinafaa kuwa na sifa ya `background-color` iliyowekwa kuwa `#D2691E`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index 650b6d7d41f..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: Hatua ya 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Sasa sogeza kipengele cha `#guitar-neck` kiwe na `position` iliyowekwa kuwa `absolute`, `top` iliyowekwa kuwa `45px`, na `left` iliyowekwa kuwa `200px`. - -# --hints-- - -Kichaguzi chako cha `#guitar-neck` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#guitar-neck` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `45px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -Kichaguzi chako cha `#guitar-neck` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index fa983a48023..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: Hatua ya 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Kipe kipengele cha `#guitar-neck` `z-index` ya `3`. - -# --hints-- - -Kichaguzi chako cha `#guitar-neck` kinafaa kuwa na sifa ya `z-index` iliyowekwa kuwa `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index e292323dd1c..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: Hatua ya 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Wakati wa kupamba vipengele kwa darasa la `eyes`. Tumia kichaguzi cha darasa kuweka `width` kuwa `35px`, `height` kuwa `20px`, `background-color` kuwa `#8B4513`, na `border-radius` kuwa `20px 50%`. - -# --hints-- - -Unapaswa kuunda kichaguzi cha `.eyes`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -Kichaguzi chako cha `.eyes` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `35px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -Kichaguzi chako cha `.eyes` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -Kichaguzi chako cha `.eyes` kinafaa kuwa na sifa ya `background-color` iliyowekwa kuwa `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -Kichaguzi chako cha `.eyes` kinafaa kuwa na sifa ya `border-radius` iliyowekwa kuwa `20px 50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index 6fc577bc14f..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: Hatua ya 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Lenga `class` yenye thamani `right` na uweke `position` kuwa `absolute`, `top` kuwa `15px`, na `right` kuwa `30px`. - -# --hints-- - -Unapaswa kuunda kichaguzi cha `.right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -Kichaguzi chako cha `.right` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -Kichaguzi chako cha `.right` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -Kichaguzi chako cha `.right` kinafaa kuwa na sifa ya `right` iliyowekwa kuwa `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index 0706ea2c3fa..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: Hatua ya 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Kwa `class` yenye thamani `left`, tengeneza kichaguzi na uweke `position` kuwa `absolute`, `top` kuwa `15px`, na `left` kuwa `30px`. - -# --hints-- - -Unapaswa kuunda kichaguzi kipya cha `.left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -Kichaguzi chako cha `.left` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -Kichaguzi chako cha `.left` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -Kichaguzi chako cha `.left` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index 65e13c23f85..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: Hatua ya 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Hatua moja ya mwisho. Aikoni za FontAwesome ni ndogo sana. Lenga vyote kwa kichaguzi cha darasa cha `fas`, na uweke `font-size` kuwa `30px`. - -Kwa hayo, mchoro wako wa Picasso umekamilika! - -# --hints-- - -Unapaswa kuunda kichaguzi cha `.fas`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -Kichaguzi chako cha `.fas` kinafaa kuwa na sifa ya `font-size` iliyowekwa kuwa `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index 42e03951cdd..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: Hatua ya 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Endelea na uunganishe faili yako ya CSS sasa, ingawa bado hujaandika CSS yoyote. - -Ongeza kipengele cha `link` kilicho na `rel` ya `stylesheet` na `href` ya `styles.css`. - -# --hints-- - - -Msimbo wako unapaswa kuwa na kipengele cha `link`. - -```js -assert.match(code, / link')); -``` - -Kipengele chako cha `link` kinafaa kuwa na sifa ya `rel` yenye thamani `stylesheet`. - -```js -const link_element = document.querySelector('link'); -const rel = link_element.getAttribute("rel"); -assert.equal(rel, "stylesheet"); -``` - -Kipengele chako cha `link` kinafaa kuwa na sifa ya `href` yenye thamani `styles.css`. - -```js -const link = document.querySelector('link'); -assert.equal(link.dataset.href, "styles.css"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index e80f17d6bdf..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: Hatua ya 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Rekebisha mpangilio wa vipengele vya `.triangle` kuwa `display` ya `inline-block`. - -# --hints-- - -Kichaguzi chako cha `.triangle` kinapaswa kuwa na sifa ya `display` iliyowekwa kuwa `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index 61604d41388..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: Hatua ya 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Vipe vipengele vyako vya `.triangle` rangi sahihi. Weka `border-top-color`, `border-bottom-color`, na `border-left-color` kuwa `transparent`. Weka `border-right-color` kuwa `Gold`. - -# --hints-- - -Kichaguzi chako cha `.triangle` kinapaswa kuwa na sifa ya `border-top-color` iliyowekwa kuwa `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -Kichaguzi chako cha `.triangle` kinapaswa kuwa na sifa ya `border-bottom-color` iliyowekwa kuwa `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -Kichaguzi chako cha `.triangle` kinapaswa kuwa na sifa ya `border-left-color` iliyowekwa kuwa `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -Kichaguzi chako cha `.triangle` kinafaa kuwa na sifa ya `border-right-color` iliyowekwa kuwa `Gold`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index 5eb5be336db..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: Hatua ya 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -Tengeneza mtindo wa mpaka wa vipengele vyako vya `.triangle`. Weka `border-style` kuwa `solid` na `border-width` kuwa `42px 45px 45px 0`. - -# --hints-- - -Kichaguzi chako cha `.triangle` kinafaa kuwa na sifa ya `border-style` iliyowekwa kuwa `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -Kichaguzi chako cha `.triangle` kinafaa kuwa na sifa ya `border-width` iliyowekwa kuwa `42px 45px 45px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index 4a8b3969b64..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: Hatua ya 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Unda kichaguzi cha class cha vipengele vyenye class ya `triangle`. Weka `width` kuwa `0` na `height` kuwa `0`. - -# --hints-- - -Unapaswa kuunda kichaguzi cha `.triangle`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -Kichaguzi chako cha `.triangle` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -Kichaguzi chako cha `.triangle` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index 23a3c2427d8..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: Hatua ya 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Lenga kipengele chenye id `triangles` kwa kutumia kichaguzi cha id. Weka `width` kuwa `250px` na `height` kuwa `550px`. - -# --hints-- - -Unapaswa kuongeza kichaguzi cha `#triangles`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -Kichaguzi chako cha `#triangles` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -Kichaguzi chako cha `#triangles` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index 15f9e8425a0..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: Hatua ya 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Sasa tumia kichaguzi cha id kwa `guitar`. Weka `width` kuwa `100%` na `height` kuwa `100px`. - -# --hints-- - -Unapaswa kuunda kichaguzi cha `#guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -Kichaguzi chako cha `#guitar` kinafaa kuwa na sifa ya `width` iliyowekwa kuwa `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -Kichaguzi chako cha `#guitar` kinafaa kuwa na sifa ya `height` iliyowekwa kuwa `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index b0169083263..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: Hatua ya 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -Katika kichaguzi sawa cha `#guitar`, weka `position` kuwa `absolute`, `top` kuwa `120px`, na `left` kuwa `0px`. - -# --hints-- - -Kichaguzi chako cha `#guitar` kinafaa kuwa na sifa ya `position` iliyowekwa kuwa `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -Kichaguzi chako cha `#guitar` kinafaa kuwa na sifa ya `top` iliyowekwa kuwa `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -Kichaguzi chako cha `#guitar` kinafaa kuwa na sifa ya `left` iliyowekwa kuwa `0px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index c2e776ae497..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: Hatua ya 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -Ipe sheria ya `#guitar` `z-index` ya `3`. - -# --hints-- - -Kichaguzi chako cha `#guitar` kinafaa kuwa na sifa ya `z-index` iliyowekwa kuwa `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - -
                                                                      -
                                                                      - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index 8818c4a9d41..00000000000 --- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: Hatua ya 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Weka `border-width` ya `#black-hat` kuwa `150px 0 0 300px`. - -# --hints-- - -Kichaguzi chako cha `#black-hat` kinafaa kuwa na sifa ya `border-width` iliyowekwa kuwa `150px 0 0 300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      -
                                                                      - - - - -
                                                                      -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md deleted file mode 100644 index 46c493ad260..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 56533eb9ac21ba0edf2244e2 -title: Build a Caesars Cipher -challengeType: 5 -forumTopicId: 16003 -dashedName: build-a-caesars-cipher ---- - -# --description-- - -One of the simplest and most widely known ciphers is a Caesar cipher, also known as a shift cipher. In a shift cipher the meanings of the letters are shifted by some set amount. - -A common modern use is the ROT13 cipher, where the values of the letters are shifted by 13 places. Thus `A ↔ N`, `B ↔ O` and so on. - -Write a function which takes a ROT13 encoded string as input and returns a decoded string. - -All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on. - -# --hints-- - -`rot13("SERR PBQR PNZC")` should decode to the string `FREE CODE CAMP` - -```js -assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); -``` - -`rot13("SERR CVMMN!")` should decode to the string `FREE PIZZA!` - -```js -assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); -``` - -`rot13("SERR YBIR?")` should decode to the string `FREE LOVE?` - -```js -assert(rot13('SERR YBIR?') === 'FREE LOVE?'); -``` - -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` should decode to the string `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` - -```js -assert( - rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === - 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function rot13(str) { - return str; -} - -rot13("SERR PBQR PNZC"); -``` - -# --solutions-- - -```js -var lookup = { - 'A': 'N','B': 'O','C': 'P','D': 'Q', - 'E': 'R','F': 'S','G': 'T','H': 'U', - 'I': 'V','J': 'W','K': 'X','L': 'Y', - 'M': 'Z','N': 'A','O': 'B','P': 'C', - 'Q': 'D','R': 'E','S': 'F','T': 'G', - 'U': 'H','V': 'I','W': 'J','X': 'K', - 'Y': 'L','Z': 'M' -}; - -function rot13(encodedStr) { - var codeArr = encodedStr.split(""); // String to Array - var decodedArr = []; // Your Result goes here - // Only change code below this line - - decodedArr = codeArr.map(function(letter) { - if(lookup.hasOwnProperty(letter)) { - letter = lookup[letter]; - } - return letter; - }); - - // Only change code above this line - return decodedArr.join(""); // Array to String -} -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md deleted file mode 100644 index c98d513eb13..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: aa2e6f85cab2ab736c9a9b24 -title: Build A Cash Register -challengeType: 5 -forumTopicId: 16012 -dashedName: build-a-cash-register ---- - -# --description-- - -Design a cash register drawer function `checkCashRegister()` that accepts purchase price as the first argument (`price`), payment as the second argument (`cash`), and cash-in-drawer (`cid`) as the third argument. - -`cid` is a 2D array listing available currency. - -The `checkCashRegister()` function should always return an object with a `status` key and a `change` key. - -Return `{status: "INSUFFICIENT_FUNDS", change: []}` if cash-in-drawer is less than the change due, or if you cannot return the exact change. - -Return `{status: "CLOSED", change: [...]}` with cash-in-drawer as the value for the key `change` if it is equal to the change due. - -Otherwise, return `{status: "OPEN", change: [...]}`, with the change due in coins and bills, sorted in highest to lowest order, as the value of the `change` key. - -
                                                                      Currency UnitAmount
                                                                      Penny$0.01 (PENNY)
                                                                      Nickel$0.05 (NICKEL)
                                                                      Dime$0.1 (DIME)
                                                                      Quarter$0.25 (QUARTER)
                                                                      Dollar$1 (ONE)
                                                                      Five Dollars$5 (FIVE)
                                                                      Ten Dollars$10 (TEN)
                                                                      Twenty Dollars$20 (TWENTY)
                                                                      One-hundred Dollars$100 (ONE HUNDRED)
                                                                      - -See below for an example of a cash-in-drawer array: - -```js -[ - ["PENNY", 1.01], - ["NICKEL", 2.05], - ["DIME", 3.1], - ["QUARTER", 4.25], - ["ONE", 90], - ["FIVE", 55], - ["TEN", 20], - ["TWENTY", 60], - ["ONE HUNDRED", 100] -] -``` - -# --hints-- - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return an object. - -```js -assert.deepEqual( - Object.prototype.toString.call( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]) - ), - '[object Object]' -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return `{status: "OPEN", change: [["QUARTER", 0.5]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { status: 'OPEN', change: [['QUARTER', 0.5]] } -); -``` - -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. - -```js -assert.deepEqual( - checkCashRegister(3.26, 100, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { - status: 'OPEN', - change: [ - ['TWENTY', 60], - ['TEN', 20], - ['FIVE', 15], - ['ONE', 1], - ['QUARTER', 0.5], - ['DIME', 0.2], - ['PENNY', 0.04] - ] - } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 1], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { - status: 'CLOSED', - change: [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ] - } -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function checkCashRegister(price, cash, cid) { - let change; - return change; -} - -checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); -``` - -# --solutions-- - -```js -const denom = [ - { name: "ONE HUNDRED", val: 100 }, - { name: "TWENTY", val: 20 }, - { name: "TEN", val: 10 }, - { name: "FIVE", val: 5 }, - { name: "ONE", val: 1 }, - { name: "QUARTER", val: 0.25 }, - { name: "DIME", val: 0.1 }, - { name: "NICKEL", val: 0.05 }, - { name: "PENNY", val: 0.01 }, -]; - -function checkCashRegister(price, cash, cid) { - const output = { status: null, change: [] }; - let change = cash - price; - const register = cid.reduce( - function (acc, curr) { - acc.total += curr[1]; - acc[curr[0]] = curr[1]; - return acc; - }, - { total: 0 } - ); - if (register.total === change) { - output.status = "CLOSED"; - output.change = cid; - return output; - } - if (register.total < change) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - const change_arr = denom.reduce(function (acc, curr) { - let value = 0; - while (register[curr.name] > 0 && change >= curr.val) { - change -= curr.val; - register[curr.name] -= curr.val; - value += curr.val; - change = Math.round(change * 100) / 100; - } - if (value > 0) { - acc.push([curr.name, value]); - } - return acc; - }, []); - if (change_arr.length < 1 || change > 0) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - output.status = "OPEN"; - output.change = change_arr; - return output; -} -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md deleted file mode 100644 index 5f7ca896a8c..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: aaa48de84e1ecc7c742e1124 -title: Build A Palindrome Checker -challengeType: 5 -forumTopicId: 16004 -dashedName: build-a-palindrome-checker ---- - -# --description-- - -Return `true` if the given string is a palindrome. Otherwise, return `false`. - -A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing. - -**Note:** You'll need to remove **all non-alphanumeric characters** (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes. - -We'll pass strings with varying formats, such as `racecar`, `RaceCar`, and `race CAR` among others. - -We'll also pass strings with special symbols, such as `2A3*3a2`, `2A3 3a2`, and `2_A3*3#A2`. - -# --hints-- - -`palindrome("eye")` should return a boolean. - -```js -assert(typeof palindrome('eye') === 'boolean'); -``` - -`palindrome("eye")` should return `true`. - -```js -assert(palindrome('eye') === true); -``` - -`palindrome("_eye")` should return `true`. - -```js -assert(palindrome('_eye') === true); -``` - -`palindrome("race car")` should return `true`. - -```js -assert(palindrome('race car') === true); -``` - -`palindrome("not a palindrome")` should return `false`. - -```js -assert(palindrome('not a palindrome') === false); -``` - -`palindrome("A man, a plan, a canal. Panama")` should return `true`. - -```js -assert(palindrome('A man, a plan, a canal. Panama') === true); -``` - -`palindrome("never odd or even")` should return `true`. - -```js -assert(palindrome('never odd or even') === true); -``` - -`palindrome("nope")` should return `false`. - -```js -assert(palindrome('nope') === false); -``` - -`palindrome("almostomla")` should return `false`. - -```js -assert(palindrome('almostomla') === false); -``` - -`palindrome("My age is 0, 0 si ega ym.")` should return `true`. - -```js -assert(palindrome('My age is 0, 0 si ega ym.') === true); -``` - -`palindrome("1 eye for of 1 eye.")` should return `false`. - -```js -assert(palindrome('1 eye for of 1 eye.') === false); -``` - -`palindrome("0_0 (: /-\ :) 0-0")` should return `true`. - -```js -assert(palindrome('0_0 (: /- :) 0-0') === true); -``` - -`palindrome("five|\_/|four")` should return `false`. - -```js -assert(palindrome('five|_/|four') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function palindrome(str) { - return true; -} - -palindrome("eye"); -``` - -# --solutions-- - -```js -function palindrome(str) { - var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); - var aux = string.split(''); - if (aux.join('') === aux.reverse().join('')){ - return true; - } - - return false; -} -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md deleted file mode 100644 index 06f0c991879..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: a7f4d8f2483413a6ce226cac -title: Build A Roman Numeral Converter -challengeType: 5 -forumTopicId: 16044 -dashedName: build-a-roman-numeral-converter ---- - -# --description-- - -Convert the given number into a roman numeral. - -| Roman numerals | Arabic numerals | -| -------------- | --------------- | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| C | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -All roman numerals answers should be provided in upper-case. - -# --hints-- - -`convertToRoman(2)` should return the string `II`. - -```js -assert.deepEqual(convertToRoman(2), 'II'); -``` - -`convertToRoman(3)` should return the string `III`. - -```js -assert.deepEqual(convertToRoman(3), 'III'); -``` - -`convertToRoman(4)` should return the string `IV`. - -```js -assert.deepEqual(convertToRoman(4), 'IV'); -``` - -`convertToRoman(5)` should return the string `V`. - -```js -assert.deepEqual(convertToRoman(5), 'V'); -``` - -`convertToRoman(9)` should return the string `IX`. - -```js -assert.deepEqual(convertToRoman(9), 'IX'); -``` - -`convertToRoman(12)` should return the string `XII`. - -```js -assert.deepEqual(convertToRoman(12), 'XII'); -``` - -`convertToRoman(16)` should return the string `XVI`. - -```js -assert.deepEqual(convertToRoman(16), 'XVI'); -``` - -`convertToRoman(29)` should return the string `XXIX`. - -```js -assert.deepEqual(convertToRoman(29), 'XXIX'); -``` - -`convertToRoman(44)` should return the string `XLIV`. - -```js -assert.deepEqual(convertToRoman(44), 'XLIV'); -``` - -`convertToRoman(45)` should return the string `XLV`. - -```js -assert.deepEqual(convertToRoman(45), 'XLV'); -``` - -`convertToRoman(68)` should return the string `LXVIII` - -```js -assert.deepEqual(convertToRoman(68), 'LXVIII'); -``` - -`convertToRoman(83)` should return the string `LXXXIII` - -```js -assert.deepEqual(convertToRoman(83), 'LXXXIII'); -``` - -`convertToRoman(97)` should return the string `XCVII` - -```js -assert.deepEqual(convertToRoman(97), 'XCVII'); -``` - -`convertToRoman(99)` should return the string `XCIX` - -```js -assert.deepEqual(convertToRoman(99), 'XCIX'); -``` - -`convertToRoman(400)` should return the string `CD` - -```js -assert.deepEqual(convertToRoman(400), 'CD'); -``` - -`convertToRoman(500)` should return the string `D` - -```js -assert.deepEqual(convertToRoman(500), 'D'); -``` - -`convertToRoman(501)` should return the string `DI` - -```js -assert.deepEqual(convertToRoman(501), 'DI'); -``` - -`convertToRoman(649)` should return the string `DCXLIX` - -```js -assert.deepEqual(convertToRoman(649), 'DCXLIX'); -``` - -`convertToRoman(798)` should return the string `DCCXCVIII` - -```js -assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); -``` - -`convertToRoman(891)` should return the string `DCCCXCI` - -```js -assert.deepEqual(convertToRoman(891), 'DCCCXCI'); -``` - -`convertToRoman(1000)` should return the string `M` - -```js -assert.deepEqual(convertToRoman(1000), 'M'); -``` - -`convertToRoman(1004)` should return the string `MIV` - -```js -assert.deepEqual(convertToRoman(1004), 'MIV'); -``` - -`convertToRoman(1006)` should return the string `MVI` - -```js -assert.deepEqual(convertToRoman(1006), 'MVI'); -``` - -`convertToRoman(1023)` should return the string `MXXIII` - -```js -assert.deepEqual(convertToRoman(1023), 'MXXIII'); -``` - -`convertToRoman(2014)` should return the string `MMXIV` - -```js -assert.deepEqual(convertToRoman(2014), 'MMXIV'); -``` - -`convertToRoman(3999)` should return the string `MMMCMXCIX` - -```js -assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); -``` - -# --seed-- - -## --seed-contents-- - -```js -function convertToRoman(num) { - return num; -} - -convertToRoman(36); -``` - -# --solutions-- - -```js -function convertToRoman(num) { - var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; - var res = []; - ref.forEach(function(p) { - while (num >= p[1]) { - res.push(p[0]); - num -= p[1]; - } - }); - return res.join(''); -} -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md deleted file mode 100644 index 282f77b4be9..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: aff0395860f5d3034dc0bfc9 -title: Build a Telephone Number Validator -challengeType: 5 -forumTopicId: 16090 -dashedName: build-a-telephone-number-validator ---- - -# --description-- - -Return `true` if the passed string looks like a valid US phone number. - -The user may fill out the form field any way they choose as long as it has the format of a valid US number. The following are examples of valid formats for US numbers (refer to the tests below for other variants): - -
                                                                      555-555-5555
                                                                      (555)555-5555
                                                                      (555) 555-5555
                                                                      555 555 5555
                                                                      5555555555
                                                                      1 555 555 5555
                                                                      - -For this challenge you will be presented with a string such as `800-692-7753` or `8oo-six427676;laskdjf`. Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is `1`. Return `true` if the string is a valid US phone number; otherwise return `false`. - -# --hints-- - -`telephoneCheck("555-555-5555")` should return a boolean. - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` should return `true`. - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` should return `true`. - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` should return `true`. - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` should return `true`. - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` should return `true`. - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` should return `true`. - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` should return `false`. - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` should return `false`. - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` should return `false`. - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` should return `true`. - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` should return `true`. - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` should return `false`. - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` should return `false`. - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` should return `false`. - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` should return `false`. - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` should return `false`. - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` should return `false`. - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` should return `false`. - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` should return `false`. - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` should return `false`. - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` should return `false`. - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` should return `false`. - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` should return `false`. - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` should return `false`. - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` should return `false`. - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index 63ecefac153..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -You have been declaring your variables with the `var` keyword. However, in modern JavaScript it is best practice to use the `let` keyword instead. This fixes several unusual behaviors with `var` that can make your code difficult to debug. - -Change all of your `var` keywords to `let`. - -# --hints-- - -You should not have any `var` keywords in your code. - -```js -assert.notMatch(code, /var/); -``` - -You should use the `let` keyword to declare your `xp` variable. - -```js -assert.match(code, /let xp/); -``` - -You should use the `let` keyword to declare your `health` variable. - -```js -assert.match(code, /let health/); -``` - -You should use the `let` keyword to declare your `gold` variable. - -```js -assert.match(code, /let gold/); -``` - -You should use the `let` keyword to declare your `currentWeapon` variable. - -```js -assert.match(code, /let currentWeapon/); -``` - -You should not change the values of your variables. - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - - -
                                                                      -
                                                                      - XP: 0 - Health: 100 - Gold: 50 -
                                                                      -
                                                                      - - - -
                                                                      -
                                                                      - Monster Name: - Health: -
                                                                      -
                                                                      - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                                      -
                                                                      - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js ---fcc-editable-region-- -var xp = 0; -var health = 100; -var gold = 50; -var currentWeapon = 0; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md deleted file mode 100644 index cd564871491..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 62a8f2bc37675e77d5835235 -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -JavaScript has a conditional operator called the ternary operator. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`. - -Here is an example of an `if-else` expression changed to a ternary: - -```js -if (num > 5) { - bigger() -} else { - smaller() -} - -num > 5 ? bigger() : smaller(); -``` - -Change your new `if-else` expression to a ternary. - -# --hints-- - -You should remove the `if` and `else` from your `else if` block. - -```js -const block = attack.toString().split("else if"); -assert.notMatch(block[1], /if/); -assert.notMatch(block[1], /else/); -``` - -You should check if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2/); -``` - -Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); -``` - -Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - -
                                                                      -
                                                                      - XP: 0 - Health: 100 - Gold: 50 -
                                                                      -
                                                                      - - - -
                                                                      -
                                                                      - Monster Name: - Health: -
                                                                      -
                                                                      - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                                      -
                                                                      - - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js -let xp = 0; -let health = 100; -let gold = 50; -let currentWeapon = 0; -let fighting; -let monsterHealth; -let inventory = ["stick"]; - -const button1 = document.querySelector('#button1'); -const button2 = document.querySelector("#button2"); -const button3 = document.querySelector("#button3"); -const text = document.querySelector("#text"); -const xpText = document.querySelector("#xpText"); -const healthText = document.querySelector("#healthText"); -const goldText = document.querySelector("#goldText"); -const monsterStats = document.querySelector("#monsterStats"); -const monsterName = document.querySelector("#monsterName"); -const monsterHealthText =document.querySelector("#monsterHealth"); -const weapons = [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]; -const monsters = [ - { - name: "slime", - level: 2, - health: 15 - }, - { - name: "fanged beast", - level: 8, - health: 60 - }, - { - name: "dragon", - level: 20, - health: 300 - } -] -const locations = [ - { - name: "town square", - "button text": ["Go to store", "Go to cave", "Fight dragon"], - "button functions": [goStore, goCave, fightDragon], - text: "You are in the town square. You see a sign that says \"Store\"." - }, - { - name: "store", - "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], - "button functions": [buyHealth, buyWeapon, goTown], - text: "You enter the store." - }, - { - name: "cave", - "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], - "button functions": [fightSlime, fightBeast, goTown], - text: "You enter the cave. You see some monsters." - }, - { - name: "fight", - "button text": ["Attack", "Dodge", "Run"], - "button functions": [attack, dodge, goTown], - text: "You are fighting a monster." - }, - { - name: "kill monster", - "button text": ["Go to town square", "Go to town square", "Go to town square"], - "button functions": [goTown, goTown, goTown], - text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' - }, - { - name: "lose", - "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], - "button functions": [restart, restart, restart], - text: "You die. ☠️" - } -]; - -// initialize buttons -button1.onclick = goStore; -button2.onclick = goCave; -button3.onclick = fightDragon; - -function update(location) { - monsterStats.style.display = "none"; - button1.innerText = location["button text"][0]; - button2.innerText = location["button text"][1]; - button3.innerText = location["button text"][2]; - button1.onclick = location["button functions"][0]; - button2.onclick = location["button functions"][1]; - button3.onclick = location["button functions"][2]; - text.innerText = location.text; -} - -function goTown() { - update(locations[0]); -} - -function goStore() { - update(locations[1]); -} - -function goCave() { - update(locations[2]); -} - -function buyHealth() { - if (gold >= 10) { - gold -= 10; - health += 10; - goldText.innerText = gold; - healthText.innerText = health; - } else { - text.innerText = "You do not have enough gold to buy health."; - } -} - -function buyWeapon() { - if (currentWeapon < weapons.length - 1) { - if (gold >= 30) { - gold -= 30; - currentWeapon++; - goldText.innerText = gold; - let newWeapon = weapons[currentWeapon].name; - text.innerText = "You now have a " + newWeapon + "."; - inventory.push(newWeapon); - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "You do not have enough gold to buy a weapon."; - } - } else { - text.innerText = "You already have the most powerful weapon!"; - button2.innerText = "Sell weapon for 15 gold"; - button2.onclick = sellWeapon; - } -} - -function sellWeapon() { - if (inventory.length > 1) { - gold += 15; - goldText.innerText = gold; - let currentWeapon = inventory.shift(); - text.innerText = "You sold a " + currentWeapon + "."; - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "Don't sell your only weapon!"; - } -} - -function fightSlime() { - fighting = 0; - goFight(); -} - -function fightBeast() { - fighting = 1; - goFight(); -} - -function fightDragon() { - fighting = 2; - goFight(); -} - -function goFight() { - update(locations[3]); - monsterHealth = monsters[fighting].health; - monsterStats.style.display = "block"; - monsterName.innerText = monsters[fighting].name; - monsterHealthText.innerText = monsterHealth; -} - ---fcc-editable-region-- -function attack() { - text.innerText = "The " + monsters[fighting].name + " attacks."; - text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; - health -= monsters[fighting].level; - monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; - healthText.innerText = health; - monsterHealthText.innerText = monsterHealth; - if (health <= 0) { - lose(); - } else if (monsterHealth <= 0) { - if (fighting === 2) { - winGame(); - } else { - defeatMonster(); - } - } -} ---fcc-editable-region-- - -function dodge() { - text.innerText = "You dodge the attack from the " + monsters[fighting].name; -} - -function defeatMonster() { - gold += Math.floor(monsters[fighting].level * 6.7); - xp += monsters[fighting].level; - goldText.innerText = gold; - xpText.innerText = xp; - update(locations[4]); -} - -function lose() { - update(locations[5]); -} - -function restart() { - xp = 0; - health = 100; - gold = 50; - currentWeapon = 0; - inventory = ["stick"]; - goldText.innerText = gold; - healthText.innerText = health; - xpText.innerText = xp; - goTown(); -} -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md new file mode 100644 index 00000000000..d178d5a5a2b --- /dev/null +++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -0,0 +1,682 @@ +--- +id: 659b0093d7db5a1a1122b7bd +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +```js +const animals = ["dog", "cat", "horse"]; +animals.indexOf("cat") // 1 +``` + +Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`. + +# --hints-- + +You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/) +``` + +You should pass in `userData.currentSong` into the `indexOf()` method. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +

                                                                      freeCodeCamp

                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      + song cover art +
                                                                      +
                                                                      +
                                                                      +

                                                                      +

                                                                      +
                                                                      +
                                                                      + + + + + +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +

                                                                      Playlist

                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                      +
                                                                        +
                                                                        +
                                                                        + + + +``` + +```css +:root { + /* colors */ + --primary-color: #dfdfe2; + --secondary-color: #ffffff; + --app-background-color: #4d4d62; + --background-color: #1b1b32; + --foreground-color: #3b3b4f; + --highlight-color: #f1be32; + + /* font sizes */ + --root-font-size: 16px; + font-size: var(--root-font-size); + + /* font-families */ + --font-headline: "Roboto Mono", monospace; + --font-family: "Lato", sans-serif; +} + +*, +*::after, +*::before { + box-sizing: border-box; +} + +body { + background-color: var(--app-background-color); + color: var(--primary-color); + font-family: var(--font-family); +} + +h1 { + font-size: 1.125rem; + line-height: 1.6; +} + +h2 { + font-size: var(--root-font-size); +} + +ul { + margin: 0; +} + +.container { + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; +} + +.player, +.playlist { + width: 450px; + background-color: var(--background-color); + border: 3px solid var(--foreground-color); +} + +.player { + height: 260px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +.player-bar, +.playlist-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + width: 100%; + height: 30px; + background-color: var(--foreground-color); +} + +.parallel-lines { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + padding: 0 5px; +} + +.parallel-lines > div { + height: 2px; + width: 100%; + min-width: 75px; + background-color: var(--highlight-color); +} + +.fcc-title, +.playlist-title { + color: var(--secondary-color); + margin: 0 10px; + font-family: var(--font-headline); +} + +.player-content { + display: flex; + background-color: var(--foreground-color); + width: 430px; + height: 200px; + column-gap: 13px; + align-items: center; + justify-content: center; +} + +#player-album-art { + background-color: var(--secondary-color); + border: 6px solid var(--background-color); +} + +#player-album-art img { + width: 150px; + display: block; +} + +.player-display { + display: flex; + flex-direction: column; + row-gap: 20px; + padding: 14px; + background-color: var(--background-color); + height: 153px; + width: 226px; +} + +.player-display-song-artist { + height: 80px; +} + +.player-buttons svg { + fill: var(--primary-color); +} + +.playing > svg { + fill: var(--highlight-color); +} + +.player-buttons { + display: flex; + justify-content: space-around; +} + +button { + background: transparent; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: var(--root-font-size); + outline-color: var(--highlight-color); + text-align: center; +} + +.playlist-song { + outline-color: var(--highlight-color); +} + +.playlist li:not(:last-child) { + border-bottom: 1px solid var(--background-color); +} + +button:focus, +.playlist-song:focus { + outline-style: dashed; + outline-width: 2px; +} + +/* Playlist */ +.playlist { + height: auto; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +#playlist-songs { + width: 430px; + height: 100%; + background-color: var(--foreground-color); + display: flex; + flex-direction: column; + row-gap: 8px; + padding: 8px 9px; + visibility: visible; + justify-content: start; + list-style: none; +} + +.playlist-song { + display: flex; + height: 55px; + justify-content: space-between; + align-items: center; + padding: 5px; +} + +[aria-current="true"] { + background-color: var(--background-color); +} + +[aria-current="true"] p { + color: var(--highlight-color); +} + +.playlist-song-info { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + column-gap: 7px; + padding: 5px 0; + font-family: var(--font-family); +} + +#player-song-title, +#player-song-artist { + margin: 0; +} + +#player-song-artist { + color: var(--highlight-color); + font-size: 0.75rem; +} + +#player-song-title { + font-size: 1.125rem; +} + +.playlist-song-title { + font-size: 0.85rem; + width: 241px; + text-align: left; +} + +.playlist-song-artist { + font-size: 0.725rem; + width: 80px; +} + +.playlist-song-duration { + font-size: 0.725rem; + margin: auto; + font-family: var(--font-headline); + width: 30px; +} + +.playlist-song-delete { + padding: 0; + width: 20px; + height: 20px; +} + +.playlist-song-delete, +.playlist-song-delete { + fill: var(--foreground-color); +} + +.playlist-song-delete:hover circle, +.playlist-song-delete:focus circle { + fill: #ff0000; +} + +@media (max-width: 700px) { + .player, + .playlist { + width: 300px; + } + + .player { + height: 340px; + } + + #playlist-songs { + height: 280px; + padding: 5px 6px; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-color: var(--background-color) var(--secondary-color); + scrollbar-width: thin; + } + + #playlist-songs::-webkit-scrollbar { + width: 5px; + } + + #playlist-songs::-webkit-scrollbar-track { + background: var(--background-color); + } + + #playlist-songs::-webkit-scrollbar-thumb { + background: var(--secondary-color); + } + + h1 { + font-size: 0.813rem; + } + + h2 { + font-size: 0.75rem; + } + + .player-bar, + .playlist-bar, + .player-content, + #playlist-songs { + width: 280px; + } + + .playlist-song { + justify-content: space-between; + } + + .playlist-song-title { + width: 140px; + } + + .playlist-song-artist { + width: 40px; + } + + .playlist-song-duration > button { + padding: 0; + } + + .player-content { + display: inline; + position: relative; + justify-items: center; + height: 100%; + } + + #player-album-art { + z-index: -100; + height: 280px; + box-shadow: none; + background: #000; + } + + #player-album-art img { + width: 100%; + opacity: 0.6; + } + + .player-display-song-artist { + padding: 0 10px; + } + + .player-display-song-artist > p { + white-space: pre-wrap; + } + + .player-display { + position: absolute; + width: 100%; + z-index: 1000; + background-color: transparent; + top: 0; + height: 280px; + justify-content: space-between; + text-align: center; + } +} +``` + +```js +const playlistSongs = document.getElementById("playlist-songs"); +const playButton = document.getElementById("play"); +const pauseButton = document.getElementById("pause"); +const nextButton = document.getElementById("next"); +const previousButton = document.getElementById("previous"); +const shuffleButton = document.getElementById("shuffle"); + +const allSongs = [ + { + id: 0, + title: "Scratching The Surface", + artist: "Quincy Larson", + duration: "4:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3", + }, + { + id: 1, + title: "Can't Stay Down", + artist: "Quincy Larson", + duration: "4:15", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3", + }, + { + id: 2, + title: "Still Learning", + artist: "Quincy Larson", + duration: "3:51", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3", + }, + { + id: 3, + title: "Cruising for a Musing", + artist: "Quincy Larson", + duration: "3:34", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3", + }, + { + id: 4, + title: "Never Not Favored", + artist: "Quincy Larson", + duration: "3:35", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3", + }, + { + id: 5, + title: "From the Ground Up", + artist: "Quincy Larson", + duration: "3:12", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3", + }, + { + id: 6, + title: "Walking on Air", + artist: "Quincy Larson", + duration: "3:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3", + }, + { + id: 7, + title: "Can't Stop Me. Can't Even Slow Me Down.", + artist: "Quincy Larson", + duration: "3:52", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3", + }, + { + id: 8, + title: "The Surest Way Out is Through", + artist: "Quincy Larson", + duration: "3:10", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3", + }, + { + id: 9, + title: "Chasing That Feeling", + artist: "Quincy Larson", + duration: "2:43", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3", + }, +]; + +const audio = new Audio(); +let userData = { + songs: [...allSongs], + currentSong: null, + songCurrentTime: 0, +}; + +const playSong = (id) => { + const song = userData?.songs.find((song) => song.id === id); + audio.src = song.src; + audio.title = song.title; + + if (userData?.currentSong === null || userData?.currentSong.id !== song.id) { + audio.currentTime = 0; + } else { + audio.currentTime = userData.songCurrentTime; + } + userData.currentSong = song; + playButton.classList.add("playing"); + + audio.play(); +}; + +const pauseSong = () => { + userData.songCurrentTime = audio.currentTime; + + playButton.classList.remove("playing"); + audio.pause(); +}; + +const renderSongs = (array) => { + const songsHTML = array + .map((song)=> { + return ` +
                                                                      • + + +
                                                                        • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +const getCurrentSongIndex = () => { + +} +--fcc-editable-region-- + +playButton.addEventListener("click", () => { + if (userData?.currentSong === null) { + playSong(userData?.songs[0].id); + } else { + playSong(userData?.currentSong.id); + } +}); + +pauseButton.addEventListener("click", pauseSong); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md deleted file mode 100644 index d65212aca6b..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 63ec14d1c216aa063f0be4af -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive. - -To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively. - -Since these will not change, remember to use `const` to declare them. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#products-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#dessert-card-container` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md deleted file mode 100644 index 98110e0bc8a..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 63ec19978a066607e23439f8 -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#clear-cart-btn` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md deleted file mode 100644 index b3616baccb4..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 63ec1a16f930b108b8a76806 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively. - -# --hints-- - -You should use `document.getElementById()` to get the `#total-items` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#subtotal` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#taxes` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should use `document.getElementById()` to get the `#total` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md deleted file mode 100644 index a973654d0d6..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 63ec1bbf5584390a7d08d41f -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`. - -Then, use `let` to declare a variable named `isCartShowing` and set it to `false`. - -# --hints-- - -You should use `document.getElementById()` to get the `#show-hide-cart` element. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should use `let` to declare a variable named `isCartShowing`. - -```js -assert.match(code, /let\s+isCartShowing/); -``` - -You should set the `isCartShowing` variable to `false`. - -```js -assert.match(code, /let\s+isCartShowing\s*=\s*false/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md deleted file mode 100644 index 172acaf6e3f..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 63ec1cb59f2a4c0be5b6dfa0 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products. - -# --hints-- - -You should declare a `products` variable with `const`. - -```js -assert.match(code, /const\s+products/); -``` - -You should set the `products` variable to an empty array. - -```js -assert.match(code, /const\s+products\s*=\s*\[\s*\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md deleted file mode 100644 index 0815e4ecb06..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 63ec20a06fff670d37befbd9 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -You now need to start adding products. Before you do that, you need to consider the structure of your product data. A product will need a unique identifier to distinguish it from other products, a price so people know how much it costs, and a name so people know what they are buying. You should also add a category to each product. - -Add an object to your `products` array. Give this object an `id` property set to the number `1`, a `name` property set to `Vanilla Cupcakes (6 Pack)`, a `price` property set to the number `12.99`, and a `category` property set to `Cupcake`. - -# --hints-- - -Your products array should have one value. - -```js -assert.equal(products.length, 1); -``` - -Your products array should have an object as its first value. - -```js -assert.isObject(products[0]); -``` - -Your products array should have an object with an `id` property set to the number `1`. - -```js -assert.equal(products[0].id, 1); -``` - -Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`. - -```js -assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your products array should have an object with a `price` property set to the number `12.99`. - -```js -assert.equal(products[0].price, 12.99); -``` - -Your products array should have an object with a `category` property set to `Cupcake`. - -```js -assert.equal(products[0].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md deleted file mode 100644 index 30754019c8c..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md +++ /dev/null @@ -1,472 +0,0 @@ ---- -id: 63ec3287b182ec0efe8a3135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up. - -| `name` | `price` | `category` | -| ------------------------------ | ------- | ----------- | -| `French Macaroon` | `3.99` | `Macaroon` | -| `Pumpkin Cupcake` | `3.99` | `Cupcake` | -| `Chocolate Cupcake` | `5.99` | `Cupcake` | -| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` | -| `Strawberry Ice Cream` | `2.99` | `Ice Cream` | -| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` | -| `Strawberry Pretzel` | `4.99` | `Pretzel` | -| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` | -| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` | -| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` | -| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` | - -# --hints-- - -Your second object in the `products` array should have an `id` property set to the number `2`. - -```js -assert.equal(products[1].id, 2); -``` - -Your second object in the `products` array should have a `name` property set to `French Macaroon`. - -```js -assert.equal(products[1].name, 'French Macaroon'); -``` - -Your second object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[1].price, 3.99); -``` - -Your second object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[1].category, 'Macaroon'); -``` - -Your third object in the `products` array should have an `id` property set to the number `3`. - -```js -assert.equal(products[2].id, 3); -``` - -Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`. - -```js -assert.equal(products[2].name, 'Pumpkin Cupcake'); -``` - -Your third object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[2].price, 3.99); -``` - -Your third object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[2].category, 'Cupcake'); -``` - -Your fourth object in the `products` array should have an `id` property set to the number `4`. - -```js -assert.equal(products[3].id, 4); -``` - -Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`. - -```js -assert.equal(products[3].name, 'Chocolate Cupcake'); -``` - -Your fourth object in the `products` array should have a `price` property set to the number `5.99`. - -```js -assert.equal(products[3].price, 5.99); -``` - -Your fourth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[3].category, 'Cupcake'); -``` - -Your fifth object in the `products` array should have an `id` property set to the number `5`. - -```js -assert.equal(products[4].id, 5); -``` - -Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`. - -```js -assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)'); -``` - -Your fifth object in the `products` array should have a `price` property set to the number `10.99`. - -```js -assert.equal(products[4].price, 10.99); -``` - -Your fifth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[4].category, 'Pretzel'); -``` - -Your sixth object in the `products` array should have an `id` property set to the number `6`. - -```js -assert.equal(products[5].id, 6); -``` - -Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`. - -```js -assert.equal(products[5].name, 'Strawberry Ice Cream'); -``` - -Your sixth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[5].price, 2.99); -``` - -Your sixth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[5].category, 'Ice Cream'); -``` - -Your seventh object in the `products` array should have an `id` property set to the number `7`. - -```js -assert.equal(products[6].id, 7); -``` - -Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`. - -```js -assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)'); -``` - -Your seventh object in the `products` array should have a `price` property set to the number `9.99`. - -```js -assert.equal(products[6].price, 9.99); -``` - -Your seventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[6].category, 'Macaroon'); -``` - -Your eighth object in the `products` array should have an `id` property set to the number `8`. - -```js -assert.equal(products[7].id, 8); -``` - -Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`. - -```js -assert.equal(products[7].name, 'Strawberry Pretzel'); -``` - -Your eighth object in the `products` array should have a `price` property set to the number `4.99`. - -```js -assert.equal(products[7].price, 4.99); -``` - -Your eighth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[7].category, 'Pretzel'); -``` - -Your ninth object in the `products` array should have an `id` property set to the number `9`. - -```js -assert.equal(products[8].id, 9); -``` - -Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`. - -```js -assert.equal(products[8].name, 'Butter Pecan Ice Cream'); -``` - -Your ninth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[8].price, 2.99); -``` - -Your ninth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[8].category, 'Ice Cream'); -``` - -Your tenth object in the `products` array should have an `id` property set to the number `10`. - -```js -assert.equal(products[9].id, 10); -``` - -Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`. - -```js -assert.equal(products[9].name, 'Rocky Road Ice Cream'); -``` - -Your tenth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[9].price, 2.99); -``` - -Your tenth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[9].category, 'Ice Cream'); -``` - -Your eleventh object in the `products` array should have an `id` property set to the number `11`. - -```js -assert.equal(products[10].id, 11); -``` - -Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`. - -```js -assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)'); -``` - -Your eleventh object in the `products` array should have a `price` property set to the number `11.99`. - -```js -assert.equal(products[10].price, 11.99); -``` - -Your eleventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[10].category, 'Macaroon'); -``` - -Your twelfth object in the `products` array should have an `id` property set to the number `12`. - -```js -assert.equal(products[11].id, 12); -``` - -Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`. - -```js -assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)'); -``` - -Your twelfth object in the `products` array should have a `price` property set to the number `12.99`. - -```js -assert.equal(products[11].price, 12.99); -``` - -Your twelfth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[11].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md deleted file mode 100644 index 2a000e8614e..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 63ec3427fc3e9214c9ed2a14 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that. - -Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function. - -# --hints-- - -You should call the `.forEach` method of your `products` array. - -```js -assert.match(code, /products\.forEach\(/); -``` - -You should use arrow syntax to create an empty callback function. - -```js -assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/) -``` - -You should pass your empty callback function to the `.forEach` method. - -```js -assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md deleted file mode 100644 index e9a2c069456..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 63ec36f6133df7160be3ec66 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Remember that you can use destructuring to extract multiple values from an array or object in a single statement. - -For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in. - -# --hints-- - -You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters. - -```js -assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/); -``` - -Your destructuring should be the first parameter of the callback function. - -```js -assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - () => {} -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md deleted file mode 100644 index 4add604d105..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 63ec47b454495519739486a7 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable. - -# --hints-- - -You should use access the `innerHTML` property of the `dessertCards` variable. - -```js -assert.match(code, /dessertCards\.innerHTML/); -``` - -You should use the addition assignment operator on the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/); -``` - -You should add an empty template literal string to the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md deleted file mode 100644 index 02a59b523b4..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 63ee5d38a5d29d0696f8d820 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable. - -# --hints-- - -You should create a `div` element. - -```js -assert.isAtLeast(document.querySelectorAll('div')?.length, 12); -``` - -Your `div` element should have a class of `dessert-card`. - -```js -assert.equal(document.querySelectorAll('.dessert-card')?.length, 12); -``` - -You should create an `h2` element. - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.length, 12); -``` - -Your `h2` element should have the text of the `name` variable. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your `h2` element should be inside the `div` element. - -```js -assert.equal(document.querySelectorAll('div h2')?.length, 12); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` - - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md deleted file mode 100644 index 96485328760..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63ee5d8f9e7168076e932fe2 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -After your `h2` element, create two `p` elements. Give the first a `class` of `dessert-price`, and the text of the `price` variable with a dollar sign in front of it. Give the second a `class` of `product-category`, and the text `Category:` followed by the value of the `category` variable. - -# --hints-- - -You should create two `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card')?.children.length, 3); -assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2) -``` - -Your `p` elements should come after your `h2` element. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2'); -assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P'); -assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P'); -``` - -Your first `p` element should have a `class` of `dessert-price`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price'); -``` - -Your first `p` element should have the text of the `price` variable with a dollar sign in front of it. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99'); -``` - -Your second `p` element should have a `class` of `product-category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category'); -``` - -Your second `p` element should have the text `Category:` followed by the value of the `category` variable. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        - -
                                                                        - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md deleted file mode 100644 index 6092f597046..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 63ee5e0f08e82208364c4128 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Finally, after your `p` elements, create a `button` element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `Add to cart` for the text. - -# --hints-- - -You should create a `button` element. - -```js -assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12); -``` - -Your `button` element should come after your `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P'); -assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling); -``` - -Your `button` element should have an `id` set to the value of the `id` variable. - -```js -assert.equal(document.querySelector('.dessert-card button')?.id, '1'); -``` - -Your `button` element should have a `class` of `btn add-to-cart-btn`. - -```js -assert.include(document.querySelector('.dessert-card button')?.className, 'btn'); -assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn'); -``` - -Your `button` element should have the text `Add to cart`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md deleted file mode 100644 index 44ba9af32dc..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 63ee5ea8be892e0955ab346c -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -You are already familiar with an HTML `class`, but JavaScript also has a class. In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods. - -The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class: - -```js -class Computer {}; -``` - -Declare a `ShoppingCart` class. - -# --hints-- - -You should declare a `ShoppingCart` variable. - -```js -assert.match(code, /ShoppingCart/); -``` - -You should use the `class` keyword to declare a `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*/); -``` - -Your `ShoppingCart` class should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md deleted file mode 100644 index 87839e53275..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 63ee5fc113bcb20a5db9214b -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Classes have a special `constructor` method, which is called when a new instance of the class is created. The `constructor` method is a great place to initialize properties of the class. Here is an example of a class with a `constructor` method: - -```js -class Computer { - constructor() { - } -} -``` - -Add an empty `constructor` method to the `ShoppingCart` class. - -# --hints-- - -You should add a `constructor` method to the `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/) -``` - -Your `constructor` method should be empty. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md deleted file mode 100644 index 4f7a2390687..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 63ee611d478dca0b77f6a393 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -The `this` keyword in JavaScript is used to refer to the current object. Depending on where `this` is used, what it references changes. In the case of a class, it refers to the instance of the object being constructed. You can use the `this` keyword to set the properties of the object being instantiated. Here is an example: - -```js -class Computer { - constructor() { - this.ram = 16; - } -} -``` - -In your constructor, use the `this` keyword to set the `items` property to an empty array. Also, set the `total` property to `0`, and the `taxRate` property to `8.25`. - -# --hints-- - -You should use the `this` keyword to set the `items` property of your class to an empty array. - -```js -assert.match(code, /this\.items/); -const cart = new ShoppingCart(); -assert.isArray(cart.items); -assert.isEmpty(cart.items); -``` - -You should use the `this` keyword to set the `total` property of your class to `0`. - -```js -assert.match(code, /this\.total/); -const cart = new ShoppingCart(); -assert.equal(cart.total, 0); -``` - -You should use the `this` keyword to set the `taxRate` property of your class to `8.25`. - -```js -assert.match(code, /this\.taxRate/); -const cart = new ShoppingCart(); -assert.equal(cart.taxRate, 8.25); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - - } -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md deleted file mode 100644 index 86c81b0332a..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 63ee7c664f9b65137d925c8a -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Your `ShoppingCart` class needs the ability to add items. Create an empty `addItem` method, which takes two parameters: `id` and `products`. Creating a method might look like this: - -```js -class Computer { - constructor() { - this.ram = 16; - } - - addRam(amount) { - this.ram += amount; - } -} -``` - -The first parameter, `id`, is the `id` of the product the user has added to their cart. The second parameter, `products`, is an array of product objects. By using a parameter instead of directly referencing your existing `products` array, this method will be more flexible if you wanted to add additional product lists in the future. - -# --hints-- - -Your `ShoppingCart` class should have an `addItem` method. - -```js -const cart = new ShoppingCart(); -assert.isFunction(cart.addItem); -``` - -Your `addItem` method should take two parameters: `id` and `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/); -``` - -Your `addItem` method should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md deleted file mode 100644 index 88900979e4b..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 63eea5cea403a81a68ae493c -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -You need to find the product that the user is adding to the cart. Remember that arrays have a `.find()` method. In your `addItem` function, declare a `product` variable, and assign it the value of calling the `.find()` method on the `products` array. - -For the callback to `.find()`, pass a function that takes a single parameter `item`, and returns whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -# --hints-- - -You should declare a `product` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=/); -``` - -You should call the `.find()` method on your `products` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(/); -``` - -You should pass a callback function to the `.find()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/); -``` - -The callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/); -``` - -The callback function should return whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/); -``` - -You should assign the value of the `.find()` method to the `product` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md deleted file mode 100644 index fa4bbc91e2f..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63eea817673c8e1c22927fa6 -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Use `const` and destructuring to extract `name` and `price` variables from `product`. - -# --hints-- - -You should use destructuring to get the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/); -``` - -You should use `const` to declare the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/); -``` - -You should use destructuring to get the `name` and `price` variables from `product`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md deleted file mode 100644 index 21089f88380..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 63eea8e1e143ae1d098c8c9d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Now you need to push the `product` into the cart's `items` array. Remember to use the `this` keyword. - -# --hints-- - -You should call the `push` method on the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.push\(/); -``` - -Remember you need to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.push\(/); -``` - -You should `push` the `product` variable to the `items` array. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.deepEqual(cart.items, [products[0]]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md deleted file mode 100644 index f1583334ed8..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 63eeb8e86becbf1e75c2cb0d -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -You now need a total count of each product that the user has in the cart. Declare a `totalCountPerProduct` variable, and assign it an empty object. - -# --hints-- - -You should declare a `totalCountPerProduct` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/); -``` - -You should use `const` to declare `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/); -``` - -You should assign an empty object to `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md deleted file mode 100644 index af217952d82..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63eedebb0ec0231ff1cede1a -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Use the `.forEach()` method to loop through the `items` array. Pass an empty callback function that takes a single parameter `dessert`. - -# --hints-- - -You should use the `.forEach()` method on your `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.forEach\(/); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(/); -``` - -You should pass a callback function to the `.forEach()` method. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/); -``` - -Your callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/); -``` - -Your callback function should be empty. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md deleted file mode 100644 index 24c1ac26daf..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 63efdbc22a0c56070beabed7 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -In your `forEach` callback, you need to update the `totalCountPerProduct` object. Using the `id` of the current `dessert` as your property, update the value of the property to be the current value plus one. Do not use the addition assignment operator for this. - -# --hints-- - -You should use dot notation to access the `id` property of `dessert`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /dessert\.id/); -``` - -You should use bracket notation to access the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the assignment operator to update the value of the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/); -``` - -You should update the value of `totalCountPerProduct` to be the current value plus one. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md deleted file mode 100644 index cba3963dbee..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 63efe370bbfc4a08d500118e -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -You now have a small bug. When you try to access a property of an object and the property doesn't exist, you get `undefined`. This means if the dessert isn't already present in the `totalCountPerProduct` object, you end up trying to add `1` to `undefined`, which results in `NaN`. - -To fix this, you can use the `||` operator to set the value to `0` if it doesn't exist. Wrap your right-hand `totalCountPerProduct[data.id]` in parentheses, and add `|| 0` to the end of the expression. - -# --hints-- - -You should wrap your right-hand `totalCountPerProduct[data.id]` in parentheses. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the `||` operator. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/); -``` - -You should use `0` as your fallback value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/); -``` - -You should still add `1` to the value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1; - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md deleted file mode 100644 index 5e3da866f36..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 63eff02f00e69a0b2ac10b43 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Now you need to get prepared to update the display with the new product the user added. Declare a `currentProductCount` variable, and assign it the value of the `totalCountPerProduct` object's property matching the `id` of `product`. - -# --hints-- - -You should declare a `currentProductCount` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=/); -``` - -You should use `const` to declare `currentProductCount`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCount\s*=/); -``` - -You should assign the value of `totalCountPerProduct[product.id]` to `currentProductCount`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md deleted file mode 100644 index a1b63e599ad..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 63eff98ffb1d5a0d24ec79cb -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -You haven't written the code to generate the HTML yet, but if a product has already been added to the user's cart then there will be a matching element which you'll need. - -Use `.getElementById()` to get the matching element - you'll be setting the `id` value to `product-count-for-id${product.id}`, so use a template literal to query that value. - -Assign your query to a `currentProductCountSpan` variable. - -# --hints-- - -You should declare a `currentProductCountSpan` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/); -``` - -You should use `const` to declare `currentProductCountSpan`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/); -``` - -You should use `document.getElementById()` to get the matching element. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /document\.getElementById\(/); -``` - -You should use a template literal to query the `id` value. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/); -``` - -You should assign the value of `document.getElementById()` to `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md deleted file mode 100644 index 4573e021ac0..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63effe558c87a70e7072e447 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. - -# --hints-- - -You should check if `currentProductCount` is greater than `1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/); -``` - -You should use a ternary operator with your `currentProductCount > 1` condition. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/); -``` - -You should use `undefined` as the truthy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should use `undefined` as the falsy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md deleted file mode 100644 index aebdaf9a24f..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 63f0165121a9181342d5bc66 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -For your truthy expression, removing the `undefined`, you need to update the `textContent` of the `currentProductCountSpan` to be the `currentProductCount` followed by an `x`. Use a template literal to do so. - -# --hints-- - -You should remove the `undefined` from your truthy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should access the `textContent` property of `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/); -``` - -You should use template literal syntax to update the `textContent` to be `${currentProductCount}x`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 ? undefined : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md deleted file mode 100644 index b6f14c6ae69..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 63f017b4ad028a148eb713c0 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -For your falsy expression, you'll need to add new HTML to your `productsContainer`. Start by removing the `undefined`, then use the addition assignment operator and template literal syntax to add a `div` with the `class` set to `product` and the `id` set to `dessert${id}` to the `innerHTML` property of the `productsContainer`. - -# --hints-- - -You should remove the `undefined` from your falsy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /undefined/); -``` - -You should use the addition assignment operator to add HTML to the `productsContainer`. Remember that HTML goes in the `innerHTML` property. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/); -``` - -You should use template literal syntax to add HTML to the `productsContainer`. - -```js -assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/); -``` - -You should add a `div` to the `productsContainer`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.tagName, "DIV"); -``` - -Your `div` should have the `class` set to `product`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.className, "product"); -``` - -Your `div` should have the `id` set to `dessert${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.id, "dessert1"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md deleted file mode 100644 index dd3815162fa..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 63f01861f813e01564c95315 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Inside your `div`, add two `p` elements. Set the text of the second `p` element to be the value of the `price` variable. - -# --hints-- - -You should add two `p` elements inside your `div` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children.length, 2); -assert.equal(div?.children[0].tagName, 'P'); -assert.equal(div?.children[1].tagName, 'P'); -``` - -Your second `p` element should have the text of the `price` variable. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children[1].textContent, '12.99'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        - -
                                                                        - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md deleted file mode 100644 index da747a73c32..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 63f018f04e487e164dc27bd9 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable. - -# --hints-- - -Your first `p` element should have a `span` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children.length, 1); -assert.equal(p.children[0].tagName, 'SPAN'); -``` - -Your `span` element should have a `class` of `product-count`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].className, 'product-count'); -``` - -Your `span` element should have an `id` of `product-count-for-id${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].id, 'product-count-for-id1'); -``` - -Your first `p` element should have the text of the `name` variable. This should be outside the span. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md deleted file mode 100644 index 852ac25d2b7..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 63f01c9791a0aa1751c73760 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -There is still more functionality that your `ShoppingCart` class needs, but first you need to be able to test the code you have currently written. You'll need to instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples: - -```js -const myComputer = new Computer(); -``` - -Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object. - -# --hints-- - -You should use `const` to declare a `cart` variable. - -```js -assert.match(code, /const\s+cart\s*=/); -``` - -You should use the `new` keyword to instantiate a new `ShoppingCart` object. - -```js -assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/); -``` - -You should assign your new `ShoppingCart` object to the `cart` variable. - -```js -assert.isTrue(cart instanceof ShoppingCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } -}; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md deleted file mode 100644 index c2590b8a8ea..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f0224ceb16dc196d2c860a -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -You need to get all of the `Add to cart` buttons that you added to the DOM earlier. Declare an `addToCartBtns` variable, and assign it the value of calling the `getElementsByClassName()` method on the `document` object, passing in the string `add-to-cart-btn`. - -# --hints-- - -You should use `const` to declare your `addToCartBtns` variable. - -```js -assert.match(code, /const\s+addToCartBtns\s*=/); -``` - -You should call the `getElementsByClassName()` method on the `document` object. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/); -``` - -You should pass the string `add-to-cart-btn` to the `getElementsByClassName()` method. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/); -``` - -You should assign the value returned by the `getElementsByClassName()` method to the `addToCartBtns` variable. - -```js -assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } -}; - -const cart = new ShoppingCart(); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md deleted file mode 100644 index fd0129e37ca..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f026d041bc6c1a3d5cba0f -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -You need to iterate through the buttons in your `addToCartBtns` variable. However, `.getElementsByClassName()` returns a Collection, which does not have a `forEach` method. - -Use the spread operator on the `addToCartBtns` variable to convert it into an array. Then, use the `forEach` method to iterate through the array. Do not pass a callback function yet. - -# --hints-- - -You should use the spread operator on the `addToCartBtns` variable. - -```js -assert.match(code, /\.\.\.addToCartBtns/); -``` - -You should spread the `addToCartBtns` variable into an array. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/); -``` - -You should use the `forEach` method on the array you created. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/); -``` - -You should not pass a callback function to the `forEach` method. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md deleted file mode 100644 index cae3ba72dbe..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0284532742c1b26c7a052 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Add your callback function to the `forEach` method. It should take a `btn` parameter. Then, in the callback, add an event listener to the `btn`. The event listener should listen for a `click` event, and should take another callback with an `event` parameter. The second callback should be empty. - -# --hints-- - -You should use arrow syntax to add a callback function to the `forEach` method which takes a `btn` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/); -``` - -You should add an event listener to the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/); -``` - -You should add an empty callback function to the event listener. Remember to give it an `event` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md deleted file mode 100644 index c27e13717f0..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0289df84a581bbdbd29b7 -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -In your event listener callback, call the `.addItem()` method of your `cart` object, and pass in the `event.target.id`. Remember that the `id` here will be a string, so you need to convert it to a number. - -Pass your `products` array as the second argument. - -# --hints-- - -Your event listener callback should call the `.addItem()` method of your `cart` object. - -```js -assert.match(code, /cart\.addItem\(/); -``` - -Your `.addItem()` method should be called with the `event.target.id` as the first argument. Remember to convert the `id` to a number using `Number()`. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/); -``` - -Your `.addItem()` method should be called with the `products` array as the second argument. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - - }) - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md deleted file mode 100644 index 4b53ebc3ff1..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 63f0295e673b661ccb299e8a -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -You need a way to access the total number of items in the cart. The best way to do this is to add another method to your `ShoppingCart` class, rather than accessing the `items` array directly. - -Add a `getCounts` method to the `ShoppingCart` class. It should return the number of items in the `items` array. - -# --hints-- - -Your `ShoppingCart` class should have a `getCounts` method. - -```js -assert.isFunction(cart.getCounts); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const afterCounts = code.split('getCounts')[1]; -assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/); -``` - -Your `getCounts` method should return the number of items in the `items` array. - -```js -assert.equal(cart.getCounts(), 0); -cart.addItem(1, products); -assert.equal(cart.getCounts(), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md deleted file mode 100644 index b75a16738ae..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 63f029b96b9e9e1df93be951 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Now you can update the total number of items on the webpage. Assign the value of your `cart` object's `.getCounts()` method to the `textContent` of the `totalNumberOfItems` variable. - -# --hints-- - -You should access the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent/) -``` - -You should assign the value of your `cart` object's `.getCounts()` method to the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md deleted file mode 100644 index ff8d5d86a2e..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 63f02a4ef92d711ec1ff618c -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -You also need to update the total price of the cart when the user adds an item. Create a `calculateTotal` method in the `ShoppingCart` class. - -In that method, declare a `subTotal` variable and use the `reduce` method on the `items` array to calculate the sum of the `price` property of each item in the array. Use `total` and `item` as the parameters for your callback. - -Remember to set your initial value in the `reduce` method. - -# --hints-- - -You should create a `calculateTotal` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTotal); -``` - -Your `calculateTotal` method should have a `subTotal` variable declared with `const`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+subTotal\s*=/); -``` - -Your `calculateTotal` method should use the `reduce` method on the `items` array. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/); -``` - -Your `reduce` callback should use `total` and `item` as the first and second parameter. Remember to use arrow function syntax. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/); -``` - -Your `reduce` callback should return the sum of `total` and `item.price`. Use an implicit return. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/); -``` - -Your `reduce` call should have an initial value of `0`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md deleted file mode 100644 index 8d4036f7ea6..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f02b22cce1c11fe9604381 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Part of the total cost will include the tax, so you need to calculate that as well. Create a `calculateTaxes` method in the `ShoppingCart` class. This method should take an `amount` parameter. - -# --hints-- - -You should create a `calculateTaxes` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTaxes); -``` - -Your `calculateTaxes` method should take an `amount` parameter. - -```js -assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md deleted file mode 100644 index 82d277b0ab0..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f02bdeb9b428208b97eb6b -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -For clarity, wrap the `taxRate / 100` calculation in parentheses. - -# --hints-- - -You should divide the `taxRate` by 100 in your `calculateTaxes` method. Remember to use the `this` keyword. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/); -``` - -You should wrap the `this.taxRate / 100` calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/); -``` - -You should multiply the `amount` parameter by the `taxRate` divided by 100 in your `calculateTaxes` method. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/); -``` - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -```js -console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md deleted file mode 100644 index 0954c9b4ac6..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 63f02c6e18773921ba50aa53 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Because of the way computers store and work with numbers, calculations involving decimal numbers can result in some strange behavior. For example, `0.1 + 0.2` is not equal to `0.3`. This is because computers store decimal numbers as binary fractions, and some binary fractions cannot be represented exactly as decimal fractions. - -We want to clean up the number result from your calculation. Wrap your calculation in parentheses (don't include the `return` statement!) and call the `.toFixed()` method on it. Pass the `.toFixed()` method the number `2` as an argument. This will round the number to two decimal places and return a string. - -# --hints-- - -You should wrap your calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/) -``` - -You should call the `.toFixed()` method on your calculation. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/) -``` - -You should pass the `.toFixed()` method the number `2` as an argument. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return (this.taxRate / 100) * amount; - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md deleted file mode 100644 index d925dca7812..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 63f0311f5ea9382388d6124f -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -The issue with `.toFixed()` returning a string is that you want to be able to perform calculations with the tax rate. To fix this, you can pass the `.toFixed()` call (including the calculation) to the `parseFloat()` function. This will convert the fixed string back into a number, preserving the existing decimal places. - -Pass your `.toFixed()` call to `parseFloat()`. - -# --hints-- - -You should pass your entire calculation (excluding the `return` statement) to `parseFloat()`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return ((this.taxRate / 100) * amount).toFixed(2); - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md deleted file mode 100644 index b0527ca7c31..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f033fdb1fbcc254999fcc3 -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Your cart currently isn't visible on the webpage. To make it visible, start by adding an event listener to the `cartBtn` variable, listening for the click event. The callback does not need any parameters. - -# --hints-- - -You should add an event listener to the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/); -``` - -You should add an empty callback function (using arrow syntax) to the event listener. Remember that it does not need any parameters. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md deleted file mode 100644 index 48e1daa6e0e..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f03446c2ed3e264be6c7fc -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Start by inverting the value of `isCartShowing`. Remember that you can use the logical not operator `!` to invert the value of a boolean. Assign the inverted value to `isCartShowing`. - -# --hints-- - -You should invert the value of `isCartShowing`. - -```js -assert.match(code, /!isCartShowing/); -``` - -You should assign the inverted value of `isCartShowing` to `isCartShowing`. - -```js -assert.match(code, /isCartShowing\s*=\s*!isCartShowing/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md deleted file mode 100644 index 1e9f9959098..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f0348a54a177272071a595 -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `Hide`, otherwise set it to `Show`. - -# --hints-- - -You should use the assignment operator on the `textContent` property of the `showHideCartSpan` variable. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Hide` if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Show` if `isCartShowing` is false. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md deleted file mode 100644 index 3fcf304cca6..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 63f034d012f74627ce538d3a -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `block`, otherwise set it to `none`. - -Now you should be able to see your cart and add items to it. - -# --hints-- - -You should access the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/) -``` - -You should use the assignment operator on the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `block` if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `none` if `isCartShowing` is false. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md deleted file mode 100644 index a4c481b5796..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f03686c5ea863533ec71f4 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Declare a variable `tax` and assign it the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument. - -# --hints-- - -Use `const` to declare a variable named `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+tax\s*=/); -``` - -Assign the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument, to the `tax` variable. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md deleted file mode 100644 index 936b8a7add9..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f036ec91fdf238c90665f5 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Update the `total` value to be the sum of the `subTotal` and `tax` values. - -# --hints-- - -You should update the `total` value. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total/); -``` - -You should set the `total` value to be the sum of the `subTotal` and `tax` values. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md deleted file mode 100644 index cba09f5a3e6..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 63f0370b340915399d31e5eb -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -You're going to update the HTML in this method as well. Set the `textContent` of the `cartSubTotal` to be the value of `subTotal` to a fixed 2 decimal places. Use template literal syntax to add the dollar sign to the beginning of the value. - -# --hints-- - -You should access the `textContent` property of the `cartSubTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `subTotal` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartSubTotal` element to your template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md deleted file mode 100644 index 37c08222320..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 63f0374d5351223a747c301d -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Following the same pattern as your `cartSubTotal`, update the `cartTaxes` to display the `tax` value, and your `cartTotal` to display the `total` property. - -# --hints-- - -You should access the `textContent` property of the `cartTaxes` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/); -``` - -You should call the `.toFixed()` method on the `tax` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTaxes` element to `tax.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should access the `textContent` property of the `cartTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `total` variable, passing `2` as the argument. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTotal` element to your `total.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md deleted file mode 100644 index 56336e0263e..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f0378e173e3c3b7638b528 -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Finally, return the value of the `total` property. Remember your `this` keyword. - -# --hints-- - -Your `calculateTotal` method should return the value of the `total` property. - -```js -assert.equal(cart.calculateTotal(), 0); -cart.addItem(1, products); -assert.approximately(cart.calculateTotal(), 14.06, 0.1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md deleted file mode 100644 index db0f9862452..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f038a0ae041d3c5b0cdf23 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Your last feature is to allow users to clear their cart. Add a `clearCart()` method to your `ShoppingCart` class. - -# --hints-- - -Your `ShoppingCart` class should have a `clearCart` method. - -```js -assert.isFunction(cart.clearCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md deleted file mode 100644 index 50339959f43..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -id: 63f038e671d3f73d5a041973 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -The first thing you should do is check if the `items` array is empty. If it is, display an `alert` to the user with the text `Your shopping cart is already empty`, then return from the function. - -Remember that `0` is a falsy value, so you can use the `!` operator to check if the array is empty. - -After displaying the alert, return from the function to stop execution. - -# --hints-- - -You should create an `if` statement that checks if the `items` array is empty, using the negation operator. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/); -``` - -Your `if` statement should display an `alert` to the user with the text `Your shopping cart is already empty`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/); -``` - -Your `if` statement should return from the function. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md deleted file mode 100644 index 23f034e9067..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 63f039dbcef7673e4e758fa3 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Browsers have a built-in `confirm()` function which displays a confirmation prompt to the user. `confirm()` accepts a string, which is the message displayed to the user. It returns `true` if the user confirms, and `false` if the user cancels. - -Declare a variable `isCartCleared` and assign it the value of calling `confirm()` with the string `"Are you sure you want to clear all items from your shopping cart?"`. - -# --hints-- - -You should use `const` to declare the `isCartCleared` variable. - -```js -const afterClearCart = code.split('clearCart()')[1]; -assert.match(afterClearCart, /const\s+isCartCleared\s*=/); -``` - -You should call the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(/); -``` - -You should pass the string `Are you sure you want to clear all items from your shopping cart?` to the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -You should assign the value of the `confirm()` function to the `isCartCleared` variable. - -```js -assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md deleted file mode 100644 index be4fde050a5..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -id: 63f03a7143a6ef3f7f3344f0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -You only want to clear the cart if the user confirms the prompt. Create an `if` statement that checks if the user confirmed the prompt. - -In the `if` statement, set the `items` property back to an empty array, then set the `total` property to `0`. - -# --hints-- - -You should create an `if` statement that checks if the user confirmed the prompt. Remember that you can check the truthiness of `isCartCleared` directly. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/); -``` - -Your `if` statement should set the `items` property back to an empty array. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/); -``` - -Your `if` statement should set the `total` property to `0`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md deleted file mode 100644 index 3b6705168d8..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f03ac2b428b2404a5a7518 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -You also need to start clearing the HTML. Set the `innerHTML` property of the `productsContainer` back to an empty string. - -# --hints-- - -In your `if` statement, you should set the `innerHTML` property of the `productsContainer` back to an empty string. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md deleted file mode 100644 index 5a1e7f099f3..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 63f03af535682e4138fdb915 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Set the `textContent` of the `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal` elements all to the number `0`. - -# --hints-- - -You should set the `textContent` of the `totalNumberOfItems` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartSubTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTaxes` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTotal\.textContent\s*=\s*0/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md deleted file mode 100644 index 913c5c53bdb..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md +++ /dev/null @@ -1,744 +0,0 @@ ---- -id: 63f03b1ed5ab15420c057463 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Your final step is to make your clear button functional. Add a `click` event listener to the `clearCartBtn`. For the callback, you can pass in `cart.clearCart` directly. - -However, doing so will not work, because the context of `this` will be the `clearCartBtn` element. You need to bind the `clearCart` method to the `cart` object. - -You can do this by passing `cart.clearCart.bind(cart)` as the callback. - -And with that, your shopping cart project is complete! - -# --hints-- - -You should add an event listener to your `clearCartBtn` element. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(/); -``` - -Your event listener should listen for the `click` event. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/); -``` - -Your event listener should take `cart.clearCart.bind(cart)` as the callback. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - -clearCartBtn.addEventListener("click", cart.clearCart.bind(cart)); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md deleted file mode 100644 index c33ce088a1c..00000000000 --- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f6721d5110af243ef8f3d9 -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now call your `.calculateTotal()` method inside your `forEach` loop. - -# --hints-- - -You should call `cart.calculateTotal()` inside your `forEach` loop. - -```js -const afterForEach = code.split('[...addToCartBtns].forEach(')[1]; -assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                        -

                                                                        Desserts Page

                                                                        -
                                                                        -
                                                                        - -
                                                                        - -
                                                                        -

                                                                        Total number of items: 0

                                                                        -

                                                                        Subtotal: $0

                                                                        -

                                                                        Taxes: $0

                                                                        -

                                                                        Total: $0

                                                                        -
                                                                        -
                                                                        -
                                                                        - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                        -

                                                                        ${name}

                                                                        -

                                                                        $${price}

                                                                        -

                                                                        Category: ${category}

                                                                        - -
                                                                        - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                        -

                                                                        - ${name} -

                                                                        -

                                                                        ${price}

                                                                        -
                                                                        - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md new file mode 100644 index 00000000000..d522cf2c5ab --- /dev/null +++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md @@ -0,0 +1,388 @@ +--- +id: 659ebe52d74b132a1d75c891 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug. + +The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function. +# --hints-- + +You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`. + +```js +assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn localStorage by Building a Todo App + + + + +
                                                                        +

                                                                        Todo App

                                                                        +
                                                                        + + + +
                                                                        +

                                                                        Discard unsaved changes?

                                                                        +
                                                                        + + +
                                                                        +
                                                                        +                                                                         +
                                                                        +
                                                                        +
                                                                        + + + + +``` + +```css +:root { + --white: #fff; + --light-grey: #f5f6f7; + --dark-grey: #0a0a23; + --yellow: #f1be32; + --golden-yellow: #feac32; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--dark-grey); +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + color: var(--light-grey); + margin: 20px 0 40px 0; +} + +.todo-app { + background-color: var(--white); + width: 300px; + height: 350px; + border: 5px solid var(--yellow); + border-radius: 8px; + padding: 15px; + position: relative; + display: flex; + flex-direction: column; + gap: 10px; +} + +.btn { + cursor: pointer; + width: 100px; + margin: 10px; + color: var(--dark-grey); + background-color: var(--golden-yellow); + background-image: linear-gradient(#fecc4c, #ffac33); + border-color: var(--golden-yellow); + border-width: 3px; +} + +.btn:hover { + background-image: linear-gradient(#ffcc4c, #f89808); +} + +.large-btn { + width: 80%; + font-size: 1.2rem; + align-self: center; + justify-self: center; +} + +.close-task-form-btn { + background: none; + border: none; + cursor: pointer; +} + +.close-icon { + width: 20px; + height: 20px; +} + +.task-form { + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--white); + border-radius: 5px; + padding: 15px; + width: 300px; + height: 350px; + flex-direction: column; + justify-content: space-between; + overflow: auto; +} + +.task-form-header { + display: flex; + justify-content: flex-end; +} + +.task-form-body { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.task-form-footer { + display: flex; + justify-content: center; +} + +.task-form-label, +#title-input, +#date-input, +#description-input { + display: block; +} + +.task-form-label { + margin-bottom: 5px; + font-size: 1.3rem; + font-weight: bold; +} + +#title-input, +#date-input, +#description-input { + width: 100%; + margin-bottom: 10px; + padding: 2px; +} + +#confirm-close-dialog { + padding: 10px; + margin: 10px auto; + border-radius: 15px; +} + +.confirm-close-dialog-btn-container { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.discard-message-text { + font-weight: bold; + font-size: 1.5rem; +} + +#tasks-container { + height: 100%; + overflow-y: auto; +} + +.task { + margin: 5px 0; +} + +.hidden { + display: none; +} + +@media (min-width: 576px) { + .todo-app, + .task-form { + width: 400px; + height: 450px; + } + + .task-form-label { + font-size: 1.5rem; + } + + #title-input, + #date-input { + height: 2rem; + } + + #title-input, + #date-input, + #description-input { + padding: 5px; + margin-bottom: 20px; + } +} +``` + +```js +const taskForm = document.getElementById("task-form"); +const confirmCloseDialog = document.getElementById("confirm-close-dialog"); +const openTaskFormBtn = document.getElementById("open-task-form-btn"); +const closeTaskFormBtn = document.getElementById("close-task-form-btn"); +const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); +const cancelBtn = document.getElementById("cancel-btn"); +const discardBtn = document.getElementById("discard-btn"); +const tasksContainer = document.getElementById("tasks-container"); +const titleInput = document.getElementById("title-input"); +const dateInput = document.getElementById("date-input"); +const descriptionInput = document.getElementById("description-input"); + +const taskData = []; +let currentTask = {}; + +const addOrUpdateTask = () => { + --fcc-editable-region-- + + --fcc-editable-region-- + const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); + const taskObj = { + id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, + title: titleInput.value, + date: dateInput.value, + description: descriptionInput.value, + }; + + if (dataArrIndex === -1) { + taskData.unshift(taskObj); + } else { + taskData[dataArrIndex] = taskObj; + } + + updateTaskContainer() + reset() +}; + +const updateTaskContainer = () => { + tasksContainer.innerHTML = ""; + + taskData.forEach( + ({ id, title, date, description }) => { + (tasksContainer.innerHTML += ` +
                                                                        +

                                                                        Title: ${title}

                                                                        +

                                                                        Date: ${date}

                                                                        +

                                                                        Description: ${description}

                                                                        + + +
                                                                        + `) + } + ); +}; + + +const deleteTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + buttonEl.parentElement.remove(); + taskData.splice(dataArrIndex, 1); +} + +const editTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + currentTask = taskData[dataArrIndex]; + + titleInput.value = currentTask.title; + dateInput.value = currentTask.date; + descriptionInput.value = currentTask.description; + + addOrUpdateTaskBtn.innerText = "Update Task"; + + taskForm.classList.toggle("hidden"); +} + +const reset = () => { + titleInput.value = ""; + dateInput.value = ""; + descriptionInput.value = ""; + taskForm.classList.toggle("hidden"); + currentTask = {}; +} + +openTaskFormBtn.addEventListener("click", () => + taskForm.classList.toggle("hidden") +); + +closeTaskFormBtn.addEventListener("click", () => { + const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; + if (formInputsContainValues) { + confirmCloseDialog.showModal(); + } else { + reset(); + } +}); + +cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); + +discardBtn.addEventListener("click", () => { + confirmCloseDialog.close(); + reset() +}); + +taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + addOrUpdateTask(); +}); +``` diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md deleted file mode 100644 index f4b05b12871..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e0e72c65bc8e73dfe1e -videoId: LGQuIIv2RVA -title: Elements and Tags Question A -challengeType: 15 -dashedName: elements-and-tags-question-a ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `

                                                                        `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                                                        `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                                                        ` or ``, but some can also be used without the closing forward slash such as `
                                                                        ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) - -## --text-- - -What are HTML tags? - -## --answers-- - -HTML tags tell the browser what content an element contains. - ---- - -HTML tags tell the browser when to load its content. - ---- - -HTML tags tell the browser what content the next element contains. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md deleted file mode 100644 index 51bf43a7014..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 637f4e1672c65bc8e73dfe1f -title: Elements and Tags Question B -challengeType: 15 -dashedName: elements-and-tags-question-b ---- - -# --description-- - -Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. - -Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `

                                                                        `. - -Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `

                                                                        `. - -A full paragraph element looks like this: - -element diagram - -You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content. - -There are some HTML elements that do not have a closing tag. These elements often look like this: `
                                                                        ` or ``, but some can also be used without the closing forward slash such as `
                                                                        ` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. - -HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. - -Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. - -# --question-- - -## --text-- - -What are the three parts of most HTML elements? - -## --answers-- - -An opening tag, self closing tag, and content. - ---- - -An opening tag, closing tag, and content. - ---- - -An opening tag, closing tag, and attribute. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md deleted file mode 100644 index ab85844e81b..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e1c72c65bc8e73dfe20 -title: HTML Boilerplate Question A -challengeType: 15 -dashedName: html-boilerplate-question-a ---- - -# --description-- - -To demonstrate an HTML boilerplate, you first need an HTML file to work with. - -Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. - -You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. - -To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. - -It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. - -## The DOCTYPE - -Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. - -The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: - -```html - -``` - -However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. - -Open the `index.html` file created earlier in your text editor and add `` to the very first line. - -# --question-- -## --text-- - -What is the purpose of the `DOCTYPE` declaration? - -## --answers-- - -It tells the browser which version of HTML to use to render the document. - ---- - -It tells the browser that this document uses JavaScript. - ---- - -It tells the browser the title of the document. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md deleted file mode 100644 index ffd10a4b5ac..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 637f4e2872c65bc8e73dfe21 -title: HTML Boilerplate Question B -challengeType: 15 -dashedName: html-boilerplate-question-b ---- - -# --description-- - -After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. - -This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. - -Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: - -```html - - - -``` - -## What is the lang attribute? -`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. - -# --question-- - -## --text-- - -What is the `html` element? - -## --answers-- - -It is the root element in the document and tells the browser which version of HTML it should use. - ---- - -It is the root element in the document and all other elements should descend from it. - ---- - -It is the root element in the document and all other elements should come after it. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md deleted file mode 100644 index e4ddaa12c4b..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e2f72c65bc8e73dfe22 -title: HTML Boilerplate Question C -challengeType: 15 -dashedName: html-boilerplate-question-c ---- - -# --description-- - -The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. - -## The Charset Meta Element -You should always have the `meta` tag for the `charset` encoding of the webpage in the `head` element: ``. - -Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. - -## Title Element -Another element you should always include in the head of an HTML document is the `title` element: - -```html -My First Webpage -``` - -The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. - -If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. - -There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. - -Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: - - -```html - - - - - - My First Webpage - - -``` - -# --question-- - -## --text-- - -What is the purpose of the `head` element? - -## --answers-- - -The `head` element is used to display all elements that are displayed on the webpage. - ---- - -The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. - ---- - -The `head` element is used to display the header content on top of the webpage. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md deleted file mode 100644 index 302b6a95d44..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e3672c65bc8e73dfe23 -videoId: V8UAEoOvqFg -title: HTML Boilerplate Question D -challengeType: 15 -dashedName: html-boilerplate-question-d ---- - -# --description-- - -The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. - -To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. - ---- - -Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. - ---- - -Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. - -## --text-- - -What is the purpose of the `body` element? - -## --answers-- - -This is where all important information about the webpage is displayed such as the `title` and `meta` tags. - ---- - -This is where you tell the browser how to render the webpage correctly. - ---- - -This is where all content will be displayed on the page such images, text, and links. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md deleted file mode 100644 index 6c1bfb0a976..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 6374f208de18c50e48ba767b -title: Introduction To HTML and CSS Question A -challengeType: 15 -dashedName: introduction-to-html-and-css-question-a ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --assignment-- - -Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. - -## --text-- - -Which of the following statements is true? - -## --answers-- - -CSS is used to create the basic structure of a webpage, and HTML is used to add style. - ---- - -HTML is used to create the basic structure of a webpage, and CSS is used to add style. - ---- - -HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. - - -## --video-solution-- - -2 - - diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md deleted file mode 100644 index 87aff63d4ec..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 6376327e2724a688c04636e3 -title: Introduction To HTML and CSS Question B -challengeType: 15 -dashedName: introduction-to-html-and-css-question-b ---- - -# --description-- - - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to add paragraphs of text on a webpage? - -## --answers-- - -CSS - ---- - -JavaScript - ---- - -HTML - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md deleted file mode 100644 index 2ca9f2fbacb..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 637633162724a688c04636e4 -title: Introduction To HTML and CSS Question C -challengeType: 15 -dashedName: introduction-to-html-and-css-question-c ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. -# --question-- - -## --text-- - -Between HTML and CSS, which should you use to change the font and background color of a button? - -## --answers-- - -You should use CSS to change the background color and font of a button. - ---- - -You should use JavaScript to change the background color and font of a button. - ---- - -You should use HTML to change the background color and font of a button. - -## --video-solution-- - -1 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md deleted file mode 100644 index 53e4c08471a..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 637633672724a688c04636e5 -title: Introduction To HTML and CSS Question D -challengeType: 15 -dashedName: introduction-to-html-and-css-question-d ---- - -# --description-- - -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! - -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. - -# --question-- - -## --text-- - -What is the difference between HTML, CSS, and JavaScript? - -## --answers-- - -HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. - ---- - -CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. - ---- - -JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md deleted file mode 100644 index b4d237448f3..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f704072c65bc8e73dfe36 -videoId: tsEQgGjSmkM -title: Links and Images Question A -challengeType: 15 -dashedName: links-and-images-question-a ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- Finally, add the following `h1` to the `body`: `

                                                                        Homepage

                                                                        ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. - -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. - -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Links video above. - -## --text-- - -What HTML tag is used to create a link? - -## --answers-- - -`` - ---- - -`

                                                                        ` - ---- - -`

                                                                          ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md deleted file mode 100644 index a138268c406..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f703572c65bc8e73dfe35 -title: Links and Images Question B -challengeType: 15 -dashedName: links-and-images-question-b ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                                                          Homepage

                                                                          ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `                                                                          ` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- -## --text-- - -What is an attribute? -## --answers-- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. - ---- - -An HTML attribute is used to tell the browser what the element contains. - ---- - -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md deleted file mode 100644 index 8863b087456..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 637f703072c65bc8e73dfe34 -title: Links and Images Question C -challengeType: 15 -dashedName: links-and-images-question-c ---- - -# --description-- - -To get some practice using links and images throughout this lesson you need an HTML project to work with. - -- Create a new directory named `odin-links-and-images`. - -- Within that directory, create a new file named `index.html`. - -- Fill in the usual HTML boilerplate. - -- finally, add the following `h1` to the `body`: `

                                                                          Homepage

                                                                          ` - -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: - -```html -click me -``` - -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. - -```html -click me -``` - -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. - -# --question-- - -## --text-- - -What attribute tells links where to go to? - -## --answers-- - -`src` - ---- - -`href` - ---- - -`link` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md deleted file mode 100644 index 37eebffbabf..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 637f702872c65bc8e73dfe33 -videoId: ta3Oxx7Yqbo -title: Links and Images Question D -challengeType: 15 -dashedName: links-and-images-question-d ---- - -# --description-- - - -Generally, there are two kinds of links you will create: - -- Links to pages on other websites on the internet - -- Links to pages located on your own websites - - -## Absolute Links -Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. - -You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. - -`https://www.theodinproject.com/about` - -## Relative Links -Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. - -Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. - -Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: - -```html - - - - - Odin Links and Images - - - -

                                                                          About Page

                                                                          - - -``` - -Back in the `index` page, add the following anchor element to create a link to the `about` page: - -```html - -

                                                                          Homepage

                                                                          - click me - - About - -``` - -Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. - -This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. - -But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. - -Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. - -Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. - -To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. - -```html - -

                                                                          Homepage

                                                                          - About - -``` - -Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. - -In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. - -```html - -

                                                                          Homepage

                                                                          - About - -``` - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML File Structure video above. - -## --text-- - -What is the difference between an absolute and a relative link? - -## --answers-- - -An absolute link is a link to another page on the current website. A relative link is a link to another website. - ---- - -An absolute link is a link to another website. A relative link is a link another page on the current website. - ---- - -There is no difference between absolute and relative links. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md deleted file mode 100644 index ae008078088..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 637f702372c65bc8e73dfe32 -videoId: 0xoztJCHpbQ -title: Links and Images Question E -challengeType: 15 -dashedName: links-and-images-question-e ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                                                          Homepage

                                                                          - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## `Alt` attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included: - - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Images Video above. - -## --text-- - -Which tag is used to display an image? - -## --answers-- - -`` - ---- - -`` - ---- - -`` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md deleted file mode 100644 index e1af2d6a659..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701c72c65bc8e73dfe31 -title: Links and Images Question F -challengeType: 15 -dashedName: links-and-images-question-f ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                                                          Homepage

                                                                          -                                                                           click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -What two attributes do images always need to have? - -## --answers-- - -`href` and `alt` - ---- - -`name` and `href` - ---- - -`alt` and `src` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md deleted file mode 100644 index 5bc84fa6c96..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701572c65bc8e73dfe30 -title: Links and Images Question G -challengeType: 15 -dashedName: links-and-images-question-g ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                                                          Homepage

                                                                          - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --text-- - -How do you access a parent directory in a filepath? - -## --answers-- - -`../` - ---- - -`./` - ---- - -`.../` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md deleted file mode 100644 index 71157081ae7..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 637f700b72c65bc8e73dfe2f -title: Links and Images Question H -challengeType: 15 -dashedName: links-and-images-question-h ---- - -# --description-- - -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. - -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. - -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. - -For example, using an absolute path you can display an image located on The Odin Project site: - - - -To use images that you have on your own websites, you can use a relative path. - -- Create a new directory named `images` within the `odin-links-and-images` project. - -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. - -- Rename the image to `dog.jpg`. - -Finally add the image to the `index.html` file: - -```html - -

                                                                          Homepage

                                                                          - click me - - About - - - -``` - -Save the `index.html` file and open it in a browser to view Charles in all his glory. - - -## Parent Directories - -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. - -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: - -```html - -``` - -To break this down: - -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. - -- Then, from the parent directory, you can go into the `images` directory. - -- Finally, you can access the `dog.jpg` file. - -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. - -## Alt attribute - -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. - -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. - -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - - -# --question-- - -## --assignment-- - -Read about the four main image formats that can be used on the web. - -## --text-- - -What are the four main image formats that you can use for images on the web? - -## --answers-- - -TIFF, GIF, PNG, and SVG. - ---- - -JPG, PNG, GIF, and SVG. - ---- - -JPG, PDF, SVG, and GIF. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md deleted file mode 100644 index f4625eb7e31..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e3e72c65bc8e73dfe24 -videoId: kcHKFZBVtf4 -title: Understand Ordered and Unordered List Question A -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-a ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                                                            ` element, and each item within the list is created using the list item element `
                                                                          • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                                              ` element. Each individual item in them is again created using the list item element `
                                                                            1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --assignment-- - -Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. - ---- - -Make an unordered shopping list of your favorite foods. - ---- - -Make an ordered list of todo’s you need to get done today. - ---- - -Make an unordered list of places you’d like to visit someday. - ---- - -Make an ordered list of your all time top 5 favorite video games or movies. - -## --text-- - -What HTML tag is used to create an unordered list? - -## --answers-- - -`
                                                                            2. ` - ---- - -`
                                                                                ` - ---- - -`
                                                                                  ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md deleted file mode 100644 index 67e79f0ccb9..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e4672c65bc8e73dfe25 -title: Understand Ordered and Unordered List Question B -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-b ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                                                                    ` element, and each item within the list is created using the list item element `
                                                                                  • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                                                      ` element. Each individual item in them is again created using the list item element `
                                                                                    1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create an ordered list? - -## --answers-- - -`
                                                                                        ` - ---- - -`
                                                                                      1. ` - ---- - -`
                                                                                          ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md deleted file mode 100644 index 1edd6feffbf..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e5172c65bc8e73dfe26 -title: Understand Ordered and Unordered List Question C -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-c ---- - -# --description-- - -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. - -Unordered lists are created using the `
                                                                                            ` element, and each item within the list is created using the list item element `
                                                                                          • `. - -Each list item in an unordered list begins with a bullet point: - - - -If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. - -Ordered lists are created using the `
                                                                                              ` element. Each individual item in them is again created using the list item element `
                                                                                            1. `. However, each list item in an ordered list begins with a number instead: - - - -# --question-- - -## --text-- - -What HTML tag is used to create list items within both unordered and ordered lists? - -## --answers-- - -`
                                                                                                ` - ---- - -`
                                                                                              1. ` - ---- - -`
                                                                                                  ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md deleted file mode 100644 index 8698b62aca8..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 637f4e5872c65bc8e73dfe27 -videoId: yqcd-XkxZNM -title: Working With Text Question A -challengeType: 15 -dashedName: working-with-text-question-a ---- - -# --description-- - -What would you expect the following text to output on an HTML page? - -```html - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. - -``` - -It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below: - - - -When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line. - -If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `

                                                                                                  ` tag. - -Changing our example from before to use paragraph elements fixes the issue: - - - -# --question-- - -## --assignment-- - -Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. - -## --text-- - -How do you create a paragraph in HTML? - -## --answers-- - -`

                                                                                                  This is a paragraph

                                                                                                  ` - ---- - -`

                                                                                                  This is a paragraph

                                                                                                  ` - ---- - -`This is a paragraph` - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md deleted file mode 100644 index 17d3c900359..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 637f4e5f72c65bc8e73dfe28 -title: Working With Text Question B -challengeType: 15 -dashedName: working-with-text-question-b ---- - -# --description-- - -Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. - -There are 6 different levels of headings starting from `

                                                                                                  ` to `

                                                                                                  `. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. - -Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `

                                                                                                  ` tag. - - - -Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. - -# --question-- -## --text-- - -How many different levels of headings are there and what is the difference between them? - -## --answers-- - -There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. - ---- - -There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. - ---- - -There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md deleted file mode 100644 index 6ccf0e06658..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 637f4e6672c65bc8e73dfe29 -videoId: gW6cBZLUk6M -title: Working With Text Question C -challengeType: 15 -dashedName: working-with-text-question-c ---- - -# --description-- - -The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. - -You can use `strong` on its own: - - - -But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: - - - -Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. - -# --question-- - -## --assignment-- - -Watch Kevin Powell’s HTML Bold and Italic Text Video above. - -## --text-- - -What element should you use to make text bold and important? - -## --answers-- - -`This is an important message` - ---- - -`

                                                                                                  This is an important message

                                                                                                  ` - ---- - -`This is an important message` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md deleted file mode 100644 index e686b2698e0..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 637f4e6e72c65bc8e73dfe2a -title: Working With Text Question D -challengeType: 15 -dashedName: working-with-text-question-d ---- - -# --description-- - -The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. - -To use `em` on its own: - - -Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: - - - -# --question-- -## --text-- - -What element should you use to make text italicized to add emphasis? - -## --answers-- - -`This is an italic message` - ---- - -`This is an italic message` - ---- - -`This is an italic message` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md deleted file mode 100644 index a0a7ba2fda9..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e7972c65bc8e73dfe2b -title: Working With Text Question E -challengeType: 15 -dashedName: working-with-text-question-e ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the `body` element is the parent and the `p` is the child: - -```html - - - - -

                                                                                                  Lorem ipsum dolor sit amet.

                                                                                                  - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: - -```html - - - - -

                                                                                                  Lorem ipsum dolor sit amet.

                                                                                                  -

                                                                                                  Ut enim ad minim veniam.

                                                                                                  - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship do two elements have if they are at the same level of nesting? - -## --answers-- - -The elements are each other's parents. - ---- - -The elements are each other's children. - ---- - -The elements are siblings. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md deleted file mode 100644 index 7d440cfab25..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f4e8072c65bc8e73dfe2c -title: Working With Text Question F -challengeType: 15 -dashedName: working-with-text-question-f ---- - -# --description-- - -You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. - -When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. - -In the following example, the body element is the parent and the paragraph is the child: - -```html - - - - -

                                                                                                  Lorem ipsum dolor sit amet.

                                                                                                  - - -``` - -Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. - -For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: - -```html - - - - -

                                                                                                  Lorem ipsum dolor sit amet.

                                                                                                  -

                                                                                                  Ut enim ad minim veniam.

                                                                                                  - - -``` - -You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. - -The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. - -# --question-- - -## --text-- - -What relationship does an element have with any nested element within it? - -## --answers-- - -The element within the other element is called the parent element. - ---- - -The element within the other element is called the child element. - ---- - -The element within the other element is called the sibling element. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md deleted file mode 100644 index 5f5d141fa46..00000000000 --- a/curriculum/challenges/swahili/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e8772c65bc8e73dfe2d -title: Working With Text Question G -challengeType: 15 -dashedName: working-with-text-question-g ---- - -# --description-- - -HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. - -Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: - -```html -

                                                                                                  View the html to see the hidden comments

                                                                                                  - - - -

                                                                                                  Some paragraph text

                                                                                                  - - -``` - -# --question-- - -## --assignment-- - -To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. - -## --text-- - -How do you create HTML comments? - -## --answers-- - -`/* This is an HTML comment */` - ---- - -`` - ---- - -`<-- This is an HTML comment --!>` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md deleted file mode 100644 index 5b3f6a44858..00000000000 --- a/curriculum/challenges/swahili/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5900f36e1000cf542c50fe80 -title: 'Problem 1: Multiples of 3 and 5' -challengeType: 1 -forumTopicId: 301722 -dashedName: problem-1-multiples-of-3-and-5 ---- - -# --description-- - -If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. - -Find the sum of all the multiples of 3 or 5 below the provided parameter value `number`. - -# --hints-- - -`multiplesOf3and5(10)` should return a number. - -```js -assert(typeof multiplesOf3and5(10) === 'number'); -``` - -`multiplesOf3and5(49)` should return 543. - -```js -assert.strictEqual(multiplesOf3and5(49), 543); -``` - -`multiplesOf3and5(1000)` should return 233168. - -```js -assert.strictEqual(multiplesOf3and5(1000), 233168); -``` - -`multiplesOf3and5(8456)` should return 16687353. - -```js -assert.strictEqual(multiplesOf3and5(8456), 16687353); -``` - -`multiplesOf3and5(19564)` should return 89301183. - -```js -assert.strictEqual(multiplesOf3and5(19564), 89301183); -``` - -# --seed-- - -## --seed-contents-- - -```js -function multiplesOf3and5(number) { - - return true; -} - -multiplesOf3and5(1000); -``` - -# --solutions-- - -```js -const multiplesOf3and5 = (number) => { - var total = 0; - - for(var i = 0; i < number; i++) { - if(i % 3 == 0 || i % 5 == 0) { - total += i; - } - } - return total; -}; -``` diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md deleted file mode 100644 index a8abd3ff027..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 651dd5ae6ffb500e3f2ce47c -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -```js -console.log('with code'); -``` - -*** - -Making a statement based on her assumption. - -### --feedback-- - -No, that's not correct - -*** - -Expressing a possibility. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md deleted file mode 100644 index 27f5dcb5e42..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5d86ffb500e3f2ce47d -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md deleted file mode 100644 index a79f83d6f5a..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd5f41d697d0aab7833b5 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md deleted file mode 100644 index 13028d7c28a..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 651dd3e06ffb500e3f2ce478 -title: "Dialogue: Introducing" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-introducing ---- - -# --description-- - -What the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md deleted file mode 100644 index 3d67f522c07..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543abeff5f028dba112f278 -title: "I am: I'm" -challengeType: 19 -dashedName: i-am-im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, the verb `to be` is used to talk about identities, characteristics, and more. The contraction `I'm` is a combination of `I` and `am`. Here, Tom uses it to introduce himself. - -# --question-- - -## --text-- - -Which operation correctly expands the contraction `I'm`? - -## --answers-- - -`I is` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I am` - -*** - -`I was` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I have` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md deleted file mode 100644 index a2aa6a8f717..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 6543abf5f5f028dba112f279 -title: I'm -challengeType: 22 -dashedName: im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -The word `I'm` is a contraction of `I am`. Contractions are a way to shorten common combinations of words, especially with verbs. - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, that's right! _ Tom McKenzie.` - -## --blanks-- - -`I'm` diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md deleted file mode 100644 index 3b8b7cff0bd..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 6537e6ece93e5724eeb27c54 -title: Name and Job Title -challengeType: 19 -dashedName: name-and-job-title -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, we often mention our job or role in a company by saying, `I'm [Name], the [Job title].` This lets others know our position or role. - -# --question-- - -## --text-- - -What is Maria's job role at the company? - -## --answers-- - -`Graphic Designer` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Member` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Lead` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`CEO` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md deleted file mode 100644 index 2a3c405b6ad..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 651dd5386ffb500e3f2ce47a -title: Right -challengeType: 22 -dashedName: right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, to check or confirm something people sometimes use tag questions. For example, `You are a programmer, right?` Here, `right?` is used as a tag to check or confirm the previous statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, _?` - -## --blanks-- - -`are` - -### --feedback-- - -Pay attention to the verb in the sentence. - -*** - -`right` - -### --feedback-- - -Pay attention to the verb in the sentence. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md deleted file mode 100644 index 2ae09721cbf..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 6543aa3df5f028dba112f275 -title: Team Lead -challengeType: 22 -dashedName: team-lead -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -A `team lead` is a person who leads or manages a team. In the dialogue, Maria introduces herself as the team lead, meaning she has a leadership role. - -# --fillInTheBlank-- - -## --sentence-- - -`I'm Maria, the _ _.` - -## --blanks-- - -team - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -lead - -### --feedback-- - -Focus on the term Maria used to describe herself. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md deleted file mode 100644 index 3349bcfead9..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 6543aae6f5f028dba112f277 -title: "That's Right: 2" -challengeType: 22 -dashedName: thats-right-2 -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -Placeholder Description \_\_\_ \_\_ - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, _ _! I'm Tom McKenzie. It's a pleasure to meet you.` - -## --blanks-- - -`that's` - -*** - -`right` diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md deleted file mode 100644 index e85982fd561..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543aaa9f5f028dba112f276 -title: That's Right -challengeType: 19 -dashedName: thats-right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -When someone makes a correct assumption or guess about you, you can confirm it using phrases like `that's right`. It's a way of agreeing or saying yes to what is said. - -# --question-- - -## --text-- - -Which phrase does Tom use to confirm Maria's statement about him? - -## --answers-- - -`that's wrong` - -### --feedback-- - -`That's wrong` is used to disagree. - -*** - -`that's okay` - -### --feedback-- - -`that's okay` usually shows acceptance, not confirmation. - -*** - -`that's right` - -*** - -`that's left` - -### --feedback-- - -`that's left` refers to a direction, not confirmation. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md deleted file mode 100644 index dd254987129..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 651dd5296ffb500e3f2ce479 -title: You Are -challengeType: 22 -dashedName: you-are -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, when making introductions or identifying someone, you use the verb `to be`. In this case, `You are` is used to address the person Maria is talking to and affirmatively identify their occupation. - -Maria is introducing herself and confirming Tom's job role. `Are` is used in the present affirmative to make a statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, right?` - -## --blanks-- - -are - -### --feedback-- - -The verb `to be` is an irregular verb. When conjugated with the pronoun `you`, `be` becomes `are`. For example: `You are an English learner.` diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md new file mode 100644 index 00000000000..a041fbddef7 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md @@ -0,0 +1,15 @@ +--- +id: 655c0feadb1dd77f6cda623f +title: "Dialogue 1: A Job Interview" +challengeType: 21 +videoId: nLDychdBwUg +dashedName: dialogue-1-a-job-interview +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md new file mode 100644 index 00000000000..97f3f3245d8 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md @@ -0,0 +1,54 @@ +--- +id: 657b0f0be03b2137ed88b36c +title: Task 1 +challengeType: 19 +dashedName: task-1 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `interview` is a formal meeting where someone asks questions to learn about another person's experience, skills, or opinions. In job interviews, like in the dialogue, the interviewer asks about the candidate's previous job experiences. + +# --question-- + +## --text-- + +What is the purpose of Anna's meeting with the candidate? + +## --answers-- + +To discuss a new project at Acme Tech + +### --feedback-- + +The dialogue is about an interview, not a project discussion. + +--- + +To give a presentation on web development + +### --feedback-- + +The dialogue focuses on an interview, not a presentation. + +--- + +To have a casual conversation about programming + +### --feedback-- + +This is a formal interview, not a casual conversation. + +--- + +To conduct an interview about the candidate's job experience + +## --video-solution-- + +4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md new file mode 100644 index 00000000000..301a777a900 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md @@ -0,0 +1,50 @@ +--- +id: 657b106ced8c653be6b3218f +title: Task 2 +challengeType: 22 +dashedName: task-2 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Thanks for coming in for this interview. _ you _ me about your _ job experiences?` + +## --blanks-- + +`Can` + +### --feedback-- + +This word is used to ask if someone is able to do something. + +--- + +`tell` + +### --feedback-- + +This word is used when asking someone to give information. + +--- + +`previous` + +### --feedback-- + +This word is used to describe something that happened before now. + + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md new file mode 100644 index 00000000000..ad5202d23d2 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md @@ -0,0 +1,58 @@ +--- +id: 657b108cf870283d22b21e8e +title: Task 3 +challengeType: 19 +dashedName: task-3 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the simple present tense is used to describe habitual or usual actions. However, when you are talking about past roles or experiences, like in an interview, you should use the simple past tense. + +The simple past tense often involves changing verbs. For example, `is` becomes `was` for singular subjects and `are` becomes `were` for plural subjects. + +For example, `I am a teacher` in the present becomes `I was a teacher` for past experiences. Similarly, `They are engineers` changes to `They were engineers` when speaking about the past. + +# --question-- + +## --text-- + +What was the candidate's position at Acme Tech? + +## --answers-- + +`A project manager` + +### --feedback-- + +The candidate stated they were a programmer, not a project manager. + +--- + +`A database analyst` + +### --feedback-- + +The candidate mentioned being a programmer, which is different from a database analyst. + +--- + +`A programmer` + +--- + +`A software tester` + +### --feedback-- + +The candidate specifically mentioned their role as a programmer, not a software tester. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md new file mode 100644 index 00000000000..f757d7077f1 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md @@ -0,0 +1,38 @@ +--- +id: 657b110ad8afcc3f8e586362 +title: Task 4 +challengeType: 22 +dashedName: task-4 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that have been completed in the past. It involves changing verbs to show that the action happened before now. In this challenge, you'll practice using the simple past form of verb `to be`. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ there for three years. I _ responsible for developing web applications and maintaining the company's database.` + +## --blanks-- + +`was` + +### --feedback-- + +The first `was` indicates the completion of the time period the candidate spent at their previous job. + +--- + +`was` + +### --feedback-- + +The second `was` is used to describe past responsibility, indicating what the candidate used to do in their previous job. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md new file mode 100644 index 00000000000..a2258172744 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md @@ -0,0 +1,49 @@ +--- +id: 657b115008a62d41c0d7482f +title: Task 5 +challengeType: 19 +dashedName: task-5 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the context of programming and technology, the term `web applications` refers to software programs that run on a web server and are accessed through a web browser. They are an essential part of modern technology, allowing users to perform functions or access services over the internet. + +# --question-- + +## --text-- + +What does `web applications` refer to in the context of programming? + +## --answers-- + +Mobile apps that are downloaded from app stores + +### --feedback-- + +While mobile apps are a type of application, `web applications` specifically refer to those accessed through a web browser. + +--- + +Programs that run on a web server and are accessed via a web browser + +--- + +Physical hardware used in networking + +### --feedback-- + +Web applications are software, not physical hardware. + +--- + +Websites that only provide information without user interaction + +### --feedback-- + +Web applications are interactive and functional, not just informational. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md new file mode 100644 index 00000000000..6c2c5ba78bf --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md @@ -0,0 +1,49 @@ +--- +id: 657b119f0ce64343420bb850 +title: Task 6 +challengeType: 19 +dashedName: task-6 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `database` is a structured collection of data, typically stored electronically in a computer system. It is used to organize, store, and retrieve large amounts of information efficiently. In programming, `database` is essential for managing data that applications need to function. + +# --question-- + +## --text-- + +What is a `database` in the context of programming? + +## --answers-- + +A structured collection of data stored electronically + +--- + +A tool for designing websites + +### --feedback-- + +While important in web development, a database is not a tool for designing websites, but for storing data. + +--- + +A programming language used to create applications + +### --feedback-- + +A database is not a programming language; it's a system for storing and managing data. + +--- + +A type of computer virus + +### --feedback-- + +A database is a safe and structured way to store data, not a computer virus. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md new file mode 100644 index 00000000000..03e329649a9 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md @@ -0,0 +1,40 @@ +--- +id: 657b11e082e48a44eb4bfc09 +title: Task 7 +challengeType: 22 +dashedName: task-7 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's response and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ also part of the _ update team.` + +## --blanks-- + +`was` + +### --feedback-- + +This word is a past tense verb. You use it to talk about something that happened in the past. + +--- + +`software` + +### --feedback-- + +This word refers to computer programs. It's an important term in technology and programming. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md new file mode 100644 index 00000000000..67343b31705 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -0,0 +1,57 @@ +--- +id: 657b11f87368cf463ea4fe46 +title: Task 8 +challengeType: 19 +dashedName: task-8 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. For example: + + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. + `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + +# --question-- + +## --text-- + +How does Anna ask about specific projects in the past tense? + +## --answers-- + +`Where there any specific projects you'd like to mention?` + +### --feedback-- + +`Where` is used for locations. The correct form for asking about past events is `Were`. + +--- + +`Were there any specific projects you'd like to mention?` + +--- + +`Was there any specific projects you'd like to mention?` + +### --feedback-- + +`Was` is used with singular nouns. Since `projects` is plural, `Were` is the correct choice. + +--- + +`Are there any specific projects you'd like to mention?` + +### --feedback-- + +`Are` is present tense. The question is about past projects, so `Were` is needed. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md new file mode 100644 index 00000000000..e6bc643d065 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md @@ -0,0 +1,55 @@ +--- +id: 657b1240ef768447b80817ad +title: Task 9 +challengeType: 19 +dashedName: task-9 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense, as reviewed earlier, is used for actions completed in the past. In this context, `we were involved in` combines the simple past tense (`were`) with the expression `involved in`, which means being a part of something, especially in an active or important role. For example, `They were involved in organizing the event` means they played an important role in organizing it. + +# --question-- + +## --text-- + +How does the candidate describe their role in the project? + +## --answers-- + +`We had involvement in the development of the e-commerce platform.` + +### --feedback-- + +Although this phrase communicates involvement, the more common expression in English is `were involved in`. + +--- + +`We were engaged in the development of the e-commerce platform.` + +### --feedback-- + +`engaged in` is similar but not the exact phrase used by the candidate. `Involved in` specifically indicates an active participation. + +--- + +`We were involved in the development of the e-commerce platform.` + +--- + +`We participated in the development of the e-commerce platform.` + +### --feedback-- + +While `participated in` suggests involvement, the specific phrase used here is `involved in`. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md new file mode 100644 index 00000000000..f51e04c012a --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md @@ -0,0 +1,49 @@ +--- +id: 657b12ae08dd7049b300c901 +title: Task 10 +challengeType: 19 +dashedName: task-10 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +An `e-commerce platform` refers to a software application that allows businesses to manage their online sales operations. It typically includes features for displaying products, processing orders, and handling customer transactions. This term is essential in the world of online business, as it enables companies to sell goods and services over the internet. + +# --question-- + +## --text-- + +What is an `e-commerce platform` in the context of online business? + +## --answers-- + +A platform for social media marketing + +### --feedback-- + +While e-commerce platforms may use social media for marketing, they are primarily used for online sales operations. + +--- + +A software application for managing online sales + +--- + +A tool for website design and development + +### --feedback-- + +An e-commerce platform is specifically for managing online sales, not just website design. + +--- + +A system for email communication with customers + +### --feedback-- + +Though communication might be a feature, an e-commerce platform's main function is to manage online sales. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md new file mode 100644 index 00000000000..092c2b7ff32 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md @@ -0,0 +1,41 @@ +--- +id: 657b12e7c306334b7c320221 +title: Task 11 +challengeType: 22 +dashedName: task-11 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's statement and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for the checkout process, and it _ a successful implementation.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense of `are` used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense of `is` used for singular subjects or situations. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md new file mode 100644 index 00000000000..5a555480e1c --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md @@ -0,0 +1,49 @@ +--- +id: 657b13088693ef4ce21ce0e4 +title: Task 12 +challengeType: 19 +dashedName: task-12 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `checkout process` refers to the steps involved in completing a purchase, whether in a physical store or online. In a physical store, this usually involves taking items to a cashier, paying, and receiving a receipt. In online shopping, it includes adding items to a cart, entering shipping and payment details, and finalizing the order. + +# --question-- + +## --text-- + +What does the `checkout process` typically involve? + +## --answers-- + +Signing up for a store's loyalty program + +### --feedback-- + +While loyalty programs are part of customer engagement, the checkout process is specifically about completing a transaction. + +--- + +Arranging items on shelves in a store + +### --feedback-- + +Arranging items is a part of store management, not related to the checkout process of completing a purchase. + +--- + +Conducting market research + +### --feedback-- + +Market research is important for business strategy, but it's separate from the checkout process, which is directly involved in sales transactions. + +--- + +Completing a purchase through payment and receipt of goods + +## --video-solution-- + +4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md new file mode 100644 index 00000000000..db7a9bbed14 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md @@ -0,0 +1,49 @@ +--- +id: 657b133afcef714e542b557a +title: Task 13 +challengeType: 19 +dashedName: task-13 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Implementation` in a technical or business context refers to the process of putting a plan or design into effect. In software development, for instance, implementation involves the actual coding and setup of a software application based on designed specifications. It is a critical phase where ideas or plans are turned into a functioning reality. + +# --question-- + +## --text-- + +What does `implementation` mean in a project context? + +## --answers-- + +The planning stage of a project + +### --feedback-- + +Planning is the phase where strategies are formed, not the actual execution or implementation of those plans. + +--- + +The analysis of project results + +### --feedback-- + +Analysis is about evaluating outcomes, whereas implementation is about executing or carrying out the project plans. + +--- + +The process of team formation + +### --feedback-- + +Team formation is part of project setup, but implementation specifically refers to executing the planned tasks of the project. + +--- + +The execution of a plan or design + +## --video-solution-- + +4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md new file mode 100644 index 00000000000..1fa977ff3c0 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md @@ -0,0 +1,49 @@ +--- +id: 657b135e9029fb4f8141e40c +title: Task 14 +challengeType: 22 +dashedName: task-14 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. This is a great way to practice and remember these words. + +# --fillInTheBlank-- + +## --sentence-- + +`Anna: That's excellent. _ there any specific projects you'd like to mention?` + +`Candidate: Yes, in one of my team's projects, we were _ in the development of an e-commerce platform. We were responsible for the _ process, and it was a successful implementation.` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past tense form of `are`. The first letter should be capitalized. + +--- + +`involved` + +### --feedback-- + +This word means participating actively in something. + +--- + +`checkout` + +### --feedback-- + +This term refers to the process of completing a purchase. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md new file mode 100644 index 00000000000..94904516eba --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md @@ -0,0 +1,54 @@ +--- +id: 657b138d33db9e50f116b5f0 +title: Task 15 +challengeType: 19 +dashedName: task-15 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and answer the question. + +# --question-- + +## --text-- + +How does Anna ask about the candidate's educational background in computer science? + +## --answers-- + +`Are you educated in computer science?` + +### --feedback-- + +`Are you` is present tense, but Anna's question is about the candidate's past education. + +--- + +`Do you study computer science?` + +### --feedback-- + +`Do you study` is present tense. The question is about past education. + +--- + +`Were you educated in computer science?` + +--- + +`Have you studied computer science?` + +### --feedback-- + +`Have you studied` is a different form, asking if they have ever studied it at any time. `Were you educated` specifically asks about formal education in the past. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md new file mode 100644 index 00000000000..6044644f850 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md @@ -0,0 +1,49 @@ +--- +id: 657b1431076b365555784189 +title: Task 16 +challengeType: 19 +dashedName: task-16 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `bachelor's degree` is an undergraduate academic degree awarded by colleges and universities upon completion of a course of study. In the term `bachelor's degree`, the use of the noun (`bachelor`) followed by the `'s` indicates possession or association. This form is commonly used to show that something belongs to or is related to the noun, as in `today's news` or `teacher's guide`. + +# --question-- + +## --text-- + +What does `bachelor's degree` refer to? + +## --answers-- + +An undergraduate academic degree + +--- + +A type of professional certification + +### --feedback-- + +A bachelor's degree is an academic qualification, not a professional certification. + +--- + +A high school diploma + +### --feedback-- + +A bachelor's degree is a higher education qualification, more advanced than a high school diploma. + +--- + +A master's program entry requirement + +### --feedback-- + +While a bachelor's degree may be required for a master's program, it itself refers to an undergraduate degree. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md new file mode 100644 index 00000000000..299109790e0 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md @@ -0,0 +1,56 @@ +--- +id: 657b145976723b56a97b8dda +title: Task 17 +challengeType: 19 +dashedName: task-17 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `I was introduced to` uses the simple past tense form `was` of the verb `be`, combined with the past participle `introduced`. This structure, `be` followed by a verb suffixed with `-ed`, is often used to describe actions that happened to the subject in the past. For example: + +`At college, I was introduced to many programing languages` + +# --question-- + +## --text-- + +What does the candidate mean by saying `I was introduced to various programming languages and software development principles`? + +## --answers-- + +I taught myself various programming languages and principles + +### --feedback-- + +`I was introduced to` implies being formally taught or shown by someone else, not self-teaching. + +--- + +I learned about various programming languages and principles in my studies + +--- + +I have extensive experience with various programming languages and principles + +### --feedback-- + +The phrase indicates initial exposure to these topics, not necessarily extensive experience. + +--- + +I developed various programming languages and principles + +### --feedback-- + +Being introduced to something means learning about it for the first time, not creating or developing it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md new file mode 100644 index 00000000000..2e11e13fa69 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md @@ -0,0 +1,49 @@ +--- +id: 657b149630b3ea5873269a38 +title: Task 18 +challengeType: 19 +dashedName: task-18 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `various` is an adjective used to describe a number of different types or kinds of something, emphasizing diversity or variety. It is often used to indicate that there are several distinct items or examples being referred to. For example, saying `various books` means books of different kinds or genres. + +# --question-- + +## --text-- + +What does `various` imply when talking about programming languages and software development principles? + +## --answers-- + +Different types or kinds + +--- + +A specific type or kind + +### --feedback-- + +The term `various` implies diversity, not specificity. + +--- + +Only one type + +### --feedback-- + +`Various` indicates a number of different types, not just one. + +--- + +Irrelevant or unrelated types + +### --feedback-- + +`Various` does mean different types, but these are usually relevant and related to the context. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md new file mode 100644 index 00000000000..b217384d87c --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md @@ -0,0 +1,38 @@ +--- +id: 657b14d8353d665a187fe771 +title: Task 19 +challengeType: 22 +dashedName: task-19 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this challenge, you'll practice filling in key terms from the dialogue. These terms are commonly used in job interviews and are essential for understanding the context of the discussion. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Sure, I was a programmer at Acme Tech. I was there for three years. I was responsible for developing web _ and maintaining the company's _. I was also part of the software update team.` + +## --blanks-- + +`applications` + +### --feedback-- + +These are programs designed to perform specific tasks or functions. + +--- + +`database` + +### --feedback-- + +This is a collection of information organized for easy access, management, and updating. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md new file mode 100644 index 00000000000..5d81b22a9e7 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md @@ -0,0 +1,62 @@ +--- +id: 657b153ac677705c7059530d +title: Task 20 +challengeType: 19 +dashedName: task-20 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `could you tell me` is a polite way to ask someone for information. It's commonly used in formal or professional situations, like job interviews or meetings. +In English, some verbs have irregular past forms, meaning they do not follow the regular pattern of adding `-ed` to make the past tense. `Can` is one such verb, and its irregular simple past form is `could`. + +The existence of irregular forms, like `could`, often comes from the way language has evolved over time. These forms do not follow the regular patterns and need to be memorized. + +For example: + +- Present: `I can speak English.` +- Past: `I could speak English when I was six.` + +# --question-- + +## --text-- + +What does the phrase `could you tell me` in Anna's sentence express? + +## --answers-- + +A polite request for information + +--- + +A command to do something immediately + +### --feedback-- + +The phrase `could you tell me` is used for polite requests, not direct commands. + +--- + +A suggestion for future action + +### --feedback-- + +This phrase is asking for information now, not suggesting something for the future. + +--- + +An offer to help someone + +### --feedback-- + +This phrase is more about asking for information than offering help. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md new file mode 100644 index 00000000000..ecf0d666af0 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md @@ -0,0 +1,54 @@ +--- +id: 657b15dbcafe4d5f39a5de82 +title: Task 21 +challengeType: 19 +dashedName: task-21 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `previous` is used to describe something that happened before the current time or situation. It's often used to refer to past experiences, jobs, or events. + +# --question-- + +## --text-- + +In the context of Anna's question, what does `previous` refer to? + +## --answers-- + +Past roles and responsibilities + +--- + +Future roles and responsibilities + +### --feedback-- + +`Previous` refers to something that has already happened, not something in the future. + +--- + +Current roles and responsibilities + +### --feedback-- + +`Previous` means something that happened before now, not what is happening currently. + +--- + +Unrelated roles and responsibilities + +### --feedback-- + +`Previous` specifically relates to roles and responsibilities that were held before, not those unrelated. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md new file mode 100644 index 00000000000..8497f67b9bb --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md @@ -0,0 +1,53 @@ +--- +id: 657b160d6a8662610fe6a523 +title: Task 22 +challengeType: 22 +dashedName: task-22 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that were completed in the past. Regular verbs in the past tense usually end with `-ed`, while irregular verbs have unique past forms. For example, as you learned in previous tasks, `was` and `were` are the past forms of `is` and `are`. + +Examples of simple past tense: + +- `I worked at a company.` (`work` becomes `worked`) +- `I was happy.` (`is` becomes `was`) +- `We were busy.` (`are` becomes `were`) + +# --fillInTheBlank-- + +## --sentence-- + +`Hello! Certainly. I _ at Mock Corporation for five years. I _ part of a team of software engineers, and we _ responsible for developing and maintaining various applications.` + +## --blanks-- + +`worked` + +### --feedback-- + +Think of the past tense of `work`, a regular verb that follows the usual `-ed` ending pattern. + +--- + +`was` + +### --feedback-- + +Recall the past tense form of `is`, which changes to a completely different word in its irregular past form. + +--- + +`were` + +### --feedback-- + +Consider the past tense of `are`, an irregular verb that also changes to a different word in the past. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md new file mode 100644 index 00000000000..8e1b26a3bce --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md @@ -0,0 +1,46 @@ +--- +id: 657b163c9da40e62b904be1f +title: Task 23 +challengeType: 22 +dashedName: task-23 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the past simple interrogative. In questions, the simple past tense often begins with a past tense verb, followed by the subject and the rest of the sentence. This structure is used to ask about past events or states. + +# --fillInTheBlank-- + +## --sentence-- + +`That's great to hear. _ the members of the team _ _ any specific achievements or projects?` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past form of `are` used to ask about a past state or condition. + +--- + +`involved` + +### --feedback-- + +Think of a word that means `participated in` or `engaged with`. + +--- + +`in` + +### --feedback-- + +A preposition that often follows `involved` to indicate participation or inclusion. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md new file mode 100644 index 00000000000..bc7924edcf6 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md @@ -0,0 +1,54 @@ +--- +id: 657b18e71067d6680b9ac5d3 +title: Task 24 +challengeType: 19 +dashedName: task-24 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `redesign` means to design something again or differently. It's often used in the context of improving or updating the design of an existing product, service, or structure. In software and web development, redesigning is a common practice to enhance functionality, user experience, or aesthetics. + +# --question-- + +## --text-- + +What does `redesign` imply in Candidate2's statement about the website project? + +## --answers-- + +To design for the first time + +### --feedback-- + +`Redesign` implies working on something that already exists, not creating it for the first time. + +--- + +To remove the design + +### --feedback-- + +`Redesign` means to change or improve the existing design, not to remove it. + +--- + +To change or improve an existing design + +--- + +To copy a design + +### --feedback-- + +`Redesign` involves making changes or improvements, not copying a design as it is. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md new file mode 100644 index 00000000000..ed588a90563 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md @@ -0,0 +1,54 @@ +--- +id: 657b1985ae17886b05b382b1 +title: Task 25 +challengeType: 19 +dashedName: task-25 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `performance` in a technical context often refers to how well a system or component operates, especially in terms of speed, efficiency, and reliability. For websites and software, performance can relate to how quickly pages load, the responsiveness of the application, or the stability of the system under various conditions. + +# --question-- + +## --text-- + +What does `performance` refer to in Candidate2's statement about the website? + +## --answers-- + +A live presentation + +### --feedback-- + +While `performance` can mean a presentation, in this context, it relates to the functioning of the website. + +--- + +Artistic display + +### --feedback-- + +In a technical context, `performance` refers to operational effectiveness, not an artistic aspect. + +--- + +Financial success + +### --feedback-- + +`Performance` in this context is about the website's operational aspects, not its financial success. + +--- + +How well the website operates + +## --video-solution-- + +4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md new file mode 100644 index 00000000000..98e6bda774a --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md @@ -0,0 +1,54 @@ +--- +id: 657b19bf7b32af6caf763ef7 +title: Task 26 +challengeType: 19 +dashedName: task-26 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `collaborative effort` refers to a situation where people work together as a team to achieve a common goal. This kind of teamwork is essential in many work environments, especially on projects where different skills and perspectives are needed. + +# --question-- + +## --text-- + +What does `collaborative effort` imply in the context of Candidate2's statement? + +## --answers-- + +Working independently + +### --feedback-- + +`Collaborative effort` means working together as a team, not independently. + +--- + +Teamwork to achieve a goal + +--- + +Avoiding responsibility + +### --feedback-- + +`Collaborative effort` involves taking shared responsibility, not avoiding it. + +--- + +Focusing on individual skills + +### --feedback-- + +`Collaborative effort` emphasizes teamwork over individual skills. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md new file mode 100644 index 00000000000..56a621b07c6 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md @@ -0,0 +1,38 @@ +--- +id: 657b1a03df3ec46eca276046 +title: Task 27 +challengeType: 22 +dashedName: task-27 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. + +# --fillInTheBlank-- + +## --sentence-- + +`Yes, our team _ involved in a project to _ the company's website.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`redesign` + +### --feedback-- + +This word means to design something again in a different way. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md new file mode 100644 index 00000000000..66d49e9e89f --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md @@ -0,0 +1,55 @@ +--- +id: 657b1a27dc6daf6ffd52ff1f +title: Task 28 +challengeType: 19 +dashedName: task-28 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the noun suffixed with `'s` followed by a second noun structure is used to show possession or belonging. If the first noun is singular, as in `Sarah's laptop`, it indicates that the laptop belongs to Sarah. However, if the first noun is plural, the structure changes to noun suffixed with `'`, as in `teachers' office`, indicating an office for teachers. + +# --question-- + +## --text-- + +What does `master's degree` in the context of the dialogue refer to? + +## --answers-- + +A degree for school teachers + +### --feedback-- + +`Master's degree` refers to an advanced academic degree, not specifically for teachers. + +--- + +A primary level educational degree + +### --feedback-- + +`Master's degree` is a higher education qualification, beyond the primary level. + +--- + +A degree in mastering skills + +### --feedback-- + +While it implies expertise, `master's degree` specifically refers to an academic qualification. + +--- + +An advanced academic degree + +## --video-solution-- + +4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md new file mode 100644 index 00000000000..bf63c3e8d24 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md @@ -0,0 +1,49 @@ +--- +id: 657b1a637e4dc571f8f4d3d7 +title: Task 29 +challengeType: 19 +dashedName: task-29 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `appreciate` is often used to express gratitude or to acknowledge the value or importance of something or someone's actions. It's a way of showing that you recognize and are thankful for someone's help, effort, or achievement. + +# --question-- + +## --text-- + +In a work meeting, your colleague says, `I really appreciate your help on this project.` What is your colleague expressing? + +## --answers-- + +Dissatisfaction with your work + +### --feedback-- + +`Appreciate` means to be grateful or thankful, not to show dissatisfaction. + +--- + +Indifference to your contribution + +### --feedback-- + +`Appreciate` is used to express positive recognition, not indifference. + +--- + +Gratitude for your contribution + +--- + +A need for more assistance + +### --feedback-- + +`Appreciate` here indicates satisfaction with the help received, not a request for more assistance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md new file mode 100644 index 00000000000..4fa33c1c2d0 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md @@ -0,0 +1,47 @@ +--- +id: 657b1a9581015573806e1e20 +title: Task 30 +challengeType: 22 +dashedName: task-30 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words you learned. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for implementing new features and ensuring the website's performance. It _ a _ effort, and we were able to deliver the project on time.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense form of `are`, used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`collaborative` + +### --feedback-- + +This word means working together as a team. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md new file mode 100644 index 00000000000..6013cb50f86 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md @@ -0,0 +1,39 @@ +--- +id: 657b1cc072206e7ac3db88b8 +title: Task 31 +challengeType: 22 +dashedName: task-31 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the missing words correctly. This is a great way to practice what you've learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I have a _ degree in computer science. My studies _ quite intensive, and I was introduced to many different methodologies.` + +## --blanks-- + +`master's` + +### --feedback-- + +This term, using the `noun's noun` structure, refers to an advanced academic degree. + +--- + +`were` + +### --feedback-- + +This is the past tense form of `are` used for plural subjects or things. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md new file mode 100644 index 00000000000..1c7c7b4603c --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md @@ -0,0 +1,30 @@ +--- +id: 657b1d080265ba7c4f96bf79 +title: Task 32 +challengeType: 22 +dashedName: task-32 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task helps you review the word you learned. Listen to the dialogue and complete the sentence correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`Impressive! We _ candidates with strong educational backgrounds and practical experience.` + +## --blanks-- + +`appreciate` + +### --feedback-- + +This word means to recognize the value or importance of something or someone's actions. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md new file mode 100644 index 00000000000..28e4211c290 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md @@ -0,0 +1,15 @@ +--- +id: 657b1d4ec0e2587e8bcc95f7 +title: "Dialogue 3: Two Workmates Talk About Their Backgrounds" +challengeType: 21 +dashedName: dialogue-3-two-workmates-talk-about-their-backgrounds +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md new file mode 100644 index 00000000000..df8ebc66d25 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md @@ -0,0 +1,54 @@ +--- +id: 657b1da0b27fef8117827ce5 +title: Task 33 +challengeType: 19 +dashedName: task-33 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned about the simple past tense. Now, you can explore it further. The simple past tense is often formed by adding `-ed` to a verb. But, when a verb ends with an `e`, you just add a `d`. For example, `notice` becomes `noticed`. + +# --question-- + +## --text-- + +What does `noticed` in Sarah's sentence indicate? + +## --answers-- + +Sarah observed something in the past + +--- + +Sarah is planning to observe something + +### --feedback-- + +The simple past tense `noticed` indicates a completed action in the past, not a future plan. + +--- + +Sarah continuously observes something + +### --feedback-- + +The simple past tense `noticed` is used for actions that were completed, not ongoing actions. + +--- + +Sarah never observes anything + +### --feedback-- + +`Noticed` implies that Sarah did observe something, not never observing. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md new file mode 100644 index 00000000000..5a1ba6afbfc --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md @@ -0,0 +1,30 @@ +--- +id: 657b1dfec76149836ea5c7d0 +title: Task 34 +challengeType: 22 +dashedName: task-34 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you will focus on the past simple negative. It's created by adding `not` after the auxiliary verb `was` or `were`. For example, `was` becomes `wasn't` (`was not`) and `were` becomes `weren't` (`were not`). This form is used to describe something that did not happen in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`It _ exactly tech-related, but I learned a lot about problem-solving and critical thinking.` + +## --blanks-- + +`wasn't` + +### --feedback-- + +This word is used to make a negative statement in the past tense. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md new file mode 100644 index 00000000000..da30e71e20a --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md @@ -0,0 +1,49 @@ +--- +id: 657b1e2fad2ffe84ab420a56 +title: Task 35 +challengeType: 19 +dashedName: task-35 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You're already familiar with `wasn't` and `weren't` for past simple negative. Now, let's explore `didn't`, a contraction of `did not`. It's used with the base form of verbs (the infinitive without `to`) to express that an action did not happen in the past. For example, `didn't go` means the action of going did not occur. + +# --question-- + +## --text-- + +Imagine you are reading a story about a character who planned to attend a concert but couldn't. How would you describe this situation? + +## --answers-- + +The character enjoyed the concert + +### --feedback-- + +Using `didn't` suggests the character did not go to the concert, contradicting the idea of enjoying it. + +--- + +The character didn't attend the concert + +--- + +The character always goes to concerts + +### --feedback-- + +This expression refers to a regular habit, not a specific event in the past. + +--- + +The character is looking forward to the next concert + +### --feedback-- + +This option is about future anticipation. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md new file mode 100644 index 00000000000..938a8118ce2 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md @@ -0,0 +1,54 @@ +--- +id: 657b1e66159fec86336a737b +title: Task 36 +challengeType: 19 +dashedName: task-36 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned the basics of the simple past tense. Now you can dive deeper into it. Typically, the simple past tense is formed by adding `-ed` to regular verbs. For instance, the verb `play` becomes `played` in the simple past. This tense is used to describe actions that were completed at a specific time in the past. + +# --question-- + +## --text-- + +What does `I played` in Sophie's sentence suggest about her experience with coding? + +## --answers-- + +She casually experimented with coding in the past + +--- + +She is currently playing a coding game + +### --feedback-- + +`Played` is in the past tense, indicating a past action, not something happening currently. + +--- + +She plans to start coding soon + +### --feedback-- + +`Played` implies she already has some experience with coding, not that she is planning to start. + +--- + +She never tried coding + +### --feedback-- + +Using `played` confirms she did engage in coding, contradicting the idea of never trying it. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md new file mode 100644 index 00000000000..2bd70b3d732 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md @@ -0,0 +1,49 @@ +--- +id: 657b1e9a62603587747f7f45 +title: Task 37 +challengeType: 19 +dashedName: task-37 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In English, when forming questions in the simple past tense, you often use `did`. This is followed by the subject and the base form of the verb (without `ed`). For example, `Did you enjoy` is a past simple interrogative phrase where `did` is the auxiliary verb, `you` is the subject, and `enjoy` is the base form of the verb. + +# --question-- + +## --text-- + +What does a question like `Did you enjoy the concert last night?` ask about? + +## --answers-- + +Are you going to enjoy the concert? + +### --feedback-- + +This implies a future event. The question with `did` is asking about a past experience. + +--- + +Do you enjoy concerts in general? + +### --feedback-- + +This is asking about general preferences, not a specific past event. + +--- + +Did you have a good experience at the concert last night? + +--- + +Will you enjoy future concerts? + +### --feedback-- + +The question is about a past event, not future experiences. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md new file mode 100644 index 00000000000..430fa995037 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md @@ -0,0 +1,42 @@ +--- +id: 657b1ee1de7216896b5b4361 +title: Task 38 +challengeType: 22 +dashedName: task-38 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blank correctly. This task is a review. Remember, the simple past tense is used to talk about actions or situations in the past, and the negative form is used to describe things that did not happen. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: That's interesting! So, you _ work on many programming projects during your studies?` + +`Sophie: No, not really. I _ around with coding, but most of my projects involved circuit designs and electrical systems. It was a bit different.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used here to talk about something that was not done in the past. + +--- + +`played` + +### --feedback-- + +This word suggests that Sophie casually engaged in coding for pleasure or interest. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md new file mode 100644 index 00000000000..dfcc68a881a --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md @@ -0,0 +1,40 @@ +--- +id: 657b1f0585d48f8ac0b19654 +title: Task 39 +challengeType: 22 +dashedName: task-39 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you'll focus on answering questions in the simple past tense. When responding to a past simple interrogative (a question), you can answer affirmatively with `did` or negatively with `didn't`. For example, `Did you go to the party?` can be answered with `I did` (affirmative) or `I didn't` (negative). Listen to the dialogue and fill in the blanks correctly to practice this structure. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: I see. _ you enjoy your time there, even if it wasn't entirely tech-focused? Sophie: I _.` + +## --blanks-- + +`Did` + +### --feedback-- + +This word is used to form a past simple interrogative question. The first letter should be capitalized. + +--- + +`did` + +### --feedback-- + +This response is an affirmative answer to the past simple interrogative question. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md new file mode 100644 index 00000000000..92e4b28c489 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md @@ -0,0 +1,49 @@ +--- +id: 657b1f598f63008c8bdb20b8 +title: Task 40 +challengeType: 19 +dashedName: task-40 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the simple past tense, some verbs are irregular and don't follow the regular `-ed` ending pattern. One example of this is the verb `meet`, which becomes `met` in the past tense. This is important to remember when talking about past events. + +# --question-- + +## --text-- + +During a class reunion, an old friend tells you, `We met for the first time in art class.` What is your friend referring to with `met`? + +## --answers-- + +We are meeting right now in art class + +### --feedback-- + +The use of `met` indicates a past event, not something happening currently. + +--- + +Our first encounter was in the past, specifically in art class + +--- + +We will meet for the first time soon + +### --feedback-- + +`Met` indicates a past action, not a future arrangement. + +--- + +We have never been in art class together + +### --feedback-- + +`Met` suggests a past meeting. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md new file mode 100644 index 00000000000..e3cdc339c1f --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md @@ -0,0 +1,49 @@ +--- +id: 657b1f981cd42e8dc3b282d9 +title: Task 41 +challengeType: 19 +dashedName: task-41 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn another special case in this task. It's the past tense form of `have`. Unlike regular verbs that add `-ed` for the past tense, `have` becomes `had`. This irregular form is used for both singular and plural subjects in the past tense, making it a unique and important verb to remember. + +# --question-- + +## --text-- + +What does `had` imply in a sentence like `They had a meeting yesterday?` + +## --answers-- + +They possessed or experienced something in the past + +--- + +They are having a meeting right now + +### --feedback-- + +`Had` is used for past actions, indicating the meeting occurred in the past, not at the present moment. + +--- + +They will have a meeting tomorrow + +### --feedback-- + +`Had` indicates a past action, not a future plan. + +--- + +They never have meetings + +### --feedback-- + +Using `had` confirms that the meeting took place in the past. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md new file mode 100644 index 00000000000..9f86ab82bcb --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md @@ -0,0 +1,47 @@ +--- +id: 657b1fe950c0df90346e5d12 +title: Task 42 +challengeType: 22 +dashedName: task-42 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the words `met`, `had`, and `wasn't`. You have already learned these words. Listen to the dialogue and fill in the blanks with the correct words. This exercise is a good way to practice and reinforce your understanding of these words in context. + +# --fillInTheBlank-- + +## --sentence-- + +`I did. It was challenging, but I _ some fantastic people. We _ a bunch of fun coding marathons, although I _ always a very strong programmer.` + +## --blanks-- + +`met` + +### --feedback-- + +This word is used here to describe encountering people in the past. + +--- + +`had` + +### --feedback-- + +This word is used to express possession or experiences in the past. + +--- + +`wasn't` + +### --feedback-- + +This word is the negative form in the past tense, indicating something that was not the case. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md new file mode 100644 index 00000000000..2ee4e256d2a --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md @@ -0,0 +1,39 @@ +--- +id: 657b201372864e91d4f5bb53 +title: Task 43 +challengeType: 22 +dashedName: task-43 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +When a verb ends in a consonant followed by `y`, you should change the `y` to `i` and add `ed` for the past tense. For example, `carry` becomes `carried`. Note that this rule applies when the `y` follows a consonant, not a vowel, so the simple past form of `convey` is `conveyed`. For regular verbs, you simply add `ed` to form the past tense. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ at a small college as well and _ in information technology.` + +## --blanks-- + +`studied` + +### --feedback-- + +The past simple tense of `study` is formed by changing `y` to `i` and adding `ed`. + +--- + +`majored` + +### --feedback-- + +This word follows the regular past simple tense formation by just adding `ed`. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md new file mode 100644 index 00000000000..67255d1bac6 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md @@ -0,0 +1,26 @@ +--- +id: 657b20338e0802931673c1e1 +title: Task 44 +challengeType: 22 +dashedName: task-44 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + +# --description-- + +You've learned that for verbs ending in `e`, you simply add `d` to form the simple past tense. Choose the correct form of `love` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she really _ the beach vacation.` + +## --blanks-- + +`loved` + +### --feedback-- + +To form the simple past, add `d` to the base form of the verb, `love`. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md new file mode 100644 index 00000000000..4d89a2935c0 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md @@ -0,0 +1,54 @@ +--- +id: 657b20985d315095e5c3851d +title: Task 45 +challengeType: 19 +dashedName: task-45 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this context, `got` is a special case in the simple past tense. It's the past tense of `get`. Unlike regular verbs that typically add `-ed` for the past tense, `get` changes to `got`. + +# --question-- + +## --text-- + +In the context of Sarah's statement, what does `got` imply about her experience? + +## --answers-- + +She is getting the opportunity now + +### --feedback-- + +`Got` indicates a past opportunity, not something happening currently. + +--- + +She had the opportunity in the past + +--- + +She will get the opportunity in the future + +### --feedback-- + +`Got` refers to a past experience, not a future possibility. + +--- + +She never gets such opportunities + +### --feedback-- + +`Got` in this context suggests she did have this opportunity. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md new file mode 100644 index 00000000000..ac32d364daa --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md @@ -0,0 +1,50 @@ +--- +id: 657b21e28a01039cb27b4f13 +title: Task 46 +challengeType: 19 +dashedName: task-46 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `exactly` is used to emphasize the truth or accuracy of a statement or description. It can mean `precisely` or `just`. For example, if someone says, `It's exactly what I needed`, they mean that it is precisely or perfectly what was required. `Exactly` often highlights that something is correct in every detail. + +# --question-- + +## --text-- + +What does `exactly` imply in a sentence like `This is exactly the kind of work I enjoy`? + +## --answers-- + +This is somewhat similar to the work I enjoy + +### --feedback-- + +`Exactly` indicates a perfect match, not just a similarity. + +--- + +This is the opposite of the work I enjoy + +### --feedback-- + +`Exactly` implies a perfect match, not an opposite. + +--- + +I am not sure if this is the work I enjoy + +### --feedback-- + +Using `exactly` shows certainty, not uncertainty. + +--- + +This is precisely the type of work that I find enjoyable + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md new file mode 100644 index 00000000000..36c267c651b --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md @@ -0,0 +1,35 @@ +--- +id: 657b221b2ab0ac9e18a173ef +title: Task 47 +challengeType: 22 +dashedName: task-47 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Let's look at `exactly` and `exact`. You use `exactly` to show something is just right or very true. It is an adverb. For example, `You did it exactly right!`. + +`Exact` is an adjective, and it describes something very correct or precise, like in `the exact time`. + +# --fillInTheBlank-- + +## --sentence-- + +`She knew the _ time of the meeting. She arrived _ at 3 pm.` + +## --blanks-- + +`exact` + +### --feedback-- + +This word is an adjective, describing the noun `time`. + +--- + +`exactly` + +### --feedback-- + +This word is an adverb, showing that her arrival time was very precise. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md new file mode 100644 index 00000000000..82dcdea8fbb --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -0,0 +1,39 @@ +--- +id: 657b223e41ce6b9f9a01d214 +title: Task 48 +challengeType: 22 +dashedName: task-48 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You'll review the past simple negative in this task. It's formed using `was` or `were` with `not`, like `weren't` (`were not`) or `wasn't` (`was not`). It's used to talk about things that did not happen or were not true in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`They _ _ big projects.` + +## --blanks-- + +`weren't` + +### --feedback-- + +It's the negative form of `were` in the past tense, used to say something was not true or did not happen. + +--- + +`exactly` + +### --feedback-- + +This word is used to emphasize the statement, suggesting the projects were not precisely big. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md new file mode 100644 index 00000000000..06ce8ba3d76 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md @@ -0,0 +1,15 @@ +--- +id: 657b227f7ad32ea17e2cdf28 +title: "Dialogue 4: A Developer with a Different Background" +challengeType: 21 +dashedName: dialogue-4-a-developer-with-a-different-background +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md new file mode 100644 index 00000000000..abee49452c1 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md @@ -0,0 +1,56 @@ +--- +id: 657b2310b8cd52a4f15c1818 +title: Task 49 +challengeType: 19 +dashedName: task-49 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `unconventional` is used to describe something that's not based on or conforming to what is generally done or believed. It often implies a method or approach that is different from the norm. + +# --question-- + +## --text-- + +What does `unconventional` imply about Alice's background in tech? + +## --answers-- + +Her background is different from the usual way people get into tech + +--- + +Her background is exactly the same as most people in tech + +### --feedback-- + +`Unconventional` means not following the usual conventions, which contradicts being the same as most people. + +--- + +She doesn't have any background in tech + +### --feedback-- + +`Unconventional` suggests a different approach, not the absence of a background. + +--- + +She followed a very traditional path into tech + +### --feedback-- + +`Unconventional` indicates a non-traditional path, not a very traditional one. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md new file mode 100644 index 00000000000..47917952aff --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md @@ -0,0 +1,39 @@ +--- +id: 657b2340be1593a6517fe77b +title: Task 50 +challengeType: 22 +dashedName: task-50 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple negative, `did not` (contracted to `didn't`) is followed by the base form of a verb. This structure is used to express that an action did not happen in the past. In this dialogue, Alice is describing her educational background related to technology. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ _ tech at a traditional university.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used in the past simple negative to indicate that an action was not done. + +--- + +`study` + +### --feedback-- + +The base form of the verb is used after the contraction in negative past simple sentences. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md new file mode 100644 index 00000000000..e19667245f9 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md @@ -0,0 +1,54 @@ +--- +id: 657b236aa1eb9fa7b209aa03 +title: Task 51 +challengeType: 19 +dashedName: task-51 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `mostly` is used to indicate that something is true to a large extent but not completely. It suggests that while other factors or methods may be involved, the primary aspect is what is mentioned. + +# --question-- + +## --text-- + +In Alice's statement, what does `mostly` suggest about her way of learning? + +## --answers-- + +She only learned through formal education + +### --feedback-- + +`Mostly` implies a greater emphasis on self-teaching rather than exclusive formal education. + +--- + +She didn't learn anything on her own + +### --feedback-- + +The use of `mostly` indicates a significant amount of self-learning, not an absence of it. + +--- + +She learned equally through self-teaching and formal courses + +### --feedback-- + +`Mostly` suggests a greater emphasis on one method over an equal balance. + +--- + +Her learning was primarily through her own efforts, with some formal courses + +## --video-solution-- + +4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md new file mode 100644 index 00000000000..10f6121949b --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md @@ -0,0 +1,36 @@ +--- +id: 657b23a413d28da927e087ca +title: Task 52 +challengeType: 22 +dashedName: task-52 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +This task reviews how an adverb is often formed by adding `-ly` to an adjective. + + +# --fillInTheBlank-- + +## --sentence-- + +`She completed _ of her work before lunch. The office is _ quiet in the mornings.` + +## --blanks-- + +`most` + +### --feedback-- + +This word is used as an adjective to describe the quantity of work completed. + +--- + +`mostly` + +### --feedback-- + +This word is used as an adverb to describe the general state of the office. + + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md new file mode 100644 index 00000000000..8f0a554d33f --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md @@ -0,0 +1,50 @@ +--- +id: 657b23bc0e32f9aa9c62eb82 +title: Task 53 +challengeType: 19 +dashedName: task-53 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `self-taught` refers to acquiring knowledge or skills without direct teaching from a traditional teacher or educational institution. It involves learning independently. The word `taught` is the past participle of `teach`. When someone is `self-taught`, it means they have taught themselves. + +# --question-- + +## --text-- + +What does `self-taught` imply when someone says, `I am self-taught in programming`? + +## --answers-- + +They were taught programming by a professional teacher + +### --feedback-- + +`Self-taught` indicates learning independently, not being taught by a professional teacher. + +--- + +They have no knowledge of programming + +### --feedback-- + +`Self-taught` means they have acquired knowledge or skills, not that they lack them. + +--- + +They learned programming on their own, without formal education + +--- + +They are planning to learn programming in the future + +### --feedback-- + +`Self-taught` refers to learning that has already taken place, not future plans. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md new file mode 100644 index 00000000000..daa0ed7fa3b --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md @@ -0,0 +1,27 @@ +--- +id: 657b23f03b449aac2c517089 +title: Task 54 +challengeType: 22 +dashedName: task-54 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `took` is a special case in the simple past tense. It's the past tense of `take`. Unlike regular verbs that follow the standard `-ed` ending for the past tense, `take` changes to `took`. This irregular form is important to know because it's commonly used to talk about actions that happened in the past. Choose the correct past tense form of `take` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she _ a photography class.` + +## --blanks-- + +`took` + +### --feedback-- + +This word is the past tense form of `take`. It's used to talk about actions that happened in the past. + + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md new file mode 100644 index 00000000000..aa093ae629c --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md @@ -0,0 +1,49 @@ +--- +id: 657b242d06512dadaea55056 +title: Task 55 +challengeType: 19 +dashedName: task-55 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The verb `attend` means to be present at an event or place. It's often used regarding schools, colleges, meetings, or events. It implies regular participation or presence at a specific place or event. + +# --question-- + +## --text-- + +If a friend tells you, `I'm going to attend the new art workshop downtown`, what are they planning to do? + +## --answers-- + +They are planning to teach at the art workshop + +### --feedback-- + +`Attend` suggests participating as a learner or member, not as a teacher. + +--- + +They might visit the workshop once + +### --feedback-- + +`Attend` implies regular or scheduled participation, not a one-time visit. + +--- + +They are not interested in art workshops + +### --feedback-- + +Saying they will `attend` indicates interest and intent to participate, not a lack of interest. + +--- + +They plan to regularly participate in the art workshop + +## --video-solution-- + +4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md new file mode 100644 index 00000000000..4dd651ea958 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md @@ -0,0 +1,39 @@ +--- +id: 657b24542024c8af092cd6c4 +title: Task 56 +challengeType: 22 +dashedName: task-56 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple, negative sentences are formed using `did not`, contracted to `didn't`, followed by the base form of the main verb. Listen to the dialogue and fill in the blanks with these words. + +# --fillInTheBlank-- + +## --sentence-- + +`So, you _ _ a regular college or anything like that?` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used to form a negative statement in the past tense. + +--- + +`attend` + +### --feedback-- + +The word means being present at an event or place. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md new file mode 100644 index 00000000000..15b9abab580 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md @@ -0,0 +1,48 @@ +--- +id: 657b24774d8cdab052ffe2a6 +title: Task 57 +challengeType: 22 +dashedName: task-57 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and fill in the blanks correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ study tech at a traditional university. I'm _, and I _ a lot of online courses.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used to form a negative statement in the past tense. + +--- + +`self-taught` + +### --feedback-- + +This word describes acquiring knowledge or skills independently. + +--- + +`took` + +### --feedback-- + +This word is the past tense form of a verb meaning to have completed an action. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md new file mode 100644 index 00000000000..b7c7a773588 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md @@ -0,0 +1,40 @@ +--- +id: 657b24a500800cb1c6945da9 +title: Task 58 +challengeType: 22 +dashedName: task-58 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`No, not at all. I _ at a different job, but I got really interested in programming and tech, so I _ learning in my free time.` + +## --blanks-- + +`was` + +### --feedback-- + +Use `to be` in the past tense. + +--- + +`started` + +### --feedback-- + +Use the verb `start`in the past tense. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md new file mode 100644 index 00000000000..14bccd55f81 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md @@ -0,0 +1,41 @@ +--- +id: 657b2be1b19500c63fc1a467 +title: Task 59 +challengeType: 22 +dashedName: task-59 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`That's impressive! _ you _ learning on your own?` + +## --blanks-- + +`Did` + +### --feedback-- + +Auxiliary verb for questions. This word should be capitalized. + +--- + +`enjoy` + +### --feedback-- + +A verb used to describe you are having fun. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md new file mode 100644 index 00000000000..f55f7908a4f --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md @@ -0,0 +1,38 @@ +--- +id: 657b2c040bb5f6c77fa5df80 +title: Task 60 +challengeType: 22 +dashedName: task-60 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You'll be filling in blanks with words you're already familiar with. + +# --fillInTheBlank-- + +## --sentence-- + +`Absolutely. It _ challenging, but I _ it.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of the verb `to be`, used for singular subjects. + +--- + +`loved` + +### --feedback-- + +This is the past tense form of a verb expressing a strong liking or enjoyment. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md new file mode 100644 index 00000000000..dc14016d020 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md @@ -0,0 +1,38 @@ +--- +id: 657b2d618b8851cc5baf9490 +title: Task 61 +challengeType: 22 +dashedName: task-61 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Listen to the audio and complete the sentence. + + +# --fillInTheBlank-- + +Fill in the blank with correct words. + + +## --sentence-- + +`Yes, I did. I built a few small web applications, just to practice. It _ a great way to apply what I _.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `to be`, used here for a singular subject. + +--- + +`learned` + +### --feedback-- + +This is the past tense form of `learn`, indicating the acquisition of knowledge or skills in the past. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md new file mode 100644 index 00000000000..b2433b84777 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md @@ -0,0 +1,54 @@ +--- +id: 657b2d9cb974dace59024964 +title: Task 62 +challengeType: 19 +dashedName: task-62 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `got` in this context is a versatile term and can have several meanings. In its simplest form, it's the past tense of `get`, which can mean to receive, arrive, become, or reach, depending on the context. In Tom's statement, `got` refers to the progress or level Alice reached through self-study. + +# --question-- + +## --text-- + +What does `got` imply in Tom's statement about Alice's progress? + +## --answers-- + +She received something while studying + +### --feedback-- + +While `got` can mean receiving, in this context it refers to the extent or level of progress. + +--- + +She achieved or reached a significant level in her studies + +--- + +She needs to get more resources for studying + +### --feedback-- + +`Got` here refers to past progress, not a current need for more resources. + +--- + +She didn't make any progress in her studies + +### --feedback-- + +`Got` in this sentence clearly indicates significant progress, not a lack of it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md new file mode 100644 index 00000000000..3ea0498bbbe --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md @@ -0,0 +1,15 @@ +--- +id: 657b2dd7745fdcd03e5160f4 +title: "Dialogue 5: Anna Talks About her Experience" +challengeType: 21 +dashedName: dialogue-5-anna-talks-about-her-experience +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md new file mode 100644 index 00000000000..8a3ff270f80 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -0,0 +1,54 @@ +--- +id: 657b2e0666d4a9d1b851f90e +title: Task 63 +challengeType: 19 +dashedName: task-63 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `tech recruiter` refers to a professional role focused on recruiting candidates for technology-related positions. This role involves understanding the tech industry, identifying qualified candidates, and matching them with suitable tech job openings. + +# --question-- + +## --text-- + +What is Tom asking about when he mentions `Tech recruiter` in his question? + +## --answers-- + +The technical skills needed to be a recruiter + +### --feedback-- + +`Tech recruiter` here refers to the job role, not the specific skills required for the job. + +--- + +The technology used by recruiters + +### --feedback-- + +While technology is involved, `Tech recruiter` refers to the profession itself, not the tools used. + +--- + +The person's career path in becoming a technology recruitment specialist + +--- + +Recruiting people to learn technology + +### --feedback-- + +`Tech recruiter` is about hiring for tech roles, not recruiting people to learn technology. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md new file mode 100644 index 00000000000..340203d5990 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md @@ -0,0 +1,49 @@ +--- +id: 657b2ec6c054efd71e503a27 +title: Task 64 +challengeType: 19 +dashedName: task-64 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `actually` is often used to express a fact or reality, sometimes contrasting with what was thought, believed, or said before. It adds emphasis to a statement to clarify a truth or correct a previous assumption or statement. + +# --question-- + +## --text-- + +What does `actually` imply in a sentence like `I actually prefer working remotely`? + +## --answers-- + +The truth is contrary to what might have been assumed or stated before + +--- + +I never work remotely + +### --feedback-- + +`Actually` in this context is used to express a real preference. + +--- + +I always work in an office setting + +### --feedback-- + +Using `actually` here is meant to reveal a preference for remote work, not office work. + +--- + +I don't have any work preferences + +### --feedback-- + +`Actually` suggests a specific preference, contradicting the idea of having none. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md new file mode 100644 index 00000000000..51c4c579915 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md @@ -0,0 +1,33 @@ +--- +id: 657b2eeb31e435d89ecce6f3 +title: Task 65 +challengeType: 22 +dashedName: task-65 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn about `actual` in this task. It's a describing word (adjective). It means what something is really like. For example, `the actual color` means the real color. You often add `-ly` to an adjective to form an adverb. This rule helps change many describing words into words that tell people how something is said or done. Here, you add `-ly` to `actual` and it's the adverb `actually`. + +# --fillInTheBlank-- + +## --sentence-- + +`The _ size of the room was quite small. She _ likes small cozy spaces.` + +## --blanks-- + +`actual` + +### --feedback-- + +This word describes the real size of the room. + +--- + +`actually` + +### --feedback-- + +This word is used to say she really likes small spaces. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md new file mode 100644 index 00000000000..101e280ee29 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md @@ -0,0 +1,54 @@ +--- +id: 657b2f0b3bcfe7d9f4151854 +title: Task 66 +challengeType: 19 +dashedName: task-66 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The terms `therapist` and `counselor` refer to professionals who provide guidance and support to people dealing with emotional, psychological, or mental health issues. Both play a vital role in helping individuals work through personal challenges. In Anna's statement, these terms describe the career paths she was considering. + +# --question-- + +## --text-- + +In Anna's statement, what does `therapist or counselor` refer to? + +## --answers-- + +Jobs in the technology industry + +### --feedback-- + +`Therapist or counselor` refers to mental health and emotional support roles, not technology-related jobs. + +--- + +Career paths in mental health and emotional support + +--- + +Educational courses she wanted to take + +### --feedback-- + +While these roles require education, the terms directly refer to the job roles, not the courses. + +--- + +Hobbies that she was interested in + +### --feedback-- + +`Therapist or counselor` are professional career paths, not hobbies. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md new file mode 100644 index 00000000000..40c9c66ce5e --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md @@ -0,0 +1,49 @@ +--- +id: 657b2f3bf7a2cbdb58d959d5 +title: Task 67 +challengeType: 19 +dashedName: task-67 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `last` is used to refer to the most recent past occurrence of a period or event. For example, `last year` means the year before this one, `last month` refers to the month before the current one, and `last week` points to the week before this week. Understanding time expressions like `last year`, `last month`, `last week`, or `last day` helps in talking about events that happened in the recent past. + +# --question-- + +## --text-- + +When someone mentions in a discussion about changes, `I switched careers last year.` What does `last year` indicate about the timing of their career change? + +## --answers-- + +They are planning to switch careers in the near future + +### --feedback-- + +This suggests a future action, but `last year` indicates the change already occurred in the past. + +--- + +They have been considering a career change for a long time + +### --feedback-- + +Though they might have considered it for a long time, `last year` specifically identifies when the change took place. + +--- + +The career change is happening currently + +### --feedback-- + +`Last year` refers to a completed action in the past, not something happening in the present. + +--- + +The career switch happened in the previous year + +## --video-solution-- + +4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md new file mode 100644 index 00000000000..796bb1e6c39 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md @@ -0,0 +1,49 @@ +--- +id: 657b2f6cb66826dcbac08094 +title: Task 68 +challengeType: 19 +dashedName: task-68 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Organizational psychology` is a field of psychology that studies how people interact within groups, particularly in workplace settings. It focuses on understanding workplace dynamics, employee behavior, and organizational structure to improve the work environment and increase productivity. + +# --question-- + +## --text-- + +What does `organizational psychology` typically involve? + +## --answers-- + +It deals with organizing office spaces + +### --feedback-- + +While organization is a part of the field, `organizational psychology` primarily focuses on people and behavior, not physical space. + +--- + +It's about the psychology of organizing events + +### --feedback-- + +`Organizational psychology` is not specifically about event planning but rather about behavior in workplace groups. + +--- + +It's the study of how people behave and interact in workplace groups + +--- + +It focuses on individual psychological treatment + +### --feedback-- + +`Organizational psychology` looks at group dynamics in workplaces, not individual therapy. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md new file mode 100644 index 00000000000..e185bc5a457 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md @@ -0,0 +1,38 @@ +--- +id: 657b2fa89ddc20de629ca21f +title: Task 69 +challengeType: 22 +dashedName: task-69 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will fill in the blanks with words you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ studied psychology in college. My plan was to become a _ or counselor.` + +## --blanks-- + +`actually` + +### --feedback-- + +This word is used to emphasize the accuracy or truth of a statement. + +--- + +`therapist` + +### --feedback-- + +This word refers to a professional role focused on mental health and emotional support. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md new file mode 100644 index 00000000000..ecc1ceb6792 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md @@ -0,0 +1,46 @@ +--- +id: 657b2fc9c0f96bdfddfce4d9 +title: Task 70 +challengeType: 22 +dashedName: task-70 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this exercise, you will explore the phrase `pique one's interest`. This phrase means to stimulate or arouse someone's curiosity or interest in something. It's often used when something catches your attention and makes you want to learn more about it. Alongside this phrase, you will fill in the blanks with familiar words that you've already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ a course in organizational _, and it _ my interest in the workplace and employee dynamics.` + +## --blanks-- + +`took` + +### --feedback-- + +This word refers to the action of participating in or completing a course. + +--- + +`psychology` + +### --feedback-- + +This word describes the study of the mind and behavior, particularly in a workplace setting in this context. + +--- + +`piqued` + +### --feedback-- + +This word means to arouse or stimulate interest or curiosity. You should correctly use its simple past tense. diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md new file mode 100644 index 00000000000..acc29551124 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md @@ -0,0 +1,49 @@ +--- +id: 657b2fea728c2be14a8a98c4 +title: Task 71 +challengeType: 19 +dashedName: task-71 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Employee dynamics` refers to the way employees interact and work together in a workplace. It's an example of using one noun (`employee`) to describe another noun (`dynamics`). This type of descriptive noun helps give more specific information about the subject. Other examples include `race car`, where `race` describes the type of car, and `garden hose`, where `garden` describes the type of hose. + +# --question-- + +## --text-- + +What does `employee dynamics` refer to in a workplace context? + +## --answers-- + +The dynamics of machines used by employees + +### --feedback-- + +`Employee dynamics` specifically refers to interactions and relationships among employees, not machinery. + +--- + +The interactions and relationships among employees + +--- + +The employment status of workers + +### --feedback-- + +`Employee dynamics` is about how employees work together, not their employment status. + +--- + +The dynamics of hiring new employees + +### --feedback-- + +`Employee dynamics` refers to existing employee interactions, not the hiring process. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md new file mode 100644 index 00000000000..bcbb031c907 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md @@ -0,0 +1,54 @@ +--- +id: 657b3026ff79fbe2dda6cb39 +title: Task 72 +challengeType: 19 +dashedName: task-72 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `That's a cool twist` is often used to express that something is interestingly unexpected or surprisingly different. The word `twist` here refers to a change or development in a situation or story that is unusual or unexpected. `Cool` in this context means it's positively received. + +# --question-- + +## --text-- + +What is Tom expressing when he says `That's a cool twist`? + +## --answers-- + +He finds the unexpected change or development interesting + +--- + +He thinks the situation is confusing + +### --feedback-- + +While a `twist` can be surprising, Tom's use of `cool` suggests he finds it interesting rather than confusing. + +--- + +He is unhappy with the new development + +### --feedback-- + +`Cool twist` usually indicates a positive reaction, not dissatisfaction. + +--- + +He expected the development all along + +### --feedback-- + +The term `twist` implies that the development was unexpected. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md new file mode 100644 index 00000000000..6a30241c1a2 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md @@ -0,0 +1,55 @@ +--- +id: 657b306fe94f29e4b4aa9105 +title: Task 73 +challengeType: 19 +dashedName: task-73 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `not right away` is used to indicate that something didn't happen immediately or at the earliest opportunity. It suggests that there was a delay or a period before the action or change took place. This phrase helps to set the timeline of events or actions. + +# --question-- + +## --text-- + +What does Anna mean when she says `not right away`? + +## --answers-- + +She immediately started working in HR at a tech company + +### --feedback-- + +`Not right away` indicates a delay or period before taking action, not immediate action. + +--- + +She started working in a different role before moving to HR at a tech company + +--- + +She has never worked in HR + +### --feedback-- + +The statement implies she did work in HR, just not immediately. + +--- + +She was always focused on training and development + +### --feedback-- + +`Not right away` suggests a progression or change over time, not a constant focus. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md new file mode 100644 index 00000000000..b21bdf5b3e6 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md @@ -0,0 +1,49 @@ +--- +id: 657b30ac03b523e6640deaf1 +title: Task 74 +challengeType: 22 +dashedName: task-74 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will practice filling in the blanks with words that you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`Tom: That's a cool _. _ you immediately start working as a tech recruiter after college? Anna: Not right away. I _ in a general HR role at a non-tech company first, focusing on training and development.` + + +## --blanks-- + +`twist` + +### --feedback-- + +It refers to an interesting or unexpected change in a situation. + +--- + +`Did` + +### --feedback-- + +The auxiliary verb used to form a question in the past simple tense. The first letter should be capitalized. + +--- + +`worked` + +### --feedback-- + +Past tense form of `work`, indicating an action completed in the past. + diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md new file mode 100644 index 00000000000..f843ccf34aa --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md @@ -0,0 +1,54 @@ +--- +id: 657b30e1b9f035e7e656fd01 +title: Task 75 +challengeType: 19 +dashedName: task-75 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `employee` is someone who works for a company or a person. When you talk about `employees' well-being`, you are talking about the health and happiness of all the people who work there. The `'s` after `employees` means that the well-being belongs to the employees. It's like `the cat's toy` (one cat) and `the cats' toy` (more than one cat). + +# --question-- + +## --text-- + +What does Anna mean by saying `employees' well-being.` + +## --answers-- + +It's about the health of the company + +### --feedback-- + +`Employees'` means the people who work, not the company. + +--- + +One worker's health and happiness + +### --feedback-- + +`Employees'` with an `'s` shows it's about all workers, not just one. + +--- + +Where the employees work + +### --feedback-- + +`Well-being` is about health and happiness, not a place. + +--- + +The health and happiness of all the workers + +## --video-solution-- + +4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md new file mode 100644 index 00000000000..8e17e595d98 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md @@ -0,0 +1,54 @@ +--- +id: 657b315533e4edeba65111b8 +title: Task 76 +challengeType: 19 +dashedName: task-76 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +A `psychologist` is a professional who studies the human mind and behavior. They often help people understand and manage their emotions, behaviors, and mental processes. In Anna's statement, she refers to becoming a psychologist, indicating her professional choice related to studying and working with psychology. + +# --question-- + +## --text-- + +What does `psychologist` mean in Anna's statement? + +## --answers-- + +It means someone who studies physics + +### --feedback-- + +`Psychologist` refers to a person who studies the mind and behavior, not physics. + +--- + +It's a type of medical doctor + +### --feedback-- + +While related to health, a psychologist is different from a medical doctor and focuses on mental processes. + +--- + +A professional who studies and works with the human mind and behavior + +--- + +A teacher at a school + +### --feedback-- + +A psychologist may teach, but their primary role is studying and working with the mind and behavior, not general teaching. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md new file mode 100644 index 00000000000..40eee7185d9 --- /dev/null +++ b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md @@ -0,0 +1,15 @@ +--- +id: 657b46c9be150f577f5a1086 +title: "Dialogue 2: Another Job Interview" +challengeType: 21 +dashedName: dialogue-2-another-job-interview +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md deleted file mode 100644 index 0a0f3472141..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0feadb1dd77f6cda623f -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md deleted file mode 100644 index e1563f9b06b..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0f39ee87517d584d81f9 -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md deleted file mode 100644 index 7aa1e30008d..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5a46ffb500e3f2ce47b -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -*** - -Giving a job description. - -*** - -Making a statement based on her assumption. - -*** - -Expressing a possibility. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md deleted file mode 100644 index 2ee50fe5647..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5e46ffb500e3f2ce47e -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md b/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md deleted file mode 100644 index adc4b41f091..00000000000 --- a/curriculum/challenges/swahili/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd6071d697d0aab7833b6 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md deleted file mode 100644 index 7af3ba3471a..00000000000 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: bd7158d8c242eddfaeb5bd13 -title: Створіть вебсторінку персонального портфоліо -challengeType: 14 -forumTopicId: 301143 -dashedName: build-a-personal-portfolio-webpage ---- - -# --description-- - -**Мета:** Створити застосунок, функціонально схожий до https://personal-portfolio.freecodecamp.rocks - -**Історія користувача:** - -1. Портфоліо повинне містити вітальну секцію з `id` зі значенням `welcome-section` -1. Вітальна секція повинна мати елемент `h1`, що містить текст -1. Портфоліо повинне мати секцію проєктів з `id` зі значенням `projects` -1. Секція проєктів повинна містити щонайменше один елемент з `class` зі значенням `project-tile` для виконання проєкту -1. Секція проєктів повинна містити щонайменше одне посилання на проєкт -1. Портфоліо повинне містити навігаційну панель з ідентифікатором зі значенням `navbar` -1. Навігаційна панель повинна містити щонайменше одне посилання, завдяки якому можна перейти на інші секції сторінки -1. Портфоліо повинне містити посилання з ідентифікатором зі значенням `profile-link`, що відкриває ваш профіль GitHub або freeCodeCamp в новій вкладці -1. Портфоліо повинне містити щонайменше один медіазапит -1. Висота вітальної секції повинна дорівнювати висоті вюпорту -1. Навігаційна панель завжди повинна знаходитись у верхній частині вюпорту - -Виконайте історію користувача та пройдіть тести, наведені нижче, щоб завершити цей проєкт. Оформте за власним стилем. Щасливого програмування! - -**Примітка:** переконайтеся, що додали `` до HTML для прив'язки з аркушем стилів та застосували CSS - -# --hints-- - -Портфоліо повинне містити секцію «Вітання» з `id` зі значенням `welcome-section`. - -```js -const el = document.getElementById('welcome-section') -assert(!!el); -``` - -Елемент `#welcome-section` повинен містити елемент `h1`. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1').length, - 0, - 'Welcome section should contain an h1 element ' -); -``` - -Ви не повинні мати порожніх елементів `h1` в межах елемента `#welcome-section`. - -```js -assert.isAbove( - document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length, - 0, - 'h1 element in welcome section should contain your name or camper ' + - 'name ' -); -``` - -Ви повинні мати секцію «Проєкти» з `id` зі значенням `projects`. - -```js -const el = document.getElementById('projects') -assert(!!el); -``` - -Портфоліо повинне містити хоча б один елемент з класом `project-tile`. - -```js -assert.isAbove( - document.querySelectorAll('#projects .project-tile').length, - 0 -); -``` - -Елемент `#projects` повинен містити хоча б один елемент `a`. - -```js -assert.isAbove(document.querySelectorAll('#projects a').length, 0); -``` - -Портфоліо повинне мати навігаційну панель з `id` зі значенням `navbar`. - -```js -const el = document.getElementById('navbar'); -assert(!!el); -``` - -Елемент `#navbar` повинен містити хоча б один елемент `a`, чий атрибут `href` починається з `#`. - -```js -const links = [...document.querySelectorAll('#navbar a')].filter( - (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#' -); - -assert.isAbove( - links.length, - 0, - 'Navbar should contain an anchor link ' -); -``` - -Портфоліо повинне мати елемент `a` з `id` зі значенням `profile-link`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.tagName === 'A') -``` - -Елемент `#profile-link` повинен мати атрибут `target` зі значенням `_blank`. - -```js -const el = document.getElementById('profile-link'); -assert(!!el && el.target === '_blank') -``` - -Портфоліо повинне містити щонайменше один медіазапит. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -Елемент `#navbar` завжди повинен знаходитись у верхній частині вюпорту. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const navbar = document.getElementById('navbar'); - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - "Navbar's parent should be body and it should be at the top of " + - 'the viewport ' - ); - - window.scroll(0, 500); - - await timeout(1); - - assert.approximately( - navbar?.getBoundingClientRect().top, - 0, - 15, - 'Navbar should be at the top of the viewport even after ' + - 'scrolling ' - ); - window.scroll(0, 0); -})(); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Personal Portfolio - - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -

                                                                                                  It's me!

                                                                                                  - -

                                                                                                  Naomi Carrigan

                                                                                                  -

                                                                                                  Welcome to my portfolio page!

                                                                                                  -
                                                                                                  -
                                                                                                  -

                                                                                                  Projects

                                                                                                  -

                                                                                                  Here's what I've worked on!

                                                                                                  -

                                                                                                  - - - - -

                                                                                                  -
                                                                                                  -

                                                                                                  Contact me!

                                                                                                  -

                                                                                                  Use the links below to get in touch.

                                                                                                  -

                                                                                                  FreeCodeCamp.org | GitHub | Facebook | LinkedIn -

                                                                                                  - - - -``` - -```css -nav{ - position: fixed; - width: 100%; - text-align: right; - font-size: 24pt; - top: 0%; - right: 5px; - background-color: #000000; - color: #ffffff; -} -@media (max-width: 500px){ - nav{ - display: none; - } -} -a{ - color: #ffffff; -} -main{ - text-align: center; - background-color: black; - font-family:Pacifico -} -h1{ - font-size: 48pt; -} -h2{ - font-size: 24pt; -} -p{ - font-size: 12pt; -} -#welcome-section{ - background-color:#251a4a; - color: #FFFFFF; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#projects{ - background-color: #060a9c; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -#contact{ - background-color: #03300b; - color: #ffffff; - display: table-cell; - vertical-align: middle; - width: 100vw; - height: 100vh; -} -``` diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md deleted file mode 100644 index ee247007ed8..00000000000 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md +++ /dev/null @@ -1,470 +0,0 @@ ---- -id: 587d78af367417b2b2512b04 -title: Створіть посадкову сторінку продукту -challengeType: 14 -forumTopicId: 301144 -dashedName: build-a-product-landing-page ---- - -# --description-- - -**Мета:** Створити застосунок, функціонально схожий до https://product-landing-page.freecodecamp.rocks - -**Історія користувача:** - -1. Ваша посадкова сторінка продукту повинна мати елемент `header` з відповідним `id="header"` -1. Можна побачити зображення в межах елемента `header` з відповідним `id="header-img"` (на місце зображення чудово підійде логотип) -1. В межах елемента `#header` видно елемент `nav` з відповідним `id="nav-bar"` -1. Можна побачити принаймні три активні елементи всередині елемента `nav`, кожен з класом `nav-link` -1. Якщо натиснути на кнопку `.nav-link` в елементі `nav`, ви перейдете на відповідну секцію посадкової сторінки -1. Ви можете переглянути вмонтоване відео з `id="video"` -1. Посадкова сторінка має елемент `form` з відповідним `id="form"` -1. В межах форми наявне поле `input` з `id="email"`, де можна ввести електронну адресу -1. Поле введення `#email` повинне мати текст наповнювача, щоб користувач розумів його призначення -1. Поле введення `#email` використовує перевірку HTML5, щоб переконатись, що введений текст є електронною адресою -1. В межах форми є кнопка `input` для відправки з відповідним `id="submit"` -1. Якщо натиснути на елемент `#submit`, електронну пошту надіслано на статистичну сторінку (використовуйте альтернативу URL: `https://www.freecodecamp.com/email-submit`) -1. Навігаційна панель завжди повинна знаходитись у верхній частині вюпорту -1. Посадкова сторінка продукту повинна містити щонайменше один медіазапит -1. Посадкова сторінка продукту повинна використовувати CSS flexbox хоча б раз - -Виконайте історію користувача та пройдіть тести, наведені нижче, щоб завершити цей проєкт. Оформте за власним стилем. Щасливого програмування! - -**Примітка:** переконайтеся, що додали `` до HTML для прив'язки з аркушем стилів та застосували CSS - -# --hints-- - -Ви повинні мати елемент `header` з `id` зі значенням `header`. - -```js -const el = document.getElementById('header') -assert(!!el && el.tagName === 'HEADER') -``` - -Ви повинні мати елемент `img` з `id` зі значенням `header-img`. - -```js -const el = document.getElementById('header-img') -assert(!!el && el.tagName === 'IMG') -``` - -Ваш `#header-img` повинен бути нащадком `#header`. - -```js -const els = document.querySelectorAll('#header #header-img') -assert(els.length > 0) -``` - -Ваш `#header-img` повинен мати атрибут `src`. - -```js -const el = document.getElementById('header-img') -assert(!!el && !!el.src) -``` - -Значення `src` вашого `#header-img` повинне бути активним URL (починається з `http`). - -```js -const el = document.getElementById('header-img') -assert(!!el && /^http/.test(el.src)) -``` - -Ви повинні мати елемент `nav` з `id` зі значенням `nav-bar`. - -```js -const el = document.getElementById('nav-bar') -assert(!!el && el.tagName === 'NAV') -``` - -Ваш `#nav-bar` повинен бути нащадком `#header`. - -```js -const els = document.querySelectorAll('#header #nav-bar') -assert(els.length > 0) -``` - -Ви повинні мати щонайменше 3 елементи `.nav-link` в межах `#nav-bar`. - -```js -const els = document.querySelectorAll('#nav-bar .nav-link') -assert(els.length >= 3) -``` - -Кожен елемент `.nav-link` повинен мати атрибут `href`. - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (!el.href) assert(false) -}) -assert(els.length > 0) -``` - -Кожен елемент `.nav-link` повинен посилати на відповідний елемент посадкової сторінки (має `href` зі значенням ідентифікатора іншого елемента, наприклад `#footer`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - const linkDestination = el.getAttribute('href').slice(1) - if (!document.getElementById(linkDestination)) assert(false) -}) -assert(els.length > 0) -``` - -Ви повинні мати елемент `video` або `iframe` з `id` зі значенням `video`. - -```js -const el = document.getElementById('video') -assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME')) -``` - -Ваш `#video` повинен мати атрибут `src`. - -```js -let el = document.getElementById('video') -const sourceNode = el.children; -let sourceElement = null; -if (sourceNode.length) { - sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; -} -if (sourceElement) { - el = sourceElement; -} -assert(el.hasAttribute('src')); -``` - -Ви повинні мати елемент `form` з `id` зі значенням `form`. - -```js -const el = document.getElementById('form') -assert(!!el && el.tagName === 'FORM') -``` - -Ви повинні мати елемент `input` з `id` зі значенням `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Ваш `#email` повинен бути нащадком `#form`. - -```js -const els = document.querySelectorAll('#form #email') -assert(els.length > 0) -``` - -Ваш `#email` повинен мати атрибут `placeholder` з текстом заповнювача. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Ваш `#email` повинен використовувати перевірку HTML5, встановивши `type` на `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -Ви повинні мати елемент `input` з `id` зі значенням `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.tagName === 'INPUT') -``` - -Ваш `#submit` повинен бути нащадком `#form`. - -```js -const els = document.querySelectorAll('#form #submit') -assert(els.length > 0) -``` - -Ваш `#submit` повинен мати `type` зі значенням `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Ваш `#form` повинен мати атрибут `action` зі значенням `https://www.freecodecamp.com/email-submit`. - -```js -const el = document.getElementById('form') -assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit') -``` - -Ваш `#email` повинен мати атрибут `name` зі значенням `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.name === 'email') -``` - -Ваш `#nav-bar` завжди повинен знаходитись у верхній частині вюпорту. - -```js -(async () => { - const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds)); - - const header = document.getElementById('header'); - const headerChildren = header.children; - const navbarCandidates = [header, ...headerChildren]; - - // Return smallest top position of all navbar candidates - const getNavbarPosition = (candidates = []) => { - return candidates.reduce( - (min, candidate) => - Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)), - Infinity - ); - }; - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the viewport ' - ); - - window.scroll(0, 500); - await timeout(1); - - assert.approximately( - getNavbarPosition(navbarCandidates), - 0, - 15, - '#header or one of its children should be at the top of the ' + - 'viewport even after scrolling ' - ); - - window.scroll(0, 0); -})(); -``` - -Посадкова сторінка продукту повинна містити щонайменше один медіазапит. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -Посадкова сторінка продукту повинна використовувати CSS flexbox хоча б раз. - -```js -const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display) -const stylesheet = new __helpers.CSSHelp(document).getStyleSheet() -const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet) -const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media') -const usesFlex = cssRules.find(rule => hasFlex(rule)) -const usesFlexMedia = mediaRules.find(mediaRule => { - return [...mediaRule.cssRules].find(rule => hasFlex(rule)) -}) -assert(usesFlex || usesFlexMedia) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Product Landing Page - - - -
                                                                                                  -

                                                                                                  - Pokemon Daycare Service -

                                                                                                  -
                                                                                                  -

                                                                                                  What we offer

                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  Guaranteed friendly and loving staff!
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - Comfortable environment for Pokemon to explore and play! -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - Multiple membership plans to fit your lifestyle! -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -

                                                                                                  Check us out!

                                                                                                  - A sneak peek into our facility: -
                                                                                                  - -
                                                                                                  -
                                                                                                  -

                                                                                                  Membership Plans

                                                                                                  -
                                                                                                  -
                                                                                                  - Basic Membership
                                                                                                  -
                                                                                                    -
                                                                                                  • One Pokemon
                                                                                                    • -
                                                                                                  • Food and berries provided
                                                                                                    • -
                                                                                                  - $9.99/month -
                                                                                                  -
                                                                                                  - Silver Membership
                                                                                                  -
                                                                                                    -
                                                                                                  • Up to Three Pokemon
                                                                                                    • -
                                                                                                  • Food and berries provided
                                                                                                    • -
                                                                                                  • Grooming and accessories included
                                                                                                    • -
                                                                                                  - $19.99/month -
                                                                                                  -
                                                                                                  - Gold Membership
                                                                                                  -
                                                                                                    -
                                                                                                  • Up to six Pokemon!
                                                                                                    • -
                                                                                                  • Food and berries provided
                                                                                                    • -
                                                                                                  • Grooming and accessories included
                                                                                                    • -
                                                                                                  • Personal training for each Pokemon
                                                                                                    • -
                                                                                                  • Breeding and egg hatching
                                                                                                    • -
                                                                                                  - $29.99/month -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -

                                                                                                  Sign up for our newsletter!

                                                                                                  - - -
                                                                                                  - -
                                                                                                  - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - max-width: 750px; - margin: 50px auto; -} -input { - background-color: #92869c; -} -a:not(.nav-link) { - color: white; -} -#header-img { - max-height: 25px; -} -#nav-bar { - position: fixed; - width: 100%; - text-align: center; - top: 0%; - background-color: #92869c; -} -h1 { - text-align: center; -} -body { - text-align: center; -} -footer { - text-align: center; -} -#bullet { - max-height: 25px; -} -.flex-here { - display: flex; - justify-content: center; -} -.flex-left { - height: 25px; -} -.flex-mem { - display: flex; - justify-content: center; -} -.flex-mem-box { - background-color: #92869c; - border-color: black; - border-width: 5px; - border-style: solid; - margin: 10px; - padding: 10px; - color: black; -} -@media (max-width: 350px) { - #video { - width: 300; - height: 200; - } -} -``` diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md deleted file mode 100644 index 6ce878bd279..00000000000 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 587d78af367417b2b2512b03 -title: Створіть форму для опитування -challengeType: 14 -forumTopicId: 301145 -dashedName: build-a-survey-form ---- - -# --description-- - -**Мета:** Створити застосунок, функціонально схожий до https://survey-form.freecodecamp.rocks - -**Історія користувача:** - -1. Ви повинні мати титул сторінки в елементі `h1` з `id` зі значенням `title` -1. Ви повинні мати коротке роз'яснення в елементі `p` з `id` зі значенням `description` -1. Ви повинні мати елемент `form` з `id` зі значенням `survey-form` -1. В елементі форми вам **потрібно** ввести своє ім'я в полі `input`, яке має `id` зі значенням `name` та `type` зі значенням `text` -1. В елементі форми вам **потрібно** ввести свою електронну пошту в полі `input`, яке має `id` зі значенням `email` -1. Якщо ви введете неправильно сформовану електронну адресу, то побачите помилку перевірки HTML5 -1. В формі ви можете ввести число в поле `input`, яке має `id` зі значенням `number` -1. Ввід для чисел повинен приймати лише числа, або забороняючи вводити їх, або показуючи помилку перевірки HTML5 (залежно від вашого браузера). -1. Якщо ви введете число поза межами діапазону чисел, що визначено атрибутами `min` та `max`, то побачите помилку перевірки HTML5 -1. Для імені, електронної пошти та полів введення чисел можна побачити відповідні елементи `label` в формі, що описують мету кожного поля відповідними ідентифікаторами: `id="name-label"`, `id="email-label"` та `id="number-label"` -1. Для імені, електронної пошти та полів введення чисел можна побачити текст заповнювача з описом або інструкцією до кожного поля -1. В елементі форми ви повинні мати випадний елемент `select` з `id` зі значенням `dropdown` та принаймні два варіанти вибору -1. В елементі форми ви можете вибрати опцію з групи принаймні двох радіокнопок, які згруповані з використанням атрибуту `name` -1. В елементі форми ви можете вибрати декілька полів з серії прапорців, кожен з яких повинен мати атрибут `value` -1. В елементі форми представлено `textarea` для додаткових коментарів -1. В елементі форми представлено кнопку з `id` зі значенням `submit` для відправки всіх введень - -Виконайте історію користувача та пройдіть тести, наведені нижче, щоб завершити цей проєкт. Оформте за власним стилем. Щасливого програмування! - -**Примітка:** переконайтеся, що додали `` до HTML для прив'язки з аркушем стилів та застосували CSS - -# --hints-- - -Ви повинні мати елемент `h1` з `id` зі значенням `title`. - -```js -const el = document.getElementById('title') -assert(!!el && el.tagName === 'H1') -``` - -Ваш `#title` не повинен бути порожнім. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) -``` - -Ви повинні мати елемент `p` з `id` зі значенням `description`. - -```js -const el = document.getElementById('description') -assert(!!el && el.tagName === 'P') -``` - -Ваш `#description` не повинен бути порожнім. - -```js -const el = document.getElementById('description') -assert(!!el && el.innerText.length > 0) -``` - -Ви повинні мати елемент `form` з `id` зі значенням `survey-form`. - -```js -const el = document.getElementById('survey-form') -assert(!!el && el.tagName === 'FORM') -``` - -Ви повинні мати елемент `input` з `id` зі значенням `name`. - -```js -const el = document.getElementById('name') -assert(!!el && el.tagName === 'INPUT') -``` - -Ваш `#name` повинен мати `type` зі значенням `text`. - -```js -const el = document.getElementById('name') -assert(!!el && el.type === 'text') -``` - -Ваш `#name` повинен вимагати введення. - -```js -const el = document.getElementById('name') -assert(!!el && el.required) -``` - -Ваш `#name` повинен бути нащадком `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name') -assert(!!el) -``` - -Ви повинні мати елемент `input` з `id` зі значенням `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.tagName === 'INPUT') -``` - -Ваш `#email` повинен мати `type` зі значенням `email`. - -```js -const el = document.getElementById('email') -assert(!!el && el.type === 'email') -``` - -Ваш `#email` повинен вимагати введення. - -```js -const el = document.getElementById('email') -assert(!!el && el.required) -``` - -Ваш `#email` повинен бути нащадком `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email') -assert(!!el) -``` - -Ви повинні мати елемент `input` з `id` зі значенням `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.tagName === 'INPUT') -``` - -Ваш `#number` повинен бути нащадком `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number') -assert(!!el) -``` - -Ваш `#number` повинен мати `type` зі значенням `number`. - -```js -const el = document.getElementById('number') -assert(!!el && el.type === 'number') -``` - -Ваш `#number` повинен мати атрибут `min` з числовим значенням. - -```js -const el = document.getElementById('number') -assert(!!el && el.min && isFinite(el.min)) -``` - -Ваш `#number` повинен мати атрибут `max` з числовим значенням. - -```js -const el = document.getElementById('number') -assert(!!el && el.max && isFinite(el.max)) -``` - -Ви повинні мати елемент `label` з `id` зі значенням `name-label`. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Ви повинні мати елемент `label` з `id` зі значенням `email-label`. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Ви повинні мати елемент `label` з `id` зі значенням `number-label`. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.tagName === 'LABEL') -``` - -Ваш `#name-label` повинен містити текст, який описує введені дані. - -```js -const el = document.getElementById('name-label') -assert(!!el && el.innerText.length > 0) -``` - -Ваш `#email-label` повинен містити текст, який описує введені дані. - -```js -const el = document.getElementById('email-label') -assert(!!el && el.innerText.length > 0) -``` - -Ваш `#number-label` повинен містити текст, який описує введені дані. - -```js -const el = document.getElementById('number-label') -assert(!!el && el.innerText.length > 0) -``` - -Ваш `#name-label` повинен бути нащадком `#survey-form`. - -```js -const el = document.querySelector('#survey-form #name-label') -assert(!!el) -``` - -Ваш `#email-label` повинен бути нащадком `#survey-form`. - -```js -const el = document.querySelector('#survey-form #email-label') -assert(!!el) -``` - -Ваш `#number-label` повинен бути нащадком `#survey-form`. - -```js -const el = document.querySelector('#survey-form #number-label') -assert(!!el) -``` - -Ваш `#name` повинен мати атрибут `placeholder` та значення. - -```js -const el = document.getElementById('name') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Ваш `#email` повинен мати атрибут `placeholder` та значення. - -```js -const el = document.getElementById('email') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Ваш `#number` повинен мати атрибут `placeholder` та значення. - -```js -const el = document.getElementById('number') -assert(!!el && !!el.placeholder && el.placeholder.length > 0) -``` - -Ви повинні мати поле `select` з `id` зі значенням `dropdown`. - -```js -const el = document.getElementById('dropdown') -assert(!!el && el.tagName === 'SELECT') -``` - -Ваш `#dropdown` повинен мати щонайменше два елементи `option` з можливістю вибору (не відключені). - -```js -const els = document.querySelectorAll('#dropdown option:not([disabled])') -assert(els.length >= 2) -``` - -Ваш `#dropdown` повинен бути нащадком `#survey-form`. - -```js -const el = document.querySelector('#survey-form #dropdown') -assert(!!el) -``` - -Ви повинні мати щонайменше два елементи `input` з `type` зі значенням `radio` (радіокнопки). - -```js -const els = document.querySelectorAll('input[type="radio"]') -assert(els.length >= 2) -``` - -Ви повинні мати щонайменше дві радіокнопки, які є нащадками `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="radio"]') -assert(els.length >= 2) -``` - -Всі радіокнопки повинні мати атрибут `value` та значення. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -Всі радіокнопки повинні мати атрибут `name` та значення. - -```js -const els1 = document.querySelectorAll('input[type="radio"]') -const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])') -assert(els1.length > 0 && els2.length === 0) -``` - -В кожній групі радіокнопок повинно бути щонайменше 2 радіокнопки. - -```js -const radioButtons = document.querySelectorAll('input[type="radio"]'); -const groups = {} - -if (radioButtons) { - radioButtons.forEach(el => { - if (!groups[el.name]) groups[el.name] = [] - groups[el.name].push(el) - }) -} - -const groupKeys = Object.keys(groups) - -groupKeys.forEach(key => { - if (groups[key].length < 2) assert(false) -}) - -assert(groupKeys.length > 0) -``` - -Ви повинні мати щонайменше два елементи `input` з `type` зі значенням `checkbox` (прапорцями), що є нащадками `#survey-form`. - -```js -const els = document.querySelectorAll('#survey-form input[type="checkbox"]'); -assert(els.length >= 2) -``` - -Всі прапорці всередині `#survey-form` повинні мати атрибут `value` та значення. - -```js -const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]') -const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])') -assert(els1.length > 0 && els2.length === 0) -``` - -Ви повинні мати щонайменше один елемент `textarea`, що є нащадком `#survey-form`. - -```js -const el = document.querySelector('#survey-form textarea') -assert(!!el) -``` - -Ви повинні мати елемент `input` або `button` з `id` зі значенням `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON')) -``` - -Ваш `#submit` повинен мати `type` зі значенням `submit`. - -```js -const el = document.getElementById('submit') -assert(!!el && el.type === 'submit') -``` - -Ваш `#submit` повинен бути нащадком `#survey-form`. - -```js -const el = document.querySelector('#survey-form #submit') -assert(!!el) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Survey Form - - -

                                                                                                  Survey Form

                                                                                                  -

                                                                                                  The card below was built as a sample survey form for freeCodeCamp.

                                                                                                  -
                                                                                                  -

                                                                                                  Join the Togepi Fan Club!

                                                                                                  -

                                                                                                  - Enter your information here to receive updates about club activities, - our monthly newsletter, and other email communications. -

                                                                                                  -
                                                                                                  - - - - -

                                                                                                  Who is your favourite Pokemon?

                                                                                                  - - - -

                                                                                                  Which communications do you want to receive?

                                                                                                  - - - -

                                                                                                  Any other information you would like to share?

                                                                                                  - -

                                                                                                  - Please note: This form is a proof of concept. Submitting the form - will not actually transmit your data. -

                                                                                                  - -
                                                                                                  -
                                                                                                  - - - -``` - -```css -main { - text-align: center; - background-color: #92869c; - background-blend-mode: lighten; - max-width: 500px; - margin: 20px auto; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); - color: black; -} -body { - text-align: center; - background: #3a3240; - color: white; -} -input, textarea, select, button { - background: #3a3240; - color: white; -} -a { - color: white; -} -``` diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md deleted file mode 100644 index 45d80db52fd..00000000000 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md +++ /dev/null @@ -1,529 +0,0 @@ ---- -id: 587d78b0367417b2b2512b05 -title: Створіть сторінку технічної документації -challengeType: 14 -forumTopicId: 301146 -dashedName: build-a-technical-documentation-page ---- - -# --description-- - -**Мета:** Створити застосунок, функціонально схожий до https://technical-documentation-page.freecodecamp.rocks - -**Історія користувача:** - -1. Можна побачити елемент `main` з відповідним ідентифікатором `id="main-doc"`, який містить основний вміст сторінки (технічна документація) -1. В межах елемента `#main-doc` можна побачити декілька елементів `section`, кожен з яких має клас `main-section`. Їх має бути щонайменше п'ять -1. Перший елемент кожної `.main-section` повинен бути елементом `header`, який має текст, що описує тему секції. -1. Кожен елемент `section` класу `main-section` також повинен мати `id`, що відповідає тексту кожного `header`, вміщеного в ньому. Будь-які прогалини слід замінити знаками підкреслення (наприклад, секція із заголовком «JavaScript and Java» повинна мати відповідний `id="JavaScript_and_Java"`) -1. Елементи `.main-section` повинні містити щонайменше десять елементів `p` загалом (не кожен) -1. Елементи `.main-section` повинні містити щонайменше п'ять елементів `code` загалом (не кожен) -1. Елементи `.main-section` повинні містити щонайменше п'ять елементів `li` загалом (не кожен) -1. Можна побачити елемент `nav` з відповідним `id="navbar"` -1. Елемент навігаційної панелі повинен містити один елемент `header`, який містить текст, що описує тему технічної документації -1. Крім того, навігаційна панель повинна містити елементи зв'язку (`a`) класу `nav-link`. Має бути по одному для кожного елемента класу `main-section` -1. Елемент `header` в `#navbar` повинен йти перед елементами зв'язку (`a`) в навігаційній панелі -1. Кожен елемент класу `nav-link` повинен містити текст, який відповідає тексту `header` в межах кожної `section` (наприклад, якщо у вас є секція/заголовок «Hello world», ваша навігаційна панель повинна містити елемент, який має текст «Hello world») -1. Якщо натиснути на елемент навігаційної панелі, то сторінка має перейти до відповідної секції елемента `#main-doc` (наприклад, якщо ви натискаєте на елемент `.nav-link`, що містить текст «Hello world», то сторінка скеровує до елемента `section` з тим ідентифікатором, та містить відповідний заголовок) -1. На пристроях звичайного розміру (портативний чи настільний комп'ютер) елемент з `id="navbar"` повинен відображатись ліворуч на екрані та завжди бути видимим для користувача -1. Ваша технічна документація повинна використовувати принаймні один медіазапит - -Виконайте історію користувача та пройдіть тести, наведені нижче, щоб завершити цей проєкт. Оформте за власним стилем. Щасливого програмування! - -**Примітка:** переконайтеся, що додали `` до HTML для прив'язки з аркушем стилів та застосували CSS - -# --hints-- - -Ви повинні мати елемент `main` з `id` зі значенням `main-doc`. - -```js -const el = document.getElementById('main-doc') -assert(!!el) -``` - -Ви повинні мати щонайменше п'ять елементів `section` класу `main-section`. - -```js -const els = document.querySelectorAll('#main-doc section') -assert(els.length >= 5) -``` - -Всі елементи `.main-section` повинні бути елементами `section`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (el.tagName !== 'SECTION') assert(false) -}) -assert(els.length > 0) -``` - -Ви повинні мати щонайменше п'ять елементів `.main-section`, які є нащадками `#main-doc`. - -```js -const els = document.querySelectorAll('#main-doc .main-section') -assert(els.length >= 5) -``` - -Перший дочірній елемент кожної `.main-section` повинен бути елементом `header`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if(el.firstElementChild?.tagName !== 'HEADER') assert(false) -}) -assert(els.length > 0) -``` - -Жоден з елементів `header` не повинен бути порожнім. - -```js -const els = document.querySelectorAll('header') -els.forEach(el => { - if (el.innerText?.length <= 0) assert(false) -}) -assert(els.length > 0) -``` - -Всі елементи `.main-section` повинні мати `id`. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - if (!el.id || el.id === '') assert(false) -}) -assert(els.length > 0) -``` - -Кожен `.main-section` повинен мати `id`, що відповідає тексту першого дочірнього елемента з заміною прогалин в тексті на знаки підкреслення (`_`) для ідентифікаторів. - -```js -const els = document.querySelectorAll('.main-section') -els.forEach(el => { - const text = el.firstElementChild?.innerText?.replaceAll(' ', '_') - if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false) -}) -assert(els.length > 0) -``` - -Ви повинні мати щонайменше 10 елементів `p` (сумарно) в межах елементів `.main-section`. - -```js -const els = document.querySelectorAll('.main-section p') -assert(els.length >= 10) -``` - -Ви повинні мати щонайменше п'ять елементів `code`, що є нащадками елементів `.main-section`. - -```js -const els = document.querySelectorAll('.main-section code') -assert(els.length >= 5) -``` - -Ви повинні мати щонайменше п'ять елементів `li`, що є нащадками елементів `.main-section`. - -```js -const els = document.querySelectorAll('.main-section li') -assert(els.length >= 5) -``` - -Ви повинні мати елемент `nav` з `id` зі значенням `navbar`. - -```js -const el = document.getElementById('navbar') -assert(!!el && el.tagName === 'NAV') -``` - -Ваш `#navbar` повинен мати один елемент `header` всередині. - -```js -const els = document.querySelectorAll('#navbar header') -assert(els.length === 1) -``` - -Ви повинні мати щонайменше один елемент `a` з класом `nav-link`. - -```js -const els = document.querySelectorAll('a.nav-link') -assert(els.length >= 1) -``` - -Всі ваші елементи `.nav-link` повинні бути елементами прив'язки (`a`). - -```js -const els = document.querySelectorAll('.nav-link') -els.forEach(el => { - if (el.tagName !== 'A') assert(false) -}) -assert(els.length > 0) -``` - -Всі елементи `.nav-link` повинні бути в `#navbar`. - -```js -const els1 = document.querySelectorAll('.nav-link') -const els2 = document.querySelectorAll('#navbar .nav-link') -assert(els2.length > 0 && els1.length === els2.length) -``` - -Ви повинні мати однакову кількість елементів `.nav-link` та `.main-section`. - -```js -const els1 = document.querySelectorAll('.main-section') -const els2 = document.querySelectorAll('.nav-link') -assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length) -``` - -Елемент `header` в `#navbar` повинен йти перед елементами прив'язки (`a`), також в `#navbar`. - -```js -const navLinks = document.querySelectorAll('#navbar a.nav-link'); -const header = document.querySelector('#navbar header'); -navLinks.forEach((navLink) => { - if ( - ( - header.compareDocumentPosition(navLink) & - Node.DOCUMENT_POSITION_PRECEDING - ) - ) assert(false) -}); -assert(!!header) -``` - -Кожен `.nav-link` повинен мати текст, який відповідає тексту `header` пов'язаної `section` (наприклад, якщо ви маєте секцію/заголовок «Hello world», ваш `#navbar` повинен мати `.nav-link` з текстом «Hello world»). - -```js -const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => - el.firstElementChild?.innerText?.trim().toUpperCase() -) -const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el => - el.innerText?.trim().toUpperCase() -) -const remainder = headerText.filter(str => linkText.indexOf(str) === -1) -assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0) -``` - -Кожен `.nav-link` повинен мати атрибут `href`, що посилає на відповідний `.main-section` (наприклад, якщо натиснути на елемент `.nav-link`, що містить текст «Hello world», сторінка скерує на елемент `section` з таким ідентифікатором). - -```js -const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href')) -const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id) -const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1) -assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0) -``` - -Ваш `#navbar` завжди повинен знаходитись у верхній частині вюпорту. - -```js -const el = document.getElementById('navbar') -const left1 = el?.offsetLeft -const left2 = el?.offsetLeft -assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15) -``` - -Ваш проєкт «Технічна документація» повинен використовувати принаймні один медіазапит. - -```js -const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media')) -const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media') -assert(cssCheck.length > 0 || htmlSourceAttr.length > 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - Technical Documentation Page - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  Introduction
                                                                                                  -

                                                                                                  - Welcome to a basic introduction of algebra. In this tutorial, we will - review some of the more common algebraic concepts. -

                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  Definitions
                                                                                                  -

                                                                                                  - To start with, let's define some of the more common terms used in - algebra: -

                                                                                                  -
                                                                                                    -
                                                                                                  • - Variable: A variable is an unknown value, usually represented - by a letter. -
                                                                                                    • -
                                                                                                  • - Expression: Essentially a mathematical object. For the - purpose of this tutorial, an expression is one part of an equation. -
                                                                                                    • -
                                                                                                  • - Equation: An equation is a mathematical argument in which two - expressions result in the same value. -
                                                                                                    • -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  Examples
                                                                                                  -

                                                                                                  - Sometimes it is easier to understand the definitions when you have a - physical example to look at. Here is an example of the above terms.

                                                                                                  - x + 5 = 12

                                                                                                  - In this above example, we have: -

                                                                                                  -
                                                                                                    -
                                                                                                  • Variable: The variable in the example is "x".
                                                                                                    • -
                                                                                                  • - Expression: There are two expressions in this example. They - are "x+5" and "12". -
                                                                                                    • -
                                                                                                  • - Equation: The entire example, "x+5=12", is an equation. -
                                                                                                    • -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  Solving Equations
                                                                                                  -

                                                                                                  - The primary use for algebra is to determine an unknown value, the - "variable", with the information provided. Continuing to use our - example from above, we can find the value of the variable "x".

                                                                                                  - x + 5 = 12

                                                                                                  - In an equation, both sides result in the same value. So you can - manipulate the two expressions however you need, as long as you - perform the same operation (or change) to each side. You do this - because the goal when solving an equation is to - get the variable into its own expression, or by itself on one side - of the = sign.
                                                                                                  For this example, we want to remove the "+5" so the "x" is - alone. To do this, we can subtract 5, because subtraction is - the opposite operation to addition. But remember, we have to perform - the same operation to both sides of the equation. Now our equation - looks like this.

                                                                                                  - x + 5 - 5 = 12 - 5

                                                                                                  - The equation looks like a mess right now, because we haven't completed - the operations. We can simplify this equation to make it easier - to read by performing the operations "5-5" and "12-5". The result - is:

                                                                                                  - x = 7

                                                                                                  - We now have our solution to this equation! -

                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  Solving Equations II
                                                                                                  -

                                                                                                  - Let us look at a slightly more challenging equation.

                                                                                                  - 3x + 4 = 13

                                                                                                  - Again we can start with subtraction. In this case, we want to subtract - 4 from each side of the equation. We will also go ahead and simplify - with each step. So now we have:

                                                                                                  - 3x = 9

                                                                                                  - "3x" translates to "3*x", where the "*" symbol indicates - multiplication. We use the "*" to avoid confusion, as the "x" is now a - variable instead of a multiplication symbol. The opposite operation - for multiplication is division, so we need to - divide each expression by 3.

                                                                                                  - x = 3

                                                                                                  - And now we have our solution! -

                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  Solving Equations III
                                                                                                  -

                                                                                                  - Now we are getting in to more complex operations. Here is another - equation for us to look at:

                                                                                                  - x^2 - 8 = 8

                                                                                                  - Our very first step will be to add 8 to each side. This is - different from our previous examples, where we had to subtract. But - remember, our goal is to get the variable alone by performing opposite - operations.

                                                                                                  - x^2 = 16

                                                                                                  - But what does the "^2" mean? The "^" symbol is used to denote - exponents in situations where superscript is not available. When - superscript is available, you would see it as x2. - For the sake of this project, however, we will use the "^" symbol.
                                                                                                  - An exponent tells you how many times the base (in our case, "x") is - multiplied by itself. So, "x^2" would be the same as "x*x". Now the - opposite function of multiplication is division, but we would have to - divide both sides by "x". We do not want to do this, as that - would put an "x" on the other side of the equation. So instead, we - need to use the root operation! For an exponent of "2", we call this - the "square root" and denote it with "√". Our equation is now: -

                                                                                                  - x = √9

                                                                                                  - Performing a root operation by hand can be a tedious process, so we - recommend using a calculator when necessary. However, we are lucky in - that "9" is a - perfect square, so we do not need to calculate anything. Instead, we find our - answer to be:

                                                                                                  - x = 3 -

                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  System of Equations
                                                                                                  -

                                                                                                  - As you explore your algebra studies further, you may start to run - across equations with more than one variable. The first such equations - will likely look like:

                                                                                                  - y = 3x

                                                                                                  - An equation like this does not have one single solution. - Rather, there are a series of values for which the equation is true. - For example, if "x=3" and "y=9", the equation is true. These equations - are usually used to plot a graph.
                                                                                                  - Getting more complicated, though, you may be given a pair of - equations. This is called a "system of equations", and CAN be solved. - Let's look at how we do this! Consider the following system of - equations:

                                                                                                  - y = 3x | y - 6 = x - A system of equations IS solvable, but it is a multi-step process. To - get started, we need to chose a variable we are solving for. Let's - solve for "x" first. From the second equation, we know that "x" equals - "y - 6", but we cannot simplify that further because we do not have a - value for "y". Except, thanks to the system of equations, we DO have a - value for "y". We know that "y" equals "3x". So, looking at our second - equation, we can replace "y" with "3x" because they have the same - value. We then get:

                                                                                                  - 3x - 6 = x

                                                                                                  - Now we can solve for "x"! We start by adding 6 to each side.

                                                                                                  - 3x = x + 6

                                                                                                  - We still need to get "x" by itself, so we subtract "x" from both sides - and get:

                                                                                                  - 2x = 6

                                                                                                  - If this confuses you, remember that "3x" is the same as "x+x+x". - Subtract an "x" from that and you get "x+x", or "2x". Now we divide - both sides by 2 and have our value for x!

                                                                                                  - x = 3

                                                                                                  - However, our work is not done yet. We still need to find the value for - "y". Let's go back to our first equation:

                                                                                                  - y = 3x

                                                                                                  - We have a value for "x" now, so let's see what happens if we put that - value in.

                                                                                                  - y = 3*3

                                                                                                  - We perform the multiplication and discover that "y=9"! Our solution to - this system of equations then is:

                                                                                                  - x = 3 and y = 9

                                                                                                  -

                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  Try it Yourself!
                                                                                                  -

                                                                                                  Coming Soon!

                                                                                                  -

                                                                                                  Keep an eye out for new additions!

                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  More Information
                                                                                                  -

                                                                                                  Check out the following links for more information!

                                                                                                  - -
                                                                                                  -
                                                                                                  - - - -``` - -```css -* { - background-color: #3a3240; -} -a { - color: #92869c; -} -a:hover { - background-color: #92869c; - color: #3a3240; -} -#navbar { - border-style: solid; - border-width: 5px; - border-color: #92869c; - height: 100%; - top: -5px; - left: -5px; - padding: 5px; - text-align: center; - color: #92869c -} -@media (min-width: 480px) { - #navbar { - position: fixed; - } -} -main { - margin-left: 220px; - color: #92869c -} -header { - font-size: 20pt; -} -code { - background-color: #92869c; - border-style: dashed; - border-width: 2px; - border-color: #92869c; - padding: 5px; - color: black; -} -footer { - text-align: center; -} -``` diff --git a/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md deleted file mode 100644 index 30a77fa0467..00000000000 --- a/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: bd7158d8c442eddfaeb5bd18 -title: Створіть пам'ятну сторінку -challengeType: 14 -forumTopicId: 301147 -dashedName: build-a-tribute-page ---- - -# --description-- - -**Мета:** Створити застосунок, функціонально схожий до https://tribute-page.freecodecamp.rocks - -**Історія користувача:** - -1. Ваша пам'ятна сторінка повинна містити елемент `main` з відповідним `id` зі значенням `main`, який містить всі інші елементи -1. Ви повинні бачити елемент з `id` зі значенням `title`, який містить рядок (наприклад, текст), що описує предмет пам'ятної сторінки (наприклад, «Доктор Норман Борлаґ») -1. Ви повинні побачити елемент `figure` або `div` з `id` зі значенням `img-div` -1. В межах елемента `#img-div` ви маєте бачити елемент `img` з відповідним `id="image"` -1. В межах елемента `#img-div` ви маєте бачити елемент з відповідним `id="img-caption"`, який містить текст, що описує зображення, показане в `#img-div` -1. Ви маєте бачити елемент з відповідним `id="tribute-info"`, який містить текст, що описує предмет пам'ятної сторінки -1. Ви маєте бачити елемент `a` з відповідним `id="tribute-link"`, який посилає на зовнішній сайт, що містить додаткову інформацію про предмет пам'ятної сторінки. ПІДКАЗКА: ви повинні надати своєму елементу атрибут `target` та встановити його на `_blank`, щоб ваше посилання відкривалося в новій вкладці -1. Ваш `#image` повинен використовувати властивості `max-width` та `height`, щоб змінювати розмір відповідно до ширини батьківського елемента, не перевищуючи початковий розмір -1. Ваш елемент `img` повинен бути зцентрованим відповідно до батьківського елемента - -Виконайте історію користувача та пройдіть тести, наведені нижче, щоб завершити цей проєкт. Оформте за власним стилем. Щасливого програмування! - -**Примітка:** переконайтеся, що додали `` до HTML для прив'язки з аркушем стилів та застосували CSS - -# --hints-- - -Ви повинні мати елемент `main` з `id` зі значенням `main`. - -```js -const el = document.getElementById('main') -assert(!!el && el.tagName === 'MAIN') -``` - -Ваші `#img-div`, `#image`, `#img-caption`, `#tribute-info` та `#tribute-link` повинні бути нащадками `#main`. - -```js -const el1 = document.querySelector('#main #img-div') -const el2 = document.querySelector('#main #image') -const el3 = document.querySelector('#main #img-caption') -const el4 = document.querySelector('#main #tribute-info') -const el5 = document.querySelector('#main #tribute-link') -assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5) -``` - -Ви повинні мати елемент з `id` зі значенням `title`. - -```js -const el = document.getElementById('title') -assert(!!el) -``` - -Ваш `#title` не повинен бути порожнім. - -```js -const el = document.getElementById('title') -assert(!!el && el.innerText.length > 0) - -``` - -Ви повинні мати елемент `figure` або `div` з `id` зі значенням `img-div`. - -```js -const el = document.getElementById('img-div') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE')) -``` - -Ви повинні мати елемент `img` з `id` зі значенням `image`. - -```js -const el = document.getElementById('image') -assert(!!el && el.tagName === 'IMG') -``` - -Ваш `#image` повинен бути нащадком `#img-div`. - -```js -const el = document.querySelector('#img-div #image') -assert(!!el) -``` - -Ви повинні мати елемент `figcaption` або `div` з `id` зі значенням `img-caption`. - -```js -const el = document.getElementById('img-caption') -assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION')) -``` - -Ваш `#img-caption` повинен бути нащадком `#img-div`. - -```js -const el = document.querySelector('#img-div #img-caption') -assert(!!el) -``` - -Ваш `#img-caption` не повинен бути порожнім. - -```js -const el = document.getElementById('img-caption') -assert(!!el && el.innerText.length > 0) -``` - -Ви повинні мати елемент з `id` зі значенням `tribute-info`. - -```js -const el = document.getElementById('tribute-info') -assert(!!el) -``` - -Ваш `#tribute-info` не повинен бути порожнім. - -```js -const el = document.getElementById('tribute-info') -assert(!!el && el.innerText.length > 0) -``` - -Ви повинні мати елемент `a` з `id` зі значенням `tribute-link`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.tagName === 'A') -``` - -Ваш `#tribute-link` повинен мати атрибут `href` та значення. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && !!el.href && el.href.length > 0) -``` - -Ваш `#tribute-link` повинен мати атрибут `target` зі значенням `_blank`. - -```js -const el = document.getElementById('tribute-link') -assert(!!el && el.target === '_blank') -``` - -Ваш елемент `img` повинен мати `display` зі значенням `block`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('display') -assert(style === 'block') -``` - -Ваш `#image` повинен мати `max-width` зі значенням `100%`. - -```js -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const style = imgStyle?.getPropertyValue('max-width') -assert(style === '100%') -``` - -Ваш `#image` повинен мати `height` зі значенням `auto`. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'); -const imgStyle = window.getComputedStyle(img); -const oldDisplayValue = imgStyle.getPropertyValue('display'); -const oldDisplayPriority = imgStyle.getPropertyPriority('display'); -img?.style.setProperty('display', 'none', 'important'); -const heightValue = imgStyle?.getPropertyValue('height') -img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority); -assert(heightValue === 'auto') -``` - -Ваш `#image` повинен бути зцентрованим відповідно до батьківського елемента. - -```js -// taken from the testable-projects repo -const img = document.getElementById('image'), - imgParent = img?.parentElement, - imgLeft = img?.getBoundingClientRect().left, - imgRight = img?.getBoundingClientRect().right, - parentLeft = imgParent?.getBoundingClientRect().left, - parentRight = imgParent?.getBoundingClientRect().right, - leftMargin = imgLeft - parentLeft, - rightMargin = parentRight - imgRight; -assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6) -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -```css - -``` - -## --solutions-- - -```html - - - - - - - - Tribute Page - - -

                                                                                                  Tribute Page

                                                                                                  -

                                                                                                  The below card was designed as a tribute page for freeCodeCamp.

                                                                                                  -
                                                                                                  -
                                                                                                  - An image of Togepi -
                                                                                                  Togepi, happy as always.
                                                                                                  -
                                                                                                  -

                                                                                                  Togepi

                                                                                                  -
                                                                                                  -
                                                                                                  -

                                                                                                  - Togepi was first discovered in the Johto region, when Ash Ketchum - discovered a mysterious egg. However, when the egg hatched, Togepi saw - Ash's friend Misty first and imprinted on her. Like many other - creatures, this imprinting process created a bond and Togepi views - Misty as his mother. -

                                                                                                  -

                                                                                                  - Togepi is a very childlike Pokemon, and is very emotionally - expressive. He demonstrates extreme levels of joy and sadness. -

                                                                                                  -
                                                                                                  -

                                                                                                  Battle Information

                                                                                                  -
                                                                                                    -
                                                                                                  • Type: Fairy
                                                                                                    • -
                                                                                                  • Evolutions: Togepi -> Togetic -> Togekiss
                                                                                                    • -
                                                                                                  • Moves: Growl, Pound, Sweet Kiss, Charm
                                                                                                    • -
                                                                                                  • Weaknesses: Poison, Steel
                                                                                                    • -
                                                                                                  • Resistances: Dragon
                                                                                                    • -
                                                                                                  -

                                                                                                  - Check out this - Bulbapedia article on Togepi - for more information on this great Pokemon. -

                                                                                                  -
                                                                                                  -
                                                                                                  - - - -``` - -```css -body { - background-color: #3a3240; - color: white; -} -main { - background-color: #92869c; - font-family: Lobster; - max-width: 500px; - margin: 20px auto; - color: black; - border-radius: 50px; - box-shadow: 10px 10px rgba(0, 0, 0, 0.5); -} -h2 { - text-align: center; - font-size: 20pt; - font-family: Pacifico; -} -body { - text-align: center; - font-size: 12pt; -} -footer { - text-align: center; - font-size: 10pt; -} -.border { - border-color: black; - border-width: 5px; - border-style: solid; -} -#image { - height: auto; - display: block; - margin: auto; - max-width: 100%; - border-radius: 50%; -} -#img-caption { - font-size: 10pt; -} -a:not(#tribute-link) { - color: white; -} -hr { - border-color: black; -} -``` diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md deleted file mode 100644 index 21aec42d6a5..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05b -title: Побудова власних функцій -challengeType: 11 -videoId: nLDychdBwUg -bilibiliIds: - aid: 249487483 - bvid: BV1Fv411J7bS - cid: 376340281 -dashedName: build-your-own-functions ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа - -# --question-- - -## --text-- - -Який результат буде виведено на екран після виконання коду нижче?: - -```python -def fred(): - print("Zap") -def jane(): - print("ABC") - -jane() -fred() -jane() -``` - -## --answers-- - -
                                                                                                  Zap
-ABC
-jane
-fred
-jane
                                                                                                  - ---- - -
                                                                                                  Zap
-ABC
-Zap
                                                                                                  - ---- - -
                                                                                                  ABC
-Zap
-jane
                                                                                                  - ---- - -
                                                                                                  ABC
-Zap
-ABC
                                                                                                  - ---- - -
                                                                                                  Zap
-Zap
-Zap
                                                                                                  - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md deleted file mode 100644 index 95836c8c991..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06d -title: Порівняння та сортування кортежів -challengeType: 11 -videoId: dZXzBXUxxCs -bilibiliIds: - aid: 931886163 - bvid: BV1HM4y1T7TK - cid: 376533673 -dashedName: comparing-and-sorting-tuples ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа - -# --question-- - -## --text-- - -Що з переліченого зробить те ж саме, що й наданий код?: - -```python -lst = [] -for key, val in counts.items(): - newtup = (val, key) - lst.append(newtup) -lst = sorted(lst, reverse=True) -print(lst) -``` - -## --answers-- - -```python -print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.items().sorted() ] ) -``` - ---- - -```python -print( sorted( [ (v,k) for k,v in counts.keys() ] ) ) -``` - ---- - -```python -print( [ (k,v) for k,v in counts.values().sort() ] ) -``` - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md deleted file mode 100644 index b44b406fb28..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f058 -title: Використання умовних операторів -challengeType: 11 -videoId: gz_IfIsZQtc -bilibiliIds: - aid: 206949935 - bvid: BV1Jh411z7bY - cid: 376337035 -dashedName: conditional-execution ---- - -# --question-- - -## --text-- - -Який код є правильним і при виконанні буде виведено "Yes" за умови, що x = 0 та y = 10? - -## --answers-- - -```python -if 0 == x: -if y == 10: -print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: -if y == 10: - print("Yes") -``` - ---- - -```python -if 0 == x: - if y == 10: - print("Yes") -``` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md deleted file mode 100644 index 506e6be4855..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f097 -title: 'Візуалізація даних: списки розсилки' -challengeType: 11 -videoId: RYdW660KkaQ -bilibiliIds: - aid: 334465586 - bvid: BV18w411R7dD - cid: 377545473 -dashedName: data-visualization-mailing-lists ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа: Geodata - -\- Вправа: Gmane Model - -\- Вправа: Gmane Spider - -\- Вправа: Gmane Viz - -\- Вправа: Page Rank - -\- Вправа: Page Spider - -\- Вправа: Page Viz - -# --question-- - -## --text-- - -Яка типова бібліотека візуалізації JavaScript? - -## --answers-- - -DataViz.js - ---- - -D3 - ---- - -Lowcharts - ---- - -DATA6 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md deleted file mode 100644 index 3d9f31b96c6..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f6a0b6c005b0e76f096 -title: 'Візуалізація даних: Page Rank' -challengeType: 11 -videoId: 6-w_qIUwaxU -bilibiliIds: - aid: 376950472 - bvid: BV1ho4y1Q72u - cid: 377544599 -dashedName: data-visualization-page-rank ---- - -# --question-- - -## --text-- - -Як працює алгоритм PageRank? - -## --answers-- - -Він визначає, які сторінки найбільш пов’язані. - ---- - -Він ранжує сторінки за кількістю переглядів. - ---- - -Він визначає, які сторінки містять найважливіший контент. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md deleted file mode 100644 index 8c606aec7bf..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f069 -title: Словники та цикли -challengeType: 11 -videoId: EEmekKiKG70 -bilibiliIds: - aid: 589401038 - bvid: BV1eq4y1X7xU - cid: 376387132 -dashedName: dictionaries-and-loops ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа - -# --question-- - -## --text-- - -Що надрукує наведений код?: - -```python -counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100} -for key in counts: - if counts[key] > 10: - print(key, counts[key]) -``` - -## --answers-- - -
                                                                                                  annie 42
-jan 100
                                                                                                  - ---- - -
                                                                                                  chuck 1
-annie 42
-jan 100
                                                                                                  - ---- - -
                                                                                                  chuck 1
                                                                                                  - ---- - -
                                                                                                  [Error]
                                                                                                  - -## --video-solution-- - -1 diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md deleted file mode 100644 index c6332e3592b..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f068 -title: 'Словники: загальне використання' -challengeType: 11 -videoId: f17xPfIXct0 -bilibiliIds: - aid: 805747023 - bvid: BV1v34y1D7ug - cid: 414168867 -dashedName: dictionaries-common-applications ---- - -# --question-- - -## --text-- - -Що надрукує наведений код? - -```python -counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10} -print(counts.get('kris', 0)) -``` - -## --answers-- - -2 - ---- - -quincy - ---- - -0 - ---- - -10 - ---- - -[помилка] - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md deleted file mode 100644 index bb7d0418405..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f063 -title: Файли як послідовність -challengeType: 11 -videoId: cIA0EokbaHE -bilibiliIds: - aid: 974380307 - bvid: BV1p44y1m7br - cid: 376388846 -dashedName: files-as-a-sequence ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа - -# --question-- - -## --text-- - -Що робить команда «continue», якщо вона розташована всередині циклу? - -## --answers-- - -Переходить до коду одразу після циклу. - ---- - -Переходить до наступного рядка коду. - ---- - -Переходить до наступної ітерації циклу. - ---- - -Пропускає наступний блок коду. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md deleted file mode 100644 index 31953ac67fb..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f057 -title: Робота з виразами -challengeType: 11 -videoId: dKgUaIa5ATg -bilibiliIds: - aid: 334428894 - bvid: BV1uw411R7gH - cid: 376318468 -dashedName: intermediate-expressions ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа 1 - -\- Вправа 2 - -# --question-- - -## --text-- - -Що буде виведено в результаті виконання даного коду: - -```python -width = 15 -height = 12.0 -print(height/3) -``` - -## --answers-- - -39 - ---- - -4 - ---- - -4.0 - ---- - -5.0 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md deleted file mode 100644 index bb5dd83c94f..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f061 -title: Робота з рядками -challengeType: 11 -videoId: KgT_fYLXnyk -bilibiliIds: - aid: 291983121 - bvid: BV1Zf4y157yG - cid: 376394116 -dashedName: intermediate-strings ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа - -# --question-- - -## --text-- - -Яке значення матиме змінна i після виконання даного коду? - -```python -word = "bananana" -i = word.find("na") -``` - -## --answers-- - -nanana - ---- - -2 - ---- - -3 - ---- - -True - ---- - -na - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md deleted file mode 100644 index c8a348a3c7d..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: 5e6a54c358d3af90110a60a3 -title: 'Вступ: елементи мови Python' -challengeType: 11 -videoId: aRY_xjL35v0 -bilibiliIds: - aid: 674420725 - bvid: BV1MU4y1H7Lj - cid: 376315889 -dashedName: introduction-elements-of-python ---- - -# --question-- - -## --text-- - -Який результат буде виведено на екран після виконання коду нижче: - -```python -x = 43 -x = x + 1 -print(x) -``` - -## --answers-- - -x - ---- - -x + 1 - ---- - -44 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md deleted file mode 100644 index d473f9825bb..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e6a54af58d3af90110a60a1 -title: 'Вступ: архітектура обладнання' -challengeType: 11 -videoId: H6qtjRTfSog -bilibiliIds: - aid: 206977572 - bvid: BV1zh411z7Ak - cid: 376199262 -dashedName: introduction-hardware-architecture ---- - -# --question-- - -## --text-- - -Де зберігаються програми під час виконання? - -## --answers-- - -Жорсткий диск. - ---- - -Пам’ять. - ---- - -Центральний процесор. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md deleted file mode 100644 index f3064cec81b..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e6a54ba58d3af90110a60a2 -title: 'Вступ: Python як мова програмування' -challengeType: 11 -videoId: 0QeGbZNS_bY -bilibiliIds: - aid: 674404602 - bvid: BV1GU4y1H7vB - cid: 376315625 -dashedName: introduction-python-as-a-language ---- - -# --question-- - -## --text-- - -Що буде виведено в результаті виконання цього коду: - -```python -x = 6 -print(x) -``` - -## --answers-- - -x - ---- - -6 - ---- - -x = 6 - ---- - -(x) - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md deleted file mode 100644 index ac8f4d529cc..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e6a54a558d3af90110a60a0 -title: 'Вступ: чому програмування?' -challengeType: 11 -videoId: 3muQV-Im3Z0 -bilibiliIds: - aid: 206882253 - bvid: BV1Fh411z7tr - cid: 376314257 -videoLocaleIds: - espanol: 3muQV-Im3Z0 - italian: 3muQV-Im3Z0 - portuguese: 3muQV-Im3Z0 -dashedName: introduction-why-program ---- - -# --description-- - -Додаткові ресурси: - -\- Встановити Python на Windows - -\- Встановити Python на MacOS - -# --question-- - -## --text-- - -Кому варто навчатися програмування? - -## --answers-- - -Студентам коледжу. - -### --feedback-- - -Студенти повинні вчитись програмувати, але є краща відповідь. - ---- - -Людям, які хочуть стати розробниками програмного забезпечення. - -### --feedback-- - -Люди, які хочуть стати розробниками програмного забезпечення, повинні вчитись програмувати, але є краща відповідь. - ---- - -Всім. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md deleted file mode 100644 index f0088419196..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05d -title: 'Ітерації: визначені цикли' -challengeType: 11 -videoId: hiRTRAqNlpE -bilibiliIds: - aid: 291987032 - bvid: BV1ff4y157Q3 - cid: 376385255 -dashedName: iterations-definite-loops ---- - -# --question-- - -## --text-- - -Скільки рядків буде виведено в результаті виконання даного коду?: - -```python -for i in [2,1,5]: - print(i) -``` - -## --answers-- - -1 - ---- - -2 - ---- - -3 - ---- - -5 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md deleted file mode 100644 index 4cf366289a3..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05e -title: 'Цикли: ідіоми циклів' -challengeType: 11 -videoId: AelGAcoMXbI -bilibiliIds: - aid: 334491369 - bvid: BV1tw411R7Mm - cid: 376530765 -dashedName: iterations-loop-idioms ---- - -# --question-- - -## --text-- - -Нижче наведено код, який знаходить найменше значення у списку. Один з рядків коду містить помилку, яка не буде дозволяти коду працювати правильно. Який це рядок?: - -```python -smallest = None -print("Before:", smallest) -for itervar in [3, 41, 12, 9, 74, 15]: - if smallest is None or itervar < smallest: - smallest = itervar - break - print("Loop:", itervar, smallest) -print("Smallest:", smallest) -``` - -## --answers-- - -3 - ---- - -4 - ---- - -6 - ---- - -7 - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md deleted file mode 100644 index fcab0fd0a96..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f05f -title: 'Ітерації: додаткові шаблони' -challengeType: 11 -videoId: 9Wtqo6vha1M -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: iterations-more-patterns ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа - -# --question-- - -## --text-- - -Який з варіантів еквівалентий значенню False? - -## --answers-- - -```python -0 == 0.0 -``` - ---- - -```python -0 is 0.0 -``` - ---- - -```python -0 is not 0.0 -``` - ---- - -```python -0 = 0.0 -``` - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md deleted file mode 100644 index 5530ee32b51..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05c -title: Цикли та ітерації -challengeType: 11 -videoId: dLA-szNRnUY -bilibiliIds: - aid: 674492981 - bvid: BV1hU4y1H7tF - cid: 376531204 -dashedName: loops-and-iterations ---- - -# --question-- - -## --text-- - -Що надрукує наведений код?: - -```python -n = 0 -while True: - if n == 3: - break - print(n) - n = n + 1 -``` - -## --answers-- - -
                                                                                                  0
-1
-2
                                                                                                  - ---- - -
                                                                                                  0
-1
-2
-3
                                                                                                  - ---- - -
                                                                                                  1
-2
                                                                                                  - ---- - -
                                                                                                  1
-2
-3
                                                                                                  - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md deleted file mode 100644 index 168d7ca98fd..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08b -title: Розробка реляційної бази даних -challengeType: 11 -videoId: MQ5z4bdF92U -bilibiliIds: - aid: 249380678 - bvid: BV1vv411E76L - cid: 377531786 -dashedName: make-a-relational-database ---- - -# --question-- - -## --text-- - -Яку SQL команду ви б використали для того, щоб отримати всіх користувачів з електронною адресою `quincy@freecodecamp.org`? - -## --answers-- - -```sql -SELECT Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT ALL Users WHERE email="quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org" -``` - ---- - -```sql -SELECT * FROM Users WHERE email="quincy@freecodecamp.org" -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md deleted file mode 100644 index f52ee3c8c91..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f059 -title: Додаткові умовні структури -challengeType: 11 -videoId: HdL82tAZR20 -bilibiliIds: - aid: 631930118 - bvid: BV1Nb4y1r7z2 - cid: 376337449 -dashedName: more-conditional-structures ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа 1 - -\- Вправа 2 - -# --question-- - -## --text-- - -Вам надано наведений нижче код: - -```python -temp = "5 degrees" -cel = 0 -fahr = float(temp) -cel = (fahr - 32.0) * 5.0 / 9.0 -print(cel) -``` - -Який рядок/рядки мають бути всередині блоку `try`? - -## --answers-- - -1 - ---- - -3 - ---- - -3,4 - ---- - -4 - ---- - -Жоден - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md deleted file mode 100644 index 0dc361a7866..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f072 -title: Мережеві протоколи -challengeType: 11 -videoId: c6vZGescaSc -bilibiliIds: - aid: 931950996 - bvid: BV1cM4y1N7K6 - cid: 376388317 -dashedName: networking-protocol ---- - -# --question-- - -## --text-- - -Який тип запиту HTTP зазвичай використовується для доступу до вебсайту? - -## --answers-- - -POST - ---- - -GET - ---- - -WEB - ---- - -ACCESS - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md deleted file mode 100644 index 15cb35ea72d..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f074 -title: 'Мережа: обробка тексту' -challengeType: 11 -videoId: Pv_pJgVu8WI -bilibiliIds: - aid: 804442498 - bvid: BV16y4y1j7WW - cid: 377329124 -dashedName: networking-text-processing ---- - -# --question-- - -## --text-- - -Який тип кодування використовує більшість сайтів? - -## --answers-- - -UTF-8 - ---- - -UTF-16 - ---- - -UTF-32 - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md deleted file mode 100644 index 9a2c0e48479..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f075 -title: 'Мережа: використання urllib у Python' -challengeType: 11 -videoId: 7lFM1T_CxBs -bilibiliIds: - aid: 546908270 - bvid: BV1Xq4y1H7e6 - cid: 377331524 -dashedName: networking-using-urllib-in-python ---- - -# --question-- - -## --text-- - -Як буде виглядати результат виконання даного коду?: - -```python -import urllib.request -fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt') -for line in fhand: - print(line.decode().strip()) -``` - -## --answers-- - -Лише зміст «romeo.txt». - ---- - -Верхній колонтитул і зміст «romeo.txt». - ---- - -Верхній та нижній колонтитули, зміст «romeo.txt». - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md deleted file mode 100644 index c727187f17e..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f0d0b6c005b0e76f076 -title: 'Мережа: вебскрапінг з Python' -challengeType: 11 -videoId: Uyioq2q4cEg -bilibiliIds: - aid: 674382625 - bvid: BV1oU4y1n7zQ - cid: 377331774 -dashedName: networking-web-scraping-with-python ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа: socket1 - -\- Вправа: urllib - -\- Вправа: urllinks - -# --question-- - -## --text-- - -Яку бібліотеку Python використовують для парсингу HTML-документів та отримання даних з них? - -## --answers-- - -socket - ---- - -http - ---- - -BeautifulSoup - ---- - -PrettyBiscuit - ---- - -WonderfulSalad - ---- - -HttpParser - ---- - -GrunkleStan - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md deleted file mode 100644 index b693b16b570..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f071 -title: Робота з мережею у Python -challengeType: 11 -videoId: _kJvneKVdNM -bilibiliIds: - aid: 419494612 - bvid: BV1r341167jT - cid: 376385858 -dashedName: networking-with-python ---- - -# --question-- - -## --text-- - -Яка бібліотека дає доступ до сокетів TCP? - -## --answers-- - -tcp - ---- - -socket - ---- - -http - ---- - -port - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md deleted file mode 100644 index 36f0671de57..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5e7b9f0c0b6c005b0e76f073 -title: 'Мережа: написання веббраузера' -challengeType: 11 -videoId: zjyT9DaAjx4 -bilibiliIds: - aid: 761908574 - bvid: BV1j64y1x7wx - cid: 377319579 -dashedName: networking-write-a-web-browser ---- - -# --question-- - -## --text-- - -Що створює даний код?: - -```py -import socket - -mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) -mysock.connect(('data.pr4e.org', 80)) -cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode() -mysock.send(cmd) - -while True: - data = mysock.recv(512) - if len(data) < 1: - break - print(data.decode(),end='') -mysock.close() -``` - -## --answers-- - -Простий вебсервер. - ---- - -Простий клієнт пошти. - ---- - -Простий список завдань. - ---- - -Простий веббраузер. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md deleted file mode 100644 index cee3a24d797..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f087 -title: Життєвий цикл об’єкта -challengeType: 11 -videoId: p1r3h_AMMIM -bilibiliIds: - aid: 461998717 - bvid: BV1JL411n7Hr - cid: 377529681 -dashedName: object-lifecycle ---- - -# --question-- - -## --text-- - -Що виведе дана програма на екран?: - -```python -class PartyAnimal: - x = 0 - name = '' - def __init__(self, nam): - self.name = nam - print(self.name,'constructed') - def party(self): - self.x = self.x + 1 - print(self.name,'party count',self.x) - -q = PartyAnimal('Quincy') -m = PartyAnimal('Miya') - -q.party() -m.party() -q.party() -``` - -## --answers-- - -
                                                                                                  -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 2
-Quincy party count 3
-
                                                                                                  - ---- - -
                                                                                                  -Quincy constructed
-Miya constructed
-Quincy party count 1
-Miya party count 1
-Quincy party count 2
-
                                                                                                  - ---- - -
                                                                                                  -Quincy constructed
-Quincy party count 1
-Quincy party count 2
-Miya constructed
-Miya party count 1
-
                                                                                                  - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md deleted file mode 100644 index 58d03c7cdb0..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f086 -title: 'Об’єкти: приклад класу' -challengeType: 11 -videoId: FiABKEuaSJ8 -bilibiliIds: - aid: 589451777 - bvid: BV1rq4y1X7TG - cid: 377523194 -dashedName: objects-a-sample-class ---- - -# --question-- - -## --text-- - -Що виведе на екран дана програма?: - -```python -class PartyAnimal: - x = 0 - def party(self): - self.x = self.x + 2 - print(self.x) - -an = PartyAnimal() -an.party() -an.party() -``` - -## --answers-- - -
                                                                                                  -So far 1
-So far 2
-
                                                                                                  - ---- - -
                                                                                                  -0
-0
-
                                                                                                  - ---- - -
                                                                                                  -2
-2
-
                                                                                                  - ---- - -
                                                                                                  -2
-4
-
                                                                                                  - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md deleted file mode 100644 index 29f520bf2fc..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f088 -title: 'Об’єкти: успадкування' -challengeType: 11 -videoId: FBL3alYrxRM -bilibiliIds: - aid: 631990691 - bvid: BV1sb4y1r7GF - cid: 377529901 -dashedName: objects-inheritance ---- - -# --question-- - -## --text-- - -Що таке успадкування в об’єктноорієнтованому програмуванні? - -## --answers-- - -Створення нового класу при розширенні батьківського. - ---- - -Побудований екземпляр класу. - ---- - -Можливість створювати новий клас як розширення вже існуючого класу. - ---- - -Метод, який викликається в момент, коли клас використано для побудови об’єкту. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md deleted file mode 100644 index 05ddbb5707e..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f067 -title: Словники в Python -challengeType: 11 -videoId: dnzvfimrRMg -bilibiliIds: - aid: 631893305 - bvid: BV19b4y167kj - cid: 376386176 -dashedName: python-dictionaries ---- - -# --question-- - -## --text-- - -Яким буде значення словника після виконання цього коду?: - -```python -dict = {"Fri": 20, "Thu": 6, "Sat": 1} -dict["Thu"] = 13 -dict["Sat"] = 2 -dict["Sun"] = 9 -``` - -## --answers-- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1} -``` - ---- - -```python -{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Sun': 9} -``` - ---- - -```python -{'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - ---- - -```python -{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9} -``` - -## --video-solution-- - -5 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-functions.md deleted file mode 100644 index a192066882c..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-functions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f060b6c005b0e76f05a -title: Функції в Python -challengeType: 11 -videoId: 3JGF-n3tDPU -bilibiliIds: - aid: 631881917 - bvid: BV1Xb4y167P4 - cid: 376337920 -dashedName: python-functions ---- - -# --question-- - -## --text-- - -Яке призначення має ключове слово «def» у Python? - -## --answers-- - -Це сленг, що означає «даний код дуже крутий». - ---- - -Воно вказує на початок функції. - ---- - -Воно вказує на те, що наступний вкладений розділ коду буде зберігатися для майбутнього використання. - ---- - -Воно вказує початок функції, і те, що наступний вкладений розділ коду буде зберігатися для майбутнього використання. - ---- - -Жодне із перерахованого вище. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-lists.md deleted file mode 100644 index 7a9eae26e6c..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-lists.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f064 -title: Списки в Python -challengeType: 11 -videoId: Y0cvfDpYC_c -bilibiliIds: - aid: 249460305 - bvid: BV1Dv411E7Uj - cid: 376532993 -dashedName: python-lists ---- - -# --question-- - -## --text-- - -Яким буде значення змінної x після виконання даного коду: - -```python -fruit = "banana" -x = fruit[1] -``` - -## --answers-- - -banana - ---- - -a - ---- - -b - ---- - -True - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-objects.md deleted file mode 100644 index f118e61f827..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-objects.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f160b6c005b0e76f085 -title: Об’єкти в Python -challengeType: 11 -videoId: uJxGeTYy0us -bilibiliIds: - aid: 889496260 - bvid: BV1ZP4y1s7G6 - cid: 377522762 -dashedName: python-objects ---- - -# --question-- - -## --text-- - -Яке з наведених тверджень НЕ є правильним для об’єктів у Python? - -## --answers-- - -Об’єкти створюються та використовуються. - ---- - -Об’єкти — це біти коду та дані. - ---- - -Об’єкти приховують деталі. - ---- - -Об’єкти — це один з п’яти стандартних типів даних. - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/reading-files.md deleted file mode 100644 index cd14a8da63e..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/reading-files.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f080b6c005b0e76f062 -title: Зчитування файлів -challengeType: 11 -videoId: Fo1tW09KIwo -bilibiliIds: - aid: 334439927 - bvid: BV1pw411R7UK - cid: 376532076 -dashedName: reading-files ---- - -# --question-- - -## --text-- - -Що використовується для того, щоб позначити новий рядок у рядку? - -## --answers-- - -\\n - ---- - -{new_line} - ---- - -{n} - ---- - -/n - ---- - -/new - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md deleted file mode 100644 index 33670e1029e..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06f -title: 'Регулярні вирази: відповідність і отримання даних' -challengeType: 11 -videoId: LaCZnTbQGkE -bilibiliIds: - aid: 975629041 - bvid: BV1i44y1b7hE - cid: 414167130 -dashedName: regular-expressions-matching-and-extracting-data ---- - -# --question-- - -## --text-- - -Що виведе на екран дана програма?: - -```python -import re -s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM' -lst = re.findall('\\S+@\\S+', s) -print(lst) -``` - -## --answers-- - -['csev@umich.edu', 'cwen@iupui.edu'] - ---- - -['csev@umich.edu'] - ---- - -['umich.edu', 'iupui.edu'] - ---- - -['csev@', 'cwen@'] - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md deleted file mode 100644 index 661b30ba807..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f070 -title: 'Регулярні вирази: практичні програми' -challengeType: 11 -videoId: xCjFU9G6x48 -bilibiliIds: - aid: 546924659 - bvid: BV1mq4y1H7rZ - cid: 376386493 -dashedName: regular-expressions-practical-applications ---- - -# --question-- - -## --text-- - -Що з наведеного шукатиме «$» у регулярному виразі? - -## --answers-- - -$ - ---- - -\\dollar\\ - ---- - -\\$ - ---- - -!$ - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md deleted file mode 100644 index d761504b759..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0b0b6c005b0e76f06e -title: Регулярні вирази -challengeType: 11 -videoId: Yud_COr6pZo -bilibiliIds: - aid: 759422542 - bvid: BV1W64y167YD - cid: 376387549 -dashedName: regular-expressions ---- - -# --question-- - -## --text-- - -Який регулярний вираз підходить тільки для опису пробілу? - -## --answers-- - -\\S - ---- - -\\s - ---- - -. - ---- - -\_ - ---- - -\\. - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md deleted file mode 100644 index 84b0aab6855..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08c -title: Проєктування реляційних баз даних -challengeType: 11 -videoId: AqdfbrpkbHk -bilibiliIds: - aid: 504388066 - bvid: BV1Qg411j742 - cid: 377532216 -dashedName: relational-database-design ---- - -# --question-- - -## --text-- - -Скільки разів можна зберегти рядкові дані у базі даних в найкращому випадку? - -## --answers-- - -0 - ---- - -1 - ---- - -2 - ---- - -3 - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md deleted file mode 100644 index a478971ca29..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 5e7b9f170b6c005b0e76f08a -title: Реляційні бази даних і SQLite -challengeType: 11 -videoId: QlNod5-kFpA -bilibiliIds: - aid: 249449958 - bvid: BV12v411E74H - cid: 377530805 -dashedName: relational-databases-and-sqlite ---- - -# --description-- - -Завантажити SQLite -Завантажити DB Browser для SQLite -Використання SQLite - -# --question-- - -## --text-- - -Що НЕ є первинною структурою даних в базі даних? - -## --answers-- - -index - ---- - -table - ---- - -row - ---- - -column - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md deleted file mode 100644 index 07efc8b3c00..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08f -title: 'Реляційні бази даних: операції приєднання' -challengeType: 11 -videoId: jvDw3D9GKac -bilibiliIds: - aid: 804461215 - bvid: BV1Ry4y1j7tv - cid: 377542880 -dashedName: relational-databases-join-operation ---- - -# --question-- - -## --text-- - -Що робить ON під час використання умови JOIN в інструкції SQL? - -## --answers-- - -Воно вказує з якою таблицею виконувати JOIN. - ---- - -Воно визначає поля для JOIN. - ---- - -Воно вказує на те, як саме таблиці мають бути об’єднані. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md deleted file mode 100644 index fa3d94b61c8..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: 5e7b9f190b6c005b0e76f090 -title: 'Реляційні бази даних: відношення типу багато-багато' -challengeType: 11 -videoId: z-SBYcvEQOc -bilibiliIds: - aid: 291965127 - bvid: BV1Af4y1L7BK - cid: 377543409 -dashedName: relational-databases-many-to-many-relationships ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа: Email - -\- Вправа: Roster - -\- Вправа: Tracks - -\- Вправа: Twfriends - -\- Вправа: Twspider - -# --question-- - -## --text-- - -Що є прикладом відношення типу багато-багато? - -## --answers-- - -учитель -> учень - ---- - -клієнт -> замовлення - ---- - -книга -> сторінка - ---- - -місто -> країна - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md deleted file mode 100644 index ac94146f2a7..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08e -title: 'Реляційні бази даних: побудова відношень' -challengeType: 11 -videoId: CSbqczsHVnc -bilibiliIds: - aid: 376996473 - bvid: BV1jo4y1S7VY - cid: 377532966 -dashedName: relational-databases-relationship-building ---- - -# --question-- - -## --text-- - -Що робить команда INSERT у SQL? - -## --answers-- - -Вона створює новий рядок, перераховуючи поля, які ми хочемо додати, і значення, які ми хочемо розмістити в новому рядку. - ---- - -Вона створює новий стовпчик, перераховуючи рядки, які ми хочемо додати, і значення, які ми хочемо розмістити в новому стовпчику. - ---- - -Вона створює нову таблицю, перераховуючи рядки та поля, які ми хочемо додати, і значення, які ми хочемо розмістити в новій таблиці. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md deleted file mode 100644 index 209164c626e..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f180b6c005b0e76f08d -title: Представлення відношень у реляційній базі даних -challengeType: 11 -videoId: '-orenCNdC2Q' -bilibiliIds: - aid: 931953070 - bvid: BV1FM4y1N7hc - cid: 377532529 -dashedName: representing-relationships-in-a-relational-database ---- - -# --question-- - -## --text-- - -Що таке іноземний ключ? - -## --answers-- - -Ключ, який не повинен бути там. - ---- - -Ключ, який використовує нелатинські символи. - ---- - -Число, яке вказує на первинний ключ від пов’язаного рядка в іншій таблиці. - ---- - -Ключ, який «реальний світ» може використовувати для пошуку необхідного рядка. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md deleted file mode 100644 index 3e5979a54a7..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f066 -title: Рядки та списки -challengeType: 11 -videoId: lxcFa7ldCi0 -bilibiliIds: - aid: 804401443 - bvid: BV1By4y1j7F9 - cid: 376385517 -dashedName: strings-and-lists ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа - -# --question-- - -## --text-- - -Чому дорівнює n в цьому коді? - -```python -words = 'His e-mail is q-lar@freecodecamp.org' -pieces = words.split() -parts = pieces[3].split('-') -n = parts[1] -``` - -## --answers-- - -mail - ---- - -q - ---- - -lar - ---- - -`lar@freecodecamp.org` - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md deleted file mode 100644 index 97d34238d57..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f070b6c005b0e76f060 -title: Рядки в Python -challengeType: 11 -videoId: LYZj207fKpQ -bilibiliIds: - aid: 504434218 - bvid: BV1Lg41177s8 - cid: 376531802 -dashedName: strings-in-python ---- - -# --question-- - -## --text-- - -Що надрукує наведений код?: - -```python -for n in "banana": - print(n) -``` - -## --answers-- - -
                                                                                                  -n
-n
-
                                                                                                  - ---- - -
                                                                                                  -0
-1
-
                                                                                                  - ---- - -
                                                                                                  -0
-1
-2
-3
-4
-5
-
                                                                                                  - ---- - -
                                                                                                  -b
-a
-n
-a
-n
-a
-
                                                                                                  - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md deleted file mode 100644 index 29ac2c8c170..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5e7b9f0a0b6c005b0e76f06c -title: Колекція кортежів -challengeType: 11 -videoId: 3Lxpladfh2k -bilibiliIds: - aid: 334468209 - bvid: BV1aw411R77G - cid: 376533308 -dashedName: the-tuples-collection ---- - -# --question-- - -## --text-- - -Що надрукує наведений код?: - -```python -d = dict() -d['quincy'] = 1 -d['beau'] = 5 -d['kris'] = 9 -for (k,i) in d.items(): - print(k, i) -``` - -## --answers-- - -
                                                                                                  -k i
-k i
-k i
-
                                                                                                  - ---- - -
                                                                                                  -quincy 0
-beau 1
-kris 2
-
                                                                                                  - ---- - -
                                                                                                  -quincy 1
-beau 5
-kris 9
-
                                                                                                  - ---- - -
                                                                                                  -1 quincy
-5 beau
-9 kris
-
                                                                                                  - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/using-web-services.md deleted file mode 100644 index 24ba8619dd1..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/using-web-services.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07a -title: Використання вебсервісів -challengeType: 11 -videoId: oNl1OVDPGKE -bilibiliIds: - aid: 759406136 - bvid: BV1b64y16746 - cid: 377332189 -dashedName: using-web-services ---- - -# --question-- - -## --text-- - -Які два найпоширеніші способи надсилання даних через інтернет? - -## --answers-- - -JSON і TXT - ---- - -JSON і XML - ---- - -XML і TXT - ---- - -XML і PHP - ---- - -PHP і TXT - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md deleted file mode 100644 index 1871b880859..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f050b6c005b0e76f056 -title: 'Змінні, вирази та інструкції' -challengeType: 11 -videoId: nELR-uyyrok -bilibiliIds: - aid: 419396811 - bvid: BV1iV411p7Mn - cid: 376318116 -dashedName: variables-expressions-and-statements ---- - -# --question-- - -## --text-- - -Який символ використовується в інструкції присвоювання? - -## --answers-- - -~ - ---- - -& - ---- - -= - ---- - -\| - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md deleted file mode 100644 index 4f6b668046d..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 5e7b9f690b6c005b0e76f095 -title: Візуалізація даних за допомогою Python -challengeType: 11 -videoId: e3lydkH0prw -bilibiliIds: - aid: 291996462 - bvid: BV15f4y1L7jH - cid: 377544192 -dashedName: visualizing-data-with-python ---- - -# --question-- - -## --text-- - -Більшість даних повинні бути \_\_\_\_\__ перед використанням. - -## --answers-- - -конвертовані в формат JSON - ---- - -зображені - ---- - -очищені - ---- - -запам’ятовані - ---- - -перетворені в пісню - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md deleted file mode 100644 index c18e74b1e65..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f080 -title: 'Вебсервіси: обмеження частоти API і безпека' -challengeType: 11 -videoId: pI-g0lI8ngs -bilibiliIds: - aid: 249456172 - bvid: BV1Sv411E7qa - cid: 377336269 -dashedName: web-services-api-rate-limiting-and-security ---- - -# --description-- - -Додаткові ресурси: - -\- Вправа: GeoJSON - -\- Вправа: JSON - -\- Вправа: Twitter - -\- Вправа: XML - -# --question-- - -## --text-- - -Яку інформацію необхідно завжди надсилати з запитом при створенні запиту з твіттерського API? - -## --answers-- - -ім’я користувача - ---- - -датовані межі - ---- - -пошуковий термін - ---- - -ключ - -## --video-solution-- - -4 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md deleted file mode 100644 index 9b0bfa7f1e8..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f150b6c005b0e76f07f -title: 'Вебсервіси: API' -challengeType: 11 -videoId: oUNn1psfBJg -bilibiliIds: - aid: 589451017 - bvid: BV1zq4y1X7A9 - cid: 377336011 -dashedName: web-services-apis ---- - -# --question-- - -## --text-- - -Що означає API? - -## --answers-- - -Application Portable Intelligence - ---- - -Associate Programming International - ---- - -Application Program Interface - ---- - -Action Portable Interface - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-json.md deleted file mode 100644 index 6fc466ffd9b..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-json.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07d -title: 'Вебсервіси: JSON' -challengeType: 11 -videoId: ZJE-U56BppM -bilibiliIds: - aid: 419491911 - bvid: BV1r3411672w - cid: 377332928 -dashedName: web-services-json ---- - -# --question-- - -## --text-- - -Що надрукує наведений код?: - -```python -import json -data = ''' - [ - { "id" : "001", - "x" : "2", - "name" : "Quincy" - } , - { "id" : "009", - "x" : "7", - "name" : "Mrugesh" - } - ] -''' -info = json.loads(data) -print(info[1]['name']) -``` - -## --answers-- - -Quincy - ---- - -Mrugesh - ---- - -001 - ---- - -009 - ---- - -[Error] - -## --video-solution-- - -2 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md deleted file mode 100644 index 6aa5c2aa577..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f140b6c005b0e76f07e -title: 'Вебсервіси: сервісно-орієнтовний підхід' -challengeType: 11 -videoId: muerlsCHExI -bilibiliIds: - aid: 846899335 - bvid: BV1E54y1J7oz - cid: 377333277 -dashedName: web-services-service-oriented-approach ---- - -# --question-- - -## --text-- - -Де розташовані дані згідно з сервісно-орієнтованим підходом до розробки вебзастосунків? - -## --answers-- - -Розповсюджені між багатьма комп’ютерними системами, які поєднані між собою через інтернет або внутрішню мережу. - ---- - -В межах різних служб на головному вебсервері. - ---- - -На окремому сервері бази даних. - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md deleted file mode 100644 index 7c73b4bbd90..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07c -title: 'Вебсервіси: схема XML' -challengeType: 11 -videoId: yWU9kTxW-nc -bilibiliIds: - aid: 631951466 - bvid: BV1Vb4y1r7m7 - cid: 377332603 -dashedName: web-services-xml-schema ---- - -# --question-- - -## --text-- - -Що таке XSD? - -## --answers-- - -Специфікація схеми W3C для XML. - ---- - -Стандартна JSON схема з MOZ. - ---- - -Розширюваний симуляційний драйвер - -## --video-solution-- - -1 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md deleted file mode 100644 index 44b5b844962..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5e7b9f0e0b6c005b0e76f07b -title: 'Вебсервіси: XML' -challengeType: 11 -videoId: _pZ0srbg7So -bilibiliIds: - aid: 761920032 - bvid: BV1n64y1x7KW - cid: 377332379 -dashedName: web-services-xml ---- - -# --question-- - -## --text-- - -Що не так з наданим XML?: - -```xml - - Chuck - - +1 734 303 4456 - - -``` - -## --answers-- - -В email немає кінцевого тегу. - ---- - -Пробіли призведуть до недійсності XML. - ---- - -У phone немає кінцевого тегу. - ---- - -Простий текст повинен бути закодований за допомогою UTF-8. - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md deleted file mode 100644 index e4e1291903e..00000000000 --- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 5e7b9f090b6c005b0e76f065 -title: Робота зі списками -challengeType: 11 -videoId: lCnHfTHkhbE -bilibiliIds: - aid: 376965958 - bvid: BV1No4y1S7oi - cid: 376387989 -dashedName: working-with-lists ---- - -# --question-- - -## --text-- - -Який метод використовується, щоб додати елемент в кінець списку? - -## --answers-- - -insert - ---- - -push - ---- - -append - ---- - -new - -## --video-solution-- - -3 - diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md deleted file mode 100644 index 90c2b495042..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f33310c1851c6c4da013250 -title: Крок 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Час додати трішки вмісту меню. Додайте елемент `main` під наявним елементом `header`. В кінцевому підсумку там буде ціна напоїв та десертів, які пропонує кафе. - -# --hints-- - -Ваш код повинен мати початковий теґ `
                                                                                                  `. - -```js -assert(code.match(/
                                                                                                  /i)); -``` - -Ваш код повинен мати кінцевий теґ `
                                                                                                  `. - -```js -assert(code.match(/<\/main>/i)); -``` - -Ви не повинні змінювати наявний елемент `header`. Переконайтеся, що випадково не видалили кінцевий теґ. - -```js -assert($('header').length === 1); -``` - -Ваш теґ `main` повинен йти після теґа `header`. - -```js -const main = document.querySelectorAll('main')[0]; -assert(main.previousElementSibling.tagName === 'HEADER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Cafe Menu - - ---fcc-editable-region-- -
                                                                                                  -

                                                                                                  CAMPER CAFE

                                                                                                  -

                                                                                                  Est. 2020

                                                                                                  -
                                                                                                  ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md deleted file mode 100644 index 8f2313a0159..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 615389bd81347947ea7ba896 -title: Крок 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Flexbox – це одновимірний макет CSS, який може керувати тим, як елементи розміщуються та вирівнюються всередині контейнера. - -Щоб використати його, надайте елементу властивість `display` зі значенням `flex`. Це зробить елемент гнучким контейнером. Будь-які прямі дочірні елементи гнучкого контейнера називаються гнучкими елементами. - -Створіть селектор `.gallery` та зробіть його гнучким контейнером. - -# --hints-- - -Ви повинні мати селектор `.gallery`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')); -``` - -Ваш селектор `.gallery` повинен мати властивість `display` зі значенням `flex`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Photo Gallery - - - -
                                                                                                  -

                                                                                                  css flexbox photo gallery

                                                                                                  -
                                                                                                  -
                                                                                                  - - - - - - - - - -
                                                                                                  - - -``` - -```css -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: sans-serif; - background: #f5f6f7; -} - -.header { - text-align: center; - text-transform: uppercase; - padding: 32px; - background-color: #0a0a23; - color: #fff; - border-bottom: 4px solid #fdb347; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.gallery img { - width: 100%; - max-width: 350px; - height: 300px; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md deleted file mode 100644 index 99b073086fa..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: Крок 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -Почніть з налаштування структури HTML. Додайте декларацію `` та елемент `html` з атрибутом `lang` зі значенням `en`. Всередині елемента `html` додайте елементи `head` та `body`. - -# --hints-- - -Ваш код повинен містити посилання `DOCTYPE`. - -```js -assert(code.match(/` після типу. - -```js -assert(code.match(/html\s*>/gi)); -``` - -Ваша декларація `DOCTYPE` повинна бути на початку HTML. - -```js -assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); -``` - -Ваш елемент `html` повинен мати початковий теґ з атрибутом `lang` зі значенням `en`. - -```js -assert(code.match(//gi)); -``` - -Ваш елемент `html` повинен мати кінцевий теґ. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Ви повинні мати початковий теґ `head`. - -```js -assert(code.match(//i)); -``` - -Ви повинні мати кінцевий теґ `head`. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -Ви повинні мати початковий теґ `body`. - -```js -assert(code.match(//i)); -``` - -Ви повинні мати кінцевий теґ `body`. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -Елементи `head` та `body` повинні бути братськими. - -```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); -``` - -Елемент `head` повинен бути в межах елемента `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); -``` - -Елемент `body` повинен бути в межах елемента `html`. - -```js -assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md deleted file mode 100644 index d8a2a9ba870..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: Крок 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -В свій елемент `head` додайте теґ `meta` з атрибутом `charset` зі значенням `utf-8`. Також додайте елемент `title` з текстом `Picasso Painting`. - -# --hints-- - -Ви повинні додати рівно один елемент `meta`. - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -Елемент `meta` повинен мати атрибут `charset`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -Ваш атрибут `charset` повинен мати значення `utf-8`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8'); -``` - -Ви повинні додати рівно один елемент `title`. - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -Ваш елемент `title` повинен мати текст `Picasso Painting`. Зауважте, що написання та вживання великої літери мають значення. - -```js -assert(document.querySelector('title')?.innerText === 'Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md deleted file mode 100644 index a354bf415fc..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: Крок 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -FontAwesome – це бібліотека іконок на основі SVG, багато з яких у вільному доступі для користування. Ви використовуватимете деякі зі цих іконок в проєкті, тому вам потрібно буде зв’язати зовнішню таблицю стилів зі своїм HTML. - -Додайте елемент `link`, що має `rel` зі значенням `stylesheet` та `href` зі значенням `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -# --hints-- - -Ви повинні мати два елементи `link`. - -```js -assert(document.querySelectorAll('link').length === 2); -``` - -Ваш елемент `link` повинен мати `rel` зі значенням `stylesheet`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet'); -``` - -Ваш елемент `link` повинен мати `href` зі значенням `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md deleted file mode 100644 index 0a4874bb6bb..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: Крок 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Щоб розпочати малювати, надайте своєму елементу `body` властивість `background-color` зі значенням `rgb(184, 132, 46)`. - -# --hints-- - -Ви повинні використати селектор `body`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -Ваш елемент `body` повинен мати властивість `background-color` зі значенням `rgb (184, 132, 46)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md deleted file mode 100644 index c76a6d9aa8e..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: Крок 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -В межах теґа body додайте елемент `div`. Надайте йому `id` зі значенням `back-wall`. - -# --hints-- - -Ви повинні додати рівно 1 елемент `div`. - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -Ваш елемент `div` повинен мати `id` зі значенням `back-wall`. - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md deleted file mode 100644 index c0850b8541d..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: Крок 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Використайте селектор id, щоб надати елементу з id `back-wall` властивість `background-color` зі значенням `#8B4513`. - -# --hints-- - -Ви повинні використати селектор `#back-wall`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -Ваш селектор `#back-wall` повинен мати `background-color` зі значенням `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md deleted file mode 100644 index fb9406283e6..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: Крок 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Надайте елементу `#back-wall` властивість `width` зі значенням `100%` та `height` зі значенням `60%`. - -# --hints-- - -Ви повинні встановити `width` селектора `#back-wall` на `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -Ви повинні встановити `height` селектора `#back-wall` на `60%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md deleted file mode 100644 index 934a5e9a902..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: Крок 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Як правило, HTML відображається зверху вниз. Елементи у верхній частині коду розташовані у верхній частині сторінки. Однак часто потрібно перемістити елементи в інші позиції. Ви можете зробити це завдяки властивості `position`. - -Встановіть властивість `position` елемента `#back-wall` на `absolute`. Позиція `absolute` вилучає елемент з низхідного документообігу та дозволяє налаштувати його відносно свого контейнера. - -Коли елемент розташовується вручну, ви можете зміщувати його макет з допомогою `top`, `left`, `right` та `bottom`. Встановіть значення властивостей елемента `#back-wall`: `top` на `0` та `left` на `0`. - - -# --hints-- - -Ваш селектор `#back-wall` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -Ваш селектор `#back-wall` повинен мати властивість `top` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -Ваш селектор `#back-wall` повинен мати властивість `left` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md deleted file mode 100644 index cfb2ee50495..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: Крок 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Властивість `z-index` використовують, щоб створити «шари» для елементів HTML. Якщо ви знайомі з інструментами редагування зображень, ви, можливо, раніше працювали з шарами. Це схоже поняття. - -Елементи з вищим значенням `z-index` виглядатимуть накладеними на елементи з нижчим значенням `z-index`. Це можна поєднати з позиціюванням в попередньому уроці для створення унікальних ефектів. - -Оскільки елемент `back-wall` повинен з’явитися «за» іншими елементами, які ви створюватимете, надайте елементу `back-wall` властивість `z-index` зі значенням `-1`. - -# --hints-- - -Ваш селектор `#back-wall` повинен мати властивість `z-index` зі значенням `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md deleted file mode 100644 index 4c8f22ee268..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: Крок 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Під елементом `#back-wall` створіть `div`, що має `class` зі значенням `characters`. Тут ви будете створювати фігури своєї картини. - -# --hints-- - -Ви повинні додати лише один новий елемент `div`. - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -Ваш новий елемент `div` повинен йти після елемента `#back-wall`. - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -Ваш новий елемент `div` повинен мати `class` зі значенням `characters`. - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md deleted file mode 100644 index a4e2d4e7dc3..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: Крок 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Всередині цього елемента `.characters` створіть інший `div`, що має `id` зі значенням `offwhite-character`. - -# --hints-- - -Ви повинні створити лише 1 додатковий елемент `div`. - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -Ваш новий елемент `div` повинен бути вкладеним в межах елемента `.characters`. - -```js -assert(document.querySelector('.characters div')); -``` - -Ваш новий елемент `div` повинен мати `id` зі значенням `offwhite-character`. - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md deleted file mode 100644 index 5db2e60876b..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: Крок 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Створіть чотири елементи `div` в своєму елементі `offwhite-character`. Надайте цим елементам `div` такі значення `id`, за порядком: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. - -# --hints-- - -Ви повинні додати чотири елементи `div` всередину свого елемента `.offwhite-character`. - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -Ваш перший новий елемент `div` повинен мати `id` зі значенням `white-hat`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -Ваш другий новий елемент `div` повинен мати `id` зі значенням `black-mask`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -Ваш третій новий елемент `div` повинен мати `id` зі значенням `gray-instrument`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -Ваш четвертий новий елемент `div` повинен мати `id` зі значенням `tan-table`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md deleted file mode 100644 index e91eb942c20..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: Крок 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Цій фігурі потрібні очі. Створіть два елементи `div` в елементі `#black-mask`. Надайте їм класи `eyes left` та `eyes right`, за таким порядком. - -# --hints-- - -Ви повинні створити два елементи `div` в елементі `#black-mask`. - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -Ваш перший новий `div` повинен мати класи `eyes` та `left`. - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -Ваш другий новий `div` повинен мати класи `eyes` та `right`. - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md deleted file mode 100644 index 23f7fe6c7f8..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: Крок 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Створіть декілька «точок» для інструменту. Додайте п’ять елементів `div` всередину свого елемента `#gray-instrument`. Встановіть `class` кожного на `black-dot`. - -# --hints-- - -Ви повинні мати п'ять нових елементів `div` в межах елемента `#gray-instrument`. - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -Всі п’ять елементів `div` повинні мати клас `black-dot`. - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md deleted file mode 100644 index 35ba8708bdc..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: Крок 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Використовуючи селектор id, створіть правило для елемента з id `offwhite-character`. Надайте йому `width` зі значенням `300px`, `height` зі значенням `550px` та `background-color` зі значенням `GhostWhite`. - -# --hints-- - -Ви повинні використати селектор `#offwhite-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -Ваш `#offwhite-character` повинен мати властивість `width` зі значенням `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -Ваш `#offwhite-character` повинен мати властивість `height` зі значенням `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -Ваш `#offwhite-character` повинен мати властивість `background-color` зі значенням `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md deleted file mode 100644 index 5d5ac127907..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: Крок 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Перемістіть `#offwhite-character` на місце, надавши йому `position` зі значенням `absolute`, `top` зі значенням `20%` та `left` зі значенням `17.5%`. - -# --hints-- - -Ваш селектор `#offwhite-character` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -Ваш селектор `#offwhite-character` повинен мати властивість `top` зі значенням `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -Ваш селектор `#offwhite-character` повинен мати властивість `left` зі значенням `17.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md deleted file mode 100644 index cbba521b2c7..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: Крок 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -Стилізуйте елемент з id `white-hat` за допомогою селектора id. Надайте йому `width` та `height` зі значенням `0`, а `border-style` зі значенням `solid`. - -# --hints-- - -Ви повинні використати селектор `#white-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -Ваш селектор `#white-hat` повинен мати властивість `width` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -Ваш селектор `#white-hat` повинен мати властивість `height` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -Ваш селектор `#white-hat` повинен мати властивість `border-style` зі значенням `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md deleted file mode 100644 index ab3c0793297..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: Крок 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Виглядає не зовсім правильно. Встановіть `border-width` зі значенням `0 120px 140px 180px`, щоб виміряти капелюх правильно. - -# --hints-- - -Ваш селектор `#white-hat` повинен мати властивість `border-width` зі значенням `0 120px 140px 180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md deleted file mode 100644 index 65af99df5da..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: Крок 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Тепер у вас є велика коробка. Надайте їй `border-top-color`, `border-right-color` та `border-left-color` зі значенням `transparent`. Встановіть `border-bottom-color` на `GhostWhite`. Це зробить її більш схожою на капелюх. - -# --hints-- - -Ваш селектор `#white-hat` повинен мати властивість `border-top-color` зі значенням `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -Ваш селектор `#white-hat` повинен мати властивість `border-right-color` зі значенням `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -Ваш селектор `#white-hat` повинен мати властивість `border-left-color` зі значенням `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -Ваш селектор `#white-hat` повинен мати властивість `border-bottom-color` зі значенням `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md deleted file mode 100644 index 8eb8f48ec3f..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: Крок 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Надайте капелюху `position` зі значенням `absolute`, `top` зі значенням `-140px` та `left` зі значенням `0`. - -# --hints-- - -Ваш селектор `#white-hat` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -Ваш селектор `#white-hat` повинен мати властивість `top` зі значенням `-140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -Ваш селектор `#white-hat` повинен мати властивість `left` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md deleted file mode 100644 index 80577ce1363..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: Крок 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Використовуючи селектор id, створіть правило для елемента з id `black-mask`. Надайте йому `width` зі значенням `100%`, `height` зі значенням `50px` та `background-color` зі значенням `rgb(45, 31, 19)`. - -# --hints-- - -Ви повинні мати селектор `#black-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -Ваш селектор `#black-mask` повинен мати властивість `width` зі значенням `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -Ваш селектор `#black-mask` повинен мати властивість `height` зі значенням `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -Ваш селектор `#black-mask` повинен мати властивість `background-color` зі значенням `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md deleted file mode 100644 index 2f2d0ab77d4..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: Крок 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Надайте масці `position` зі значенням `absolute`, а `top` та `left` зі значенням `0`. - -# --hints-- - -Ваш селектор `#black-mask` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -Ваш селектор `#black-mask` повинен мати властивість `top` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -Ваш селектор `#black-mask` повинен мати властивість `left` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md deleted file mode 100644 index 36dd12038ff..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: Крок 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Щоб переконатися, що ви бачите маску, надайте їй `z-index` зі значенням `1`. - -# --hints-- - -Ваш селектор `#black-mask` повинен мати властивість `z-index` зі значенням `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md deleted file mode 100644 index fd82fe9e135..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: Крок 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Використовуючи селектор id, надайте елементу з id `gray-instrument` властивості `width` зі значенням `15%`, `height` зі значенням `40%` та `background-color` зі значенням `rgb(167, 162, 117)`. - -# --hints-- - -Ви повинні мати селектор `#gray-instrument`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -Ваш селектор `#gray-instrument` повинен мати властивість `width` зі значенням `15%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -Ваш селектор `#gray-instrument` повинен мати властивість `height` зі значенням `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -Ваш селектор `#gray-instrument` повинен мати властивість `background-color` зі значенням `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md deleted file mode 100644 index 2af8ff866d4..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: Крок 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Тепер перемістіть його на місце завдяки `position` зі значенням `absolute`, `top` зі значенням `50px` та `left` зі значенням `125px`. - -# --hints-- - -Ваш селектор `#gray-instrument` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -Ваш селектор `#gray-instrument` повинен мати властивість `top` зі значенням `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -Ваш селектор `#gray-instrument` повинен мати властивість `left` зі значенням `125px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md deleted file mode 100644 index 5cfeece7686..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: Крок 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Встановіть `z-index` на `1`. - -# --hints-- - -Ваш селектор `#gray-instrument` повинен мати властивість `z-index` зі значенням `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md deleted file mode 100644 index 83b7ba91393..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: Крок 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Використайте селектор класу, щоб створити правило для елементів з класом `black-dot`. Встановіть `width` на `10px`, `height` на `10px` та `background-color` на `rgb(45, 31, 19)`. - -# --hints-- - -Ви повинні мати селектор `.black-dot`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -Ваш селектор `.black-dot` повинен мати властивість `width` зі значенням `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -Ваш селектор `.black-dot` повинен мати властивість `height` зі значенням `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -Ваш селектор `.black-dot` повинен мати властивість `background-color` зі значенням `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md deleted file mode 100644 index 1b63d5c1123..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: Крок 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Ці точки занадто квадратні. Надайте класу `black-dot` властивість `border-radius` зі значенням `50%`, щоб виправити це. - -# --hints-- - -Ваш селектор `.black-dot` повинен мати властивість `border-radius` зі значенням `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%'); -assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md deleted file mode 100644 index 4f43cc27303..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: Крок 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Розмістіть точки на місце, встановивши `display` на `block`, `margin` на `auto` та `margin-top` на `65%`. - -# --hints-- - -Ваш селектор `.black-dot` повинен мати властивість `display` зі значенням `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -Ваш селектор `.black-dot` повинен мати властивість `margin` зі значенням `auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -Ваш селектор `.black-dot` повинен мати властивість `margin-top` зі значенням `65%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md deleted file mode 100644 index b34f88d8cfd..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: Крок 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -Використайте селектор id, щоб стилізувати елемент з id `tan-table`. Надайте йому `width` зі значенням `450px`, `height` зі значенням `140px` та `background-color` зі значенням `#D2691E`. - -# --hints-- - -Ви повинні мати селектор `#tan-table`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -Ваш селектор `#tan-table` повинен мати властивість `width` зі значенням `450px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -Ваш селектор `#tan-table` повинен мати властивість `height` зі значенням `140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -Ваш селектор `#tan-table` повинен мати властивість `background-color` зі значенням `#D2691E`. - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md deleted file mode 100644 index b0770a5648e..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: Крок 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Перемістіть стіл на місце, надавши йому `position` зі значенням `absolute`, `top` зі значенням `275px` та `left` зі значенням `15px`. - -# --hints-- - -Ваш селектор `#tan-table` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -Ваш селектор `#tan-table` повинен мати властивість `top` зі значенням `275px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -Ваш селектор `#tan-table` повинен мати властивість `left` зі значенням `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md deleted file mode 100644 index 3f7e1da672f..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: Крок 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Надайте столу `z-index` зі значенням `1`. - -# --hints-- - -Ваш селектор `#tan-table` повинен мати властивість `z-index` зі значенням `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md deleted file mode 100644 index c1f63c554d4..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: Крок 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Після елемента `div#offwhite-character` додайте `div`, що має `id` зі значенням `black-character`. - -# --hints-- - -Ви повинні додати новий елемент `div` в елемент `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -Ваш новий елемент `div` повинен мати `id` зі значенням `black-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md deleted file mode 100644 index dac11ba0f45..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: Крок 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -В новий елемент `#black-character` додайте три елементи `div` з такими значеннями `id`, за порядком: `black-hat`, `gray-mask`, `white-paper`. - -# --hints-- - -Ви повинні мати три нових елементи `div` в межах елемента `#black-character`. - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -Ваш перший новий елемент `div` повинен мати `id` зі значенням `black-hat`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -Ваш другий новий елемент `div` повинен мати `id` зі значенням `gray-mask`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -Ваш третій новий елемент `div` повинен мати `id` зі значенням `white-paper`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md deleted file mode 100644 index 34aa6c122a4..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: Крок 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Масці потрібні очі. В межі свого елемента `#gray-mask` додайте два елементи `div`. Перший повинен мати `class` зі значенням `eyes left`, а другий повинен мати `class` зі значенням `eyes right`. - -# --hints-- - -Ви повинні мати два елементи `div` в межах елемента `#gray-mask`. - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -Ваш перший новий елемент `div` повинен мати `class` зі значенням `eyes left`. - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -Ваш другий новий елемент `div` повинен мати `class` зі значенням `eyes right`. - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md deleted file mode 100644 index d8a4bdefd67..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: Крок 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Час використати іконки FontAwesome. - -Елемент `i` використовують для ідіоматичного тексту або тексту, який відокремлений від «нормального» текстового вмісту. Це може бути _курсивний_ текст, як-от наукові терміни, або іконки, подібні до тих, що надає FontAwesome. - -В елемент `#white-paper` додайте чотири елементи `i`. Надайте їм `class` зі значенням `fas fa-music`. - -Завдяки цьому спеціальному класу FontAwesome визначає, яку іконку завантажувати. `fas` вказує категорію іконки (тут FontAwesome Solid), а `fa-music` вибирає конкретну іконку. - -# --hints-- - -Ви повинні мати чотири нових елементи `i` в межах елемента `#white-paper`. - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -Всі ваші елементи `i` повинні мати `class` зі значенням `fas fa-music`. - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md deleted file mode 100644 index d9eb74e20fd..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: Крок 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Використайте селектор id, щоб створити правило для елемента з id `black-character`. Встановіть `width` на `300px`, `height` на `500px` та `background-color` на `rgb(45, 31, 19)`. - -# --hints-- - -Ви повинні використати селектор `#black-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -Ваш селектор `#black-character` повинен мати властивість `width` зі значенням `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -Ваш селектор `#black-character` повинен мати властивість `height` зі значенням `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -Ваш селектор `#black-character` повинен мати властивість `background-color` зі значенням `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md deleted file mode 100644 index 043ae621ab1..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: Крок 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Перемістіть елемент `#black-character` на місце, встановивши `position` на `absolute`, `top` на `30%` та `left` на `59%`. - -# --hints-- - -Ваш селектор `#black-character` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -Ваш селектор `#black-character` повинен мати властивість `top` зі значенням `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -Ваш селектор `#black-character` повинен мати властивість `left` зі значенням `59%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md deleted file mode 100644 index 17598134cb0..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: Крок 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Використайте селектор id, щоб створити правило для елемента з id `black-hat`. Надайте йому `width` зі значенням `0`, `height` зі значенням `0` та `border-style` зі значенням `solid`. - -# --hints-- - -Ви повинні мати селектор `#black-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -Ваш селектор `#black-hat` повинен мати властивість `width` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -Ваш селектор `#black-hat` повинен мати властивість `height` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -Ваш селектор `#black-hat` повинен мати властивість `border-style` зі значенням `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md deleted file mode 100644 index a8e48826892..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: Крок 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Подібно до свого `#white-hat`, ви повинні стилізувати кордон елемента `#black-hat`. Надайте йому `border-top-color`, `border-right-color` та `border-bottom-color` зі значенням `transparent`. Встановіть `border-left-color` на `rgb(45, 31, 19)`. - -# --hints-- - -Ваш селектор `#black-hat` повинен мати властивість `border-top-color` зі значенням `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -Ваш селектор `#black-hat` повинен мати властивість `border-right-color` зі значенням `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -Ваш селектор `#black-hat` повинен мати властивість `border-bottom-color` зі значенням `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -Ваш селектор `#black-hat` повинен мати властивість `border-left-color` зі значенням `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md deleted file mode 100644 index 8eff859ec35..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: Крок 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Тепер розмістіть елемент `#black-hat`. Надайте йому `position` зі значенням `absolute`, `top` зі значенням `-150px` та `left` зі значенням `0`. - -# --hints-- - -Ваш селектор `#black-hat` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -Ваш селектор `#black-hat` повинен мати властивість `top` зі значенням `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -Ваш селектор `#black-hat` повинен мати властивість `left` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md deleted file mode 100644 index 44f20865b78..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: Крок 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Використовуючи селектор id, стилізуйте елемент з id `gray-mask`. Надайте йому `width` зі значенням `150px`, `height` зі значенням `150px` та `background-color` зі значенням `rgb(167, 162, 117)`. - -# --hints-- - -Ви повинні мати селектор `#gray-mask`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -Ваш селектор `#gray-mask` повинен мати властивість `width` зі значенням `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -Ваш селектор `#gray-mask` повинен мати властивість `height` зі значенням `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -Ваш селектор `#gray-mask` повинен мати властивість `background-color` зі значенням `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md deleted file mode 100644 index 7ff60684b1d..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: Крок 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Розташуйте елемент `#gray-mask`, встановивши `position` на `absolute`, `top` на `-10px` та `left` на `70px`. - -# --hints-- - -Ваш селектор `#gray-mask` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -Ваш селектор `#gray-mask` повинен мати властивість `top` зі значенням `-10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -Ваш селектор `#gray-mask` повинен мати властивість `left` зі значенням `70px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md deleted file mode 100644 index 6b528ceaa6b..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: Крок 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Використовуючи селектор id, створіть правило для id `white-paper`. Встановіть `width` на `400px`, `height` на `100px` та `background-color` на `GhostWhite`. - -# --hints-- - -Ви повинні мати селектор `#white-paper`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -Ваш селектор `#white-paper` повинен мати властивість `width` зі значенням `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -Ваш селектор `#white-paper` повинен мати властивість `height` зі значенням `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -Ваш селектор `#white-paper` повинен мати властивість `background-color` зі значенням `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md deleted file mode 100644 index e0380222137..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: Крок 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Надайте `#white-paper` властивості `position` зі значенням `absolute`, `top` зі значенням `250px` та `left` зі значенням `-150px`, щоб перемістити його на місце. - -# --hints-- - -Ваш селектор `#white-paper` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -Ваш селектор `#white-paper` повинен мати властивість `top` зі значенням `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -Ваш селектор `#white-paper` повинен мати властивість `left` зі значенням `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md deleted file mode 100644 index 29bfee20c43..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: Крок 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Встановіть `z-index` елемента `#white-paper` на `1`. - -# --hints-- - -Ваш селектор `#white-paper` повинен мати властивість `z-index` зі значенням `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md deleted file mode 100644 index a5b1ee2c22b..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: Крок 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Іконки FontAwesome мають власні стилі, щоб визначити іконку. Однак ви також можете самостійно налаштувати стилі, щоб змінити такі властивості, як-от колір та розмір. Наразі використайте селектор класу, щоб націлити іконки з класом `fa-music`. Встановіть `display` на `inline-block`, `margin-top` на `8%` та `margin-left` на `13%`. - -# --hints-- - -Ви повинні мати селектор `.fa-music`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -Ваш селектор `.fa-music` повинен мати властивість `display` зі значенням `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -Ваш селектор `.fa-music` повинен мати властивість `margin-top` зі значенням `8%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -Ваш селектор `.fa-music` повинен мати властивість `margin-left` зі значенням `13%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md deleted file mode 100644 index dd450fbfd76..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: Крок 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Під елементом `#black-character` додайте два нових елементи `div`. Це буде шаль. Надайте їм обом `class` зі значенням `blue`. Потім надайте першому `id` зі значенням `blue-left`, а другому `id` зі значенням `blue-right`. - -# --hints-- - -Ви повинні мати два нових елементи `div` в межах елемента `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -Ваші два нових елементи `div` повинні мати `class` зі значенням `blue`. - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -Ваш перший новий `div` повинен мати `id` зі значенням `blue-left`. - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -Ваш другий новий `div` повинен мати `id` зі значенням `blue-right`. - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md deleted file mode 100644 index f01351c1ffb..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: Крок 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Використайте селектор класу, щоб націлити нові елементи з класом `blue`. Встановіть `background-color` на `#1E90FF`. - -# --hints-- - -Ви повинні мати селектор `.blue`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -Ваш селектор `.blue` повинен мати властивість `background-color` зі значенням `#1E90FF`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md deleted file mode 100644 index ae80c8447b6..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: Крок 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Виберіть елемент з id `blue-left`, використовуючи селектор id. Надайте йому `width` зі значенням `500px` та `height` зі значенням `300px`. - -# --hints-- - -Ви повинні мати селектор `#blue-left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -Ваш селектор `#blue-left` повинен мати властивість `width` зі значенням `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -Ваш селектор `#blue-left` повинен мати властивість `height` зі значенням `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md deleted file mode 100644 index ed94a9ae241..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: Крок 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Тепер встановіть `position` на `absolute`, `top` на `20%` та `left` на `20%`. - -# --hints-- - -Ваш селектор `#blue-left` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -Ваш селектор `#blue-left` повинен мати властивість `top` зі значенням `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -Ваш селектор `#blue-left` повинен мати властивість `left` зі значенням `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md deleted file mode 100644 index 27b2ff4297c..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: Крок 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Потім націльте елемент з id `blue-right`, використовуючи селектор id. Встановіть `width` на `400px` та `height` на `300px`. - -# --hints-- - -Ви повинні мати селектор `#blue-right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -Ваш селектор `#blue-right` повинен мати властивість `width` зі значенням `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -Ваш селектор `#blue-right` повинен мати властивість `height` зі значенням `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md deleted file mode 100644 index dfb4fe9ece2..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: Крок 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Надайте елементу `#blue-right` правильне розташування завдяки `position` зі значенням `absolute`, `top` зі значенням `50%` та `left` зі значенням `40%`. - -# --hints-- - -Ваш селектор `#blue-right` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -Ваш селектор `#blue-right` повинен мати властивість `top` зі значенням `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -Ваш селектор `#blue-right` повинен мати властивість `left` зі значенням `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md deleted file mode 100644 index f79a61df840..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: Крок 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Під елементами `.blue` додайте ще один `div`. Надайте йому `id` зі значенням `orange-character`. - -# --hints-- - -Ви повинні мати новий елемент `div` в межах елемента `.characters`. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -Ваш новий елемент `div` повинен мати `id` зі значенням `orange-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md deleted file mode 100644 index e4892f51c2c..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: Крок 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -В цей елемент `#orange-character` додайте чотири елементи `div`. Надайте їм `id` значення, за порядком: `black-round-hat`, `eyes-div`, `triangles` та `guitar`. - -# --hints-- - -Ви повинні мати чотири нових елементи `div` в межах елемента `#orange-character`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -Ваш перший новий елемент `div` повинен мати `id` зі значенням `black-round-hat`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -Ваш другий новий елемент `div` повинен мати `id` зі значенням `eyes-div`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -Ваш третій новий елемент `div` повинен мати `id` зі значенням `triangles`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -Ваш четвертий новий елемент `div` повинен мати `id` зі значенням `guitar`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md deleted file mode 100644 index 70544e22548..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md +++ /dev/null @@ -1,240 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: Крок 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Елемент `#eyes-div` повинен містити декілька очей. Додайте всередину два елементи `div`. Надайте першому `class` зі значенням `eyes left`, а другому `class` зі значенням `eyes right`. - -# --hints-- - -Ви повинні мати два елементи `div` в межах елемента `#eyes-div`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -Перший новий `div` повинен мати `class` зі значенням `eyes left`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -Другий новий `div` повинен мати `class` зі значенням `eyes right`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md deleted file mode 100644 index 679c07086c5..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: Крок 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -В div `#triangles` вам потрібно буде додати елементи, які стануть трикутниками. Створіть тридцять елементів `div` та надайте кожному з них клас `triangle`. - -# --hints-- - -Ви повинні мати 30 елементів `div` в межах елемента `#triangles`. - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -Всі 30 нових елементів `div` повинні мати `class` зі значенням `triangle`. - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md deleted file mode 100644 index b5fe88a5741..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: Крок 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Всередині елемента `#guitar` створіть три елементи `div`. Першим двом надайте `class` значення `guitar`. Потім надайте першому `id` зі значенням `guitar-left`, а другому `id` зі значенням `guitar-right`. Додайте `id` до третього `div` зі значенням `guitar-neck`. - -Третій `div` не повинен мати клас `guitar`. - -# --hints-- - -Ви повинні мати три нових елементи `div` в межах елемента `#guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -Ваш перший новий `div` повинен мати `class` зі значенням `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -Ваш перший новий `div` повинен мати `id` зі значенням `guitar-left`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -Ваш другий новий `div` повинен мати `class` зі значенням `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -Ваш другий новий `div` повинен мати `id` зі значенням `guitar-right`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -Ваш третій новий `div` повинен мати `id` зі значенням `guitar-neck`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -Третьому новому `div` не потрібно надавати `class` зі значенням `guitar`. - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- - - --fcc-editable-region-- -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md deleted file mode 100644 index 4ccb54b3b51..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: Крок 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Використайте іншу іконку FontAwesome для `.guitar`. Всередині обох елементів `#guitar-left` та `#guitar-right` додайте елемент `i` та надайте йому `class` зі значенням `fas fa-bars`. - -# --hints-- - -Ви повинні додати елемент `i` в елемент `#guitar-left`. - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -Ви повинні додати елемент `i` в елемент `#guitar-right`. - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -Ваші два нових елементи `i` повинні мати `class` зі значенням `fas fa-bars`. - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - --fcc-editable-region-- -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  - --fcc-editable-region-- -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md deleted file mode 100644 index 955486738b6..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: Крок 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Виберіть свій елемент `orange-character` з селектором id. Надайте йому `width` зі значенням `250px`, `height` зі значенням `550px` та `background-color` зі значенням `rgb(240, 78, 42)`. - -# --hints-- - -Ви повинні мати селектор `#orange-character`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -Ваш селектор `#orange-character` повинен мати властивість `width` зі значенням `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -Ваш селектор `#orange-character` повинен мати властивість `height` зі значенням `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -Ваш селектор `#orange-character` повинен мати властивість `background-color` зі значенням `rgb(240, 78, 42)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md deleted file mode 100644 index 2e73f711db0..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: Крок 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Надайте елементу `#orange-character` властивості `position` зі значенням `absolute`, `top` зі значенням `25%` та `left` зі значенням `40%`. - -# --hints-- - -Ваш селектор `#orange-character` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -Ваш селектор `#orange-character` повинен мати властивість `top` зі значенням `25%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -Ваш селектор `#orange-character` повинен мати властивість `left` зі значенням `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md deleted file mode 100644 index e4a9b9154d9..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: Крок 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Стилізуйте елемент з id `black-round-hat`, використовуючи селектор id. Встановіть `width` на `180px`, `height` на `150px` та `background-color` на `rgb(45, 31, 19)`. - -# --hints-- - -Ви повинні мати селектор `#black-round-hat`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -Ваш селектор `#black-round-hat` повинен мати властивість `width` зі значенням `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -Ваш селектор `#black-round-hat` повинен мати властивість `height` зі значенням `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -Ваш селектор `#black-round-hat` повинен мати властивість `background-color` зі значенням `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md deleted file mode 100644 index 2c63122931a..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: Крок 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Елемент `#black-round-hat` напевно має бути круглим. Надайте йому `border-radius` зі значенням `50%`, щоб виправити це. - -# --hints-- - -Ваш селектор `#black-round-hat` повинен мати властивість `border-radius` зі значенням `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md deleted file mode 100644 index 35efb836a70..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: Крок 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Перемістіть елемент `#black-round-hat` на місце завдяки `position` зі значенням `absolute`, `top` зі значенням `-100px` та `left` зі значенням `5px`. - -# --hints-- - -Ваш селектор `#black-round-hat` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -Ваш селектор `#black-round-hat` повинен мати властивість `top` зі значенням `-100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -Ваш селектор `#black-round-hat` повинен мати властивість `left` зі значенням `5px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md deleted file mode 100644 index 986a08c979c..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: Крок 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Покладіть елемент `#black-round-hat` на правильний шар з `z-index` зі значенням `-1`. - -# --hints-- - -Ваш селектор `#black-round-hat` повинен мати властивість `z-index` зі значенням `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md deleted file mode 100644 index 1bcd777c17d..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: Крок 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -Використайте селектор id, щоб створити правило для елемента з id `eyes-div`. Встановіть `width` на `180px` та `height` на `50px`. - -# --hints-- - -Ви повинні створити селектор `#eyes-div`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -Ваш селектор `#eyes-div` повинен мати властивість `width` зі значенням `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -Ваш селектор `#eyes-div` повинен мати властивість `height` зі значенням `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md deleted file mode 100644 index 86b9f433f2d..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: Крок 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Тепер перемістіть елемент `#eyes-div`, встановивши `position` на `absolute`, `top` на `-40px` та `left` на `20px`. - -# --hints-- - -Ваш селектор `#eyes-div` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -Ваш селектор `#eyes-div` повинен мати властивість `top` зі значенням `-40px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -Ваш селектор `#eyes-div` повинен мати властивість `left` зі значенням `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md deleted file mode 100644 index 738709ea3ad..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: Крок 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Надайте елементу `#eyes-div` властивість `z-index` зі значенням `3`. - -# --hints-- - -Ваш селектор `#eyes-div` повинен мати властивість `z-index` зі значенням `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md deleted file mode 100644 index 82091d62136..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: Крок 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -Тепер використайте селектор класу, щоб націлити `guitar`. Це стилізує дві «половинки» вашої гітари. Встановіть `width` на `150px`, `height` на `120px`, `background-color` на `Goldenrod` та `border-radius` на `50%`. - -# --hints-- - -Ви повинні створити селектор `.guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -Ваш селектор `.guitar` повинен мати властивість `width` зі значенням `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -Ваш селектор `.guitar` повинен мати властивість `height` зі значенням `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -Ваш селектор `.guitar` повинен мати властивість `background-color` зі значенням `Goldenrod`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -Ваш селектор `.guitar` повинен мати властивість `border-radius` зі значенням `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md deleted file mode 100644 index 7a666670cfc..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md +++ /dev/null @@ -1,337 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: Крок 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Оберіть `id` зі значенням `guitar-left`, встановіть `position` на `absolute` та `left` на `0px`. - -# --hints-- - -Ви повинні створити новий селектор `#guitar-left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -Ваш селектор `#guitar-left` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md deleted file mode 100644 index b41ee7e9df9..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: Крок 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Оберіть `id` зі значенням `guitar-right`, а також встановіть `position` на `absolute`. Цього разу встановіть `left` на `100px`. - -# --hints-- - -Ви повинні створити новий селектор `#guitar-right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -Ваш селектор `#guitar-right` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -Ваш селектор `#guitar-right` повинен мати властивість `left` зі значенням `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md deleted file mode 100644 index d94685862ff..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md +++ /dev/null @@ -1,359 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: Крок 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Тепер вам потрібно перемістити панельні іконки на місце. Створіть селектор класу для класу `fa-bars`. Встановіть `display` на `block`, `margin-top` на `30%` та `margin-left` на `40%`. - -# --hints-- - -Ви повинні створити селектор `.fa-bars`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -Ваш селектор `.fa-bars` повинен мати властивість `display` зі значенням `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -Ваш селектор `.fa-bars` повинен мати властивість `margin-top` зі значенням `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -Ваш селектор `.fa-bars` повинен мати властивість `margin-left` зі значенням `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md deleted file mode 100644 index a6e9554e4e9..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: Крок 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -Використайте селектор id, щоб створити правило для id `guitar-neck`. Встановіть `width` на `200px`, `height` на `30px` та `background-color` на `#D2691E`. - -# --hints-- - -Ви повинні створити селектор `#guitar-neck`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -Ваш селектор `#guitar-neck` повинен мати властивість `width` зі значенням `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -Ваш селектор `#guitar-neck` повинен мати властивість `height` зі значенням `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -Ваш селектор `#guitar-neck` повинен мати властивість `background-color` зі значенням `#D2691E`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md deleted file mode 100644 index 9e368d44547..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: Крок 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Тепер перемістіть елемент `#guitar-neck` завдяки `position` зі значенням `absolute`, `top` зі значенням `45px` та `left` зі значенням `200px`. - -# --hints-- - -Ваш селектор `#guitar-neck` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -Ваш селектор `#guitar-neck` повинен мати властивість `top` зі значенням `45px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -Ваш селектор `#guitar-neck` повинен мати властивість `left` зі значенням `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md deleted file mode 100644 index e7eb04ff6fb..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: Крок 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Надайте елементу `#guitar-neck` властивість `z-index` зі значенням `3`. - -# --hints-- - -Ваш селектор `#guitar-neck` повинен мати властивість `z-index` зі значенням `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md deleted file mode 100644 index 74bafc80a45..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: Крок 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Час стилізувати елементи з класом `eyes`. Використайте селектор класу, щоб встановити `width` на `35px`, `height` на `20px`, `background-color` на `#8B4513` та `border-radius` на `20px 50%`. - -# --hints-- - -Ви повинні створити селектор `.eyes`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -Ваш селектор `.eyes` повинен мати властивість `width` зі значенням `35px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -Ваш селектор `.eyes` повинен мати властивість `height` зі значенням `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -Ваш селектор `.eyes` повинен мати властивість `background-color` зі значенням `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -Ваш селектор `.eyes` повинен мати властивість `border-radius` зі значенням `20px 50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md deleted file mode 100644 index e3bee8faf47..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md +++ /dev/null @@ -1,382 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: Крок 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Націльте `class` зі значенням `right` та встановіть `position` на `absolute`, `top` на `15px` та `right` на `30px`. - -# --hints-- - -Ви повинні створити селектор `.right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -Ваш селектор `.right` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -Ваш селектор `.right` повинен мати властивість `top` зі значенням `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -Ваш селектор `.right` повинен мати властивість `right` зі значенням `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md deleted file mode 100644 index cc4c3de38ff..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: Крок 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Для `class` зі значенням `left` створіть селектор та встановіть `position` на `absolute`, `top` на `15px` та `left` на `30px`. - -# --hints-- - -Ви повинні створити новий селектор `.left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -Ваш селектор `.left` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -Ваш селектор `.left` повинен мати властивість `top` зі значенням `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -Ваш селектор `.left` повинен мати властивість `left` зі значенням `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md deleted file mode 100644 index 590919166fc..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md +++ /dev/null @@ -1,739 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: Крок 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Останній крок. Іконки FontAwesome трохи замалі. Націльте всі, використовуючи селектор класу для `fas` та встановіть `font-size` на `30px`. - -На цьому ваша картина Пікассо завершена! - -# --hints-- - -Ви повинні створити селектор `.fas`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -Ваш селектор `.fas` повинен мати властивість `font-size` зі значенням `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -# --solutions-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - -.fas { - font-size: 30px; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md deleted file mode 100644 index 9fafc090475..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: Крок 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Прив’яжіть свій CSS-файл зараз, навіть якщо ви ще не написали CSS. - -Додайте елемент `link`, що має `rel` зі значенням `stylesheet` та `href` зі значенням `styles.css`. - -# --hints-- - - -Ваш код повинен мати елемент `link`. - -```js -assert.match(code, / link')); -``` - -Ваш елемент `link` повинен мати атрибут `rel` зі значенням `stylesheet`. - -```js -const link_element = document.querySelector('link'); -const rel = link_element.getAttribute("rel"); -assert.equal(rel, "stylesheet"); -``` - -Ваш елемент `link` повинен мати атрибут `href` зі значенням `styles.css`. - -```js -const link = document.querySelector('link'); -assert.equal(link.dataset.href, "styles.css"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md deleted file mode 100644 index 0b1132ccfe5..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: Крок 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Налаштуйте макет елементів `.triangle` з допомогою `display` зі значенням `inline-block`. - -# --hints-- - -Ваш селектор `.triangle` повинен мати властивість `display` зі значенням `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md deleted file mode 100644 index 88b5f26572d..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: Крок 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Надайте елементам `.triangle` правильний колір. Встановіть `border-top-color`, `border-bottom-color` та `border-left-color` на `transparent`. Встановіть `border-right-color` на `Gold`. - -# --hints-- - -Ваш селектор `.triangle` повинен мати властивість `border-top-color` зі значенням `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -Ваш селектор `.triangle` повинен мати властивість `border-bottom-color` зі значенням `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -Ваш селектор `.triangle` повинен мати властивість `border-left-color` зі значенням `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -Ваш селектор `.triangle` повинен мати властивість `border-right-color` зі значенням `Gold`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md deleted file mode 100644 index 8e6e506294b..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: Крок 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -Стилізуйте кордони своїх елементів `.triangle`. Встановіть `border-style` на `solid` та `border-width` на `42px 45px 45px 0`. - -# --hints-- - -Ваш селектор `.triangle` повинен мати властивість `border-style` зі значенням `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -Ваш селектор `.triangle` повинен мати властивість `border-width` зі значенням `42px 45px 45px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md deleted file mode 100644 index c55232d1a75..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: Крок 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Створіть селектор класу для елементів з класом `triangle`. Встановіть `width` на `0` та `height` на `0`. - -# --hints-- - -Ви повинні створити селектор `.triangle`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -Ваш селектор `.triangle` повинен мати властивість `width` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -Ваш селектор `.triangle` повинен мати властивість `height` зі значенням `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md deleted file mode 100644 index 70cb69577ac..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: Крок 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Націльте елементи з id `triangles`, використовуючи селектор id. Встановіть `width` на `250px` та `height` на `550px`. - -# --hints-- - -Ви повинні додати селектор `#triangles`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -Ваш селектор `#triangles` повинен мати властивість `width` зі значенням `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -Ваш селектор `#triangles` повинен мати властивість `height` зі значенням `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md deleted file mode 100644 index 9a2ca5dbd34..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: Крок 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Тепер використайте селектор id для `guitar`. Встановіть `width` на `100%` та `height` на `100px`. - -# --hints-- - -Ви повинні створити селектор `#guitar`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -Ваш селектор `#guitar` повинен мати властивість `width` зі значенням `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -Ваш селектор `#guitar` повинен мати властивість `height` зі значенням `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md deleted file mode 100644 index 5ff79819c5b..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: Крок 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -В тому ж селекторі `#guitar` встановіть `position` на `absolute`, `top` на `120px` та `left` на `0px`. - -# --hints-- - -Ваш селектор `#guitar` повинен мати властивість `position` зі значенням `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -Ваш селектор `#guitar` повинен мати властивість `top` зі значенням `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -Ваш селектор `#guitar` повинен мати властивість `left` зі значенням `0px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md deleted file mode 100644 index 2b195742e5d..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: Крок 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -Надайте правилу `#guitar` властивість `z-index` зі значенням `3`. - -# --hints-- - -Ваш селектор `#guitar` повинен мати властивість `z-index` зі значенням `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md deleted file mode 100644 index 1014d842382..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: Крок 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Встановіть `border-width` елемента `#black-hat` на `150px 0 0 300px`. - -# --hints-- - -Ваш селектор `#black-hat` повинен мати властивість `border-width` зі значенням `150px 0 0 300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Picasso Painting - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - - - -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md deleted file mode 100644 index 3239044d1ac..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 615f5c1cb7575c7551ed8a40 -title: Крок 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Більший розмір шрифту числа `230` спричиняє його переповнення. Надайте `.calories-info h1` властивість `overflow` зі значенням `hidden`, щоб уникнути цього. - -# --hints-- - -Ваш селектор `.calories-info h1` повинен мати властивість `overflow` зі значенням `hidden`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                                                                  -
                                                                                                  -

                                                                                                  Nutrition Facts

                                                                                                  -
                                                                                                  -

                                                                                                  8 servings per container

                                                                                                  -

                                                                                                  Serving size 2/3 cup (55g)

                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -

                                                                                                  Amount per serving

                                                                                                  -

                                                                                                  Calories 230

                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.sm-text { - font-size: 0.85rem; -} - ---fcc-editable-region-- -.calories-info h1 { - margin: -5px -2px; -} ---fcc-editable-region-- - -.calories-info span { - font-size: 1.2em; -} -``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md deleted file mode 100644 index b40ba266d97..00000000000 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 615f6a7d4ba8037bc086c2c7 -title: Крок 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Надайте селектору `.divider` властивість `clear` зі значенням `right`. Це очистить властивість `float`, штовхнувши роздільник та будь-який подальший вміст під текст `float`. - -# --hints-- - -Ваш селектор `.divider` повинен мати властивість `clear` зі значенням `right`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Nutrition Label - - - - -
                                                                                                  -
                                                                                                  -

                                                                                                  Nutrition Facts

                                                                                                  -
                                                                                                  -

                                                                                                  8 servings per container

                                                                                                  -

                                                                                                  Serving size 2/3 cup (55g)

                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -

                                                                                                  Amount per serving

                                                                                                  -

                                                                                                  Calories 230

                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  -

                                                                                                  % Daily Value *

                                                                                                  -
                                                                                                  -
                                                                                                  -
                                                                                                  - - -``` - -```css -* { - box-sizing: border-box; -} - -html { - font-size: 16px; -} - -body { - font-family: 'Open Sans', sans-serif; -} - -.label { - border: 2px solid black; - width: 270px; - margin: 20px auto; - padding: 0 7px; -} - -header h1 { - text-align: center; - margin: -4px 0; - letter-spacing: 0.15px -} - -p { - margin: 0; -} - ---fcc-editable-region-- -.divider { - border-bottom: 1px solid #888989; - margin: 2px 0; -} ---fcc-editable-region-- - -.bold { - font-weight: 800; -} - -.right { - float: right; -} - -.lg { - height: 10px; -} - -.lg, .md { - background-color: black; - border: 0; -} - -.md { - height: 5px; -} - -.sm-text { - font-size: 0.85rem; -} - -.calories-info h1 { - margin: -5px -2px; - overflow: hidden; -} - -.calories-info span { - font-size: 1.2em; - margin-top: -7px; -} -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md deleted file mode 100644 index f7506337043..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 56533eb9ac21ba0edf2244e2 -title: Створіть шифр Цезаря -challengeType: 5 -forumTopicId: 16003 -dashedName: build-a-caesars-cipher ---- - -# --description-- - -Одним з найпростіших і найпоширеніших шифрів є шифр Цезаря, також відомий як шифр зсуву. У шифрі зсуву значення літери зміщене на встановлену кількість. - -Часто використовують шифр ROT13, який зміщує літеру на 13 місць. Таким чином, `A ↔ N`, `B ↔ O` і так далі. - -Напишіть функцію, яка приймає закодований рядок ROT13 як вхідні дані та повертає декодований. - -Всі літери повинні бути великими. Не замінюйте неалфавітні символи (пробіли, знаки пунктуації), але перенесіть їх. - -# --hints-- - -`rot13("SERR PBQR PNZC")` повинен розшифруватись як рядок `FREE CODE CAMP` - -```js -assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); -``` - -`rot13("SERR CVMMN!")` повинен розшифруватись як рядок `FREE PIZZA!` - -```js -assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); -``` - -`rot13("SERR YBIR?")` повинен розшифруватись як рядок `FREE LOVE?` - -```js -assert(rot13('SERR YBIR?') === 'FREE LOVE?'); -``` - -`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` повинен розшифруватись як рядок `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` - -```js -assert( - rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === - 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function rot13(str) { - return str; -} - -rot13("SERR PBQR PNZC"); -``` - -# --solutions-- - -```js -var lookup = { - 'A': 'N','B': 'O','C': 'P','D': 'Q', - 'E': 'R','F': 'S','G': 'T','H': 'U', - 'I': 'V','J': 'W','K': 'X','L': 'Y', - 'M': 'Z','N': 'A','O': 'B','P': 'C', - 'Q': 'D','R': 'E','S': 'F','T': 'G', - 'U': 'H','V': 'I','W': 'J','X': 'K', - 'Y': 'L','Z': 'M' -}; - -function rot13(encodedStr) { - var codeArr = encodedStr.split(""); // String to Array - var decodedArr = []; // Your Result goes here - // Only change code below this line - - decodedArr = codeArr.map(function(letter) { - if(lookup.hasOwnProperty(letter)) { - letter = lookup[letter]; - } - return letter; - }); - - // Only change code above this line - return decodedArr.join(""); // Array to String -} -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md deleted file mode 100644 index 2ec646a92f3..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: aa2e6f85cab2ab736c9a9b24 -title: Створіть касовий апарат -challengeType: 5 -forumTopicId: 16012 -dashedName: build-a-cash-register ---- - -# --description-- - -Розробіть функцію касового апарату `checkCashRegister()`, яка приймає ціну покупки як перший аргумент (`price`), оплату як другий аргумент (`cash`) та суму готівки в касі як третій аргумент (`cid`). - -`cid` — це 2D масив, який містить список доступного обігу. - -Функція `checkCashRegister()` завжди повинна повертати об'єкт з ключем `status` та ключем `change`. - -Поверніть `{status: "INSUFFICIENT_FUNDS", change: []}`, якщо сума готівки в касі менша за здачу, або ви не можете віддати здачу. - -Поверніть `{status: "CLOSED", change: [...]}` з сумою в касі як значення ключа `change`, якщо воно дорівнює здачі. - -В іншому випадку, поверніть `{status: "OPEN", change: [...]}` зі здачею в монетах і банкнотах, в порядку від найбільшої до найменшої, як значення ключа `change`. - -
                                                                                                  Грошовий обігСума
                                                                                                  Пенні$0.01 (ПЕННІ)
                                                                                                  Нікель$0.05 (НІКЕЛЬ)
                                                                                                  Дайм$0.1 (ДАЙМ)
                                                                                                  Чверть$0.25 (ЧВЕРТЬ)
                                                                                                  Долар$1 (ОДИН)
                                                                                                  П’ять доларів$5 (П’ЯТЬ)
                                                                                                  Десять доларів$10 (ДЕСЯТЬ)
                                                                                                  Двадцять доларів$20 (ДВАДЦЯТЬ)
                                                                                                  Сто доларів$100 (СТО)
                                                                                                  - -Подивіться нижче на приклад масиву з сумою в касі: - -```js -[ - ["PENNY", 1.01], - ["NICKEL", 2.05], - ["DIME", 3.1], - ["QUARTER", 4.25], - ["ONE", 90], - ["FIVE", 55], - ["TEN", 20], - ["TWENTY", 60], - ["ONE HUNDRED", 100] -] -``` - -# --hints-- - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` має повертати об’єкт. - -```js -assert.deepEqual( - Object.prototype.toString.call( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]) - ), - '[object Object]' -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` має повертати `{status: "OPEN", change: [["QUARTER", 0.5]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { status: 'OPEN', change: [['QUARTER', 0.5]] } -); -``` - -`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` має повертати `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. - -```js -assert.deepEqual( - checkCashRegister(3.26, 100, [ - ['PENNY', 1.01], - ['NICKEL', 2.05], - ['DIME', 3.1], - ['QUARTER', 4.25], - ['ONE', 90], - ['FIVE', 55], - ['TEN', 20], - ['TWENTY', 60], - ['ONE HUNDRED', 100] - ]), - { - status: 'OPEN', - change: [ - ['TWENTY', 60], - ['TEN', 20], - ['FIVE', 15], - ['ONE', 1], - ['QUARTER', 0.5], - ['DIME', 0.2], - ['PENNY', 0.04] - ] - } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` має повертати `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` має повертати `{status: "INSUFFICIENT_FUNDS", change: []}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.01], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 1], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { status: 'INSUFFICIENT_FUNDS', change: [] } -); -``` - -`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` має повертати `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. - -```js -assert.deepEqual( - checkCashRegister(19.5, 20, [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ]), - { - status: 'CLOSED', - change: [ - ['PENNY', 0.5], - ['NICKEL', 0], - ['DIME', 0], - ['QUARTER', 0], - ['ONE', 0], - ['FIVE', 0], - ['TEN', 0], - ['TWENTY', 0], - ['ONE HUNDRED', 0] - ] - } -); -``` - -# --seed-- - -## --seed-contents-- - -```js -function checkCashRegister(price, cash, cid) { - let change; - return change; -} - -checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); -``` - -# --solutions-- - -```js -const denom = [ - { name: "ONE HUNDRED", val: 100 }, - { name: "TWENTY", val: 20 }, - { name: "TEN", val: 10 }, - { name: "FIVE", val: 5 }, - { name: "ONE", val: 1 }, - { name: "QUARTER", val: 0.25 }, - { name: "DIME", val: 0.1 }, - { name: "NICKEL", val: 0.05 }, - { name: "PENNY", val: 0.01 }, -]; - -function checkCashRegister(price, cash, cid) { - const output = { status: null, change: [] }; - let change = cash - price; - const register = cid.reduce( - function (acc, curr) { - acc.total += curr[1]; - acc[curr[0]] = curr[1]; - return acc; - }, - { total: 0 } - ); - if (register.total === change) { - output.status = "CLOSED"; - output.change = cid; - return output; - } - if (register.total < change) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - const change_arr = denom.reduce(function (acc, curr) { - let value = 0; - while (register[curr.name] > 0 && change >= curr.val) { - change -= curr.val; - register[curr.name] -= curr.val; - value += curr.val; - change = Math.round(change * 100) / 100; - } - if (value > 0) { - acc.push([curr.name, value]); - } - return acc; - }, []); - if (change_arr.length < 1 || change > 0) { - output.status = "INSUFFICIENT_FUNDS"; - return output; - } - output.status = "OPEN"; - output.change = change_arr; - return output; -} -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md deleted file mode 100644 index 6492c6740f9..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: aaa48de84e1ecc7c742e1124 -title: Створіть перевірку паліндрома -challengeType: 5 -forumTopicId: 16004 -dashedName: build-a-palindrome-checker ---- - -# --description-- - -Поверніть `true`, якщо заданий рядок є паліндромом. В іншому випадку, поверніть `false`. - -Паліндром — це слово чи речення, що однаково пишеться в обох напрямках (зліва направо та справа наліво), незважаючи на розділові знаки, велику/малу літеру чи пробіли. - -**Примітка:** вам потрібно прибрати **всі неалфавітні символи** (розділові знаки, пробіли та символи) і написати весь текст одинаково (великими або малими літерами) для перевірки паліндромів. - -Ми будемо передавати рядки з різними форматами, наприклад `racecar`, `RaceCar` та `race CAR` серед інших. - -Ми також будемо передавати рядки з спеціальними символами, наприклад `2A3*3a2`, `2A3 3a2` та `2_A3*3#A2`. - -# --hints-- - -`palindrome("eye")` має повертати булеве значення. - -```js -assert(typeof palindrome('eye') === 'boolean'); -``` - -`palindrome("eye")` має повертати `true`. - -```js -assert(palindrome('eye') === true); -``` - -`palindrome("_eye")` має повертати `true`. - -```js -assert(palindrome('_eye') === true); -``` - -`palindrome("race car")` має повертати `true`. - -```js -assert(palindrome('race car') === true); -``` - -`palindrome("not a palindrome")` має повертати `false`. - -```js -assert(palindrome('not a palindrome') === false); -``` - -`palindrome("A man, a plan, a canal. Panama")` має повертати `true`. - -```js -assert(palindrome('A man, a plan, a canal. Panama') === true); -``` - -`palindrome("never odd or even")` має повертати `true`. - -```js -assert(palindrome('never odd or even') === true); -``` - -`palindrome("nope")` має повертати `false`. - -```js -assert(palindrome('nope') === false); -``` - -`palindrome("almostomla")` має повертати `false`. - -```js -assert(palindrome('almostomla') === false); -``` - -`palindrome("My age is 0, 0 si ega ym.")` має повертати `true`. - -```js -assert(palindrome('My age is 0, 0 si ega ym.') === true); -``` - -`palindrome("1 eye for of 1 eye.")` має повертати `false`. - -```js -assert(palindrome('1 eye for of 1 eye.') === false); -``` - -`palindrome("0_0 (: /-\ :) 0-0")` має повертати `true`. - -```js -assert(palindrome('0_0 (: /- :) 0-0') === true); -``` - -`palindrome("five|\_/|four")` має повертати `false`. - -```js -assert(palindrome('five|_/|four') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function palindrome(str) { - return true; -} - -palindrome("eye"); -``` - -# --solutions-- - -```js -function palindrome(str) { - var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); - var aux = string.split(''); - if (aux.join('') === aux.reverse().join('')){ - return true; - } - - return false; -} -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md deleted file mode 100644 index e6e24e8a2f6..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: a7f4d8f2483413a6ce226cac -title: Створіть конвертер римських чисел -challengeType: 5 -forumTopicId: 16044 -dashedName: build-a-roman-numeral-converter ---- - -# --description-- - -Перетворіть подане число в римське число. - -| Римські числа | Арабські числа | -| ------------- | -------------- | -| M | 1000 | -| CM | 900 | -| D | 500 | -| CD | 400 | -| С | 100 | -| XC | 90 | -| L | 50 | -| XL | 40 | -| X | 10 | -| IX | 9 | -| V | 5 | -| IV | 4 | -| I | 1 | - -Всі римські числа повинні бути написаними великими літерами. - -# --hints-- - -`convertToRoman(2)` має повертати рядок `II`. - -```js -assert.deepEqual(convertToRoman(2), 'II'); -``` - -`convertToRoman(3)` має повертати рядок `III`. - -```js -assert.deepEqual(convertToRoman(3), 'III'); -``` - -`convertToRoman(4)` має повертати рядок `IV`. - -```js -assert.deepEqual(convertToRoman(4), 'IV'); -``` - -`convertToRoman(5)` має повертати рядок `V`. - -```js -assert.deepEqual(convertToRoman(5), 'V'); -``` - -`convertToRoman(9)` має повертати рядок `IX`. - -```js -assert.deepEqual(convertToRoman(9), 'IX'); -``` - -`convertToRoman(12)` має повертати рядок `XII`. - -```js -assert.deepEqual(convertToRoman(12), 'XII'); -``` - -`convertToRoman(16)` має повертати рядок `XVI`. - -```js -assert.deepEqual(convertToRoman(16), 'XVI'); -``` - -`convertToRoman(29)` має повертати рядок `XXIX`. - -```js -assert.deepEqual(convertToRoman(29), 'XXIX'); -``` - -`convertToRoman(44)` має повертати рядок `XLIV`. - -```js -assert.deepEqual(convertToRoman(44), 'XLIV'); -``` - -`convertToRoman(45)` має повертати рядок `XLV`. - -```js -assert.deepEqual(convertToRoman(45), 'XLV'); -``` - -`convertToRoman(68)` має повертати рядок `LXVIII` - -```js -assert.deepEqual(convertToRoman(68), 'LXVIII'); -``` - -`convertToRoman(83)` має повертати рядок `LXXXIII` - -```js -assert.deepEqual(convertToRoman(83), 'LXXXIII'); -``` - -`convertToRoman(97)` має повертати рядок `XCVII` - -```js -assert.deepEqual(convertToRoman(97), 'XCVII'); -``` - -`convertToRoman(99)` має повертати рядок `XCIX` - -```js -assert.deepEqual(convertToRoman(99), 'XCIX'); -``` - -`convertToRoman(400)` має повертати рядок `CD` - -```js -assert.deepEqual(convertToRoman(400), 'CD'); -``` - -`convertToRoman(500)` має повертати рядок `D` - -```js -assert.deepEqual(convertToRoman(500), 'D'); -``` - -`convertToRoman(501)` має повертати рядок `DI` - -```js -assert.deepEqual(convertToRoman(501), 'DI'); -``` - -`convertToRoman(649)` має повертати рядок `DCXLIX` - -```js -assert.deepEqual(convertToRoman(649), 'DCXLIX'); -``` - -`convertToRoman(798)` має повертати рядок `DCCXCVIII` - -```js -assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); -``` - -`convertToRoman(891)` має повертати рядок `DCCCXCI` - -```js -assert.deepEqual(convertToRoman(891), 'DCCCXCI'); -``` - -`convertToRoman(1000)` має повертати рядок `M` - -```js -assert.deepEqual(convertToRoman(1000), 'M'); -``` - -`convertToRoman(1004)` має повертати рядок `MIV` - -```js -assert.deepEqual(convertToRoman(1004), 'MIV'); -``` - -`convertToRoman(1006)` має повертати рядок `MVI` - -```js -assert.deepEqual(convertToRoman(1006), 'MVI'); -``` - -`convertToRoman(1023)` має повертати рядок `MXXIII` - -```js -assert.deepEqual(convertToRoman(1023), 'MXXIII'); -``` - -`convertToRoman(2014)` має повертати рядок `MMXIV` - -```js -assert.deepEqual(convertToRoman(2014), 'MMXIV'); -``` - -`convertToRoman(3999)` має повертати рядок `MMMCMXCIX` - -```js -assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); -``` - -# --seed-- - -## --seed-contents-- - -```js -function convertToRoman(num) { - return num; -} - -convertToRoman(36); -``` - -# --solutions-- - -```js -function convertToRoman(num) { - var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; - var res = []; - ref.forEach(function(p) { - while (num >= p[1]) { - res.push(p[0]); - num -= p[1]; - } - }); - return res.join(''); -} -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md deleted file mode 100644 index 2fc07c49514..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: aff0395860f5d3034dc0bfc9 -title: Створіть валідатор мобільного номера -challengeType: 5 -forumTopicId: 16090 -dashedName: build-a-telephone-number-validator ---- - -# --description-- - -Поверніть `true`, якщо наданий рядок виглядає як дійсний мобільний номер США. - -Користувач може заповнити поле форми в будь-який спосіб, тільки якщо він має формат дійсного номера США. Нижче наведені приклади дійсних форматів номерів США (для інших варіантів посилайтесь на тести, подані нижче): - -
                                                                                                  555-555-5555
                                                                                                  (555)555-5555
                                                                                                  (555) 555-5555
                                                                                                  555 555 5555
                                                                                                  5555555555
                                                                                                  1 555 555 5555
                                                                                                  - -У цьому завданні вам буде надано рядок, наприклад `800-692-7753` або `8oo-six427676;laskdjf`. Ваше завдання — підтвердити або відхилити мобільний номер США на основі будь-якої комбінації форматів, наданих вище. Код зони нумерації є обов’язковим. Якщо надано телефонний код країни, то ви повинні підтвердити, що телефонний код країни — `1`. Поверніть `true`, якщо рядок є дійсним мобільним номером США; в іншому випадку поверніть `false`. - -# --hints-- - -`telephoneCheck("555-555-5555")` має повертати булеве значення. - -```js -assert(typeof telephoneCheck('555-555-5555') === 'boolean'); -``` - -`telephoneCheck("1 555-555-5555")` має повертати `true`. - -```js -assert(telephoneCheck('1 555-555-5555') === true); -``` - -`telephoneCheck("1 (555) 555-5555")` має повертати `true`. - -```js -assert(telephoneCheck('1 (555) 555-5555') === true); -``` - -`telephoneCheck("5555555555")` має повертати `true`. - -```js -assert(telephoneCheck('5555555555') === true); -``` - -`telephoneCheck("555-555-5555")` має повертати `true`. - -```js -assert(telephoneCheck('555-555-5555') === true); -``` - -`telephoneCheck("(555)555-5555")` має повертати `true`. - -```js -assert(telephoneCheck('(555)555-5555') === true); -``` - -`telephoneCheck("1(555)555-5555")` має повертати `true`. - -```js -assert(telephoneCheck('1(555)555-5555') === true); -``` - -`telephoneCheck("555-5555")` має повертати `false`. - -```js -assert(telephoneCheck('555-5555') === false); -``` - -`telephoneCheck("5555555")` має повертати `false`. - -```js -assert(telephoneCheck('5555555') === false); -``` - -`telephoneCheck("1 555)555-5555")` має повертати `false`. - -```js -assert(telephoneCheck('1 555)555-5555') === false); -``` - -`telephoneCheck("1 555 555 5555")` має повертати `true`. - -```js -assert(telephoneCheck('1 555 555 5555') === true); -``` - -`telephoneCheck("1 456 789 4444")` має повертати `true`. - -```js -assert(telephoneCheck('1 456 789 4444') === true); -``` - -`telephoneCheck("123**&!!asdf#")` має повертати `false`. - -```js -assert(telephoneCheck('123**&!!asdf#') === false); -``` - -`telephoneCheck("55555555")` має повертати `false`. - -```js -assert(telephoneCheck('55555555') === false); -``` - -`telephoneCheck("(6054756961)")` має повертати `false`. - -```js -assert(telephoneCheck('(6054756961)') === false); -``` - -`telephoneCheck("2 (757) 622-7382")` має повертати `false`. - -```js -assert(telephoneCheck('2 (757) 622-7382') === false); -``` - -`telephoneCheck("0 (757) 622-7382")` має повертати `false`. - -```js -assert(telephoneCheck('0 (757) 622-7382') === false); -``` - -`telephoneCheck("-1 (757) 622-7382")` має повертати `false`. - -```js -assert(telephoneCheck('-1 (757) 622-7382') === false); -``` - -`telephoneCheck("2 757 622-7382")` має повертати `false`. - -```js -assert(telephoneCheck('2 757 622-7382') === false); -``` - -`telephoneCheck("10 (757) 622-7382")` має повертати `false`. - -```js -assert(telephoneCheck('10 (757) 622-7382') === false); -``` - -`telephoneCheck("27576227382")` має повертати `false`. - -```js -assert(telephoneCheck('27576227382') === false); -``` - -`telephoneCheck("(275)76227382")` має повертати `false`. - -```js -assert(telephoneCheck('(275)76227382') === false); -``` - -`telephoneCheck("2(757)6227382")` має повертати `false`. - -```js -assert(telephoneCheck('2(757)6227382') === false); -``` - -`telephoneCheck("2(757)622-7382")` має повертати `false`. - -```js -assert(telephoneCheck('2(757)622-7382') === false); -``` - -`telephoneCheck("555)-555-5555")` має повертати `false`. - -```js -assert(telephoneCheck('555)-555-5555') === false); -``` - -`telephoneCheck("(555-555-5555")` має повертати `false`. - -```js -assert(telephoneCheck('(555-555-5555') === false); -``` - -`telephoneCheck("(555)5(55?)-5555")` має повертати `false`. - -```js -assert(telephoneCheck('(555)5(55?)-5555') === false); -``` - -`telephoneCheck("55 55-55-555-5")` має повертати `false`. - -```js -assert(telephoneCheck('55 55-55-555-5') === false); -``` - -`telephoneCheck("11 555-555-5555")` має повертати `false`. - -```js -assert(telephoneCheck('11 555-555-5555') === false); -``` - -# --seed-- - -## --seed-contents-- - -```js -function telephoneCheck(str) { - return true; -} - -telephoneCheck("555-555-5555"); -``` - -# --solutions-- - -```js -var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; - -function telephoneCheck(str) { - return re.test(str); -} - -telephoneCheck("555-555-5555"); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md deleted file mode 100644 index e584c58e9a2..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 62a3b365f1cdeb33efc2502e -title: Крок 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Ви оголошували змінні за допомогою ключового слова `var`. Однак у сучасному JavaScript краще використовувати ключове слово `let`. Воно виправляє незвичну поведінку `var`, яка могла ускладнити налагодження коду. - -Змініть всі ключові слова `var` на `let`. - -# --hints-- - -Вам не потрібні ключові слова `var` у своєму коді. - -```js -assert.notMatch(code, /var/); -``` - -Використайте ключове слово `let`, щоб оголосити змінну `xp`. - -```js -assert.match(code, /let xp/); -``` - -Використайте ключове слово `let`, щоб оголосити змінну `health`. - -```js -assert.match(code, /let health/); -``` - -Використайте ключове слово `let`, щоб оголосити змінну `gold`. - -```js -assert.match(code, /let gold/); -``` - -Використайте ключове слово `let`, щоб оголосити змінну `currentWeapon`. - -```js -assert.match(code, /let currentWeapon/); -``` - -Ви не повинні змінювати значення своїх змінних. - -```js -assert.equal(xp, 0); -assert.equal(health, 100); -assert.equal(gold, 50); -assert.equal(currentWeapon, 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - - -
                                                                                                  -
                                                                                                  - XP: 0 - Health: 100 - Gold: 50 -
                                                                                                  -
                                                                                                  - - - -
                                                                                                  -
                                                                                                  - Monster Name: - Health: -
                                                                                                  -
                                                                                                  - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                                                                  -
                                                                                                  - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js ---fcc-editable-region-- -var xp = 0; -var health = 100; -var gold = 50; -var currentWeapon = 0; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md deleted file mode 100644 index 2d0dda71889..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md +++ /dev/null @@ -1,355 +0,0 @@ ---- -id: 62a8f2bc37675e77d5835235 -title: Крок 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -У JavaScript є умовний оператор, який називається тернарним оператором. Його можна використати як однорядковий вираз `if-else`. Синтаксис такий: `condition ? true : false`. - -Ось приклад виразу `if-else`, зміненого на тернарний: - -```js -if (num > 5) { - bigger() -} else { - smaller() -} - -num > 5 ? bigger() : smaller(); -``` - -Змініть свій новий вираз `if-else` на тернарний. - -# --hints-- - -Ви повинні вилучити `if` та `else` зі свого блоку `else if`. - -```js -const block = attack.toString().split("else if"); -assert.notMatch(block[1], /if/); -assert.notMatch(block[1], /else/); -``` - -Ви повинні перевірити, чи `fighting` дорівнює `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2/); -``` - -Використовуючи тернарний синтаксис, ви повинні викликати `winGame`, якщо `fighting` дорівнює `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/); -``` - -Використовуючи тернарний синтаксис, ви повинні викликати `defeatMonster`, якщо `fighting` не дорівнює `2`. - -```js -const block = attack.toString().split("else if"); -assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - RPG - Dragon Repeller - - -
                                                                                                  -
                                                                                                  - XP: 0 - Health: 100 - Gold: 50 -
                                                                                                  -
                                                                                                  - - - -
                                                                                                  -
                                                                                                  - Monster Name: - Health: -
                                                                                                  -
                                                                                                  - Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. -
                                                                                                  -
                                                                                                  - - - -``` - -```css -body { - background-color: darkblue; -} - -#text { - background-color: black; - color: white; - padding: 10px; -} - -#game { - max-width: 500px; - max-height: 400px; - background-color: lightgray; - color: white; - margin: 0 auto; - padding: 10px; -} - -#controls, #stats { - border: 1px solid black; - padding: 5px; - color: black; -} - -#monsterStats { - display: none; - border: 1px solid black; - padding: 5px; - color: white; - background-color: red; -} - -.stat { - padding-right: 10px; -} -``` - -```js -let xp = 0; -let health = 100; -let gold = 50; -let currentWeapon = 0; -let fighting; -let monsterHealth; -let inventory = ["stick"]; - -const button1 = document.querySelector('#button1'); -const button2 = document.querySelector("#button2"); -const button3 = document.querySelector("#button3"); -const text = document.querySelector("#text"); -const xpText = document.querySelector("#xpText"); -const healthText = document.querySelector("#healthText"); -const goldText = document.querySelector("#goldText"); -const monsterStats = document.querySelector("#monsterStats"); -const monsterName = document.querySelector("#monsterName"); -const monsterHealthText =document.querySelector("#monsterHealth"); -const weapons = [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]; -const monsters = [ - { - name: "slime", - level: 2, - health: 15 - }, - { - name: "fanged beast", - level: 8, - health: 60 - }, - { - name: "dragon", - level: 20, - health: 300 - } -] -const locations = [ - { - name: "town square", - "button text": ["Go to store", "Go to cave", "Fight dragon"], - "button functions": [goStore, goCave, fightDragon], - text: "You are in the town square. You see a sign that says \"Store\"." - }, - { - name: "store", - "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], - "button functions": [buyHealth, buyWeapon, goTown], - text: "You enter the store." - }, - { - name: "cave", - "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], - "button functions": [fightSlime, fightBeast, goTown], - text: "You enter the cave. You see some monsters." - }, - { - name: "fight", - "button text": ["Attack", "Dodge", "Run"], - "button functions": [attack, dodge, goTown], - text: "You are fighting a monster." - }, - { - name: "kill monster", - "button text": ["Go to town square", "Go to town square", "Go to town square"], - "button functions": [goTown, goTown, goTown], - text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' - }, - { - name: "lose", - "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], - "button functions": [restart, restart, restart], - text: "You die. ☠️" - } -]; - -// initialize buttons -button1.onclick = goStore; -button2.onclick = goCave; -button3.onclick = fightDragon; - -function update(location) { - monsterStats.style.display = "none"; - button1.innerText = location["button text"][0]; - button2.innerText = location["button text"][1]; - button3.innerText = location["button text"][2]; - button1.onclick = location["button functions"][0]; - button2.onclick = location["button functions"][1]; - button3.onclick = location["button functions"][2]; - text.innerText = location.text; -} - -function goTown() { - update(locations[0]); -} - -function goStore() { - update(locations[1]); -} - -function goCave() { - update(locations[2]); -} - -function buyHealth() { - if (gold >= 10) { - gold -= 10; - health += 10; - goldText.innerText = gold; - healthText.innerText = health; - } else { - text.innerText = "You do not have enough gold to buy health."; - } -} - -function buyWeapon() { - if (currentWeapon < weapons.length - 1) { - if (gold >= 30) { - gold -= 30; - currentWeapon++; - goldText.innerText = gold; - let newWeapon = weapons[currentWeapon].name; - text.innerText = "You now have a " + newWeapon + "."; - inventory.push(newWeapon); - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "You do not have enough gold to buy a weapon."; - } - } else { - text.innerText = "You already have the most powerful weapon!"; - button2.innerText = "Sell weapon for 15 gold"; - button2.onclick = sellWeapon; - } -} - -function sellWeapon() { - if (inventory.length > 1) { - gold += 15; - goldText.innerText = gold; - let currentWeapon = inventory.shift(); - text.innerText = "You sold a " + currentWeapon + "."; - text.innerText += " In your inventory you have: " + inventory; - } else { - text.innerText = "Don't sell your only weapon!"; - } -} - -function fightSlime() { - fighting = 0; - goFight(); -} - -function fightBeast() { - fighting = 1; - goFight(); -} - -function fightDragon() { - fighting = 2; - goFight(); -} - -function goFight() { - update(locations[3]); - monsterHealth = monsters[fighting].health; - monsterStats.style.display = "block"; - monsterName.innerText = monsters[fighting].name; - monsterHealthText.innerText = monsterHealth; -} - ---fcc-editable-region-- -function attack() { - text.innerText = "The " + monsters[fighting].name + " attacks."; - text.innerText += " You attack it with your " + weapons[currentWeapon].name + "."; - health -= monsters[fighting].level; - monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1; - healthText.innerText = health; - monsterHealthText.innerText = monsterHealth; - if (health <= 0) { - lose(); - } else if (monsterHealth <= 0) { - if (fighting === 2) { - winGame(); - } else { - defeatMonster(); - } - } -} ---fcc-editable-region-- - -function dodge() { - text.innerText = "You dodge the attack from the " + monsters[fighting].name; -} - -function defeatMonster() { - gold += Math.floor(monsters[fighting].level * 6.7); - xp += monsters[fighting].level; - goldText.innerText = gold; - xpText.innerText = xp; - update(locations[4]); -} - -function lose() { - update(locations[5]); -} - -function restart() { - xp = 0; - health = 100; - gold = 50; - currentWeapon = 0; - inventory = ["stick"]; - goldText.innerText = gold; - healthText.innerText = health; - xpText.innerText = xp; - goTown(); -} -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md new file mode 100644 index 00000000000..d178d5a5a2b --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-string-and-array-methods-by-building-a-music-player/659b0093d7db5a1a1122b7bd.md @@ -0,0 +1,682 @@ +--- +id: 659b0093d7db5a1a1122b7bd +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +To get the index for the current song, you can use the indexOf() method. The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present. + +```js +const animals = ["dog", "cat", "horse"]; +animals.indexOf("cat") // 1 +``` + +Inside your `getCurrentSongIndex` function, return `userData?.songs.indexOf()`. For the `indexOf()` argument, set it to `userData.currentSong`. + +# --hints-- + +You should return `userData?.songs.indexOf()` inside your `getCurrentSongIndex` function. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\()|(\s*{\s*return?\s+userData\?\.songs\.indexOf\()/) +``` + +You should pass in `userData.currentSong` into the `indexOf()` method. + +```js +assert.match(code, /const\s+getCurrentSongIndex\s*=\s*\(\)\s*=>(\s*userData\?\.songs\.indexOf\(userData\.currentSong\);?)|(\s*{\s*return\s+userData\?\.songs\.indexOf\(userData\.currentSong\);?)/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + Learn Basic String and Array Methods by Building a Music Player App + + + + +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +

                                                                                                  freeCodeCamp

                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  + song cover art +
                                                                                                  +
                                                                                                  +
                                                                                                  +

                                                                                                  +

                                                                                                  +
                                                                                                  +
                                                                                                  + + + + + +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +

                                                                                                  Playlist

                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                  +
                                                                                                    +
                                                                                                    +
                                                                                                    + + + +``` + +```css +:root { + /* colors */ + --primary-color: #dfdfe2; + --secondary-color: #ffffff; + --app-background-color: #4d4d62; + --background-color: #1b1b32; + --foreground-color: #3b3b4f; + --highlight-color: #f1be32; + + /* font sizes */ + --root-font-size: 16px; + font-size: var(--root-font-size); + + /* font-families */ + --font-headline: "Roboto Mono", monospace; + --font-family: "Lato", sans-serif; +} + +*, +*::after, +*::before { + box-sizing: border-box; +} + +body { + background-color: var(--app-background-color); + color: var(--primary-color); + font-family: var(--font-family); +} + +h1 { + font-size: 1.125rem; + line-height: 1.6; +} + +h2 { + font-size: var(--root-font-size); +} + +ul { + margin: 0; +} + +.container { + margin-top: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + row-gap: 5px; +} + +.player, +.playlist { + width: 450px; + background-color: var(--background-color); + border: 3px solid var(--foreground-color); +} + +.player { + height: 260px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +.player-bar, +.playlist-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 5px; + width: 100%; + height: 30px; + background-color: var(--foreground-color); +} + +.parallel-lines { + display: flex; + flex-wrap: wrap; + row-gap: 6px; + padding: 0 5px; +} + +.parallel-lines > div { + height: 2px; + width: 100%; + min-width: 75px; + background-color: var(--highlight-color); +} + +.fcc-title, +.playlist-title { + color: var(--secondary-color); + margin: 0 10px; + font-family: var(--font-headline); +} + +.player-content { + display: flex; + background-color: var(--foreground-color); + width: 430px; + height: 200px; + column-gap: 13px; + align-items: center; + justify-content: center; +} + +#player-album-art { + background-color: var(--secondary-color); + border: 6px solid var(--background-color); +} + +#player-album-art img { + width: 150px; + display: block; +} + +.player-display { + display: flex; + flex-direction: column; + row-gap: 20px; + padding: 14px; + background-color: var(--background-color); + height: 153px; + width: 226px; +} + +.player-display-song-artist { + height: 80px; +} + +.player-buttons svg { + fill: var(--primary-color); +} + +.playing > svg { + fill: var(--highlight-color); +} + +.player-buttons { + display: flex; + justify-content: space-around; +} + +button { + background: transparent; + border: none; + color: var(--primary-color); + cursor: pointer; + font-size: var(--root-font-size); + outline-color: var(--highlight-color); + text-align: center; +} + +.playlist-song { + outline-color: var(--highlight-color); +} + +.playlist li:not(:last-child) { + border-bottom: 1px solid var(--background-color); +} + +button:focus, +.playlist-song:focus { + outline-style: dashed; + outline-width: 2px; +} + +/* Playlist */ +.playlist { + height: auto; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; +} + +#playlist-songs { + width: 430px; + height: 100%; + background-color: var(--foreground-color); + display: flex; + flex-direction: column; + row-gap: 8px; + padding: 8px 9px; + visibility: visible; + justify-content: start; + list-style: none; +} + +.playlist-song { + display: flex; + height: 55px; + justify-content: space-between; + align-items: center; + padding: 5px; +} + +[aria-current="true"] { + background-color: var(--background-color); +} + +[aria-current="true"] p { + color: var(--highlight-color); +} + +.playlist-song-info { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + column-gap: 7px; + padding: 5px 0; + font-family: var(--font-family); +} + +#player-song-title, +#player-song-artist { + margin: 0; +} + +#player-song-artist { + color: var(--highlight-color); + font-size: 0.75rem; +} + +#player-song-title { + font-size: 1.125rem; +} + +.playlist-song-title { + font-size: 0.85rem; + width: 241px; + text-align: left; +} + +.playlist-song-artist { + font-size: 0.725rem; + width: 80px; +} + +.playlist-song-duration { + font-size: 0.725rem; + margin: auto; + font-family: var(--font-headline); + width: 30px; +} + +.playlist-song-delete { + padding: 0; + width: 20px; + height: 20px; +} + +.playlist-song-delete, +.playlist-song-delete { + fill: var(--foreground-color); +} + +.playlist-song-delete:hover circle, +.playlist-song-delete:focus circle { + fill: #ff0000; +} + +@media (max-width: 700px) { + .player, + .playlist { + width: 300px; + } + + .player { + height: 340px; + } + + #playlist-songs { + height: 280px; + padding: 5px 6px; + overflow-y: scroll; + overflow-x: hidden; + scrollbar-color: var(--background-color) var(--secondary-color); + scrollbar-width: thin; + } + + #playlist-songs::-webkit-scrollbar { + width: 5px; + } + + #playlist-songs::-webkit-scrollbar-track { + background: var(--background-color); + } + + #playlist-songs::-webkit-scrollbar-thumb { + background: var(--secondary-color); + } + + h1 { + font-size: 0.813rem; + } + + h2 { + font-size: 0.75rem; + } + + .player-bar, + .playlist-bar, + .player-content, + #playlist-songs { + width: 280px; + } + + .playlist-song { + justify-content: space-between; + } + + .playlist-song-title { + width: 140px; + } + + .playlist-song-artist { + width: 40px; + } + + .playlist-song-duration > button { + padding: 0; + } + + .player-content { + display: inline; + position: relative; + justify-items: center; + height: 100%; + } + + #player-album-art { + z-index: -100; + height: 280px; + box-shadow: none; + background: #000; + } + + #player-album-art img { + width: 100%; + opacity: 0.6; + } + + .player-display-song-artist { + padding: 0 10px; + } + + .player-display-song-artist > p { + white-space: pre-wrap; + } + + .player-display { + position: absolute; + width: 100%; + z-index: 1000; + background-color: transparent; + top: 0; + height: 280px; + justify-content: space-between; + text-align: center; + } +} +``` + +```js +const playlistSongs = document.getElementById("playlist-songs"); +const playButton = document.getElementById("play"); +const pauseButton = document.getElementById("pause"); +const nextButton = document.getElementById("next"); +const previousButton = document.getElementById("previous"); +const shuffleButton = document.getElementById("shuffle"); + +const allSongs = [ + { + id: 0, + title: "Scratching The Surface", + artist: "Quincy Larson", + duration: "4:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/scratching-the-surface.mp3", + }, + { + id: 1, + title: "Can't Stay Down", + artist: "Quincy Larson", + duration: "4:15", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stay-down.mp3", + }, + { + id: 2, + title: "Still Learning", + artist: "Quincy Larson", + duration: "3:51", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/still-learning.mp3", + }, + { + id: 3, + title: "Cruising for a Musing", + artist: "Quincy Larson", + duration: "3:34", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cruising-for-a-musing.mp3", + }, + { + id: 4, + title: "Never Not Favored", + artist: "Quincy Larson", + duration: "3:35", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/never-not-favored.mp3", + }, + { + id: 5, + title: "From the Ground Up", + artist: "Quincy Larson", + duration: "3:12", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/from-the-ground-up.mp3", + }, + { + id: 6, + title: "Walking on Air", + artist: "Quincy Larson", + duration: "3:25", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/walking-on-air.mp3", + }, + { + id: 7, + title: "Can't Stop Me. Can't Even Slow Me Down.", + artist: "Quincy Larson", + duration: "3:52", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/cant-stop-me-cant-even-slow-me-down.mp3", + }, + { + id: 8, + title: "The Surest Way Out is Through", + artist: "Quincy Larson", + duration: "3:10", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/the-surest-way-out-is-through.mp3", + }, + { + id: 9, + title: "Chasing That Feeling", + artist: "Quincy Larson", + duration: "2:43", + src: "https://s3.amazonaws.com/org.freecodecamp.mp3-player-project/chasing-that-feeling.mp3", + }, +]; + +const audio = new Audio(); +let userData = { + songs: [...allSongs], + currentSong: null, + songCurrentTime: 0, +}; + +const playSong = (id) => { + const song = userData?.songs.find((song) => song.id === id); + audio.src = song.src; + audio.title = song.title; + + if (userData?.currentSong === null || userData?.currentSong.id !== song.id) { + audio.currentTime = 0; + } else { + audio.currentTime = userData.songCurrentTime; + } + userData.currentSong = song; + playButton.classList.add("playing"); + + audio.play(); +}; + +const pauseSong = () => { + userData.songCurrentTime = audio.currentTime; + + playButton.classList.remove("playing"); + audio.pause(); +}; + +const renderSongs = (array) => { + const songsHTML = array + .map((song)=> { + return ` +
                                                                                                  • + + +
                                                                                                    • + `; + }) + .join(""); + + playlistSongs.innerHTML = songsHTML; +}; + +--fcc-editable-region-- +const getCurrentSongIndex = () => { + +} +--fcc-editable-region-- + +playButton.addEventListener("click", () => { + if (userData?.currentSong === null) { + playSong(userData?.songs[0].id); + } else { + playSong(userData?.currentSong.id); + } +}); + +pauseButton.addEventListener("click", pauseSong); + +renderSongs(userData?.songs); +``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md deleted file mode 100644 index 06d1b7d5557..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec14d1c216aa063f0be4af.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 63ec14d1c216aa063f0be4af -title: Крок 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -You will be building a shopping cart application. The HTML and CSS are already provided, but you will need to build the JavaScript to make the page interactive. - -To start, you will need to get some of your elements from the DOM. Start by using `document.getElementById()` to get the`#cart-container`, `#products-container`, and `#dessert-card-container` elements. Store them in variables named `cartContainer`, `productsContainer`, and `dessertCards`, respectively. - -Since these will not change, remember to use `const` to declare them. - -# --hints-- - -Ви повинні використати `document.getElementById()`, щоб отримати елемент `#cart-container`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -You should assign the `#cart-container` element to a variable named `cartContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartContainer\s*=\s*document\.getElementById\(\s*('|"|`)cart-container\1\s*\)/); -``` - -Ви повинні використати `document.getElementById()`, щоб отримати елемент `#products-container`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -You should assign the `#products-container` element to a variable named `productsContainer`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+productsContainer\s*=\s*document\.getElementById\(\s*('|"|`)products-container\1\s*\)/); -``` - -Ви повинні використати `document.getElementById()`, щоб отримати елемент `#dessert-card-container`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -You should assign the `#dessert-card-container` element to a variable named `dessertCards`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+dessertCards\s*=\s*document\.getElementById\(\s*('|"|`)dessert-card-container\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md deleted file mode 100644 index 3ef66bc57d4..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec19978a066607e23439f8.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 63ec19978a066607e23439f8 -title: Крок 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Now you need to get your two buttons. Continuing the pattern, get the `#cart-btn` and `#clear-cart-btn` elements. Store them in variables named `cartBtn` and `clearCartBtn`, respectively. - -# --hints-- - -Ви повинні використати `document.getElementById()`, щоб отримати елемент `#cart-btn`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -You should assign the `#cart-btn` element to a variable named `cartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartBtn\s*=\s*document\.getElementById\(\s*('|"|`)cart-btn\1\s*\)/); -``` - -Ви повинні використати `document.getElementById()`, щоб отримати елемент `#clear-cart-btn`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -You should assign the `#clear-cart-btn` element to a variable named `clearCartBtn`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+clearCartBtn\s*=\s*document\.getElementById\(\s*('|"|`)clear-cart-btn\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md deleted file mode 100644 index 918d737e81c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1a16f930b108b8a76806.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 63ec1a16f930b108b8a76806 -title: Крок 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Next is to get your totals. Get the `#total-items`, `#subtotal`, `#taxes`, and `#total` elements. Store them in variables named `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal`, respectively. - -# --hints-- - -Ви повинні використати `document.getElementById()`, щоб отримати елемент `#total-items`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -You should assign the `#total-items` element to a variable named `totalNumberOfItems`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+totalNumberOfItems\s*=\s*document\.getElementById\(\s*('|"|`)total-items\1\s*\)/); -``` - -Ви повинні використати `document.getElementById()`, щоб отримати елемент `#subtotal`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -You should assign the `#subtotal` element to a variable named `cartSubTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartSubTotal\s*=\s*document\.getElementById\(\s*('|"|`)subtotal\1\s*\)/); -``` - -Ви повинні використати `document.getElementById()`, щоб отримати елемент `#taxes`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -You should assign the `#taxes` element to a variable named `cartTaxes`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTaxes\s*=\s*document\.getElementById\(\s*('|"|`)taxes\1\s*\)/); -``` - -Ви повинні використати `document.getElementById()`, щоб отримати елемент `#total`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -You should assign the `#total` element to a variable named `cartTotal`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+cartTotal\s*=\s*document\.getElementById\(\s*('|"|`)total\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md deleted file mode 100644 index a43fb3da395..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1bbf5584390a7d08d41f.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 63ec1bbf5584390a7d08d41f -title: Крок 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -The last element to get is the `#show-hide-cart` element. Store it in a variable named `showHideCartSpan`. - -Then, use `let` to declare a variable named `isCartShowing` and set it to `false`. - -# --hints-- - -Ви повинні використати `document.getElementById()`, щоб отримати елемент `#show-hide-cart`. - -```js -assert.match(code, /document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -You should assign the `#show-hide-cart` element to a variable named `showHideCartSpan`. Remember to use `const` to declare the variable. - -```js -assert.match(code, /const\s+showHideCartSpan\s*=\s*document\.getElementById\(\s*('|"|`)show-hide-cart\1\s*\)/); -``` - -Ви повинні використати `let`, щоб оголосити змінну під назвою `isCartShowing`. - -```js -assert.match(code, /let\s+isCartShowing/); -``` - -You should set the `isCartShowing` variable to `false`. - -```js -assert.match(code, /let\s+isCartShowing\s*=\s*false/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md deleted file mode 100644 index 64e82fd45d7..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec1cb59f2a4c0be5b6dfa0.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 63ec1cb59f2a4c0be5b6dfa0 -title: Крок 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -A shopping cart does not serve much purpose without products. Declare a `products` variable and set it to an empty array. Using an array will allow you to store multiple products. - -# --hints-- - -You should declare a `products` variable with `const`. - -```js -assert.match(code, /const\s+products/); -``` - -You should set the `products` variable to an empty array. - -```js -assert.match(code, /const\s+products\s*=\s*\[\s*\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md deleted file mode 100644 index b0e04302d2b..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec20a06fff670d37befbd9.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 63ec20a06fff670d37befbd9 -title: Крок 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -You now need to start adding products. Before you do that, you need to consider the structure of your product data. A product will need a unique identifier to distinguish it from other products, a price so people know how much it costs, and a name so people know what they are buying. You should also add a category to each product. - -Add an object to your `products` array. Give this object an `id` property set to the number `1`, a `name` property set to `Vanilla Cupcakes (6 Pack)`, a `price` property set to the number `12.99`, and a `category` property set to `Cupcake`. - -# --hints-- - -Your products array should have one value. - -```js -assert.equal(products.length, 1); -``` - -Your products array should have an object as its first value. - -```js -assert.isObject(products[0]); -``` - -Your products array should have an object with an `id` property set to the number `1`. - -```js -assert.equal(products[0].id, 1); -``` - -Your products array should have an object with a `name` property set to `Vanilla Cupcakes (6 Pack)`. - -```js -assert.equal(products[0].name, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your products array should have an object with a `price` property set to the number `12.99`. - -```js -assert.equal(products[0].price, 12.99); -``` - -Your products array should have an object with a `category` property set to `Cupcake`. - -```js -assert.equal(products[0].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md deleted file mode 100644 index b83a7e2596e..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3287b182ec0efe8a3135.md +++ /dev/null @@ -1,472 +0,0 @@ ---- -id: 63ec3287b182ec0efe8a3135 -title: Крок 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -Following that same data structure, add the products from this table (in order) to your `products` array. Increment the `id` for each product, counting up. - -| `name` | `price` | `category` | -| ------------------------------ | ------- | ----------- | -| `French Macaroon` | `3.99` | `Macaroon` | -| `Pumpkin Cupcake` | `3.99` | `Cupcake` | -| `Chocolate Cupcake` | `5.99` | `Cupcake` | -| `Chocolate Pretzels (4 Pack)` | `10.99` | `Pretzel` | -| `Strawberry Ice Cream` | `2.99` | `Ice Cream` | -| `Chocolate Macaroons (4 Pack)` | `9.99` | `Macaroon` | -| `Strawberry Pretzel` | `4.99` | `Pretzel` | -| `Butter Pecan Ice Cream` | `2.99` | `Ice Cream` | -| `Rocky Road Ice Cream` | `2.99` | `Ice Cream` | -| `Vanilla Macaroons (5 Pack)` | `11.99` | `Macaroon` | -| `Lemon Cupcakes (4 Pack)` | `12.99` | `Cupcake` | - -# --hints-- - -Your second object in the `products` array should have an `id` property set to the number `2`. - -```js -assert.equal(products[1].id, 2); -``` - -Your second object in the `products` array should have a `name` property set to `French Macaroon`. - -```js -assert.equal(products[1].name, 'French Macaroon'); -``` - -Your second object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[1].price, 3.99); -``` - -Your second object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[1].category, 'Macaroon'); -``` - -Your third object in the `products` array should have an `id` property set to the number `3`. - -```js -assert.equal(products[2].id, 3); -``` - -Your third object in the `products` array should have a `name` property set to `Pumpkin Cupcake`. - -```js -assert.equal(products[2].name, 'Pumpkin Cupcake'); -``` - -Your third object in the `products` array should have a `price` property set to the number `3.99`. - -```js -assert.equal(products[2].price, 3.99); -``` - -Your third object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[2].category, 'Cupcake'); -``` - -Your fourth object in the `products` array should have an `id` property set to the number `4`. - -```js -assert.equal(products[3].id, 4); -``` - -Your fourth object in the `products` array should have a `name` property set to `Chocolate Cupcake`. - -```js -assert.equal(products[3].name, 'Chocolate Cupcake'); -``` - -Your fourth object in the `products` array should have a `price` property set to the number `5.99`. - -```js -assert.equal(products[3].price, 5.99); -``` - -Your fourth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[3].category, 'Cupcake'); -``` - -Your fifth object in the `products` array should have an `id` property set to the number `5`. - -```js -assert.equal(products[4].id, 5); -``` - -Your fifth object in the `products` array should have a `name` property set to `Chocolate Pretzels (4 Pack)`. - -```js -assert.equal(products[4].name, 'Chocolate Pretzels (4 Pack)'); -``` - -Your fifth object in the `products` array should have a `price` property set to the number `10.99`. - -```js -assert.equal(products[4].price, 10.99); -``` - -Your fifth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[4].category, 'Pretzel'); -``` - -Your sixth object in the `products` array should have an `id` property set to the number `6`. - -```js -assert.equal(products[5].id, 6); -``` - -Your sixth object in the `products` array should have a `name` property set to `Strawberry Ice Cream`. - -```js -assert.equal(products[5].name, 'Strawberry Ice Cream'); -``` - -Your sixth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[5].price, 2.99); -``` - -Your sixth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[5].category, 'Ice Cream'); -``` - -Your seventh object in the `products` array should have an `id` property set to the number `7`. - -```js -assert.equal(products[6].id, 7); -``` - -Your seventh object in the `products` array should have a `name` property set to `Chocolate Macaroons (4 Pack)`. - -```js -assert.equal(products[6].name, 'Chocolate Macaroons (4 Pack)'); -``` - -Your seventh object in the `products` array should have a `price` property set to the number `9.99`. - -```js -assert.equal(products[6].price, 9.99); -``` - -Your seventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[6].category, 'Macaroon'); -``` - -Your eighth object in the `products` array should have an `id` property set to the number `8`. - -```js -assert.equal(products[7].id, 8); -``` - -Your eighth object in the `products` array should have a `name` property set to `Strawberry Pretzel`. - -```js -assert.equal(products[7].name, 'Strawberry Pretzel'); -``` - -Your eighth object in the `products` array should have a `price` property set to the number `4.99`. - -```js -assert.equal(products[7].price, 4.99); -``` - -Your eighth object in the `products` array should have a `category` property set to `Pretzel`. - -```js -assert.equal(products[7].category, 'Pretzel'); -``` - -Your ninth object in the `products` array should have an `id` property set to the number `9`. - -```js -assert.equal(products[8].id, 9); -``` - -Your ninth object in the `products` array should have a `name` property set to `Butter Pecan Ice Cream`. - -```js -assert.equal(products[8].name, 'Butter Pecan Ice Cream'); -``` - -Your ninth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[8].price, 2.99); -``` - -Your ninth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[8].category, 'Ice Cream'); -``` - -Your tenth object in the `products` array should have an `id` property set to the number `10`. - -```js -assert.equal(products[9].id, 10); -``` - -Your tenth object in the `products` array should have a `name` property set to `Rocky Road Ice Cream`. - -```js -assert.equal(products[9].name, 'Rocky Road Ice Cream'); -``` - -Your tenth object in the `products` array should have a `price` property set to the number `2.99`. - -```js -assert.equal(products[9].price, 2.99); -``` - -Your tenth object in the `products` array should have a `category` property set to `Ice Cream`. - -```js -assert.equal(products[9].category, 'Ice Cream'); -``` - -Your eleventh object in the `products` array should have an `id` property set to the number `11`. - -```js -assert.equal(products[10].id, 11); -``` - -Your eleventh object in the `products` array should have a `name` property set to `Vanilla Macaroons (5 Pack)`. - -```js -assert.equal(products[10].name, 'Vanilla Macaroons (5 Pack)'); -``` - -Your eleventh object in the `products` array should have a `price` property set to the number `11.99`. - -```js -assert.equal(products[10].price, 11.99); -``` - -Your eleventh object in the `products` array should have a `category` property set to `Macaroon`. - -```js -assert.equal(products[10].category, 'Macaroon'); -``` - -Your twelfth object in the `products` array should have an `id` property set to the number `12`. - -```js -assert.equal(products[11].id, 12); -``` - -Your twelfth object in the `products` array should have a `name` property set to `Lemon Cupcakes (4 Pack)`. - -```js -assert.equal(products[11].name, 'Lemon Cupcakes (4 Pack)'); -``` - -Your twelfth object in the `products` array should have a `price` property set to the number `12.99`. - -```js -assert.equal(products[11].price, 12.99); -``` - -Your twelfth object in the `products` array should have a `category` property set to `Cupcake`. - -```js -assert.equal(products[11].category, 'Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - ---fcc-editable-region-- -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - -]; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md deleted file mode 100644 index 9672d752f87..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec3427fc3e9214c9ed2a14.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 63ec3427fc3e9214c9ed2a14 -title: Крок 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now that you have your list of products, you can use JavaScript to insert them into the HTML. With this approach, if you decide to add more products, the HTML will automatically reflect that. - -Start by calling the `.forEach` method of your `products` array. Use arrow syntax to create an empty callback function. - -# --hints-- - -You should call the `.forEach` method of your `products` array. - -```js -assert.match(code, /products\.forEach\(/); -``` - -You should use arrow syntax to create an empty callback function. - -```js -assert.match(code, /\(\s*\)\s*=>\s*\{\s*\}/) -``` - -Передайте порожню функцію зворотного виклику до методу `.forEach`. - -```js -assert.match(code, /products\.forEach\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md deleted file mode 100644 index 3d0e239bfd8..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec36f6133df7160be3ec66.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 63ec36f6133df7160be3ec66 -title: Крок 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -Remember that you can use destructuring to extract multiple values from an array or object in a single statement. - -For the first parameter of your callback function, destructure the `name`, `id`, `price`, and `category` properties from the object passed in. - -# --hints-- - -You should use destructuring to declare `name`, `id`, `price`, and `category` parameters. For this test, order matters. - -```js -assert.match(code, /\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}/); -``` - -Your destructuring should be the first parameter of the callback function. - -```js -assert.match(code, /products.forEach\(\s*\(\s*\{\s*name\s*,\s*id\s*,\s*price\s*,\s*category\s*\}\s*\)\s*=>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - () => {} -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md deleted file mode 100644 index 048198144de..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ec47b454495519739486a7.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 63ec47b454495519739486a7 -title: Крок 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -You need to display the available products in your HTML. Start by using the addition assignment operator to add an empty template literal string to the `innerHTML` property of the `dessertCards` variable. - -# --hints-- - -You should use access the `innerHTML` property of the `dessertCards` variable. - -```js -assert.match(code, /dessertCards\.innerHTML/); -``` - -You should use the addition assignment operator on the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*/); -``` - -You should add an empty template literal string to the `innerHTML` property. - -```js -assert.match(code, /dessertCards\.innerHTML\s*\+=\s*`\s*`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md deleted file mode 100644 index fa5e63bee55..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d38a5d29d0696f8d820.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 63ee5d38a5d29d0696f8d820 -title: Крок 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -In your template literal, create a `div` element with a class of `dessert-card`. In that `div`, create an `h2` element and give it the text of the `name` variable. - -# --hints-- - -You should create a `div` element. - -```js -assert.isAtLeast(document.querySelectorAll('div')?.length, 12); -``` - -Your `div` element should have a class of `dessert-card`. - -```js -assert.equal(document.querySelectorAll('.dessert-card')?.length, 12); -``` - -You should create an `h2` element. - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.length, 12); -``` - -Your `h2` element should have the text of the `name` variable. - -```js -assert.equal(document.querySelectorAll('h2')[0]?.textContent, 'Vanilla Cupcakes (6 Pack)'); -``` - -Your `h2` element should be inside the `div` element. - -```js -assert.equal(document.querySelectorAll('div h2')?.length, 12); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` - - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md deleted file mode 100644 index fab86a5a571..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5d8f9e7168076e932fe2.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63ee5d8f9e7168076e932fe2 -title: Крок 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -After your `h2` element, create two `p` elements. Give the first a `class` of `dessert-price`, and the text of the `price` variable with a dollar sign in front of it. Give the second a `class` of `product-category`, and the text `Category:` followed by the value of the `category` variable. - -# --hints-- - -You should create two `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card')?.children.length, 3); -assert.equal(document.querySelector('.dessert-card')?.querySelectorAll('p')?.length, 2) -``` - -Your `p` elements should come after your `h2` element. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[0].tagName, 'H2'); -assert.equal(document.querySelector('.dessert-card')?.children[1].tagName, 'P'); -assert.equal(document.querySelector('.dessert-card')?.children[2].tagName, 'P'); -``` - -Your first `p` element should have a `class` of `dessert-price`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].className, 'dessert-price'); -``` - -Your first `p` element should have the text of the `price` variable with a dollar sign in front of it. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[1].textContent, '$12.99'); -``` - -Your second `p` element should have a `class` of `product-category`. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].className, 'product-category'); -``` - -Your second `p` element should have the text `Category:` followed by the value of the `category` variable. - -```js -assert.equal(document.querySelector('.dessert-card')?.children[2].textContent, 'Category: Cupcake'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    - -
                                                                                                    - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md deleted file mode 100644 index e4c5dd7d9ac..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5e0f08e82208364c4128.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -id: 63ee5e0f08e82208364c4128 -title: Крок 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Finally, after your `p` elements, create a `button` element. Give it an `id` set to the value of the `id` variable, a `class` of `btn add-to-cart-btn`, and use `Add to cart` for the text. - -# --hints-- - -You should create a `button` element. - -```js -assert.equal(document.querySelectorAll('.dessert-card button')?.length, 12); -``` - -Your `button` element should come after your `p` elements. - -```js -assert.equal(document.querySelector('.dessert-card button')?.previousElementSibling?.tagName, 'P'); -assert.isNull(document.querySelector('.dessert-card button')?.nextElementSibling); -``` - -Your `button` element should have an `id` set to the value of the `id` variable. - -```js -assert.equal(document.querySelector('.dessert-card button')?.id, '1'); -``` - -Your `button` element should have a `class` of `btn add-to-cart-btn`. - -```js -assert.include(document.querySelector('.dessert-card button')?.className, 'btn'); -assert.include(document.querySelector('.dessert-card button')?.className, 'add-to-cart-btn'); -``` - -Your `button` element should have the text `Add to cart`. - -```js -assert.equal(document.querySelector('.dessert-card button')?.textContent?.trim(), 'Add to cart'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - ---fcc-editable-region-- -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md deleted file mode 100644 index 0884b3ea1e0..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5ea8be892e0955ab346c.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 63ee5ea8be892e0955ab346c -title: Крок 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -You are already familiar with an HTML `class`, but JavaScript also has a class. In JavaScript, a class is like a blueprint for creating objects. It allows you to define a set of properties and methods, and instantiate (or create) new objects with those properties and methods. - -The `class` keyword is used to declare a class. Here is an example of declaring a `Computer` class: - -```js -class Computer {}; -``` - -Declare a `ShoppingCart` class. - -# --hints-- - -Ви повинні оголосити змінну `ShoppingCart`. - -```js -assert.match(code, /ShoppingCart/); -``` - -Ви повинні використати ключове слово `class`, щоб оголосити клас `ShoppingCart`. - -```js -assert.match(code, /class\s+ShoppingCart\s*/); -``` - -Клас `ShoppingCart` повинен бути порожнім. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md deleted file mode 100644 index b2402ce2579..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee5fc113bcb20a5db9214b.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 63ee5fc113bcb20a5db9214b -title: Крок 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Classes have a special `constructor` method, which is called when a new instance of the class is created. The `constructor` method is a great place to initialize properties of the class. Here is an example of a class with a `constructor` method: - -```js -class Computer { - constructor() { - } -} -``` - -Add an empty `constructor` method to the `ShoppingCart` class. - -# --hints-- - -You should add a `constructor` method to the `ShoppingCart` class. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*/) -``` - -Метод `constructor` повинен бути порожнім. - -```js -assert.match(code, /class\s+ShoppingCart\s*\{\s*constructor\(\s*\)\s*\{\s*\}\s*\}/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md deleted file mode 100644 index 8cef07401aa..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee611d478dca0b77f6a393.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 63ee611d478dca0b77f6a393 -title: Крок 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -The `this` keyword in JavaScript is used to refer to the current object. Depending on where `this` is used, what it references changes. In the case of a class, it refers to the instance of the object being constructed. You can use the `this` keyword to set the properties of the object being instantiated. Here is an example: - -```js -class Computer { - constructor() { - this.ram = 16; - } -} -``` - -In your constructor, use the `this` keyword to set the `items` property to an empty array. Also, set the `total` property to `0`, and the `taxRate` property to `8.25`. - -# --hints-- - -You should use the `this` keyword to set the `items` property of your class to an empty array. - -```js -assert.match(code, /this\.items/); -const cart = new ShoppingCart(); -assert.isArray(cart.items); -assert.isEmpty(cart.items); -``` - -You should use the `this` keyword to set the `total` property of your class to `0`. - -```js -assert.match(code, /this\.total/); -const cart = new ShoppingCart(); -assert.equal(cart.total, 0); -``` - -You should use the `this` keyword to set the `taxRate` property of your class to `8.25`. - -```js -assert.match(code, /this\.taxRate/); -const cart = new ShoppingCart(); -assert.equal(cart.taxRate, 8.25); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - - } -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md deleted file mode 100644 index f6bd6c0f2a8..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63ee7c664f9b65137d925c8a.md +++ /dev/null @@ -1,321 +0,0 @@ ---- -id: 63ee7c664f9b65137d925c8a -title: Крок 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -Your `ShoppingCart` class needs the ability to add items. Create an empty `addItem` method, which takes two parameters: `id` and `products`. Creating a method might look like this: - -```js -class Computer { - constructor() { - this.ram = 16; - } - - addRam(amount) { - this.ram += amount; - } -} -``` - -The first parameter, `id`, is the `id` of the product the user has added to their cart. The second parameter, `products`, is an array of product objects. By using a parameter instead of directly referencing your existing `products` array, this method will be more flexible if you wanted to add additional product lists in the future. - -# --hints-- - -Your `ShoppingCart` class should have an `addItem` method. - -```js -const cart = new ShoppingCart(); -assert.isFunction(cart.addItem); -``` - -Your `addItem` method should take two parameters: `id` and `products`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)/); -``` - -Метод `addItem` повинен бути порожнім. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /\(\s*id\s*,\s*products\s*\)\s*\{\s*\}/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - ---fcc-editable-region-- -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - -}; ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md deleted file mode 100644 index 1a0eaa85816..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea5cea403a81a68ae493c.md +++ /dev/null @@ -1,331 +0,0 @@ ---- -id: 63eea5cea403a81a68ae493c -title: Крок 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -You need to find the product that the user is adding to the cart. Remember that arrays have a `.find()` method. In your `addItem` function, declare a `product` variable, and assign it the value of calling the `.find()` method on the `products` array. - -For the callback to `.find()`, pass a function that takes a single parameter `item`, and returns whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -# --hints-- - -You should declare a `product` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=/); -``` - -You should call the `.find()` method on your `products` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(/); -``` - -Передайте функцію зворотного виклику до методу `.find()`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(/); -``` - -The callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)/); -``` - -The callback function should return whether the `id` property of `item` is strictly equal to the `id` parameter passed to `addItem`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /products\.find\(\s*function\s*\(\s*item\s*\)\s*\{\s*return\s+item\.id\s*===\s*id\s*;?\s*\}/); -``` - -You should assign the value of the `.find()` method to the `product` variable. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /product\s*=\s*products\.find\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md deleted file mode 100644 index eed81c4b577..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea817673c8e1c22927fa6.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 63eea817673c8e1c22927fa6 -title: Крок 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Use `const` and destructuring to extract `name` and `price` variables from `product`. - -# --hints-- - -You should use destructuring to get the `name` and `price` variables. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /\{\s*name\s*,\s*price\s*\}/); -``` - -Ви повинні використати `const`, щоб оголосити змінні `name` та `price`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}/); -``` - -You should use destructuring to get the `name` and `price` variables from `product`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s*\{\s*name\s*,\s*price\s*\}\s*=\s*product;?\b/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md deleted file mode 100644 index f911124668a..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eea8e1e143ae1d098c8c9d.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 63eea8e1e143ae1d098c8c9d -title: Крок 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Now you need to push the `product` into the cart's `items` array. Remember to use the `this` keyword. - -# --hints-- - -You should call the `push` method on the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.push\(/); -``` - -Remember you need to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.push\(/); -``` - -You should `push` the `product` variable to the `items` array. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.deepEqual(cart.items, [products[0]]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md deleted file mode 100644 index 811ed291609..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eeb8e86becbf1e75c2cb0d.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 63eeb8e86becbf1e75c2cb0d -title: Крок 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -You now need a total count of each product that the user has in the cart. Declare a `totalCountPerProduct` variable, and assign it an empty object. - -# --hints-- - -You should declare a `totalCountPerProduct` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\s*=/); -``` - -Ви повинні використати `const`, щоб оголосити `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=/); -``` - -You should assign an empty object to `totalCountPerProduct`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+totalCountPerProduct\s*=\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md deleted file mode 100644 index abdc68a79e2..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eedebb0ec0231ff1cede1a.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63eedebb0ec0231ff1cede1a -title: Крок 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Use the `.forEach()` method to loop through the `items` array. Pass an empty callback function that takes a single parameter `dessert`. - -# --hints-- - -You should use the `.forEach()` method on your `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /items\.forEach\(/); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(/); -``` - -Передайте функцію зворотного виклику до методу `.forEach()`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(/); -``` - -Your callback function should take a single parameter. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)/); -``` - -Функція зворотного виклику повинна бути порожньою. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /this\.items\.forEach\(\s*function\s*\(\s*dessert\s*\)\s*\{\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md deleted file mode 100644 index 875f8519793..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efdbc22a0c56070beabed7.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 63efdbc22a0c56070beabed7 -title: Крок 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -In your `forEach` callback, you need to update the `totalCountPerProduct` object. Using the `id` of the current `dessert` as your property, update the value of the property to be the current value plus one. Do not use the addition assignment operator for this. - -# --hints-- - -You should use dot notation to access the `id` property of `dessert`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /dessert\.id/); -``` - -You should use bracket notation to access the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the assignment operator to update the value of the property of `totalCountPerProduct` that corresponds to `dessert.id`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=/); -``` - -You should update the value of `totalCountPerProduct` to be the current value plus one. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\+\s*1/); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md deleted file mode 100644 index d0232b5823d..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63efe370bbfc4a08d500118e.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 63efe370bbfc4a08d500118e -title: Крок 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -You now have a small bug. When you try to access a property of an object and the property doesn't exist, you get `undefined`. This means if the dessert isn't already present in the `totalCountPerProduct` object, you end up trying to add `1` to `undefined`, which results in `NaN`. - -To fix this, you can use the `||` operator to set the value to `0` if it doesn't exist. Wrap your right-hand `totalCountPerProduct[data.id]` in parentheses, and add `|| 0` to the end of the expression. - -# --hints-- - -You should wrap your right-hand `totalCountPerProduct[data.id]` in parentheses. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]/); -``` - -You should use the `||` operator. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*/); -``` - -You should use `0` as your fallback value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)/); -``` - -You should still add `1` to the value. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /totalCountPerProduct\[\s*dessert\.id\s*\]\s*=\s*\(\s*totalCountPerProduct\[\s*dessert\.id\s*\]\s*\|\|\s*0\s*\)\s*\+\s*1/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1; - }) - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md deleted file mode 100644 index 8c9a52cfdf5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff02f00e69a0b2ac10b43.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 63eff02f00e69a0b2ac10b43 -title: Крок 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Now you need to get prepared to update the display with the new product the user added. Declare a `currentProductCount` variable, and assign it the value of the `totalCountPerProduct` object's property matching the `id` of `product`. - -# --hints-- - -You should declare a `currentProductCount` variable in your `addItem` function. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=/); -``` - -Ви повинні використати `const`, щоб оголосити `currentProductCount`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCount\s*=/); -``` - -You should assign the value of `totalCountPerProduct[product.id]` to `currentProductCount`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*=\s*totalCountPerProduct\[product\.id\]/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md deleted file mode 100644 index f88097f8cbf..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63eff98ffb1d5a0d24ec79cb.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 63eff98ffb1d5a0d24ec79cb -title: Крок 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -You haven't written the code to generate the HTML yet, but if a product has already been added to the user's cart then there will be a matching element which you'll need. - -Use `.getElementById()` to get the matching element - you'll be setting the `id` value to `product-count-for-id${product.id}`, so use a template literal to query that value. - -Assign your query to a `currentProductCountSpan` variable. - -# --hints-- - -Ви повинні оголосити змінну `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=/); -``` - -Ви повинні використати `const`, щоб оголосити `currentProductCountSpan`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /const\s+currentProductCountSpan\s*=/); -``` - -Ви повинні використати `document.getElementById()`, щоб отримати відповідний елемент. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /document\.getElementById\(/); -``` - -You should use a template literal to query the `id` value. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /document\.getElementById\(\s*`product-count-for-id\$\{(product\.)?id\}`\s*\)/); -``` - -You should assign the value of `document.getElementById()` to `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCountSpan\s*=\s*document\.getElementById\(/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md deleted file mode 100644 index a5d30115972..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63effe558c87a70e7072e447.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 63effe558c87a70e7072e447 -title: Крок 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -The behaviour of the `addItem` method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use `undefined` for both the truthy and falsy expressions to avoid a syntax error. - -# --hints-- - -You should check if `currentProductCount` is greater than `1`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1/); -``` - -You should use a ternary operator with your `currentProductCount > 1` condition. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?/); -``` - -You should use `undefined` as the truthy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should use `undefined` as the falsy expression. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined\s*:\s*undefined/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md deleted file mode 100644 index 66e670a810c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0165121a9181342d5bc66.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 63f0165121a9181342d5bc66 -title: Крок 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -For your truthy expression, removing the `undefined`, you need to update the `textContent` of the `currentProductCountSpan` to be the `currentProductCount` followed by an `x`. Use a template literal to do so. - -# --hints-- - -You should remove the `undefined` from your truthy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*undefined/); -``` - -You should access the `textContent` property of `currentProductCountSpan`. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent/); -``` - -You should use template literal syntax to update the `textContent` to be `${currentProductCount}x`. - -```js -const afterAdd = code.split("addItem")[1]; -assert.match(afterAdd, /currentProductCount\s*>\s*1\s*\?\s*currentProductCountSpan\.textContent\s*=\s*`\$\{currentProductCount\}x`\s*:/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 ? undefined : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md deleted file mode 100644 index b59a911c86a..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f017b4ad028a148eb713c0.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 63f017b4ad028a148eb713c0 -title: Крок 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -For your falsy expression, you'll need to add new HTML to your `productsContainer`. Start by removing the `undefined`, then use the addition assignment operator and template literal syntax to add a `div` with the `class` set to `product` and the `id` set to `dessert${id}` to the `innerHTML` property of the `productsContainer`. - -# --hints-- - -You should remove the `undefined` from your falsy expression. - -```js -const cart = new ShoppingCart(); -assert.notMatch(cart.addItem.toString(), /undefined/); -``` - -You should use the addition assignment operator to add HTML to the `productsContainer`. Remember that HTML goes in the `innerHTML` property. - -```js -const cart = new ShoppingCart(); -assert.match(cart.addItem.toString(), /productsContainer\.innerHTML\s*\+=\s*/); -``` - -You should use template literal syntax to add HTML to the `productsContainer`. - -```js -assert.match(code, /productsContainer\.innerHTML\s*\+=\s*`/); -``` - -You should add a `div` to the `productsContainer`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.tagName, "DIV"); -``` - -Your `div` should have the `class` set to `product`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.className, "product"); -``` - -Your `div` should have the `id` set to `dessert${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -assert.equal(productsContainer.children?.[0]?.id, "dessert1"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : undefined; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md deleted file mode 100644 index 3e62e710747..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01861f813e01564c95315.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 63f01861f813e01564c95315 -title: Крок 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Inside your `div`, add two `p` elements. Set the text of the second `p` element to be the value of the `price` variable. - -# --hints-- - -You should add two `p` elements inside your `div` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children.length, 2); -assert.equal(div?.children[0].tagName, 'P'); -assert.equal(div?.children[1].tagName, 'P'); -``` - -Your second `p` element should have the text of the `price` variable. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -assert.equal(div?.children[1].textContent, '12.99'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    - -
                                                                                                    - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md deleted file mode 100644 index 6eb3d6c4208..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f018f04e487e164dc27bd9.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 63f018f04e487e164dc27bd9 -title: Крок 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -In your first `p` element, add a `span` element. Give the `span` a class of `product-count` and an `id` of `product-count-for-id${id}`. Then, after the span, give your `p` element the text of the `name` variable. - -# --hints-- - -Your first `p` element should have a `span` element. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children.length, 1); -assert.equal(p.children[0].tagName, 'SPAN'); -``` - -Your `span` element should have a `class` of `product-count`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].className, 'product-count'); -``` - -Your `span` element should have an `id` of `product-count-for-id${id}`. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.children[0].id, 'product-count-for-id1'); -``` - -Your first `p` element should have the text of the `name` variable. This should be outside the span. - -```js -const cart = new ShoppingCart(); -cart.addItem(1, products); -const div = document.querySelector('.product'); -const p = div.querySelector('p'); -assert.equal(p.innerText.trim(), 'Vanilla Cupcakes (6 Pack)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - ---fcc-editable-region-- - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } ---fcc-editable-region-- -}; -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md deleted file mode 100644 index 4d7412f963d..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f01c9791a0aa1751c73760.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 63f01c9791a0aa1751c73760 -title: Крок 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -There is still more functionality that your `ShoppingCart` class needs, but first you need to be able to test the code you have currently written. You'll need to instantiate a new `ShoppingCart` object and assign it to a variable. Here is an example of instantiating the `Computer` class from earlier examples: - -```js -const myComputer = new Computer(); -``` - -Declare a `cart` variable, and assign it a new `ShoppingCart` object. Note the use of the `new` keyword when instantiating the object. - -# --hints-- - -Ви повинні використати `const`, щоб оголосити змінну `cart`. - -```js -assert.match(code, /const\s+cart\s*=/); -``` - -You should use the `new` keyword to instantiate a new `ShoppingCart` object. - -```js -assert.match(code, /new\s+ShoppingCart\s*\(\s*\)/); -``` - -You should assign your new `ShoppingCart` object to the `cart` variable. - -```js -assert.isTrue(cart instanceof ShoppingCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } -}; - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md deleted file mode 100644 index cc5268bcd2c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0224ceb16dc196d2c860a.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f0224ceb16dc196d2c860a -title: Крок 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -You need to get all of the `Add to cart` buttons that you added to the DOM earlier. Declare an `addToCartBtns` variable, and assign it the value of calling the `getElementsByClassName()` method on the `document` object, passing in the string `add-to-cart-btn`. - -# --hints-- - -Ви повинні використати `const`, щоб оголосити змінну `addToCartBtns`. - -```js -assert.match(code, /const\s+addToCartBtns\s*=/); -``` - -You should call the `getElementsByClassName()` method on the `document` object. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(/); -``` - -Передайте рядок `add-to-cart-btn` до методу `getElementsByClassName()`. - -```js -assert.match(code, /document\s*\.\s*getElementsByClassName\s*\(\s*('|"|`)add-to-cart-btn\1\s*\)/); -``` - -You should assign the value returned by the `getElementsByClassName()` method to the `addToCartBtns` variable. - -```js -assert.deepEqual(addToCartBtns, document.getElementsByClassName('add-to-cart-btn')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } -}; - -const cart = new ShoppingCart(); ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md deleted file mode 100644 index f438ec31d20..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f026d041bc6c1a3d5cba0f.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f026d041bc6c1a3d5cba0f -title: Крок 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -You need to iterate through the buttons in your `addToCartBtns` variable. However, `.getElementsByClassName()` returns a Collection, which does not have a `forEach` method. - -Use the spread operator on the `addToCartBtns` variable to convert it into an array. Then, use the `forEach` method to iterate through the array. Do not pass a callback function yet. - -# --hints-- - -You should use the spread operator on the `addToCartBtns` variable. - -```js -assert.match(code, /\.\.\.addToCartBtns/); -``` - -You should spread the `addToCartBtns` variable into an array. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]/); -``` - -You should use the `forEach` method on the array you created. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(/); -``` - -Не передавайте функцію зворотного виклику до методу `forEach`. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md deleted file mode 100644 index 6927ed8d0dc..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0284532742c1b26c7a052.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0284532742c1b26c7a052 -title: Крок 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Add your callback function to the `forEach` method. It should take a `btn` parameter. Then, in the callback, add an event listener to the `btn`. The event listener should listen for a `click` event, and should take another callback with an `event` parameter. The second callback should be empty. - -# --hints-- - -You should use arrow syntax to add a callback function to the `forEach` method which takes a `btn` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{/); -``` - -You should add an event listener to the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `btn` variable. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*/); -``` - -You should add an empty callback function to the event listener. Remember to give it an `event` parameter. - -```js -assert.match(code, /\[\s*\.\.\.addToCartBtns\s*\]\s*\.\s*forEach\s*\(\s*\(?\s*btn\s*\)?\s*=>\s*\{\s*btn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*event\s*\)\s*=>\s*\{\s*\}\s*\)\s*\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md deleted file mode 100644 index 5fd4838195f..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0289df84a581bbdbd29b7.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f0289df84a581bbdbd29b7 -title: Крок 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -In your event listener callback, call the `.addItem()` method of your `cart` object, and pass in the `event.target.id`. Remember that the `id` here will be a string, so you need to convert it to a number. - -Pass your `products` array as the second argument. - -# --hints-- - -Your event listener callback should call the `.addItem()` method of your `cart` object. - -```js -assert.match(code, /cart\.addItem\(/); -``` - -Your `.addItem()` method should be called with the `event.target.id` as the first argument. Remember to convert the `id` to a number using `Number()`. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*/); -``` - -Your `.addItem()` method should be called with the `products` array as the second argument. - -```js -assert.match(code, /cart\.addItem\(\s*Number\(\s*event\.target\.id\s*\)\s*,\s*products\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - - }) - } -); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md deleted file mode 100644 index 3c4d0b4ac16..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0295e673b661ccb299e8a.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 63f0295e673b661ccb299e8a -title: Крок 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -You need a way to access the total number of items in the cart. The best way to do this is to add another method to your `ShoppingCart` class, rather than accessing the `items` array directly. - -Add a `getCounts` method to the `ShoppingCart` class. It should return the number of items in the `items` array. - -# --hints-- - -Your `ShoppingCart` class should have a `getCounts` method. - -```js -assert.isFunction(cart.getCounts); -``` - -Remember to use the `this` keyword to access the `items` array. - -```js -const afterCounts = code.split('getCounts')[1]; -assert.match(afterCounts, /this\s*\.\s*items\s*\.\s*length/); -``` - -Your `getCounts` method should return the number of items in the `items` array. - -```js -assert.equal(cart.getCounts(), 0); -cart.addItem(1, products); -assert.equal(cart.getCounts(), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md deleted file mode 100644 index 15ecc4db892..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f029b96b9e9e1df93be951.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 63f029b96b9e9e1df93be951 -title: Крок 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -Now you can update the total number of items on the webpage. Assign the value of your `cart` object's `.getCounts()` method to the `textContent` of the `totalNumberOfItems` variable. - -# --hints-- - -You should access the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent/) -``` - -You should assign the value of your `cart` object's `.getCounts()` method to the `textContent` property of the `totalNumberOfItems` variable. - -```js -assert.match(code, /totalNumberOfItems\s*\.\s*textContent\s*=\s*cart\s*\.\s*getCounts\(\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md deleted file mode 100644 index 0311bfb7cbf..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02a4ef92d711ec1ff618c.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 63f02a4ef92d711ec1ff618c -title: Крок 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -You also need to update the total price of the cart when the user adds an item. Create a `calculateTotal` method in the `ShoppingCart` class. - -In that method, declare a `subTotal` variable and use the `reduce` method on the `items` array to calculate the sum of the `price` property of each item in the array. Use `total` and `item` as the parameters for your callback. - -Remember to set your initial value in the `reduce` method. - -# --hints-- - -You should create a `calculateTotal` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTotal); -``` - -Your `calculateTotal` method should have a `subTotal` variable declared with `const`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+subTotal\s*=/); -``` - -Your `calculateTotal` method should use the `reduce` method on the `items` array. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce/); -``` - -Your `reduce` callback should use `total` and `item` as the first and second parameter. Remember to use arrow function syntax. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>/); -``` - -Your `reduce` callback should return the sum of `total` and `item.price`. Use an implicit return. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /\(\s*total\s*,\s*item\s*\)\s*=>\s*total\s*\+\s*item\.price/); -``` - -Your `reduce` call should have an initial value of `0`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /this\s*\.\s*items\s*\.\s*reduce\s*\(\s*\(total,\s*item\)\s*=>\s*total\s*\+\s*item\.price\s*,\s*0\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md deleted file mode 100644 index 1fafb1e2372..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02b22cce1c11fe9604381.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f02b22cce1c11fe9604381 -title: Крок 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Part of the total cost will include the tax, so you need to calculate that as well. Create a `calculateTaxes` method in the `ShoppingCart` class. This method should take an `amount` parameter. - -# --hints-- - -You should create a `calculateTaxes` method in the `ShoppingCart` class. - -```js -assert.isFunction(cart.calculateTaxes); -``` - -Your `calculateTaxes` method should take an `amount` parameter. - -```js -assert.match(cart.calculateTaxes.toString(), /\(\s*amount\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md deleted file mode 100644 index 4c8f00d913d..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02bdeb9b428208b97eb6b.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f02bdeb9b428208b97eb6b -title: Крок 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -For clarity, wrap the `taxRate / 100` calculation in parentheses. - -# --hints-- - -You should divide the `taxRate` by 100 in your `calculateTaxes` method. Remember to use the `this` keyword. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /this\s*\.\s*taxRate\s*\/\s*100/); -``` - -You should wrap the `this.taxRate / 100` calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)/); -``` - -You should multiply the `amount` parameter by the `taxRate` divided by 100 in your `calculateTaxes` method. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /amount\s*\*\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)|\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount/); -``` - -Your `calculateTaxes` method should return the value of the `taxRate` (divided by 100, to convert it to a percent) multiplied by the `amount` parameter. - -```js -console.log(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -assert.equal(cart.calculateTaxes(10), (cart.taxRate / 100) * 10); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md deleted file mode 100644 index b4a22a87cd8..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f02c6e18773921ba50aa53.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 63f02c6e18773921ba50aa53 -title: Крок 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Because of the way computers store and work with numbers, calculations involving decimal numbers can result in some strange behavior. For example, `0.1 + 0.2` is not equal to `0.3`. This is because computers store decimal numbers as binary fractions, and some binary fractions cannot be represented exactly as decimal fractions. - -We want to clean up the number result from your calculation. Wrap your calculation in parentheses (don't include the `return` statement!) and call the `.toFixed()` method on it. Pass the `.toFixed()` method the number `2` as an argument. This will round the number to two decimal places and return a string. - -# --hints-- - -You should wrap your calculation in parentheses. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)/) -``` - -You should call the `.toFixed()` method on your calculation. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\(/) -``` - -Передайте число `2` як аргумент до методу `.toFixed()`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return (this.taxRate / 100) * amount; - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md deleted file mode 100644 index dd68f9fa1fb..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0311f5ea9382388d6124f.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 63f0311f5ea9382388d6124f -title: Крок 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -The issue with `.toFixed()` returning a string is that you want to be able to perform calculations with the tax rate. To fix this, you can pass the `.toFixed()` call (including the calculation) to the `parseFloat()` function. This will convert the fixed string back into a number, preserving the existing decimal places. - -Pass your `.toFixed()` call to `parseFloat()`. - -# --hints-- - -Передайте свої розрахунки (за винятком інструкції `return`) до `parseFloat()`. - -```js -const afterCalculateTaxes = code.split('calculateTaxes')[1]; -assert.match(afterCalculateTaxes, /return\s*parseFloat\(\s*\(\s*\(\s*this\s*\.\s*taxRate\s*\/\s*100\s*\)\s*\*\s*amount\s*\)\s*\.\s*toFixed\s*\(\s*2\s*\)\s*\)/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - calculateTaxes(amount) { - return ((this.taxRate / 100) * amount).toFixed(2); - } ---fcc-editable-region-- - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md deleted file mode 100644 index b5fb60d8267..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f033fdb1fbcc254999fcc3.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 63f033fdb1fbcc254999fcc3 -title: Крок 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Your cart currently isn't visible on the webpage. To make it visible, start by adding an event listener to the `cartBtn` variable, listening for the click event. The callback does not need any parameters. - -# --hints-- - -You should add an event listener to the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(/); -``` - -You should listen for a `click` event on the `cartBtn` variable. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*/); -``` - -You should add an empty callback function (using arrow syntax) to the event listener. Remember that it does not need any parameters. - -```js -assert.match(code, /cartBtn\s*\.\s*addEventListener\s*\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md deleted file mode 100644 index 07fa25ef95f..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03446c2ed3e264be6c7fc.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 63f03446c2ed3e264be6c7fc -title: Крок 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Start by inverting the value of `isCartShowing`. Remember that you can use the logical not operator `!` to invert the value of a boolean. Assign the inverted value to `isCartShowing`. - -# --hints-- - -You should invert the value of `isCartShowing`. - -```js -assert.match(code, /!isCartShowing/); -``` - -You should assign the inverted value of `isCartShowing` to `isCartShowing`. - -```js -assert.match(code, /isCartShowing\s*=\s*!isCartShowing/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md deleted file mode 100644 index ccd138862b2..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0348a54a177272071a595.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 63f0348a54a177272071a595 -title: Крок 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now assign the `textContent` of the `showHideCartSpan` variable the result of a ternary expression which checks if `isCartShowing` is true. If it is, set the `textContent` to `Hide`, otherwise set it to `Show`. - -# --hints-- - -You should use the assignment operator on the `textContent` property of the `showHideCartSpan` variable. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Hide` if `isCartShowing` is true. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*/) -``` - -You should set the `textContent` of the `showHideCartSpan` variable to `Show` if `isCartShowing` is false. - -```js -assert.match(code, /showHideCartSpan\s*\.\s*textContent\s*=\s*isCartShowing\s*\?\s*('|"|`)Hide\1\s*:\s*('|"|`)Show\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md deleted file mode 100644 index 3f220d50346..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f034d012f74627ce538d3a.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 63f034d012f74627ce538d3a -title: Крок 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Finally, update the `display` property of the `style` object of the `cartContainer` variable to another ternary which checks if `isCartShowing` is true. If it is, set the `display` property to `block`, otherwise set it to `none`. - -Now you should be able to see your cart and add items to it. - -# --hints-- - -You should access the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display/) -``` - -You should use the assignment operator on the `display` property of the `style` property of the `cartContainer` variable. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*/) -``` - -You should use ternary syntax to check if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `block` if `isCartShowing` is true. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*/) -``` - -You should set the `display` property of the `style` property of the `cartContainer` variable to `none` if `isCartShowing` is false. - -```js -assert.match(code, /cartContainer\s*\.\s*style\s*\.\s*display\s*=\s*isCartShowing\s*\?\s*('|"|`)block\1\s*:\s*('|"|`)none\2/) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - }) - } -); - ---fcc-editable-region-- -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - -}); ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md deleted file mode 100644 index c1043b885c9..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03686c5ea863533ec71f4.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f03686c5ea863533ec71f4 -title: Крок 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Declare a variable `tax` and assign it the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument. - -# --hints-- - -Use `const` to declare a variable named `tax`. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s+tax\s*=/); -``` - -Assign the value of calling your new `.calculateTaxes()` method, passing `subTotal` as the argument, to the `tax` variable. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /const\s*tax\s*=\s*this\s*\.\s*calculateTaxes\s*\(\s*subTotal\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md deleted file mode 100644 index 3cdfd55d330..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f036ec91fdf238c90665f5.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f036ec91fdf238c90665f5 -title: Крок 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Update the `total` value to be the sum of the `subTotal` and `tax` values. - -# --hints-- - -You should update the `total` value. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total/); -``` - -You should set the `total` value to be the sum of the `subTotal` and `tax` values. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\s*=\s*(subTotal\s*\+\s*tax|tax\s*\+\s*subTotal)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md deleted file mode 100644 index 9698e95f0dc..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0370b340915399d31e5eb.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 63f0370b340915399d31e5eb -title: Крок 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -You're going to update the HTML in this method as well. Set the `textContent` of the `cartSubTotal` to be the value of `subTotal` to a fixed 2 decimal places. Use template literal syntax to add the dollar sign to the beginning of the value. - -# --hints-- - -You should access the `textContent` property of the `cartSubTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartSubTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `subTotal` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /subTotal\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartSubTotal` element to your template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartSubTotal\.textContent\s*=\s*`\$\$\{subTotal\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md deleted file mode 100644 index 45d70e9b856..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0374d5351223a747c301d.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 63f0374d5351223a747c301d -title: Крок 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Following the same pattern as your `cartSubTotal`, update the `cartTaxes` to display the `tax` value, and your `cartTotal` to display the `total` property. - -# --hints-- - -You should access the `textContent` property of the `cartTaxes` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTaxes\.textContent/); -``` - -You should call the `.toFixed()` method on the `tax` variable, passing `2` as the argument. - -```js -assert.match(cart.calculateTotal.toString(), /tax\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTaxes` element to `tax.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTaxes\.textContent\s*=\s*`\$\$\{tax\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should access the `textContent` property of the `cartTotal` element. - -```js -assert.match(cart.calculateTotal.toString(), /cartTotal\.textContent/); -``` - -You should call the `.toFixed()` method on the `total` variable, passing `2` as the argument. Remember to use the `this` keyword. - -```js -assert.match(cart.calculateTotal.toString(), /this\.total\.toFixed\(\s*2\s*\)/); -``` - -You should use template literal syntax to add the dollar sign before your `.toFixed()` call. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -You should set the `textContent` of the `cartTotal` element to your `total.toFixed` template string. - -```js -const afterCalculateTotal = code.split('calculateTotal')[1]; -assert.match(afterCalculateTotal, /cartTotal\.textContent\s*=\s*`\$\$\{this\.total\.toFixed\(\s*2\s*\)\}\`/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md deleted file mode 100644 index b7d6ae61dd4..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f0378e173e3c3b7638b528.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f0378e173e3c3b7638b528 -title: Крок 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Finally, return the value of the `total` property. Remember your `this` keyword. - -# --hints-- - -Your `calculateTotal` method should return the value of the `total` property. - -```js -assert.equal(cart.calculateTotal(), 0); -cart.addItem(1, products); -assert.approximately(cart.calculateTotal(), 14.06, 0.1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - ---fcc-editable-region-- - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - - } ---fcc-editable-region-- -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md deleted file mode 100644 index 22efa982301..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038a0ae041d3c5b0cdf23.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 63f038a0ae041d3c5b0cdf23 -title: Крок 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Your last feature is to allow users to clear their cart. Add a `clearCart()` method to your `ShoppingCart` class. - -# --hints-- - -Your `ShoppingCart` class should have a `clearCart` method. - -```js -assert.isFunction(cart.clearCart); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md deleted file mode 100644 index 5332f4047e8..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md +++ /dev/null @@ -1,371 +0,0 @@ ---- -id: 63f038e671d3f73d5a041973 -title: Крок 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -The first thing you should do is check if the `items` array is empty. If it is, display an `alert` to the user with the text `Your shopping cart is already empty`, then return from the function. - -Remember that `0` is a falsy value, so you can use the `!` operator to check if the array is empty. - -After displaying the alert, return from the function to stop execution. - -# --hints-- - -You should create an `if` statement that checks if the `items` array is empty, using the negation operator. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/); -``` - -Your `if` statement should display an `alert` to the user with the text `Your shopping cart is already empty`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/); -``` - -Your `if` statement should return from the function. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md deleted file mode 100644 index b894a26088f..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 63f039dbcef7673e4e758fa3 -title: Крок 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Browsers have a built-in `confirm()` function which displays a confirmation prompt to the user. `confirm()` accepts a string, which is the message displayed to the user. It returns `true` if the user confirms, and `false` if the user cancels. - -Declare a variable `isCartCleared` and assign it the value of calling `confirm()` with the string `"Are you sure you want to clear all items from your shopping cart?"`. - -# --hints-- - -Ви повинні використати `const`, щоб оголосити змінну `isCartCleared`. - -```js -const afterClearCart = code.split('clearCart()')[1]; -assert.match(afterClearCart, /const\s+isCartCleared\s*=/); -``` - -You should call the `confirm()` function. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(/); -``` - -Передайте рядок `Are you sure you want to clear all items from your shopping cart?` до функції `confirm()`. - -```js -assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -You should assign the value of the `confirm()` function to the `isCartCleared` variable. - -```js -assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md deleted file mode 100644 index 4f269bdba88..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md +++ /dev/null @@ -1,378 +0,0 @@ ---- -id: 63f03a7143a6ef3f7f3344f0 -title: Крок 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -You only want to clear the cart if the user confirms the prompt. Create an `if` statement that checks if the user confirmed the prompt. - -In the `if` statement, set the `items` property back to an empty array, then set the `total` property to `0`. - -# --hints-- - -You should create an `if` statement that checks if the user confirmed the prompt. Remember that you can check the truthiness of `isCartCleared` directly. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/); -``` - -Your `if` statement should set the `items` property back to an empty array. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/); -``` - -Your `if` statement should set the `total` property to `0`. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md deleted file mode 100644 index dc8048b7ecc..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md +++ /dev/null @@ -1,368 +0,0 @@ ---- -id: 63f03ac2b428b2404a5a7518 -title: Крок 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -You also need to start clearing the HTML. Set the `innerHTML` property of the `productsContainer` back to an empty string. - -# --hints-- - -In your `if` statement, you should set the `innerHTML` property of the `productsContainer` back to an empty string. - -```js -assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md deleted file mode 100644 index bfb5e09e540..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 63f03af535682e4138fdb915 -title: Крок 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Set the `textContent` of the `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal` elements all to the number `0`. - -# --hints-- - -You should set the `textContent` of the `totalNumberOfItems` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartSubTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTaxes` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/); -``` - -You should set the `textContent` of the `cartTotal` element to `0`. - -```js -const secondIf = cart.clearCart.toString().split('if')[2]; -const inIf = secondIf.split('}')[0]; -assert.match(inIf, /cartTotal\.textContent\s*=\s*0/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - ---fcc-editable-region-- - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - - } - } ---fcc-editable-region-- - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md deleted file mode 100644 index b1fe92ad56c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md +++ /dev/null @@ -1,744 +0,0 @@ ---- -id: 63f03b1ed5ab15420c057463 -title: Крок 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Your final step is to make your clear button functional. Add a `click` event listener to the `clearCartBtn`. For the callback, you can pass in `cart.clearCart` directly. - -However, doing so will not work, because the context of `this` will be the `clearCartBtn` element. You need to bind the `clearCart` method to the `cart` object. - -You can do this by passing `cart.clearCart.bind(cart)` as the callback. - -And with that, your shopping cart project is complete! - -# --hints-- - -You should add an event listener to your `clearCartBtn` element. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(/); -``` - -Your event listener should listen for the `click` event. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/); -``` - -Your event listener should take `cart.clearCart.bind(cart)` as the callback. - -```js -assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -# --solutions-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - clearCart() { - if (!this.items.length) { - alert("Your shopping cart is already empty"); - return; - } - - const isCartCleared = confirm( - "Are you sure you want to clear all items from your shopping cart?" - ); - - if (isCartCleared) { - this.items = []; - this.total = 0; - productsContainer.innerHTML = ""; - totalNumberOfItems.textContent = 0; - cartSubTotal.textContent = 0; - cartTaxes.textContent = 0; - cartTotal.textContent = 0; - } - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - cart.calculateTotal(); - }) - } -); - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); - -clearCartBtn.addEventListener("click", cart.clearCart.bind(cart)); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md deleted file mode 100644 index 3e56145aef2..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f6721d5110af243ef8f3d9.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 63f6721d5110af243ef8f3d9 -title: Крок 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Now call your `.calculateTotal()` method inside your `forEach` loop. - -# --hints-- - -You should call `cart.calculateTotal()` inside your `forEach` loop. - -```js -const afterForEach = code.split('[...addToCartBtns].forEach(')[1]; -assert.match(afterForEach, /cart\.calculateTotal\(\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp Shopping Cart - - - -
                                                                                                    -

                                                                                                    Desserts Page

                                                                                                    -
                                                                                                    -
                                                                                                    - -
                                                                                                    - -
                                                                                                    -

                                                                                                    Total number of items: 0

                                                                                                    -

                                                                                                    Subtotal: $0

                                                                                                    -

                                                                                                    Taxes: $0

                                                                                                    -

                                                                                                    Total: $0

                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - - - -``` - -```css -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --dark-grey: #1b1b32; - --light-grey: #f5f6f7; - --black: #000; - --white: #fff; - --grey: #3b3b4f; - --golden-yellow: #fecc4c; - --yellow: #ffcc4c; - --gold: #feac32; - --orange: #ffac33; - --dark-orange: #f89808; -} - -body { - background-color: var(--dark-grey); -} - -.title { - color: var(--light-grey); - text-align: center; - margin: 25px 0; -} - -#dessert-card-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: center; -} - -.dessert-card { - background-color: var(--light-grey); - padding: 15px; - text-align: center; - border-radius: 15px; - margin: 20px 10px; -} - -.dessert-price { - font-size: 1.2rem; -} - -.btn { - display: block; - cursor: pointer; - width: 100px; - color: var(--dark-grey); - background-color: var(--gold); - background-image: linear-gradient(var(--golden-yellow), var(--orange)); - border-color: var(--gold); - border-width: 3px; -} - -.btn:hover { - background-image: linear-gradient(var(--yellow), var(--dark-orange)); -} - -#cart-btn { - position: absolute; - top: 0; - right: 0; -} - -.add-to-cart-btn { - margin: 30px auto 10px; -} - -#cart-container { - display: none; - position: absolute; - top: 60px; - right: 0; - background-color: var(--light-grey); - width: 200px; - height: 400px; - border: 8px double var(--black); - border-radius: 15px; - text-align: center; - font-size: 1.2rem; - overflow-y: scroll; -} - -.product { - margin: 25px 0; -} - -.product-count { - display: inline-block; - margin-right: 10px; -} - -.product-category { - margin: 10px 0; -} - -@media (min-width: 768px) { - #dessert-card-container { - flex-direction: row; - } - - .dessert-card { - flex: 1 0 21%; - } - - #cart-container { - width: 300px; - } -} -``` - -```js -const cartContainer = document.getElementById("cart-container"); -const productsContainer = document.getElementById("products-container"); -const dessertCards = document.getElementById("dessert-card-container"); -const cartBtn = document.getElementById("cart-btn"); -const clearCartBtn = document.getElementById("clear-cart-btn"); -const totalNumberOfItems = document.getElementById("total-items"); -const cartSubTotal = document.getElementById("subtotal"); -const cartTaxes = document.getElementById("taxes"); -const cartTotal = document.getElementById("total"); -const showHideCartSpan = document.getElementById("show-hide-cart"); -let isCartShowing = false; - -const products = [ - { - id: 1, - name: "Vanilla Cupcakes (6 Pack)", - price: 12.99, - category: "Cupcake", - }, - { - id: 2, - name: "French Macaroon", - price: 3.99, - category: "Macaroon", - }, - { - id: 3, - name: "Pumpkin Cupcake", - price: 3.99, - category: "Cupcake", - }, - { - id: 4, - name: "Chocolate Cupcake", - price: 5.99, - category: "Cupcake", - }, - { - id: 5, - name: "Chocolate Pretzels (4 Pack)", - price: 10.99, - category: "Pretzel", - }, - { - id: 6, - name: "Strawberry Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 7, - name: "Chocolate Macaroons (4 Pack)", - price: 9.99, - category: "Macaroon", - }, - { - id: 8, - name: "Strawberry Pretzel", - price: 4.99, - category: "Pretzel", - }, - { - id: 9, - name: "Butter Pecan Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 10, - name: "Rocky Road Ice Cream", - price: 2.99, - category: "Ice Cream", - }, - { - id: 11, - name: "Vanilla Macaroons (5 Pack)", - price: 11.99, - category: "Macaroon", - }, - { - id: 12, - name: "Lemon Cupcakes (4 Pack)", - price: 12.99, - category: "Cupcake", - }, -]; - -products.forEach( - ({ name, id, price, category }) => { - dessertCards.innerHTML += ` -
                                                                                                    -

                                                                                                    ${name}

                                                                                                    -

                                                                                                    $${price}

                                                                                                    -

                                                                                                    Category: ${category}

                                                                                                    - -
                                                                                                    - `; - } -); - -class ShoppingCart { - constructor() { - this.items = []; - this.total = 0; - this.taxRate = 8.25; - } - - addItem(id, products) { - const product = products.find((item) => item.id === id); - const { name, price } = product; - this.items.push(product); - - const totalCountPerProduct = {}; - this.items.forEach((dessert) => { - totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1; - }) - - const currentProductCount = totalCountPerProduct[product.id]; - const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`); - - currentProductCount > 1 - ? currentProductCountSpan.textContent = `${currentProductCount}x` - : productsContainer.innerHTML += ` -
                                                                                                    -

                                                                                                    - ${name} -

                                                                                                    -

                                                                                                    ${price}

                                                                                                    -
                                                                                                    - `; - } - - getCounts() { - return this.items.length; - } - - calculateTaxes(amount) { - return parseFloat(((this.taxRate / 100) * amount).toFixed(2)); - } - - calculateTotal() { - const subTotal = this.items.reduce((total, item) => total + item.price, 0); - const tax = this.calculateTaxes(subTotal); - this.total = subTotal + tax; - cartSubTotal.textContent = `$${subTotal.toFixed(2)}`; - cartTaxes.textContent = `$${tax.toFixed(2)}`; - cartTotal.textContent = `$${this.total.toFixed(2)}`; - return this.total; - } -}; - -const cart = new ShoppingCart(); -const addToCartBtns = document.getElementsByClassName("add-to-cart-btn"); - ---fcc-editable-region-- -[...addToCartBtns].forEach( - (btn) => { - btn.addEventListener("click", (event) => { - cart.addItem(Number(event.target.id), products); - totalNumberOfItems.textContent = cart.getCounts(); - - }) - } -); ---fcc-editable-region-- - -cartBtn.addEventListener("click", () => { - isCartShowing = !isCartShowing; - showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; - cartContainer.style.display = isCartShowing ? "block" : "none"; -}); -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md deleted file mode 100644 index a2ce162457c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-001.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9a -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. - -In JavaScript, you can access the DOM by referencing the global `document` object. - -To view the DOM, log it to the console with `console.log(document)`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast
                                                                                                    - Lunch
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md deleted file mode 100644 index aab244748d6..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-002.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9b -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -In our HTML document, we have a form element with an `id` attribute: `
                                                                                                    ` - -To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. - -The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    - -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - - -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md deleted file mode 100644 index 31afd7303fc..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-003.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9c -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. - -Forms have an `onsubmit` event that can execute a function when the form is submitted. - -For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. - -Assign a function named `calculate` to the `onsubmit` event of your form. - -You will create the `calculate` function later. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md deleted file mode 100644 index bcd3b1bc287..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-004.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9d -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. Here is an example of an empty function called `square`: - -```js -function square() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(typeof calculate === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md deleted file mode 100644 index 8a02a67b570..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-005.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9e -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -By default, `onsubmit` will pass the event object as a parameter to the function it calls. People usually call it `e`, short for event. Update the `calculate()` function to accept `e` as parameter. - -Here is an example of an empty function called `square` that takes a `number` as a parameter: - -```js -function square(number) {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md deleted file mode 100644 index 0cd5d1525fd..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-006.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9f -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. - -Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md deleted file mode 100644 index ee8e8356f0d..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-007.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da0 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. - -To access elements with a certain class name, we use the `getElementsByClassName()` method. - -Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md deleted file mode 100644 index 9b80e0f827c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-008.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da1 -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md deleted file mode 100644 index c5a2856f2c3..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-009.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da2 -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -To make the document objects easier to handle, let's turn them into an array. Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md deleted file mode 100644 index 40f6a846fd5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-010.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da3 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md deleted file mode 100644 index 725bff25987..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-011.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da4 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md deleted file mode 100644 index fead88a0598..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-012.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da5 -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. - -The `map()` method allows us to do exactly that. - -Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .toString() - .replace(/\s/g, '') - .match( - /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md deleted file mode 100644 index 714497fddbb..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-013.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da6 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -Now we need to provide a function to `map()` that will be performed on each item of the array. - -This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: - -```js -function(meal){} -``` - -Enter in the above function as an argument in between the parentheses of the `.map()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md deleted file mode 100644 index 7d58167b80c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-014.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da7 -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. - -If you want, console log `total` to see what results you are getting. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md deleted file mode 100644 index 4a199951818..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-015.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da8 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md deleted file mode 100644 index 6058cea614a..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-016.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da9 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md deleted file mode 100644 index 46dfade8b55..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-017.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daa -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. - -Chain the `reduce()` method to the `Array.from()` expression. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md deleted file mode 100644 index 065b5dce513..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-018.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dab -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: - -```js -function(accumulator, currentValue) { /* code to run */ } -``` - -or using arrow functions: - -```js -(accumulator, currentValue) => { /* code to run */ } -``` - -Insert the above callback function as an argument in the `.reduce()` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md deleted file mode 100644 index 448c7702610..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-019.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dac -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. - -Here is an example of a `reduce()` method with an empty object as its initial value: - -```js -arr.reduce((accumulator, currentValue) => { - /* code to run */ -}, {}); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md deleted file mode 100644 index 4134f0401a2..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-020.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dad -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. - -We can use the reduce function as follows: - -```js -arr.reduce((accumulator, currentValue) => { - return accumulator + currentValue; -}, 0); -``` - -At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, since `arr[0] = 1 = currentValue`. - -At `arr[1]`, the function is `(1, 3) => 1 + 3`, - -Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. - -In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md deleted file mode 100644 index c9d4f5bd8ad..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-021.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 5e302e80e003129199103c78 -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` - -You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. - -When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md deleted file mode 100644 index b36ed2d97b6..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-022.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5e302e8ce003129199103c79 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -Now let's simplify the `reduce()` callback function by refactoring it. - -Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. - -So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. - -Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md deleted file mode 100644 index 8825fbe6dd0..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-023.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dae -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. - -Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. - -If you inspect the Female radio button you will notice its id: `` - -Create a variable named `maxCalories` and set it equal to the document element with the id of `female`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md deleted file mode 100644 index 1e19c715fcf..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-024.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44daf -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` - -Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md deleted file mode 100644 index 21d83417535..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-025.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db0 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. - -For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: - -```js -if (5 - 3 === 4) { - return 'Yes'; -} else { - return 'No'; -} -``` - -`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md deleted file mode 100644 index abe960e3120..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-026.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db1 -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Now that we have `total` and `maxCalories`, we need to find out the difference between them. - -Create a variable named `difference` and set it equal to `total - maxCalories` - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md deleted file mode 100644 index ad3abc0bfe5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-027.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db2 -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. - -To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). - -If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. - -Use the same ternary syntax that you used to determine `maxCalories`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md deleted file mode 100644 index 2dbdd8b547b..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-028.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db3 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
                                                                                                    `. - -We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. - -Create a variable named `output` and set it equal to this division element with the `id` of `output`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md deleted file mode 100644 index 87062f28e7f..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-029.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db4 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Now it's time to create the HTML elements that we will add inside of `output`. - -To create an element, use `createElement()`. For example: - -```js -const myHeading1 = document.createElement('h1') -``` - -Create an `h3` element and assign it to a variable named `result`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md deleted file mode 100644 index 90ad3c91cb4..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-030.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db5 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -Next, we will create a text node that we will later append to the `result` element. - -JavaScript has a function called `createTextNode()` to accomplish this. For example: - -```js -const myText = document.createTextNode("Hello world!") -``` - -Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md deleted file mode 100644 index b93248efe69..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-031.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db6 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -We can now use the `difference` variable that we created above. - -Insert the `difference` variable inside the parentheses of `.createTextNode()` - -If you want to see what the text currently looks like, try `console.log(resultText)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md deleted file mode 100644 index fd08248b5f0..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-032.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db7 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Notice how if `total` is less than `maxCalories`, `difference` is a negative number. - -We want to show the absolute value of the difference so it displays "300" rather than "-300". - -Wrap the `difference` in a `Math.abs()` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md deleted file mode 100644 index f066a2b3607..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-033.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db8 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md deleted file mode 100644 index d2e8c9a31c3..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-034.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44db9 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Next we want to add the text from the `surplusOrDeficit` variable that we previously created. - -Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md deleted file mode 100644 index 1311c2ac849..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-035.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dba -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. - -Some people consider this a little cumbersome and prefer to use template literals instead. - -Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. - -For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. - -Convert the data inside of `createTextNode()` to be a template literal. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md deleted file mode 100644 index 923d7d02e23..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-036.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbb -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: - -```js -result.appendChild(resultText); -``` - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md deleted file mode 100644 index 09da32b6cb5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-037.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbc -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -Similarly, append the `result` to the `output` element with the `appendChild()` method. - -Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md deleted file mode 100644 index ccb8660bf13..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-038.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbd -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Next, let's create and add a horizontal rule (`hr`) element to the output. - -Create an `hr` element and assign it to a variable named `line`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md deleted file mode 100644 index e0f9bd9c47c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-039.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbe -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Add the `line` to the `output` element using the `appendChild()` method. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md deleted file mode 100644 index 4c4b069fb43..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-040.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbf -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -Let's create a few more HTML elements to add to the `output`. - -Create an `h4` element and assign it to a variable named `recommended`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md deleted file mode 100644 index 0becd375fa5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-041.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc0 -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -Create a text node and assign it to a variable named `recommendedText`. - -This is similar to how your created the `resultText` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md deleted file mode 100644 index fd2d846ab52..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-042.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc1 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. - -Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". - -This is similar to template literal syntax previously used to create `resultText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md deleted file mode 100644 index 9e9d9c9c3f2..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-043.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc2 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -Append the `recommendedText` node to the `recommended` element. - -This is similar to how the `resultText` is appended to `result` previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md deleted file mode 100644 index 9264e8ac9cf..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-044.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc3 -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Append the `recommended` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md deleted file mode 100644 index 0fd8978f093..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-045.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc4 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. - -Create an `h4` element and assign it to a variable named `consumed`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md deleted file mode 100644 index 6bb2536f422..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-046.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc5 -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. - -For example: - -```js -consumed.innerHTML = `Hello world`; -``` - -Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md deleted file mode 100644 index 29d043f4c6e..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-047.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc6 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Append the `consumed` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md deleted file mode 100644 index c34dcad8f68..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-048.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc7 -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Now it's time to add some styling which can be added directly as attributes or classes. - -In our CSS file, we have a styling rule for any elements with the class name `green-text`. - -On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. - -Now if you submit the form again and inspect the `result` element, you will see it as `

                                                                                                    ` and notice that the text is now green. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md deleted file mode 100644 index 7298971ffec..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-049.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc8 -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. - -For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. - -Set the `class` attribute of the `output` element equal to a class named `bordered-class`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md deleted file mode 100644 index 1b0bd348910..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-050.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc9 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. - -Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. - -The `calculate()` function is now finished! - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                                                                    -
                                                                                                    -

                                                                                                    Calorie Counter

                                                                                                    -
                                                                                                    - Sex -
                                                                                                    - - - -
                                                                                                    - - -
                                                                                                    -
                                                                                                    -
                                                                                                    -
                                                                                                    - Breakfast -
                                                                                                    - Lunch -
                                                                                                    - Dinner -
                                                                                                    - - - -
                                                                                                    -
                                                                                                    -
                                                                                                    - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md deleted file mode 100644 index 56bbb142804..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-051.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dca -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. - -In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: - -```html - - - - -
                                                                                                    -

                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md deleted file mode 100644 index db8f9bc95c1..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-052.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcb -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -We want a function to run every time the user clicks the "Add Entry" button. - -Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: - -```js -function() {} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md deleted file mode 100644 index 886f041422c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-053.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcc -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Inside the function, create an `input` document element and assign it to a variable named `foodInput`. - -This is similar to how you created the `result` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md deleted file mode 100644 index 6860d68731d..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-054.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcd -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Set the `placeholder` property of the `foodInput` equal to `'food name'`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md deleted file mode 100644 index 89e37a9f626..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-055.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dce -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. - -In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. - -Add the class name `food-control` to the `foodInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md deleted file mode 100644 index e0ab30e27b5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-056.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcf -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -Notice that parent container of all of the inputs has an `id` of `entries`: `
                                                `. - -Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. - -This is similar to the other `appendChild()` methods that you have used previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md deleted file mode 100644 index ea1faf6c59c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-057.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd0 -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md deleted file mode 100644 index 594af428356..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-058.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd1 -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. - -This is similar to how to set the class of the `output` element previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md deleted file mode 100644 index 962a0309894..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-059.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd2 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -The `calorieInput` element should only accept numbers that are 0 or above. - -Set the `min` attribute of `calorieInput` to `0`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md deleted file mode 100644 index eac60b49fce..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-060.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd3 -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. - -We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md deleted file mode 100644 index 7ffb7021744..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-061.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd4 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. - -To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md deleted file mode 100644 index 8e15285d2a9..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-062.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd5 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. - -The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md deleted file mode 100644 index df36314c4ae..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-063.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd6 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. - -Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md deleted file mode 100644 index 1e5b3e9b048..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-064.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd7 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. - -# --hints-- - -See description above for instructions. - -```js -assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md deleted file mode 100644 index 7a941b6559c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-065.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd8 -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -Create a variable named `clearOutput` and set it equal to a blank arrow function: - -```js -const clearOutput = () => {} -``` - -This is similar to `function clearOutput () {}`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearOutput === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md deleted file mode 100644 index e6a2d2c6337..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-066.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd9 -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -We need to remove the contents inside of element with the `id` of `output`. - -In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md deleted file mode 100644 index f8984120835..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-067.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dda -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. - -Remove the `bordered-class` class. For example: - -```js -document.getElementById('my-div').classList.remove('my-class') -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md deleted file mode 100644 index 93a258c395b..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-068.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddb -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. - -In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/clearOutput\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md deleted file mode 100644 index 6a07e9aa83b..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-069.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddc -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearForm === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md deleted file mode 100644 index 88284a00280..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-070.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddd -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. - -Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. - -This is similar to how you declared the `total` variable previously in the `calculate` method. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md deleted file mode 100644 index 9cc201d5194..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-071.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dde -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. - -Add `foodInputs.forEach()`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md deleted file mode 100644 index 8044dac1e60..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-072.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddf -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -We need to provide a callback function in the parentheses of `forEach()`. - -This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. - -In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md deleted file mode 100644 index dd34b193b4c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-073.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de0 -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. - -Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. - -This is similar to how you declared the `foodInputs` variable previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md deleted file mode 100644 index 652c8f99281..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-074.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de1 -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md deleted file mode 100644 index b3cf00545fa..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-075.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de2 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. - -Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md deleted file mode 100644 index ead4dfe0e77..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/step-076.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de3 -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Congratulations! Have fun playing with your completed calorie counter. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
                                                -
                                                -

                                                Calorie Counter

                                                -
                                                - Sex -
                                                - - - -
                                                - - -
                                                -
                                                -
                                                -
                                                - Breakfast -
                                                - Lunch -
                                                - Dinner -
                                                - - - -
                                                -
                                                -
                                                - - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md deleted file mode 100644 index 08bc2a4aa43..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-001.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 5d79253297c0ebb149ea9fed -title: Step 1 -challengeType: 0 -dashedName: step-1 ---- - -# --description-- - -In functional programming, we prefer immutable values over mutable values. - -Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. - -Start by creating an empty `infixToFunction` object using `const`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md deleted file mode 100644 index 3159f1d2410..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-002.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 5d7925323be8848dbc58a07a -title: Step 2 -challengeType: 0 -dashedName: step-2 ---- - -# --description-- - -Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md deleted file mode 100644 index c5dbbab705c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-003.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792532f631702ae6d23e11 -title: Step 3 -challengeType: 0 -dashedName: step-3 ---- - -# --description-- - -Now return the sum of `x` and `y` using the `return` keyword. - -# --hints-- - -See description above for instructions. - -```js -assert(add(1, 2) === 3 && add(100, 2000) === 2100); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md deleted file mode 100644 index 0a9d327d798..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-004.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5d7925329445167ecc2ac9c9 -title: Step 4 -challengeType: 0 -dashedName: step-4 ---- - -# --description-- - -In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. - -Assign `add` to a new variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md deleted file mode 100644 index 4e85d64fbe2..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-005.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792532b07918c3a5904913 -title: Step 5 -challengeType: 0 -dashedName: step-5 ---- - -# --description-- - -Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: - -```js -function(x) { - return x -} -``` - -First, remove the `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md deleted file mode 100644 index a9aa387addd..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-006.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 5d792533cc8b18b6c133edc7 -title: Step 6 -challengeType: 0 -dashedName: step-6 ---- - -# --description-- - -Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: - -```js -const fn = function(x) { - return x; -} - -fn(); -``` - -Assign the anonymous function to the variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md deleted file mode 100644 index 68c44b16619..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-007.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 5d7925337954ed57a565a135 -title: Step 7 -challengeType: 0 -dashedName: step-7 ---- - -# --description-- - -This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. - -Rewrite `addVar` using ES6's arrow syntax: - -```js -const fn = (x, y) => x; -``` - -Note that the value is returned implicitly. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md deleted file mode 100644 index 676f6c6f4ff..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-008.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d79253352e33dd59ec2f6de -title: Step 8 -challengeType: 0 -dashedName: step-8 ---- - -# --description-- - -Add the key `+` to `infixToFunction` and assign it the value `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(infixToFunction['+'].toString() === addVar.toString()); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md deleted file mode 100644 index c44846417a5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-009.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 5d792533d31e4f7fad33011d -title: Step 9 -challengeType: 0 -dashedName: step-9 ---- - -# --description-- - -In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md deleted file mode 100644 index 2096072d738..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-010.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d792533e7707b9645d7b540 -title: Step 10 -challengeType: 0 -dashedName: step-10 ---- - -# --description-- - -Remove the now redundant `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof addVar === 'undefined'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md deleted file mode 100644 index 526e706eb08..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-011.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 5d79253378595ec568f70ab6 -title: Step 11 -challengeType: 0 -dashedName: step-11 ---- - -# --description-- - -Add similar definitions for `-`, `*` and `/` in `infixToFunction`. - -# --hints-- - -See description above for instructions. - -```js -assert( - infixToFunction['-'](10, 2) === 8 && - infixToFunction['*'](10, 10) === 100 && - infixToFunction['/'](100, 10) === 10 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md deleted file mode 100644 index 37432637ac6..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-012.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5d7925330918ae4a2f282e7e -title: Step 12 -challengeType: 0 -dashedName: step-12 ---- - -# --description-- - -Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md deleted file mode 100644 index 3d09b3967f2..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-013.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5d792533ed00e75d129e1b18 -title: Step 13 -challengeType: 0 -dashedName: step-13 ---- - -# --description-- - -`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). - -Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. - -This is how you would pass the `-` function: - -```js -str.replace(regex, infixToFunction["-"]) -``` - -# --hints-- - -See description above for instructions. - -```js -assert(infixEval('ab', /(a)b/) === 'aba'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md deleted file mode 100644 index 0926459ef14..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-014.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5d792533a5c42fb4d1a4b70d -title: Step 14 -challengeType: 0 -dashedName: step-14 ---- - -# --description-- - -Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md deleted file mode 100644 index 23968d2e070..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-015.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5d79253358e8f646cbeb2bb0 -title: Step 15 -challengeType: 0 -dashedName: step-15 ---- - -# --description-- - -Change the `"+"` in the call to `infixToFunction` to `fn`. - -`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md deleted file mode 100644 index f3dd1211e6a..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-016.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5d792533bb38fab70b27f527 -title: Step 16 -challengeType: 0 -dashedName: step-16 ---- - -# --description-- - -`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". - -Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). - -# --hints-- - -See description above for instructions. - -```js -const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; -assert( - infixEval('23+35', regex) === '58' && - infixEval('100-20', regex) === '80' && - infixEval('10*10', regex) === '100' && - infixEval('120/6', regex) === '20' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md deleted file mode 100644 index e295114e777..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-017.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5d79253386060ed9eb04a070 -title: Step 17 -challengeType: 0 -dashedName: step-17 ---- - -# --description-- - -The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. - -To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. - -Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md deleted file mode 100644 index 1af15a10b8e..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-018.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d792533717672657b81aa69 -title: Step 18 -challengeType: 0 -dashedName: step-18 ---- - -# --description-- - -When defining an arrow function with a single argument, the parentheses can be omitted: - -```js -const greeting = name => `Hello !`; -``` - -Define a function `highPrecedence` which takes a single argument `str` and returns it. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('a') === 'a'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md deleted file mode 100644 index 5c2d8560932..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-019.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5d7925335ab63018dcec11fe -title: Step 19 -challengeType: 0 -dashedName: step-19 ---- - -# --description-- - -Arrow functions can have multiple statements: - -```js -const fn = (x, y) => { - const result = x + y; - return result; // explicit return statement required -}; -``` - -Use this syntax for the `highPrecedence` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md deleted file mode 100644 index 1ddd40ce5d8..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-020.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5d7925330f300c342315066d -title: Step 20 -challengeType: 0 -dashedName: step-20 ---- - -# --description-- - -In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md deleted file mode 100644 index 3bfba3454a9..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-021.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5d792533aa6443215c9b16bf -title: Step 21 -challengeType: 0 -dashedName: step-21 ---- - -# --description-- - -Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md deleted file mode 100644 index 333b8bcb122..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-022.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925334c5e22586dd72962 -title: Step 22 -challengeType: 0 -dashedName: step-22 ---- - -# --description-- - -The ternary operator has the following syntax: - -```js -const result = condition ? valueIfTrue : valueIfFalse; -const result = 1 === 1 ? 1 : 0; // 1 -const result = 9 > 10 ? "Yes" : "No"; // "No" -``` - -Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2') === '' && - highPrecedence('2+2') === '2+2' && - code.includes('?') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md deleted file mode 100644 index c5f666b8a05..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-023.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5d79253307ecd49e030bdcd1 -title: Step 23 -challengeType: 0 -dashedName: step-23 ---- - -# --description-- - -Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. - -Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2*2') === '8' && - highPrecedence('2*2') === '4' && - highPrecedence('2+2') === '2+2' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md deleted file mode 100644 index c837d8e94e1..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-024.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5d792534257122211d3043af -title: Step 24 -challengeType: 0 -dashedName: step-24 ---- - -# --description-- - -Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. - -# --hints-- - -See description above for instructions. - -```js -assert(spreadsheetFunctions['']('x') === 'x'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md deleted file mode 100644 index 58109dce7a4..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-025.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d7925346f4f2da6df4354a6 -title: Step 25 -challengeType: 0 -dashedName: step-25 ---- - -# --description-- - -Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md deleted file mode 100644 index 313db4427d6..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-026.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5d792534cac2dbe0a719ea7a -title: Step 26 -challengeType: 0 -dashedName: step-26 ---- - -# --description-- - -Set `noHigh` to `highPrecedence(str)` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md deleted file mode 100644 index bc94c78c155..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-027.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d792534857332d07ccba3ad -title: Step 27 -challengeType: 0 -dashedName: step-27 ---- - -# --description-- - -Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md deleted file mode 100644 index 7972802a8b8..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-028.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5d792534d586ef495ea9df90 -title: Step 28 -challengeType: 0 -dashedName: step-28 ---- - -# --description-- - -Set `str2` to `infixEval(noHigh, infix)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md deleted file mode 100644 index f957c47d628..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-029.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5d79253410532e13d13fe574 -title: Step 29 -challengeType: 0 -dashedName: step-29 ---- - -# --description-- - -Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - applyFn - .toString() - .replace(/\s/g, '') - .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md deleted file mode 100644 index 42b80301fc6..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-030.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d7925342415527083bd6667 -title: Step 30 -challengeType: 0 -dashedName: step-30 ---- - -# --description-- - -The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: - -```js -"a b c".split(" "); // ["a", "b", "c"]; -``` - -Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md deleted file mode 100644 index 33e85a097cc..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-031.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d792534c3d26890ac1484d4 -title: Step 31 -challengeType: 0 -dashedName: step-31 ---- - -# --description-- - -The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: - -```js -[1, 2, 3].map(x => x + 1); // [2, 3, 4] -``` - -In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md deleted file mode 100644 index abb91060f5e..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-032.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d792534b92f3d1cd4410ce3 -title: Step 32 -challengeType: 0 -dashedName: step-32 ---- - -# --description-- - -Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md deleted file mode 100644 index bb2f8da03a5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-033.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 5d7925341193948dfe6d76b4 -title: Step 33 -challengeType: 0 -dashedName: step-33 ---- - -# --description-- - -Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md deleted file mode 100644 index f32c582d3ef..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-034.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d792534cf81365cfca58794 -title: Step 34 -challengeType: 0 -dashedName: step-34 ---- - -# --description-- - -Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md deleted file mode 100644 index a460b595da1..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-035.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d7925348ee084278ff15556 -title: Step 35 -challengeType: 0 -dashedName: step-35 ---- - -# --description-- - -Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. - -Now return `str2.replace(regex, "")` at the end of `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md deleted file mode 100644 index 45e848ecbeb..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-036.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d7925348a6a41c32f7a4e3e -title: Step 36 -challengeType: 0 -dashedName: step-36 ---- - -# --description-- - -Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md deleted file mode 100644 index 7394c7c6472..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-037.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d792534408c5be896b0a46e -title: Step 37 -challengeType: 0 -dashedName: step-37 ---- - -# --description-- - -The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. - -Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md deleted file mode 100644 index c86fe809104..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-038.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 5d792534f0eda837510e9192 -title: Step 38 -challengeType: 0 -dashedName: step-38 ---- - -# --description-- - -Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md deleted file mode 100644 index bfa91d4503f..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-039.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d7925346b911fce161febaf -title: Step 39 -challengeType: 0 -dashedName: step-39 ---- - -# --description-- - -Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md deleted file mode 100644 index 24d94216931..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-040.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d79253483eada4dd69258eb -title: Step 40 -challengeType: 0 -dashedName: step-40 ---- - -# --description-- - -`range` should set `arr` to `[start]` and should then return `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constarr=[start]') && - JSON.stringify(range(1)) === '[1]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md deleted file mode 100644 index 4307ef2889a..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-041.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d7925342b2b993ef18cd45f -title: Step 41 -challengeType: 0 -dashedName: step-41 ---- - -# --description-- - -After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md deleted file mode 100644 index 0fa8e6fe0fb..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-042.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5d7925341747ad42b12f8e68 -title: Step 42 -challengeType: 0 -dashedName: step-42 ---- - -# --description-- - -This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. - -The `concat` method returns a new array instead of modifying an existing one: - -```js -[1,2,3].concat(4); // [1, 2, 3, 4] -[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] -``` - -Use `concat` instead of `push` to return the result of adding `end` to `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(1, 2)) === '[1,2]' && - code.includes('concat') && - !code.includes('push') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md deleted file mode 100644 index 448578598f5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-043.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: 5d792535b0b3c198ee3ed6f9 -title: Step 43 -challengeType: 0 -dashedName: step-43 ---- - -# --description-- - -The `concat` method can also accept arrays: - -```js -[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] -[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] -``` - -Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md deleted file mode 100644 index 6e89d44a236..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-044.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d7925357a0533eb221b005d -title: Step 44 -challengeType: 0 -dashedName: step-44 ---- - -# --description-- - -Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('arr') && - code.replace(/\s/g, '').includes('[start].concat([end])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md deleted file mode 100644 index 0d876da26b6..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-045.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d792535591db67ee15b4106 -title: Step 45 -challengeType: 0 -dashedName: step-45 ---- - -# --description-- - -Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(3, 2)) === '[]' && - JSON.stringify(range(1, 3)) === '[1,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md deleted file mode 100644 index ee94e71d4a4..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-046.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d792535f1f7adf77de5831d -title: Step 46 -challengeType: 0 -dashedName: step-46 ---- - -# --description-- - -Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md deleted file mode 100644 index 497b63c634b..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-047.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925353d2c505eafd50cd9 -title: Step 47 -challengeType: 0 -dashedName: step-47 ---- - -# --description-- - -Remove the curly braces and `return` keyword from `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md deleted file mode 100644 index 862a0002f2f..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-048.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d79253539b5e944ba3e314c -title: Step 48 -challengeType: 0 -dashedName: step-48 ---- - -# --description-- - -Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md deleted file mode 100644 index 9845839bbeb..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-049.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535a4f1cbff7a8b9a0b -title: Step 49 -challengeType: 0 -dashedName: step-49 ---- - -# --description-- - -Make `charRange` return `range(start, end)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md deleted file mode 100644 index 43167394a7b..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-050.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d792535e3304f15a8890162 -title: Step 50 -challengeType: 0 -dashedName: step-50 ---- - -# --description-- - -Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md deleted file mode 100644 index f5bb024255e..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-051.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 5d792535a40ea5ac549d6804 -title: Step 51 -challengeType: 0 -dashedName: step-51 ---- - -# --description-- - -Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md deleted file mode 100644 index 8369854b752..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-052.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -id: 5d7925358c220e5b2998909e -title: Step 52 -challengeType: 0 -dashedName: step-52 ---- - -# --description-- - -Now, pass `x` to `String.fromCharCode` in the arrow function. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md deleted file mode 100644 index 6253e20d545..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-053.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5d7925357729e183a49498aa -title: Step 53 -challengeType: 0 -dashedName: step-53 ---- - -# --description-- - -Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md deleted file mode 100644 index 03ceaf96068..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-054.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253555aa652afbb68086 -title: Step 54 -challengeType: 0 -dashedName: step-54 ---- - -# --description-- - -Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md deleted file mode 100644 index 27b4b66f7f2..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-055.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d79253582be306d339564f6 -title: Step 55 -challengeType: 0 -dashedName: step-55 ---- - -# --description-- - -Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md deleted file mode 100644 index 72223dddb2c..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-056.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5d7925352047e5c54882c436 -title: Step 56 -challengeType: 0 -dashedName: step-56 ---- - -# --description-- - -As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md deleted file mode 100644 index 1870ab8b951..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-057.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 5d79253568e441c0adf9db9f -title: Step 57 -challengeType: 0 -dashedName: step-57 ---- - -# --description-- - -Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md deleted file mode 100644 index b394d603ed4..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-058.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925356ab117923b80c9cd -title: Step 58 -challengeType: 0 -dashedName: step-58 ---- - -# --description-- - -Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md deleted file mode 100644 index e79d2b6f857..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-059.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d792535e54a8cd729a0d708 -title: Step 59 -challengeType: 0 -dashedName: step-59 ---- - -# --description-- - -Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md deleted file mode 100644 index 3d6a5a955b7..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-060.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -id: 5d7925353b307724a462b06b -title: Step 60 -challengeType: 0 -dashedName: step-60 ---- - -# --description-- - -Finally, return `fn("A")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md deleted file mode 100644 index 994e931f57f..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-061.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d792536735f71d746ee5d99 -title: Step 61 -challengeType: 0 -dashedName: step-61 ---- - -# --description-- - -You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. - -Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md deleted file mode 100644 index b06f86f5495..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-062.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d792536ad340d9dff2e4a96 -title: Step 62 -challengeType: 0 -dashedName: step-62 ---- - -# --description-- - -Now, remove the curly braces and return statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md deleted file mode 100644 index d1492aa5cbf..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-063.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d7925369614afd92d01fed5 -title: Step 63 -challengeType: 0 -dashedName: step-63 ---- - -# --description-- - -You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md deleted file mode 100644 index 8d17549a291..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-064.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d792536504e68254fe02236 -title: Step 64 -challengeType: 0 -dashedName: step-64 ---- - -# --description-- - -The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. - -Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md deleted file mode 100644 index 1c388711e2f..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-065.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536c8d2f0fdfad768fe -title: Step 65 -challengeType: 0 -dashedName: step-65 ---- - -# --description-- - -You can add more arguments by simply adding another arrow with another argument name: - -```js -const manyArguments = a => b => c => d => [a, b, c, d] -``` - -Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md deleted file mode 100644 index 45e6af501cc..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-066.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d79253639028b8ec56afcda -title: Step 66 -challengeType: 0 -dashedName: step-66 ---- - -# --description-- - -Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md deleted file mode 100644 index 19bbc068cd3..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-067.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d792536834f2fd93e84944f -title: Step 67 -challengeType: 0 -dashedName: step-67 ---- - -# --description-- - -You call curried functions like this: - -```js -const result = add(1)(2); -``` - -Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md deleted file mode 100644 index e220cf656e5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-068.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536ddff9ea73c90a994 -title: Step 68 -challengeType: 0 -dashedName: step-68 ---- - -# --description-- - -However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. - -Change `x => elemValue(n)(x)` to `elemValue(n)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md deleted file mode 100644 index eaff17e3511..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-069.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d7925361596f84067904f7f -title: Step 69 -challengeType: 0 -dashedName: step-69 ---- - -# --description-- - -Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('const fn') && - code.includes('varRangeExpanded') && - evalFormula('A1:J133') === '3' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md deleted file mode 100644 index 03ec1f65ba2..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-070.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dd8a4daf255488ac -title: Step 70 -challengeType: 0 -dashedName: step-70 ---- - -# --description-- - -Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md deleted file mode 100644 index b1139d99d92..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-071.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536449c73004f265fb1 -title: Step 71 -challengeType: 0 -dashedName: step-71 ---- - -# --description-- - -Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md deleted file mode 100644 index a481e918c67..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-072.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d79253685fc69b8fe60a0d2 -title: Step 72 -challengeType: 0 -dashedName: step-72 ---- - -# --description-- - -Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. - -This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md deleted file mode 100644 index 64e48966f02..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-073.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536dc6e3ab29525de9e -title: Step 73 -challengeType: 0 -dashedName: step-73 ---- - -# --description-- - -The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md deleted file mode 100644 index 57da365160d..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-074.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536cfd0fd893c630abb -title: Step 74 -challengeType: 0 -dashedName: step-74 ---- - -# --description-- - -Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.includes('varRegex') && - code.includes('varExpanded') && - evalFormula('aC12bc') === 'abc' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md deleted file mode 100644 index 2dc9ec5c8ab..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-075.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 5d7925366a5ff428fb483b40 -title: Step 75 -challengeType: 0 -dashedName: step-75 ---- - -# --description-- - -Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md deleted file mode 100644 index 0516f1f77e6..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-076.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5d7925365d4035eeb2e395fd -title: Step 76 -challengeType: 0 -dashedName: step-76 ---- - -# --description-- - -Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md deleted file mode 100644 index a1022f45c6a..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-077.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 5d7925364c106e9aaf05a16f -title: Step 77 -challengeType: 0 -dashedName: step-77 ---- - -# --description-- - -`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. - -Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(evalFormula('(2+2)*2') === '8'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md deleted file mode 100644 index 5617221e798..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-078.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: 5d792536970cd8e819cc8a96 -title: Step 78 -challengeType: 0 -dashedName: step-78 ---- - -# --description-- - -You can define arrow functions without arguments: - -```js -const two = () => 2; -``` - -Define an empty arrow function without arguments and assign it to `window.onload`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('window.onload=()=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md deleted file mode 100644 index 06b401c7e8e..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-079.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -id: 5d792536e33baeaa60129e0a -title: Step 79 -challengeType: 0 -dashedName: step-79 ---- - -# --description-- - -In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md deleted file mode 100644 index 59443f50dc9..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-080.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 5d7925379e2a488f333e2d43 -title: Step 80 -challengeType: 0 -dashedName: step-80 ---- - -# --description-- - -Now define a function `createLabel` which takes an argument `name` and has an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md deleted file mode 100644 index 3a3a6f126c8..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-081.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -id: 5d7925379000785f6d8d9af3 -title: Step 81 -challengeType: 0 -dashedName: step-81 ---- - -# --description-- - -Inside `createLabel`, assign `document.createElement("div")` to `label`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md deleted file mode 100644 index a9a1dcc5726..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-082.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 5d79253791391b0acddd0ac5 -title: Step 82 -challengeType: 0 -dashedName: step-82 ---- - -# --description-- - -Add the following code to `createLabel`: - -```js -label.className = "label"; -label.textContent = name; -container.appendChild(label); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md deleted file mode 100644 index 780a9dab7fe..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-083.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373104ae5ae83f20a5 -title: Step 83 -challengeType: 0 -dashedName: step-83 ---- - -# --description-- - -The `forEach` method takes a function and calls it with each element of the array. - -Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md deleted file mode 100644 index ccfac003142..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-084.md +++ /dev/null @@ -1,225 +0,0 @@ ---- -id: 5d7925373b7127cfaeb50c26 -title: Step 84 -challengeType: 0 -dashedName: step-84 ---- - -# --description-- - -Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). - -# --hints-- - -See description above for instructions. - -```js -assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md deleted file mode 100644 index 5216d89d1d9..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-085.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d792537cb3a5cd6baca5e1a -title: Step 85 -challengeType: 0 -dashedName: step-85 ---- - -# --description-- - -Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md deleted file mode 100644 index 544000db907..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-086.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 5d79253742f3313d55db981f -title: Step 86 -challengeType: 0 -dashedName: step-86 ---- - -# --description-- - -Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md deleted file mode 100644 index bf8bee8395a..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-087.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 5d7925379e0180a438ce7f95 -title: Step 87 -challengeType: 0 -dashedName: step-87 ---- - -# --description-- - -Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md deleted file mode 100644 index d57aa617713..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-088.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d792537c80984dfa5501b96 -title: Step 88 -challengeType: 0 -dashedName: step-88 ---- - -# --description-- - -Inside `letters.forEach`, assign `document.createElement("input")` to `input`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md deleted file mode 100644 index 4568ec50b24..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-089.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925377b54d8a76efb5657 -title: Step 89 -challengeType: 0 -dashedName: step-89 ---- - -# --description-- - -Add the following code to `letters.forEach`: - -```js -input.type = "text"; -input.id = y + x; -input.onchange = update; -container.appendChild(input); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md deleted file mode 100644 index 6543d3124fb..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-090.md +++ /dev/null @@ -1,251 +0,0 @@ ---- -id: 5d7925371398513549bb6395 -title: Step 90 -challengeType: 0 -dashedName: step-90 ---- - -# --description-- - -In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md deleted file mode 100644 index 378c01975ac..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-091.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d792537ea3eaf302bf2d359 -title: Step 91 -challengeType: 0 -dashedName: step-91 ---- - -# --description-- - -Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md deleted file mode 100644 index 93968d4e378..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-092.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 5d792537533b1c7843bfd029 -title: Step 92 -challengeType: 0 -dashedName: step-92 ---- - -# --description-- - -The `includes` method works on a string and checks if the argument is its substring. - -Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md deleted file mode 100644 index dcc989ea328..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-093.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537dc0fe84345d4f19e -title: Step 93 -challengeType: 0 -dashedName: step-93 ---- - -# --description-- - -Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md deleted file mode 100644 index ce97294c369..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-094.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d792537b6cadae0f4b0cda1 -title: Step 94 -challengeType: 0 -dashedName: step-94 ---- - -# --description-- - -The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. - -Use the `slice` method to log the first two letters of `value` to the console. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md deleted file mode 100644 index 1eaf868ad16..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-095.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 5d79253770083fb730c93a93 -title: Step 95 -challengeType: 0 -dashedName: step-95 ---- - -# --description-- - -You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. - -Change the call to `slice` to log all characters except the first instead. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md deleted file mode 100644 index cd6f2405a86..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-096.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d792537fef76b226b63b93b -title: Step 96 -challengeType: 0 -dashedName: step-96 ---- - -# --description-- - -Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md deleted file mode 100644 index fb91f29be96..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-097.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d79253760fca25ccbbd8990 -title: Step 97 -challengeType: 0 -dashedName: step-97 ---- - -# --description-- - -The array destructuring syntax can be used to extract values from arrays: - -```js -const [x, y] = [1, 2]; // in variables -const fn = ([x, y]) => x + y // in functions -``` - -Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && - spreadsheetFunctions['random']([1, 2]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md deleted file mode 100644 index c933b24aaac..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-098.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d7925374321824cba309875 -title: Step 98 -challengeType: 0 -dashedName: step-98 ---- - -# --description-- - -Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( - code.replace(/\s/g, '') - ) && spreadsheetFunctions['random']([1, 1]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md deleted file mode 100644 index 2a5ee766e3d..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-099.md +++ /dev/null @@ -1,276 +0,0 @@ ---- -id: 5d7925381e8565a5c50ba7f1 -title: Step 99 -challengeType: 0 -dashedName: step-99 ---- - -# --description-- - -In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. - -You can check if this is the case by comparing a call to a function with another call (with the same arguments): - -```js -console.log(f(2) === f(2)); // always true for pure functions -``` - -Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md deleted file mode 100644 index 2f419cf2876..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-100.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925383f1b77db7f1ff59e -title: Step 100 -challengeType: 0 -dashedName: step-100 ---- - -# --description-- - -This is (probably) false, so `random` is certainly impure. - -The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. - -Call `window.onload()` in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md deleted file mode 100644 index 176257a88b5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-101.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d792538de9fa3f298bcd5f6 -title: Step 101 -challengeType: 0 -dashedName: step-101 ---- - -# --description-- - -Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md deleted file mode 100644 index ad427105522..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-102.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -id: 5d7925385b74f69642e1fea5 -title: Step 102 -challengeType: 0 -dashedName: step-102 ---- - -# --description-- - -Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. - -Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md deleted file mode 100644 index 231159b2b34..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-103.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d7925380ea76d55b2c97d7b -title: Step 103 -challengeType: 0 -dashedName: step-103 ---- - -# --description-- - -This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. - -Remove the `console.log` statement. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.includes('console.log')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md deleted file mode 100644 index 36fd2f83b90..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-104.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d792538be4fe331f1a6c008 -title: Step 104 -challengeType: 0 -dashedName: step-104 ---- - -# --description-- - -Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. - -But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. - -Change these calls to `""` - the function is now pure but doesn't work. - -# --hints-- - -See description above for instructions. - -```js -const nos = code.replace(/\s/g, ''); -assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md deleted file mode 100644 index 4b9e711aae6..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-105.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 5d792538d169f33142175b95 -title: Step 105 -challengeType: 0 -dashedName: step-105 ---- - -# --description-- - -To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. - -Add an argument `cells` to `evalFormula`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md deleted file mode 100644 index 39584a049ae..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-106.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538e48b5a2c6e5bbe12 -title: Step 106 -challengeType: 0 -dashedName: step-106 ---- - -# --description-- - -When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md deleted file mode 100644 index 1ab52bf8124..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-107.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d7925387f3e9da5ec856dbe -title: Step 107 -challengeType: 0 -dashedName: step-107 ---- - -# --description-- - -Update the recursive call to `evalFormula` by passing in `cells` as the second argument. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md deleted file mode 100644 index 11e0b2d0bbc..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-108.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253824ae9b4a6e6f3108 -title: Step 108 -challengeType: 0 -dashedName: step-108 ---- - -# --description-- - -Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. - -# --hints-- - -See description above for instructions. - -```js -assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md deleted file mode 100644 index d4c961be237..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-109.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 5d7925383f122a279f4c54ad -title: Step 109 -challengeType: 0 -dashedName: step-109 ---- - -# --description-- - -The `find` method returns the first element of an array that satisfies the function passed to it. - -Chain `find` onto `cells` and pass it `cell => cell === id`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md deleted file mode 100644 index abdc6794679..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-110.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d7925387b682e962f209269 -title: Step 110 -challengeType: 0 -dashedName: step-110 ---- - -# --description-- - -In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md deleted file mode 100644 index 4baca0e6cc3..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-111.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -id: 5d792538de774217b173288e -title: Step 111 -challengeType: 0 -dashedName: step-111 ---- - -# --description-- - -Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md deleted file mode 100644 index a2c5b9b1bef..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-112.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d79253891d93585323d1f3c -title: Step 112 -challengeType: 0 -dashedName: step-112 ---- - -# --description-- - -Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md deleted file mode 100644 index 637af181723..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-113.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d7925384e34e944ecb4612d -title: Step 113 -challengeType: 0 -dashedName: step-113 ---- - -# --description-- - -Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md deleted file mode 100644 index d12140aa462..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-114.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d792538631844ad0bdfb4c3 -title: Step 114 -challengeType: 0 -dashedName: step-114 ---- - -# --description-- - -`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. - -Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md deleted file mode 100644 index c966a9161ed..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-115.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -id: 5d792538e2a8d20cc580d481 -title: Step 115 -challengeType: 0 -dashedName: step-115 ---- - -# --description-- - -The `slice` method can also work on arrays. - -Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md deleted file mode 100644 index 5483ee8a3e9..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-116.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 5d792538f5004390d6678554 -title: Step 116 -challengeType: 0 -dashedName: step-116 ---- - -# --description-- - -You can also pass in a negative argument to `slice` to specify that index from the end: - -```js -[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] -``` - -Use a negative index to add a function `lasttwo` which returns the last two elements of an array. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md deleted file mode 100644 index 3e61d996f85..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-117.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 5d792539dd4fd4c96fd85f7e -title: Step 117 -challengeType: 0 -dashedName: step-117 ---- - -# --description-- - -The `%` operator returns the remainder: - -```js -4 % 3; // 1 -5 % 3; // 2 -6 % 3; // 0 -``` - -Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. - -# --hints-- - -See description above for instructions. - -```js -assert(isEven(20) && !isEven(31)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md deleted file mode 100644 index 8c4b6a9e314..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-118.md +++ /dev/null @@ -1,292 +0,0 @@ ---- -id: 5d79253949802f8587c8bbd3 -title: Step 118 -challengeType: 0 -dashedName: step-118 ---- - -# --description-- - -The `filter` method keeps only the elements of an array that satisfy the function passed to it: - -```js -[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] -``` - -Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && - code.includes('filter') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md deleted file mode 100644 index c441a9459d8..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-119.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 5d7925395888767e9304c082 -title: Step 119 -challengeType: 0 -dashedName: step-119 ---- - -# --description-- - -The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. - -The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. - -For example, here's how to multiply all the value in an array: - -```js -[2, 3, 4].reduce((a, x) => a * x); // 24 -``` - -Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md deleted file mode 100644 index 787472aea1d..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-120.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 5d7925393b30099e37a34668 -title: Step 120 -challengeType: 0 -dashedName: step-120 ---- - -# --description-- - -The `includes` method checks if an element is in an array. - -Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md deleted file mode 100644 index f032db3ac16..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-121.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -id: 5d7925398157757b23730fdd -title: Step 121 -challengeType: 0 -dashedName: step-121 ---- - -# --description-- - -The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: - -```js -[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] -// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array -// now it first tries [].concat(1) which works -``` - -Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md deleted file mode 100644 index 6b5714247b5..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-122.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d792539de4b9ac14dd40409 -title: Step 122 -challengeType: 0 -dashedName: step-122 ---- - -# --description-- - -Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === - '[1,3,5,7,9]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md deleted file mode 100644 index 8f15f9adfd4..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-123.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539534f1bf991bb987f -title: Step 123 -challengeType: 0 -dashedName: step-123 ---- - -# --description-- - -ES6 introduced a shorthand object literal syntax: - -```js -const a = 10; -const myObject = { a }; -console.log(myObject); // { a: 10 } -``` - -First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. - -# --hints-- - -See description above for instructions. - -```js -assert(sum([1, 2, 3]) === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md deleted file mode 100644 index eef96f2d471..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-124.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 5d7925394089b762f93ffa52 -title: Step 124 -challengeType: 0 -dashedName: step-124 ---- - -# --description-- - -Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. - -This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. - -# --hints-- - -See description above for instructions. - -```js -assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md deleted file mode 100644 index cb3b30d8c4f..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-125.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539ec758d45a6900173 -title: Step 125 -challengeType: 0 -dashedName: step-125 ---- - -# --description-- - -The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. - -As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md deleted file mode 100644 index 621e4cc4fbc..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-126.md +++ /dev/null @@ -1,308 +0,0 @@ ---- -id: 5d7925398d525f61a9ff3a79 -title: Step 126 -challengeType: 0 -dashedName: step-126 ---- - -# --description-- - -The spread operator allow you to pass multiple arguments instead of an array: - -```js -const arr = [1, 2, 3]; -const sum3 = (a, b, c) => a + b + c; -sum3(...arr); // 6 -``` - -Use the spread operator to add `range` to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && - code.includes('...') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md deleted file mode 100644 index 8d27ee2bf76..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-127.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 5d792539a222f385c5c17d2b -title: Step 127 -challengeType: 0 -dashedName: step-127 ---- - -# --description-- - -Now define a `median` function which takes an argument `nums` (in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md deleted file mode 100644 index 08ffbd94e4a..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-128.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d7925398a7184b41b12a0e0 -title: Step 128 -challengeType: 0 -dashedName: step-128 ---- - -# --description-- - -The `sort` method sorts an array alphabetically: - -```js -["B", "C", "A"].sort(); // ["A", "B", "C"] -``` - -Assign the sorted `nums` to `sorted` in `median`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md deleted file mode 100644 index 49b025f4b1e..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-129.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d7925399afb905c34730a75 -title: Step 129 -challengeType: 0 -dashedName: step-129 ---- - -# --description-- - -But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: - -```js -[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] -``` - -If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. - -Use `sort` to sort `nums` in ascending order. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md deleted file mode 100644 index cad2f5aa466..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-130.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d792539728d1aa7788e2c9b -title: Step 130 -challengeType: 0 -dashedName: step-130 ---- - -# --description-- - -Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. - -You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md deleted file mode 100644 index df39b579f78..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-131.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d79253939434a2724c0ec41 -title: Step 131 -challengeType: 0 -dashedName: step-131 ---- - -# --description-- - -Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md deleted file mode 100644 index 1e4f1aca372..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-132.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 5d792539b9e1d3c54d8fe94a -title: Step 132 -challengeType: 0 -dashedName: step-132 ---- - -# --description-- - -Add a return statement to `median` so that it returns `isEven(length)`. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md deleted file mode 100644 index 4cf66a6dd6a..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-133.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5d792539b2e0bd8f9e8213e4 -title: Step 133 -challengeType: 0 -dashedName: step-133 ---- - -# --description-- - -Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. - -Note that the `middle` variable is close to the middle but is not actually the middle. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md deleted file mode 100644 index 2428ff3a79d..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-134.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -id: 5d792539239148965a1a59a5 -title: Step 134 -challengeType: 0 -dashedName: step-134 ---- - -# --description-- - -Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.median([1, 20, 3]) === 3 && - spreadsheetFunctions.median([27, 7, 20, 10]) === 15 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md deleted file mode 100644 index ff91ae909fd..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-135.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d792539e1446045d0df6d28 -title: Step 135 -challengeType: 0 -dashedName: step-135 ---- - -# --description-- - -The `some` method checks if any element of the array satisfies the provided testing function. - -Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.someeven([1, 5, 4, 3]) && - !spreadsheetFunctions.someeven([3, 5, 9]) && - code.includes('.some') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md deleted file mode 100644 index ddede0016d6..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-136.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a2febbb77098730b9 -title: Step 136 -challengeType: 0 -dashedName: step-136 ---- - -# --description-- - -The `every` method checks if all elements of an array satisfy the provided testing function. - -Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && - !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && - code.includes('.every') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md deleted file mode 100644 index c475cf8ba22..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-137.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d79253a98bd9fdf7ce68d0a -title: Step 137 -challengeType: 0 -dashedName: step-137 ---- - -# --description-- - -We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. - -While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. - -Replace the body of `range` with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md deleted file mode 100644 index 52e294c3655..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-138.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 5d79253a1e9abf29de64c177 -title: Step 138 -challengeType: 0 -dashedName: step-138 ---- - -# --description-- - -The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. - -Make `range` return an array of `undefined` with size `end - start + 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md deleted file mode 100644 index ce1e1c87c73..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-139.md +++ /dev/null @@ -1,327 +0,0 @@ ---- -id: 5d79253a8b29d78984369e4b -title: Step 139 -challengeType: 0 -dashedName: step-139 ---- - -# --description-- - -The `fill` method takes an argument and replaces all elements of the array with that argument. - -Use it on the array in `range` to replace everything with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md deleted file mode 100644 index 9630c3210b7..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-140.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -id: 5d79253ad297a31cbe073718 -title: Step 140 -challengeType: 0 -dashedName: step-140 ---- - -# --description-- - -The function in the `map` method can actually take a second argument: the index of the element. - -This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). - -Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md deleted file mode 100644 index 7531f12a5a3..00000000000 --- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-functional-programming-by-building-a-spreadsheet/step-141.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5dc10b8b93704f41d279eb5b -title: Step 141 -challengeType: 0 -dashedName: step-141 ---- - -# --description-- - -Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
                                                -
                                                -
                                                -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md new file mode 100644 index 00000000000..d522cf2c5ab --- /dev/null +++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-localstorage-by-building-a-todo-app/659ebe52d74b132a1d75c891.md @@ -0,0 +1,388 @@ +--- +id: 659ebe52d74b132a1d75c891 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you try to add a new task, edit that task, and then click on the `Add New Task` button, you will notice a bug. + +The form button will display the incorrect text of `Update Task` instead of `Add Task`. To fix this, you will need to assign the string `Add Task` to `addOrUpdateTaskBtn.innerText` inside your `addOrUpdateTask` function. +# --hints-- + +You should assign the string `Add Task` to `addOrUpdateTaskBtn.innerText`. + +```js +assert.match(code, /addOrUpdateTaskBtn\.innerText\s*=\s*('|")Add Task\1\s*/) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + Learn localStorage by Building a Todo App + + + + +
                                                +

                                                Todo App

                                                +
                                                + + + +
                                                +

                                                Discard unsaved changes?

                                                +
                                                + + +
                                                +
                                                +                                                 +
                                                +
                                                +
                                                + + + + +``` + +```css +:root { + --white: #fff; + --light-grey: #f5f6f7; + --dark-grey: #0a0a23; + --yellow: #f1be32; + --golden-yellow: #feac32; +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: var(--dark-grey); +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + color: var(--light-grey); + margin: 20px 0 40px 0; +} + +.todo-app { + background-color: var(--white); + width: 300px; + height: 350px; + border: 5px solid var(--yellow); + border-radius: 8px; + padding: 15px; + position: relative; + display: flex; + flex-direction: column; + gap: 10px; +} + +.btn { + cursor: pointer; + width: 100px; + margin: 10px; + color: var(--dark-grey); + background-color: var(--golden-yellow); + background-image: linear-gradient(#fecc4c, #ffac33); + border-color: var(--golden-yellow); + border-width: 3px; +} + +.btn:hover { + background-image: linear-gradient(#ffcc4c, #f89808); +} + +.large-btn { + width: 80%; + font-size: 1.2rem; + align-self: center; + justify-self: center; +} + +.close-task-form-btn { + background: none; + border: none; + cursor: pointer; +} + +.close-icon { + width: 20px; + height: 20px; +} + +.task-form { + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--white); + border-radius: 5px; + padding: 15px; + width: 300px; + height: 350px; + flex-direction: column; + justify-content: space-between; + overflow: auto; +} + +.task-form-header { + display: flex; + justify-content: flex-end; +} + +.task-form-body { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.task-form-footer { + display: flex; + justify-content: center; +} + +.task-form-label, +#title-input, +#date-input, +#description-input { + display: block; +} + +.task-form-label { + margin-bottom: 5px; + font-size: 1.3rem; + font-weight: bold; +} + +#title-input, +#date-input, +#description-input { + width: 100%; + margin-bottom: 10px; + padding: 2px; +} + +#confirm-close-dialog { + padding: 10px; + margin: 10px auto; + border-radius: 15px; +} + +.confirm-close-dialog-btn-container { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.discard-message-text { + font-weight: bold; + font-size: 1.5rem; +} + +#tasks-container { + height: 100%; + overflow-y: auto; +} + +.task { + margin: 5px 0; +} + +.hidden { + display: none; +} + +@media (min-width: 576px) { + .todo-app, + .task-form { + width: 400px; + height: 450px; + } + + .task-form-label { + font-size: 1.5rem; + } + + #title-input, + #date-input { + height: 2rem; + } + + #title-input, + #date-input, + #description-input { + padding: 5px; + margin-bottom: 20px; + } +} +``` + +```js +const taskForm = document.getElementById("task-form"); +const confirmCloseDialog = document.getElementById("confirm-close-dialog"); +const openTaskFormBtn = document.getElementById("open-task-form-btn"); +const closeTaskFormBtn = document.getElementById("close-task-form-btn"); +const addOrUpdateTaskBtn = document.getElementById("add-or-update-task-btn"); +const cancelBtn = document.getElementById("cancel-btn"); +const discardBtn = document.getElementById("discard-btn"); +const tasksContainer = document.getElementById("tasks-container"); +const titleInput = document.getElementById("title-input"); +const dateInput = document.getElementById("date-input"); +const descriptionInput = document.getElementById("description-input"); + +const taskData = []; +let currentTask = {}; + +const addOrUpdateTask = () => { + --fcc-editable-region-- + + --fcc-editable-region-- + const dataArrIndex = taskData.findIndex((item) => item.id === currentTask.id); + const taskObj = { + id: `${titleInput.value.toLowerCase().split(" ").join("-")}-${Date.now()}`, + title: titleInput.value, + date: dateInput.value, + description: descriptionInput.value, + }; + + if (dataArrIndex === -1) { + taskData.unshift(taskObj); + } else { + taskData[dataArrIndex] = taskObj; + } + + updateTaskContainer() + reset() +}; + +const updateTaskContainer = () => { + tasksContainer.innerHTML = ""; + + taskData.forEach( + ({ id, title, date, description }) => { + (tasksContainer.innerHTML += ` +
                                                +

                                                Title: ${title}

                                                +

                                                Date: ${date}

                                                +

                                                Description: ${description}

                                                + + +
                                                + `) + } + ); +}; + + +const deleteTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + buttonEl.parentElement.remove(); + taskData.splice(dataArrIndex, 1); +} + +const editTask = (buttonEl) => { + const dataArrIndex = taskData.findIndex( + (item) => item.id === buttonEl.parentElement.id + ); + + currentTask = taskData[dataArrIndex]; + + titleInput.value = currentTask.title; + dateInput.value = currentTask.date; + descriptionInput.value = currentTask.description; + + addOrUpdateTaskBtn.innerText = "Update Task"; + + taskForm.classList.toggle("hidden"); +} + +const reset = () => { + titleInput.value = ""; + dateInput.value = ""; + descriptionInput.value = ""; + taskForm.classList.toggle("hidden"); + currentTask = {}; +} + +openTaskFormBtn.addEventListener("click", () => + taskForm.classList.toggle("hidden") +); + +closeTaskFormBtn.addEventListener("click", () => { + const formInputsContainValues = titleInput.value || dateInput.value || descriptionInput.value; + if (formInputsContainValues) { + confirmCloseDialog.showModal(); + } else { + reset(); + } +}); + +cancelBtn.addEventListener("click", () => confirmCloseDialog.close()); + +discardBtn.addEventListener("click", () => { + confirmCloseDialog.close(); + reset() +}); + +taskForm.addEventListener("submit", (e) => { + e.preventDefault(); + + addOrUpdateTask(); +}); +``` diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md deleted file mode 100644 index 5caa66b4c95..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e0e72c65bc8e73dfe1e -videoId: LGQuIIv2RVA -title: Елементи та теги. Запитання А -challengeType: 15 -dashedName: elements-and-tags-question-a ---- - -# --description-- - -Майже всі елементи на сторінці HTML насправді є простим вмістом у початкових та кінцевих тегах HTML. - -Початкові теги повідомляють браузеру про початок елемента HTML. Вони складаються з ключового слова, взятого в кутові дужки `<>`. Наприклад, початковий тег абзацу буде таким: `

                                                `. - -Кінцеві теги повідомляють браузеру про кінець елемента. Вони майже такі самі, як і початкові теги. Єдина відмінність полягає в тому, що вони мають скісну риску перед ключовим словом. Наприклад, кінцевий тег абзацу буде таким: `

                                                `. - -Повний елемент абзацу виглядає так: - -діаграма елемента - -Елементи можна вважати контейнерами вмісту. Початкові та кінцеві теги повідомляють браузеру вміст, який містить елемент. Браузер використовує цю інформацію, щоб знати, як інтерпретувати та форматувати вміст. - -Деякі елементи HTML не мають кінцевих тегів. Ці елементи часто виглядають так: `
                                                ` або ``, але деякі також можна використовувати без кінцевої скісної риски, наприклад `
                                                ` або ``. Вони відомі як самозакриваючі теги або порожні елементи, оскільки вони не обгортають жоден вміст. З деякими ви зустрінетесь у наступних завданнях, але здебільшого ви використовуватимете і початковий, і кінцевий теги. - -HTML має великий список стандартних тегів, які можна використовувати для створення будь-яких елементів. Важливо використовувати правильні теги для вмісту. Правильні теги впливають на два аспекти: рейтинг сайтів у пошукових системах і їхня доступність для користувачів, які покладаються на допоміжні технології, щоб користуватися інтернетом (наприклад, читачі екрана). - -Використання правильних елементів для вмісту називається семантичною версткою, або семантичним HTML. Про це ви дізнаєтесь пізніше. - -# --question-- - -## --assignment-- - -Перегляньте відео Кевіна Павелла про [вступ до HTML](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) - -## --text-- - -Що таке теги у HTML? - -## --answers-- - -Теги у HTML повідомляють браузеру, який вміст містить елемент. - ---- - -Теги у HTML повідомляють браузеру, коли завантажувати вміст. - ---- - -Теги у HTML повідомляють браузеру, який вміст містить наступний елемент. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md deleted file mode 100644 index 8c1e617348c..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 637f4e1672c65bc8e73dfe1f -title: Елементи та теги. Запитання B -challengeType: 15 -dashedName: elements-and-tags-question-b ---- - -# --description-- - -Майже всі елементи на сторінці HTML насправді є простим вмістом у початкових та кінцевих тегах HTML. - -Початкові теги повідомляють браузеру про початок елемента HTML. Вони складаються з ключового слова, взятого в кутові дужки <>. Наприклад, початковий тег абзацу буде таким: `

                                                `. - -Кінцеві теги повідомляють браузеру про кінець елемента. Вони майже такі самі, як і початкові теги. Єдина відмінність полягає в тому, що вони мають скісну риску перед ключовим словом. Наприклад, кінцевий тег абзацу буде таким: `

                                                `. - -Повний елемент абзацу виглядає так: - -діаграма елемента - -Елементи можна вважати контейнерами вмісту. Початкові та кінцеві теги повідомляють браузеру вміст, який містить елемент. Браузер використовує цю інформацію, щоб знати, як інтерпретувати та форматувати вміст. - -Деякі елементи HTML не мають кінцевих тегів. Ці елементи часто виглядають так: `
                                                ` або ``, але деякі також можна використовувати без кінцевої скісної риски, наприклад `
                                                ` або ``. Вони відомі як самозакриваючі теги або порожні елементи, оскільки вони не обгортають жоден вміст. З деякими ви зустрінетесь у наступних завданнях, але здебільшого ви використовуватимете і початковий, і кінцевий теги. - -HTML має великий список стандартних тегів, які можна використовувати для створення будь-яких елементів. Важливо використовувати правильні теги для вмісту. Правильні теги впливають на два аспекти: рейтинг сайтів у пошукових системах і їхня доступність для користувачів, які покладаються на допоміжні технології, щоб користуватися інтернетом (наприклад, читачі екрана). - -Використання правильних елементів для вмісту називається семантичною версткою, або семантичним HTML. Про це ви дізнаєтесь пізніше. - -# --question-- - -## --text-- - -З яких трьох частин складається більшість елементів HTML? - -## --answers-- - -Початковий тег, самозакриваючий тег та вміст. - ---- - -Початковий тег, кінцевий тег та вміст. - ---- - -Початковий тег, кінцевий тег та атрибут. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md deleted file mode 100644 index 4d311e0ca3b..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f4e1c72c65bc8e73dfe20 -title: Шаблонний код HTML. Запитання A -challengeType: 15 -dashedName: html-boilerplate-question-a ---- - -# --description-- - -Щоб продемонструвати шаблонний код HTML, нам потрібен файл HTML. - -Створіть нову папку на своєму комп’ютері та назвіть її `html-boilerplate`. Створіть новий файл у цій папці та назвіть його `index.html`. - -Мабуть, ви знайомі з різними типами файлів (наприклад, .doc, .pdf чи зображення). - -Щоб комп’ютер знав, що ви хочете створити файл HTML, потрібно додати розширення `.html` до назви файлу, як ви робили при створенні файлу `index.html`. - -Важливо зазначити, що ви назвали свій файл HTML «index». Файл HTML, який міститиме домашню сторінку вебсайту, завжди потрібно називати `index.html`. Причина в тому, що вебсервери за замовчуванням шукатимуть сторінку index.html, коли користувачі заходять на ваш сайт. Відсутність сторінки з такою назвою може спричинити проблеми. - -## DOCTYPE - -Кожна сторінка HTML починається з оголошення doctype. Мета doctype — повідомити браузеру, яку версію HTML потрібно використовувати, щоб відтворити документ. Найновішою версією HTML є HTML5, а оголошенням цієї версії є ``. - -Оголошення doctype для старіших версій HTML складніше. Наприклад, оголошення doctype для HTML4: - -```html - -``` - -Ви, швидше за все, не будете використовувати старіші версії HTML, тому завжди використовуватимете ``. - -Відкрийте створений раніше файл `index.html` у текстовому редакторі та додайте `` у перший рядок. - -# --question-- -## --text-- - -Яка суть оголошення `DOCTYPE`? - -## --answers-- - -Воно повідомляє браузеру, яку версію HTML використовувати для відтворення документа. - ---- - -Воно повідомляє браузеру, що цей документ використовує JavaScript. - ---- - -Воно повідомляє браузеру заголовок документа. - - -## --video-solution-- - -1 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md deleted file mode 100644 index 28a502c86da..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 637f4e2872c65bc8e73dfe21 -title: Шаблонний код HTML. Запитання B -challengeType: 15 -dashedName: html-boilerplate-question-b ---- - -# --description-- - -Після оголошення doctype потрібно надати елемент ``. Він відомий як кореневий елемент документа, тобто кожен інший елемент у документі буде його нащадком. - -Це буде важливішим пізніше, коли ви дізнаєтесь про маніпулювання HTML з JavaScript. Наразі просто знайте, що елемент `html` повинен бути у кожному документі HTML. - -Назад до файлу `index.html`: додайте елемент ``, ввівши початковий та кінцевий теги: - -```html - - - -``` - -## Що таке атрибут lang? -`lang` вказує мову текстового вмісту в елементі. В першу чергу цей атрибут використовується, щоб покращити доступність вебсторінки. Він дозволяє допоміжним технологіям (наприклад, читачам екрана) адаптуватись відповідно до мови та відтворити правильну вимову. - -# --question-- - -## --text-- - -Що таке елемент `html`? - -## --answers-- - -Це кореневий елемент документа, який повідомляє браузеру, яку версію HTML потрібно використовувати. - ---- - -Це кореневий елемент документа, а всі інші елементи повинні бути його нащадками. - ---- - -Це кореневий елемент документа, а всі інші елементи повинні йти після нього. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md deleted file mode 100644 index 1d0f51913a1..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e2f72c65bc8e73dfe22 -title: Шаблонний код HTML. Запитання C -challengeType: 15 -dashedName: html-boilerplate-question-c ---- - -# --description-- - -В елементі `` розміщується вся важлива метаінформація про вебсторінки, а також все інше, необхідне для правильного відтворення вебсторінок у браузері. Всередині `` не можна використовувати елементи, які показують вміст на сторінці. - -## Елемент meta charset -Ви завжди повинні мати тег `meta` для відтворення `charset` в елементі `head`: ``. - -Налаштувати кодування символів надзвичайно важливо, оскільки це гарантує, що вебсторінка правильно показуватиме спеціальні символи різних мов. - -## Елемент title -Ще одним елементом, який завжди повинен бути в голові документа HTML, є елемент `title`: - -```html -My First Webpage -``` - -Елемент `title` надає вебсторінкам заголовок, який можуть прочитати люди та який показано на вкладці вебсторінки. - -Якщо ви не надасте елемент `title`, заголовком вебсторінки за замовчуванням буде назва файлу. У нашому випадку заголовком би був `index.html`, що не дуже змістовно для користувачів. Через це користувачу було б важко найти вебсторінку, якщо відкрито багато вкладок. - -У `head` документа HTML можна помістити багато інших елементів. Наразі важливо знати про два елементи, які ми розглянули. Пізніше ви дізнаєтесь про більше елементів, які розміщуються в `head`. - -Назад до файлу `index.html`: додайте елемент `head`, який має всередині елемент `meta` `charset` та `title`. Елемент head входить до елемента HTML та завжди повинен бути першим елементом знизу початкового тегу ``: - - -```html - - - - - - My First Webpage - - -``` - -# --question-- - -## --text-- - -Яка суть елемента `head`? - -## --answers-- - -Елемент `head` використовується для відображення всіх елементів, які відображаються на вебсторінці. - ---- - -Елемент `head` використовується для відображення важливої інформації вебсторінки та правильного відтворення вебсторінок за допомогою елементів `meta`. - ---- - -Елемент `head` використовується для відображення вмісту заголовка у верхній частині вебсторінки. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md deleted file mode 100644 index 8c4e7a0b85f..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-d.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e3672c65bc8e73dfe23 -videoId: V8UAEoOvqFg -title: Шаблонний код HTML. Запитання D -challengeType: 15 -dashedName: html-boilerplate-question-d ---- - -# --description-- - -Останній елемент, необхідний для шаблонного коду HTML — елемент ``. У ньому розміщується весь вміст, який побачать користувачі: текст, зображення, посилання, списки тощо. - -Щоб закінчити шаблонний код, додайте елемент `body` до файлу `index.html`. Елемент `body` завжди розташований в елементі `html` та завжди знизу елемента `head`: - -# --question-- - -## --assignment-- - -Перегляньте чудове відео Кевіна Павелла про побудову першої вебсторінки. - ---- - -Потренуйте пам’ять, видаливши весь вміст файлу `index.html` та спробуйте написати шаблонний код ще раз. Не хвилюйтесь, якщо перші рази вам потрібно переглянути матеріал. Продовжуйте, поки не зможете написати код з пам’яті. - ---- - -Запустіть свій шаблонний код через [валідатор HTML](https://www.freeformatter.com/html-validator.html). Валідатори гарантують, що розмітка є правильною. Це чудові інструменти для навчання, оскільки вони надають відгуки про синтаксичні помилки, які ви можете час від часу допускати, навіть не здогадуючись про них (наприклад, відсутність кінцевих тегів або додавання додаткових пробілів). - -## --text-- - -Яка суть елемента `body`? - -## --answers-- - -Тут розміщена вся важлива інформація про вебсторінку (наприклад, теги `title` та `meta`). - ---- - -Тут вказується браузеру, як правильно відтворити вебсторінку. - ---- - -Тут розміщений весь вміст, який буде показано (наприклад, зображення, текст та посилання). - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md deleted file mode 100644 index 2ba5b26212a..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 6374f208de18c50e48ba767b -title: Вступ до HTML та CSS. Запитання A -challengeType: 15 -dashedName: introduction-to-html-and-css-question-a ---- - -# --description-- - -HTML та CSS — це дві мови, які працюють разом, щоб створити все, що ви бачите в інтернеті. HTML — це необроблені дані, на яких побудована вебсторінка. Весь текст, посилання, картки, списки та кнопки створюються в HTML. CSS надає стилю цим звичайним елементам. HTML розміщує інформацію на вебсторінці, а CSS робить її красивою, надаючи кольору та змінюючи шрифт. - -Багато ресурсів продовжують називати HTML та CSS мовами програмування, але, якщо розібратися з технічної точки зору, це не зовсім правильно. Причина в тому, що їх використовують лише для представлення інформації. Вони не використовуються для створення логіки програми. JavaScript, який ви вивчите в наступному розділі, є мовою програмування, оскільки його використовують для того, щоб вебсторінки виконували певні дії. Однак багато чого можна зробити, використовуючи лише HTML та CSS, тому вони обов’язково знадобляться. Наступні уроки нашої навчальної програми зосереджені на інструментах, які необхідно осягнути перед тим, як перейти до JavaScript. - -# --question-- - -## --assignment-- - -Прочитайте публікацію HTML vs CSS vs JavaScript (англійською мовою). Це короткий огляд відносин між HTML, CSS та JavaScript. - -## --text-- - -Яке з тверджень є правильним? - -## --answers-- - -CSS використовують для створення базової структури вебсторінки, а HTML для додавання стилів. - ---- - -HTML використовують для створення базової структури вебсторінки, а CSS для додавання стилів. - ---- - -HTML та CSS використовують для додавання стилів, а JavaScript для створення базової структури вебсторінки. - - -## --video-solution-- - -2 - - diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md deleted file mode 100644 index c1a7c68d8d3..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -id: 6376327e2724a688c04636e3 -title: Вступ до HTML та CSS. Запитання B -challengeType: 15 -dashedName: introduction-to-html-and-css-question-b ---- - -# --description-- - - -HTML та CSS — це дві мови, які працюють разом, щоб створити все, що ви бачите в інтернеті. HTML — це необроблені дані, на яких побудована вебсторінка. Весь текст, посилання, картки, списки та кнопки створюються в HTML. CSS надає стилю цим звичайним елементам. HTML розміщує інформацію на вебсторінці, а CSS робить її красивою, надаючи кольору та змінюючи шрифт. - -Багато ресурсів продовжують називати HTML та CSS мовами програмування, але, якщо розібратися з технічної точки зору, це не зовсім правильно. Причина в тому, що їх використовують лише для представлення інформації. Вони не використовуються для створення логіки програми. JavaScript, який ви вивчите в наступному розділі, є мовою програмування, оскільки його використовують для того, щоб вебсторінки виконували певні дії. Однак багато чого можна зробити, використовуючи лише HTML та CSS, тому вони обов’язково знадобляться. Наступні уроки нашої навчальної програми зосереджені на інструментах, які необхідно осягнути перед тим, як перейти до JavaScript. - -# --question-- - -## --text-- - -Що потрібно використати, щоб додати абзаци тексту: HTML чи CSS? - -## --answers-- - -CSS - ---- - -JavaScript - ---- - -HTML - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md deleted file mode 100644 index 62fb0c8d130..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 637633162724a688c04636e4 -title: Вступ до HTML та CSS. Запитання C -challengeType: 15 -dashedName: introduction-to-html-and-css-question-c ---- - -# --description-- - -HTML та CSS — це дві мови, які працюють разом, щоб створити все, що ви бачите в інтернеті. HTML — це необроблені дані, на яких побудована вебсторінка. Весь текст, посилання, картки, списки та кнопки створюються в HTML. CSS надає стилю цим звичайним елементам. HTML розміщує інформацію на вебсторінці, а CSS робить її красивою, надаючи кольору та змінюючи шрифт. - -Багато ресурсів продовжують називати HTML та CSS мовами програмування, але, якщо розібратися з технічної точки зору, це не зовсім правильно. Причина в тому, що їх використовують лише для представлення інформації. Вони не використовуються для створення логіки програми. JavaScript, який ви вивчите в наступному розділі, є мовою програмування, оскільки його використовують для того, щоб вебсторінки виконували певні дії. Однак багато чого можна зробити, використовуючи лише HTML та CSS, тому вони обов’язково знадобляться. Наступні уроки нашої навчальної програми зосереджені на інструментах, які необхідно осягнути перед тим, як перейти до JavaScript. -# --question-- - -## --text-- - -Що потрібно використати, щоб змінити шрифт та фоновий колір кнопки: HTML чи CSS? - -## --answers-- - -Щоб змінити шрифт та фоновий колір кнопки, потрібно використати CSS. - ---- - -Щоб змінити шрифт та фоновий колір кнопки, потрібно використати JavaScript. - ---- - -Щоб змінити шрифт та фоновий колір кнопки, потрібно використати HTML. - -## --video-solution-- - -1 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md deleted file mode 100644 index fcb0ce32656..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: 637633672724a688c04636e5 -title: Вступ до HTML та CSS. Запитання D -challengeType: 15 -dashedName: introduction-to-html-and-css-question-d ---- - -# --description-- - -HTML та CSS — це дві мови, які працюють разом, щоб створити все, що ви бачите в інтернеті. HTML — це необроблені дані, на яких побудована вебсторінка. Весь текст, посилання, картки, списки та кнопки створюються в HTML. CSS надає стилю цим звичайним елементам. HTML розміщує інформацію на вебсторінці, а CSS робить її красивою, надаючи кольору та змінюючи шрифт. - -Багато ресурсів продовжують називати HTML та CSS мовами програмування, але, якщо розібратися з технічної точки зору, це не зовсім правильно. Причина в тому, що їх використовують лише для представлення інформації. Вони не використовуються для створення логіки програми. JavaScript, який ви вивчите в наступному розділі, є мовою програмування, оскільки його використовують для того, щоб вебсторінки виконували певні дії. Однак багато чого можна зробити, використовуючи лише HTML та CSS, тому вони обов’язково знадобляться. Наступні уроки нашої навчальної програми зосереджені на інструментах, які необхідно осягнути перед тим, як перейти до JavaScript. - -# --question-- - -## --text-- - -Яка різниця між HTML, CSS та JavaScript? - -## --answers-- - -HTML використовують для інтерактивних елементів, CSS для вигляду, а JavaScript для створення структури вебсторінки. - ---- - -CSS використовують для вигляду, JavaScript для інтерактивних елементів, а HTML для створення структури вебсторінки. - ---- - -JavaScript використовують для вигляду, CSS для створення структури вебсторінки, а HTML для інтерактивних елементів. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md deleted file mode 100644 index 31d1ce9c7d9..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f704072c65bc8e73dfe36 -videoId: tsEQgGjSmkM -title: Посилання та зображення. Запитання A -challengeType: 15 -dashedName: links-and-images-question-a ---- - -# --description-- - -Щоб попрактикуватись з посиланнями та зображеннями, вам потрібний проєкт HTML. - -- Створіть новий каталог під назвою `odin-links-and-images`. - -- У цьому каталозі створіть новий файл під назвою `index.html`. - -- Заповніть звичайний шаблонний код HTML. - -- Вкінці додайте наступний `h1` до `body`: `

                                                Homepage

                                                ` - -## Елементи посилання -Щоб створити посилання в HTML, використовується елемент посилання. Елемент посилання визначається шляхом обгортання тексту чи іншого елемента HTML тегом ``. Додайте наступне до `body` створеної сторінки `index.html` та відкрийте сторінку у браузері: - -```html -click me -``` - -Можливо, ви помітили, що натиснувши на посилання нічого не відбувається. Тег посилання не знає куди посилатись. Ви повинні сказати йому місце призначення. Для цього використовується атрибут HTML. - -Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. Зазвичай атрибут складається з двох частин: назви та значення, однак не всі атрибути вимагають значення. У нашому випадку потрібно додати атрибут `href` (hyperlink reference) до початкового тегу посилання. Значенням атрибута `href` є місце призначення, на яке ви хочете посилати. - -Додайте наступний атрибут `href` до створеного елемента посилання та спробуйте натиснути його знову. Не забудьте оновити браузер, щоб застосувати нові зміни. - -```html -click me -``` - -Будь-який текст з тегом посилання без атрибута `href` буде звичайним текстом. Якщо атрибут `href` наявний, браузер надасть тексту синього кольору та підкреслення, щоб вказати, що це посилання. - -Важливо зазначити, що теги посилання можна використовувати для будь-яких ресурсів в інтернеті, а не лише документів HTML. Ви можете посилати на відео, файли pdf, зображення та інше, але здебільшого ви посилатимете на інші документи HTML. - -# --question-- - -## --assignment-- - -Перегляньте відео Кевіна Павелла про посилання у HTML. - -## --text-- - -Який тег потрібно використати, щоб створити посилання у HTML? - -## --answers-- - -`` - ---- - -`

                                                ` - ---- - -`

                                                  ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md deleted file mode 100644 index 13c69423b4d..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 637f703572c65bc8e73dfe35 -title: Посилання та зображення. Запитання B -challengeType: 15 -dashedName: links-and-images-question-b ---- - -# --description-- - -Щоб попрактикуватись з посиланнями та зображеннями, вам потрібний проєкт HTML. - -- Створіть новий каталог під назвою `odin-links-and-images`. - -- У цьому каталозі створіть новий файл під назвою `index.html`. - -- Заповніть звичайний шаблонний код HTML. - -- Вкінці додайте наступний `h1` до `body`: `

                                                  Homepage

                                                  ` - -## Елементи посилання -Щоб створити посилання в HTML, використовується елемент посилання. Елемент посилання визначається шляхом обгортання тексту чи іншого елемента HTML тегом `                                                  `. Додайте наступне до `body` створеної сторінки `index.html` та відкрийте сторінку у браузері: - -```html -click me -``` - -Можливо, ви помітили, що натиснувши на посилання нічого не відбувається. Тег посилання не знає куди посилатись. Ви повинні сказати йому місце призначення. Для цього використовується атрибут HTML. Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. Зазвичай атрибут складається з двох частин: назви та значення, однак не всі атрибути вимагають значення. У нашому випадку потрібно додати атрибут `href` (hyperlink reference) до початкового тегу посилання. Значенням атрибута `href` є місце призначення, на яке ви хочете посилати. Додайте наступний атрибут `href` до створеного елемента посилання та спробуйте натиснути його знову. Не забудьте оновити браузер, щоб застосувати нові зміни. - -```html -click me -``` - -Будь-який текст з тегом посилання без атрибута `href` буде звичайним текстом. Якщо атрибут `href` наявний, браузер надасть тексту синього кольору та підкреслення, щоб вказати, що це посилання. Важливо зазначити, що теги посилання можна використовувати для будь-яких ресурсів в інтернеті, а не лише документів HTML. Ви можете посилати на відео, файли pdf, зображення та інше, але здебільшого ви посилатимете на інші документи HTML. - -# --question-- -## --text-- - -Що таке атрибут? -## --answers-- - -Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині кінцевого тегу елемента. - ---- - -Атрибут HTML повідомляє браузеру вміст елемента. - ---- - -Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. - - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md deleted file mode 100644 index 3285cc7aa08..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 637f703072c65bc8e73dfe34 -title: Посилання та зображення. Запитання C -challengeType: 15 -dashedName: links-and-images-question-c ---- - -# --description-- - -Щоб попрактикуватись з посиланнями та зображеннями, вам потрібний проєкт HTML. - -- Створіть новий каталог під назвою `odin-links-and-images`. - -- У цьому каталозі створіть новий файл під назвою `index.html`. - -- Заповніть звичайний шаблонний код HTML. - -- Вкінці додайте наступний `h1` до `body`: `

                                                  Homepage

                                                  ` - -## Елементи посилання -Щоб створити посилання в HTML, використовується елемент посилання. Елемент посилання визначається шляхом обгортання тексту чи іншого елемента HTML тегом ``. Додайте наступне до `body` створеної сторінки `index.html` та відкрийте сторінку у браузері: - -```html -click me -``` - -Можливо, ви помітили, що натиснувши на посилання нічого не відбувається. Тег посилання не знає куди посилатись. Ви повинні сказати йому місце призначення. Для цього використовується атрибут HTML. Атрибут HTML надає додаткову інформацію елементу HTML та завжди розміщений всередині початкового тегу елемента. Зазвичай атрибут складається з двох частин: назви та значення, однак не всі атрибути вимагають значення. У нашому випадку потрібно додати атрибут `href` (hyperlink reference) до початкового тегу посилання. Значенням атрибута `href` є місце призначення, на яке ви хочете посилати. Додайте наступний атрибут `href` до створеного елемента посилання та спробуйте натиснути його знову. Не забудьте оновити браузер, щоб застосувати нові зміни. - -```html -click me -``` - -Будь-який текст з тегом посилання без атрибута `href` буде звичайним текстом. Якщо атрибут `href` наявний, браузер надасть тексту синього кольору та підкреслення, щоб вказати, що це посилання. Важливо зазначити, що теги посилання можна використовувати для будь-яких ресурсів в інтернеті, а не лише документів HTML. Ви можете посилати на відео, файли pdf, зображення та інше, але здебільшого ви посилатимете на інші документи HTML. - -# --question-- - -## --text-- - -Який атрибут повідомляє посиланню про місце призначення? - -## --answers-- - -`src` - ---- - -`href` - ---- - -`link` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md deleted file mode 100644 index 83d6d276ed2..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 637f702872c65bc8e73dfe33 -videoId: ta3Oxx7Yqbo -title: Посилання та зображення. Запитання D -challengeType: 15 -dashedName: links-and-images-question-d ---- - -# --description-- - - -Загалом існує два типи посилань, які ви створите: - -- Посилання на сторінки інших вебсайтів в інтернеті - -- Посилання на сторінки ваших вебсайтів - - -## Абсолютні посилання -Посилання на сторінки інших вебсайтів в інтернеті називаються абсолютними посиланнями. Зазвичай абсолютне посилання складається з наступних частин: `protocol://domain/path`. Абсолютне посилання завжди міститиме протокол та домен місця призначення. - -Ви вже бачили абсолютне посилання в дії. Посилання на головну сторінку проєкту Odin є абсолютним посиланням, оскільки воно містить протокол та домен. - -`https://www.theodinproject.com/about` - -## Відносні посилання -Посилання на іншу сторінку власних вебсайтів називаються відносними посиланнями. Відносні посилання не містять домену, оскільки це інша сторінка на тому ж сайті, тому назва домену буде одинаковою. - -Відносні посилання містять лише шлях до файлу до іншої сторінки відносно сторінки, на яку ви посилаєте. Це досить абстрактно, тому розглянемо приклад. - -В межах каталогу `odin-links-and-images` створіть ще один файл HTML під назвою `about.html` та вставте у нього наступний код: - -```html - - - - - Odin Links and Images - - - -

                                                  About Page

                                                  - - -``` - -Назад до сторінки `index`: додайте наступний елемент посилання, щоб створити посилання на сторінку `about`: - -```html - -

                                                  Homepage

                                                  - click me - - About - -``` - -Відкрийте файл `index.html` у браузері та натисніть на посилання, щоб перевірити, що все працює правильно. Натиснувши на посилання, ви повинні перейти на щойно створену сторінку `about`. - -Все працює, оскільки `index` та сторінка `about` знаходяться в одному каталозі. Це означає, що ви можете використати назву (`about.html`) як значення `href`. - -Однак зазвичай потрібно організувати каталоги кращим способом. Зазвичай ви б мали тільки `index.html` у кореневому каталозі, а всі інші файли HTML мали власні каталоги. - -Створіть новий каталог під назвою `pages` в межах каталогу `odin-links-and-images` та перемістіть файл `about.html` до нового каталогу. - -Оновіть сторінку `index` у браузері та натисніть посилання `about`. Зараз воно буде недійсним. Причина в тому, що змінилось розташування сторінки `about`. - -Щоб виправити це, вам просто потрібно оновити значення `href` посилання `about`, щоб включити каталог `pages/`, оскільки це нове розташування файлу `about.html` відносно файлу `index.html`. - -```html - -

                                                  Homepage

                                                  - About - -``` - -Оновіть сторінку `index` у браузері та спробуйте знову натиснути посилання `about`, зараз воно має працювати. - -У більшості випадків все працюватиме. Однак іноді ви можете натрапити на непередбачувані проблеми. Якщо додати `./` перед посиланням, проблем можна уникнути. Додаючи `./` ви вказуєте коду, що він повинен шукати файл/каталог, відносно до **поточного** каталогу. - -```html - -

                                                  Homepage

                                                  - About - -``` - -# --question-- - -## --assignment-- - -Перегляньте відео Кевіна Павелла про структуру файлів у HTML. - -## --text-- - -Яка різниця між абсолютним та відносним посиланням? - -## --answers-- - -Абсолютне посилання — посилання на іншу сторінку поточного вебсайту. Відносне посилання — посилання на інший вебсайт. - ---- - -Абсолютне посилання — посилання на інший вебсайт. Відносне посилання — посилання на іншу сторінку поточного вебсайту. - ---- - -Між абсолютним та відносним посиланням немає різниці. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md deleted file mode 100644 index 64869cd5c17..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 637f702372c65bc8e73dfe32 -videoId: 0xoztJCHpbQ -title: Посилання та зображення. Запитання E -challengeType: 15 -dashedName: links-and-images-question-e ---- - -# --description-- - -Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для показу різних видів медіа. Найчастіше використовується елемент зображення. - -Щоб показати зображення у HTML, використовується елемент ``. На відміну від інших елементів, які ми вже вивчили, елемент `` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег. - -Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів. - -Наприклад, використовуючи абсолютний шлях, можна показати зображення з сайту The Odin Project: - - - -Щоб використати зображення власних вебсайтів, можна використати відносний шлях. - -- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`. - -- Потім завантажте [це зображення](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) та перемістіть його до щойно створеного каталогу `images`. - -- Перейменуйте зображення на `dog.jpg`. - -Наприкінці додайте зображення до файлу `index.html`: - -```html - -

                                                  Homepage

                                                  - click me - - About - - - -``` - -Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі. - - -## Батьківські каталоги - -Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Спочатку вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу, перш ніж ви зможете отримати доступ до каталогу зображень. - -Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../.` Розглянемо це в дії: всередині `body` файлу `about.html` додайте наступне зображення під заголовком, який ви додали раніше: - -```html - -``` - -Розіб’ємо на частини: - -- Спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`. - -- Потім ви можете перейти до каталогу `images` з батьківського каталогу. - -- Вкінці ви можете отримати доступ до файлу `dog.jpg`. - -Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати. - -## Атрибут `alt` - -Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text). - -Атрибут `alt` використовується для опису зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору. - -Ось так виглядає логотип The Odin Project з атрибутом `alt`: - - -# --question-- - -## --assignment-- - -Перегляньте відео Кевіна Павелла про зображення у HTML. - -## --text-- - -За допомогою якого тега показують зображення? - -## --answers-- - -`` - ---- - -`` - ---- - -`` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md deleted file mode 100644 index cecf438eb66..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701c72c65bc8e73dfe31 -title: Посилання та зображення. Запитання F -challengeType: 15 -dashedName: links-and-images-question-f ---- - -# --description-- - -Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для показу різних видів медіа. Найчастіше використовується елемент зображення. - -Щоб показати зображення у HTML, використовується елемент ``. На відміну від інших елементів, які ми вже вивчили, елемент `` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег. - -Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів. - -Наприклад, використовуючи абсолютний шлях, можна показати зображення з сайту The Odin Project: - - - -Щоб використати зображення власних вебсайтів, можна використати відносний шлях. - -- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`. - -- Потім завантажте [це зображення](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) та перемістіть його до щойно створеного каталогу зображень. - -- Перейменуйте зображення на `dog.jpg`. - -Наприкінці додайте зображення до файлу `index.html`: - -```html - -

                                                  Homepage

                                                  -                                                   click me - - About - - - -``` - -Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі. - - -## Батьківські каталоги - -Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Спочатку вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу, перш ніж ви зможете отримати доступ до каталогу зображень. - -Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../.` Розглянемо це в дії: всередині `body` файлу `about.html` додайте наступне зображення під заголовком, який ви додали раніше: - -```html - -``` - -Розіб’ємо на частини: - -- Спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`. - -- Потім ви можете перейти до каталогу `images` з батьківського каталогу. - -- Вкінці ви можете отримати доступ до файлу `dog.jpg`. - -Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати. - -## Атрибут alt - -Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text). - -Атрибут `alt` використовується для опису зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору. - -Ось так виглядає логотип The Odin Project з атрибутом alt: - - -# --question-- - -## --text-- - -Які атрибути повинні мати зображення? - -## --answers-- - -`href` та `alt` - ---- - -`name` та `href` - ---- - -`alt` та `src` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md deleted file mode 100644 index 5c38b5f0f78..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 637f701572c65bc8e73dfe30 -title: Посилання та зображення. Запитання G -challengeType: 15 -dashedName: links-and-images-question-g ---- - -# --description-- - -Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для показу різних видів медіа. Найчастіше використовується елемент зображення. - -Щоб показати зображення у HTML, використовується елемент ``. На відміну від інших елементів, які ми вже вивчили, елемент `` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег. - -Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів. - -Наприклад, використовуючи абсолютний шлях, можна показати зображення з сайту The Odin Project: - - - -Щоб використати зображення власних вебсайтів, можна використати відносний шлях. - -- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`. - -- Потім завантажте [це зображення](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) та перемістіть його до щойно створеного каталогу зображень. - -- Перейменуйте зображення на `dog.jpg`. - -Наприкінці додайте зображення до файлу `index.html`: - -```html - -

                                                  Homepage

                                                  - click me - - About - - - -``` - -Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі. - - -## Батьківські каталоги - -Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Спочатку вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу, перш ніж ви зможете отримати доступ до каталогу зображень. - -Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../.` Розглянемо це в дії: всередині `body` файлу `about.html` додайте наступне зображення під заголовком, який ви додали раніше: - -```html - -``` - -Розіб’ємо на частини: - -- Спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`. - -- Потім ви можете перейти до каталогу `images` з батьківського каталогу. - -- Вкінці ви можете отримати доступ до файлу `dog.jpg`. - -Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати. - -## Атрибут alt - -Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text). - -Атрибут `alt` використовується для опису зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору. - -Ось так виглядає логотип The Odin Project з атрибутом alt: - - -# --question-- - -## --text-- - -Як отримати доступ до батьківського каталогу у шляху до файлу? - -## --answers-- - -`../` - ---- - -`./` - ---- - -`.../` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md deleted file mode 100644 index 41226a401a8..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 637f700b72c65bc8e73dfe2f -title: Посилання та зображення. Запитання H -challengeType: 15 -dashedName: links-and-images-question-h ---- - -# --description-- - -Вебсайти були б нудними, якби показувати лише текст. На щастя, HTML надає широкий вибір елементів для показу різних видів медіа. Найчастіше використовується елемент зображення. - -Щоб показати зображення у HTML, використовується елемент ``. На відміну від інших елементів, які ми вже вивчили, елемент `` є самозакривним. Порожнім самозакривним елементам HTML не потрібний кінцевий тег. - -Замість того, щоб обгортати вміст початковим та кінцевим тегами, зображення вкладається за допомогою атрибута `src`, який повідомляє браузеру, де знаходиться файл зображення. Атрибут `src` працює майже так само, як атрибут `href` для тегів посилання. Він може вкласти зображення за допомогою як абсолютного, так і відносного шляхів. - -Наприклад, використовуючи абсолютний шлях, можна показати зображення з сайту The Odin Project: - - - -Щоб використати зображення власних вебсайтів, можна використати відносний шлях. - -- Створіть новий каталог під назвою `images` в межах проєкту `odin-links-and-images`. - -- Потім завантажте [це зображення](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) та перемістіть його до щойно створеного каталогу зображень. - -- Перейменуйте зображення на `dog.jpg`. - -Наприкінці додайте зображення до файлу `index.html`: - -```html - -

                                                  Homepage

                                                  - click me - - About - - - -``` - -Збережіть файл `index.html` та відкрийте його у браузері, щоб подивитись на Чарльза у всій його красі. - - -## Батьківські каталоги - -Що робити, якщо ви хочете використати зображення собаки на сторінці `about`? Спочатку вам потрібно піднятися на один рівень вище в каталозі сторінок до батьківського каталогу, перш ніж ви зможете отримати доступ до каталогу зображень. - -Щоб перейти до батьківського каталогу, вам потрібно використати дві крапки у відносному шляху, ось так: `../.` Розглянемо це в дії: всередині `body` файлу `about.html` додайте наступне зображення під заголовком, який ви додали раніше: - -```html - -``` - -Розіб’ємо на частини: - -- Спочатку перейдіть до батьківського каталогу сторінок, тобто `odin-links-and-images`. - -- Потім ви можете перейти до каталогу `images` з батьківського каталогу. - -- Вкінці ви можете отримати доступ до файлу `dog.jpg`. - -Використаємо метафору: `../` у шляху нагадує вихід з кімнати до коридору, щоб перейти до іншої кімнати. - -## Атрибут alt - -Окрім атрибута `src`, кожному елементу зображення потрібний атрибут `alt` (alternative text). - -Атрибут `alt` використовується для опису зображення. Він буде використаний на місці зображення, яке не завантажується. Його також використовують читачі екрана, щоб описати зображення для користувачів з порушенням зору. - -Ось так виглядає логотип The Odin Project з атрибутом alt: - - -# --question-- - -## --assignment-- - -Прочитайте про чотири головні формати зображення, які можна використовувати на вебсайтах. - -## --text-- - -Які чотири головні формати зображення можна використовувати на вебсайтах? - -## --answers-- - -TIFF, GIF, PNG та SVG. - ---- - -JPG, PNG, GIF та SVG. - ---- - -JPG, PDF, SVG та GIF. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md deleted file mode 100644 index 2b633ad61eb..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e3e72c65bc8e73dfe24 -videoId: kcHKFZBVtf4 -title: Впорядкований та невпорядкований список. Запитання A -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-a ---- - -# --description-- - -Якщо ви хочете мати список елементів, порядок яких не має значення (наприклад, список покупок із товарами, які можна купити в будь-якому порядку), можна використати невпорядкований список. - -Невпорядковані списки створені за допомогою елемента `
                                                    `, а кожен елемент списку створений за допомогою елемента списку `
                                                  • `. - -Елементи невпорядкованого списку починаються з маркера списку: - - - -Якщо ви хочете мати список елементів, порядок яких має значення (наприклад, покроковий рецепт або 10 улюблених телешоу), можна використати впорядкований список. - -Впорядковані списки створені за допомогою елемента `
                                                      `. Кожен елемент списку також створений за допомогою елемента списку `
                                                    1. `. Однак елементи впорядкованого списку починаються з числа: - - - -# --question-- - -## --assignment-- - -Перегляньте перші три хвилини відео Кевіна Павелла про впорядковані та невпорядковані списки. - ---- - -Зробіть невпорядкований список їжі, яку потрібно купити. - ---- - -Зробіть впорядкований список справ, які потрібно виконати сьогодні. - ---- - -Зробіть невпорядкований список місць, які ви хочете відвідати. - ---- - -Зробіть впорядкований список 5 улюблених відеоігор або фільмів. - -## --text-- - -Який тег потрібно використати, щоб створити невпорядкований список у HTML? - -## --answers-- - -`
                                                    2. ` - ---- - -`
                                                        ` - ---- - -`
                                                          ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md deleted file mode 100644 index 34ad5bee6c5..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e4672c65bc8e73dfe25 -title: Впорядкований та невпорядкований список. Запитання B -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-b ---- - -# --description-- - -Якщо ви хочете мати список елементів, порядок яких не має значення (наприклад, список покупок із товарами, які можна купити в будь-якому порядку), можна використати невпорядкований список. - -Невпорядковані списки створені за допомогою елемента `
                                                            `, а кожен елемент списку створений за допомогою елемента списку `
                                                          • `. - -Елементи невпорядкованого списку починаються з маркера списку: - - - -Якщо ви хочете мати список елементів, порядок яких має значення (наприклад, покроковий рецепт або 10 улюблених телешоу), можна використати впорядкований список. - -Впорядковані списки створені за допомогою елемента `
                                                              `. Кожен елемент списку також створений за допомогою елемента списку `
                                                            1. `. Однак елементи впорядкованого списку починаються з числа: - - - -# --question-- - -## --text-- - -Який тег потрібно використати, щоб створити впорядкований список у HTML? - -## --answers-- - -`
                                                                ` - ---- - -`
                                                              1. ` - ---- - -`
                                                                  ` - -## --video-solution-- - -1 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md deleted file mode 100644 index cdfe7266f54..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 637f4e5172c65bc8e73dfe26 -title: Впорядкований та невпорядкований список. Запитання C -challengeType: 15 -dashedName: understand-ordered-and-unordered-list-question-c ---- - -# --description-- - -Якщо ви хочете мати список елементів, порядок яких не має значення (наприклад, список покупок із товарами, які можна купити в будь-якому порядку), можна використати невпорядкований список. - -Невпорядковані списки створені за допомогою елемента `
                                                                    `, а кожен елемент списку створений за допомогою елемента списку `
                                                                  • `. - -Елементи невпорядкованого списку починаються з маркера списку: - - - -Якщо ви хочете мати список елементів, порядок яких має значення (наприклад, покроковий рецепт або 10 улюблених телешоу), можна використати впорядкований список. - -Впорядковані списки створені за допомогою елемента `
                                                                      `. Кожен елемент списку також створений за допомогою елемента списку `
                                                                    1. `. Однак елементи впорядкованого списку починаються з числа: - - - -# --question-- - -## --text-- - -Який тег потрібно використати, щоб створити елементи в межах невпорядкованого та впорядковано списків у HTML? - -## --answers-- - -`
                                                                        ` - ---- - -`
                                                                      1. ` - ---- - -`
                                                                          ` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md deleted file mode 100644 index 04462c6d076..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-a.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 637f4e5872c65bc8e73dfe27 -videoId: yqcd-XkxZNM -title: Робота з текстом. Запитання A -challengeType: 15 -dashedName: working-with-text-question-a ---- - -# --description-- - -Що ви очікуєте від наступного тексту на сторінці HTML? - -```html - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. - -``` - -Текст має вигляд двох абзаців, і ви можете очікувати, що він зобразиться так само. Однак вивід буде іншим, як показано нижче: - - - -Якщо браузер стикається з новими рядками, схожими на цей приклад HTML, він стисне їх в один рядок. У результаті стиснення весь текст стане одним довгим рядком. - -Якщо ви хочете створити абзаци в HTML, вам потрібно використати елемент абзацу, який додаватиме новий рядок після кожного абзацу. Елемент абзацу визначається обтіканням текстового вмісту тегом `

                                                                          `. - -Якщо використати елементи абзацу на нашому прикладі, проблема буде розв’язана: - - - -# --question-- - -## --assignment-- - -Перегляньте відео Кевіна Павелла про абзаци та заголовки у HTML. - -## --text-- - -Як створити абзац у HTML? - -## --answers-- - -`

                                                                          This is a paragraph

                                                                          ` - ---- - -`

                                                                          This is a paragraph

                                                                          ` - ---- - -`This is a paragraph` - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md deleted file mode 100644 index 1cb173a33e8..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: 637f4e5f72c65bc8e73dfe28 -title: Робота з текстом. Запитання B -challengeType: 15 -dashedName: working-with-text-question-b ---- - -# --description-- - -Заголовки трішки відрізняються від інших текстових елементів у HTML: вони більші та жирніші за інший текст, що вказує на те, що вони є заголовками. - -Існує 6 різних рівнів заголовків від `

                                                                          ` до `

                                                                          `. Число у тегу означає рівень заголовка. Найбільшим та найважливішим заголовком є `h1`, а ось `h6` є найменшим заголовком найнижчого рівня. - -Заголовки визначаються майже так само, як абзаци. Наприклад, щоб створити заголовок `h1`, ми загортаємо текст заголовка в тег `

                                                                          `. - - - -Важливо використовувати правильний рівень заголовка, оскільки рівні забезпечують ієрархію вмісту. Заголовок `h1` завжди потрібно використовувати для загального заголовка, а заголовки нижчих рівнів потрібно використовувати для розділів сторінки. - -# --question-- -## --text-- - -Скільки існує рівнів заголовків і яка між ними різниця? - -## --answers-- - -Існує 5 рівнів заголовків. `h5` — найменший та найменш важливий заголовок, а `h1` — найбільший та найважливіший заголовок. - ---- - -Існує 6 рівнів заголовків. `h6` — найбільший та найважливіший заголовок, а `h1` — найменший та найменш важливий заголовок. - ---- - -Існує 6 рівнів заголовків. `h1` — найбільший та найважливіший заголовок, а `h6` — найменший та найменш важливий заголовок. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md deleted file mode 100644 index 009b2deefb5..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-c.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 637f4e6672c65bc8e73dfe29 -videoId: gW6cBZLUk6M -title: Робота з текстом. Запитання C -challengeType: 15 -dashedName: working-with-text-question-c ---- - -# --description-- - -Елемент `` робить текст жирним. Він також позначає текст як важливий, а це впливає на такі інструменти, як читачі екрана, якими користуються користувачі з порушеннями зору. Інтонація голосу деяких читачів може змінитись, щоб вказати на важливість тексту в межах елемента `strong`. Щоб визначити елемент `strong`, загорніть текст в тег ``. - -Ви можете використовувати `strong` окремо: - - - -Однак частіше ви будете використовувати елемент `strong` у поєднанні з іншими текстовими елементами: - - - -Іноді потрібно зробити текст жирним, але не надаючи йому важливого значення. Пізніше на уроках CSS ви дізнаєтеся, як це зробити. - -# --question-- - -## --assignment-- - -Перегляньте відео Кевіна Павелла про жирний та курсивний шрифт у HTML. - -## --text-- - -Який елемент потрібно використати, щоб зробити текст жирним та важливим? - -## --answers-- - -`This is an important message` - ---- - -`

                                                                          This is an important message

                                                                          ` - ---- - -`This is an important message` - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md deleted file mode 100644 index cee3b3abbf7..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: 637f4e6e72c65bc8e73dfe2a -title: Робота з текстом. Запитання D -challengeType: 15 -dashedName: working-with-text-question-d ---- - -# --description-- - -Елемент `em` робить текст курсивним. Він також робить акцент на тексті, що може вплинути на читачів екрана. Щоб визначити елемент, загорніть текст в тег ``. - -Ви можете використовувати `em` окремо: - - -Як і елемент `strong`, частіше ви будете використовувати елемент `em` у поєднанні з іншими текстовими елементами: - - - -# --question-- -## --text-- - -Який елемент потрібно використати, щоб зробити текст курсивним? - -## --answers-- - -`This is an italic message` - ---- - -`This is an italic message` - ---- - -`This is an italic message` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md deleted file mode 100644 index 08eb1161cd2..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 637f4e7972c65bc8e73dfe2b -title: Робота з текстом. Запитання E -challengeType: 15 -dashedName: working-with-text-question-e ---- - -# --description-- - -Можливо, ви помітили, що в усіх прикладах цього уроку ви робите відступи для елементів, які знаходяться всередині інших елементів. Це називається вкладенням елементів. - -Коли ви вкладаєте елементи в інші елементи, ви створюєте родинний зв’язок між ними. Вкладені елементи є дочірніми, а елемент, в який вони вкладені, є батьківським. - -У наступному прикладі елемент `body` є батьківським, а `p` — дочірнім: - -```html - - - - -

                                                                          Lorem ipsum dolor sit amet.

                                                                          - - -``` - -Як і люди, батьківські елементи HTML можуть мати багато дітей. Елементи одного рівня вкладеності вважаються братськими. - -Наприклад, у наступному коді два елементи `p` є братськими, оскільки є дочірніми елементами тегу `body` та вкладені на одному рівні: - -```html - - - - -

                                                                          Lorem ipsum dolor sit amet.

                                                                          -

                                                                          Ut enim ad minim veniam.

                                                                          - - -``` - -Ви використовуєте відступи, щоб зробити рівень вкладеності зрозумілим і читабельним для себе та інших розробників, які працюватимуть із вашим HTML у майбутньому. Рекомендовано робити відступ будь-яких дочірніх елементів на два пробіли. - -Батьківські, дочірні та братські стосунки між елементами будуть важливішими пізніше, коли ви почнете стилізувати свій HTML за допомогою CSS та додавати поведінку за допомогою JavaScript. Наразі важливо знати різницю між стосунками елементів і термінологією, яка використовується для опису їхніх стосунків. - -# --question-- - -## --text-- - -Які стосунки між двома елементами, вкладеними на одному рівні? - -## --answers-- - -Елементи є батьками один для одного. - ---- - -Елементи є дітьми один для одного. - ---- - -Елементи є братськими. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md deleted file mode 100644 index d39de6b1124..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 637f4e8072c65bc8e73dfe2c -title: Робота з текстом. Запитання F -challengeType: 15 -dashedName: working-with-text-question-f ---- - -# --description-- - -Можливо, ви помітили, що в усіх прикладах цього уроку ви робите відступи для елементів, які знаходяться всередині інших елементів. Це називається вкладенням елементів. - -Коли ви вкладаєте елементи в інші елементи, ви створюєте родинний зв’язок між ними. Вкладені елементи є дочірніми, а елемент, в який вони вкладені, є батьківським. - -У наступному прикладі елемент body є батьківським, а абзац — дочірнім: - -```html - - - - -

                                                                          Lorem ipsum dolor sit amet.

                                                                          - - -``` - -Як і люди, батьківські елементи HTML можуть мати багато дітей. Елементи одного рівня вкладеності вважаються братськими. - -Наприклад, у наступному коді два елементи абзацу є братськими, оскільки є дочірніми елементами тегу body та вкладені на одному рівні: - -```html - - - - -

                                                                          Lorem ipsum dolor sit amet.

                                                                          -

                                                                          Ut enim ad minim veniam.

                                                                          - - -``` - -Ви використовуєте відступи, щоб зробити рівень вкладеності зрозумілим і читабельним для себе та інших розробників, які працюватимуть із вашим HTML у майбутньому. Рекомендовано робити відступ будь-яких дочірніх елементів на два пробіли. - -Батьківські, дочірні та братські стосунки між елементами будуть важливішими пізніше, коли ви почнете стилізувати свій HTML за допомогою CSS та додавати поведінку за допомогою JavaScript. Наразі важливо знати різницю між стосунками елементів і термінологією, яка використовується для опису їхніх стосунків. - -# --question-- - -## --text-- - -Які стосунки між елементом і вкладеним у нього елементом? - -## --answers-- - -Елемент в межах іншого елемента називається батьківським. - ---- - -Елемент в межах іншого елемента називається дочірнім. - ---- - -Елемент в межах іншого елемента називається братським. - - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md deleted file mode 100644 index b195b4f10cc..00000000000 --- a/curriculum/challenges/ukrainian/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: 637f4e8772c65bc8e73dfe2d -title: Робота з текстом. Запитання G -challengeType: 15 -dashedName: working-with-text-question-g ---- - -# --description-- - -Браузер не бачить коментарі HTML: вони дозволяють нам коментувати код, щоб ви або інші розробники могли прочитати їх і отримати певний контекст про те, що може бути незрозумілим у коді. - -Написати коментар HTML просто: ви всього лиш вкладаєте коментар у теги ``. Наприклад: - -```html -

                                                                          View the html to see the hidden comments

                                                                          - - - -

                                                                          Some paragraph text

                                                                          - - -``` - -# --question-- - -## --assignment-- - -Щоб трохи попрактикуватися в роботі з текстом у HTML, створіть звичайну сторінку із публікацією, у якій наявні різні заголовки та абзаци, а деякий текст в абзацах виділено жирним шрифтом і курсивом. Ви можете використовувати [Lorem Ipsum](https://loremipsum.io) для створення фіктивного тексту замість справжнього тексту під час створення своїх сайтів. - -## --text-- - -Як створити коментар у HTML? - -## --answers-- - -`/* This is an HTML comment */` - ---- - -`` - ---- - -`<-- This is an HTML comment --!>` - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md deleted file mode 100644 index 96f1946625a..00000000000 --- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-1-to-100/problem-1-multiples-of-3-and-5.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5900f36e1000cf542c50fe80 -title: 'Завдання 1: числа кратні 3 та 5' -challengeType: 1 -forumTopicId: 301722 -dashedName: problem-1-multiples-of-3-and-5 ---- - -# --description-- - -Якщо ми запишемо усі натуральні числа до 10, кратних 3 та 5, то отримаємо 3, 5, 6 та 9. Сумою цих кратних є 23. - -Знайдіть суму всіх чисел кратних 3 та 5, які менші певного заданого значення `number`. - -# --hints-- - -`multiplesOf3and5(10)` має повернути число. - -```js -assert(typeof multiplesOf3and5(10) === 'number'); -``` - -`multiplesOf3and5(49)` має повернути 543. - -```js -assert.strictEqual(multiplesOf3and5(49), 543); -``` - -`multiplesOf3and5(1000)` має повернути 233168. - -```js -assert.strictEqual(multiplesOf3and5(1000), 233168); -``` - -`multiplesOf3and5(8456)` має повернути 16687353. - -```js -assert.strictEqual(multiplesOf3and5(8456), 16687353); -``` - -`multiplesOf3and5(19564)` має повернути 89301183. - -```js -assert.strictEqual(multiplesOf3and5(19564), 89301183); -``` - -# --seed-- - -## --seed-contents-- - -```js -function multiplesOf3and5(number) { - - return true; -} - -multiplesOf3and5(1000); -``` - -# --solutions-- - -```js -const multiplesOf3and5 = (number) => { - var total = 0; - - for(var i = 0; i < number; i++) { - if(i % 3 == 0 || i % 5 == 0) { - total += i; - } - } - return total; -}; -``` diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md deleted file mode 100644 index a8abd3ff027..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-1.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 651dd5ae6ffb500e3f2ce47c -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -```js -console.log('with code'); -``` - -*** - -Making a statement based on her assumption. - -### --feedback-- - -No, that's not correct - -*** - -Expressing a possibility. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -*** - -Giving a job description. - -### --feedback-- - -No, that's not correct - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md deleted file mode 100644 index 27f5dcb5e42..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5d86ffb500e3f2ce47d -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md deleted file mode 100644 index a79f83d6f5a..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-conversation-starters-in-the-break-room/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd5f41d697d0aab7833b5 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md deleted file mode 100644 index 13028d7c28a..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/dialogue-introducing.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 651dd3e06ffb500e3f2ce478 -title: "Dialogue: Introducing" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-introducing ---- - -# --description-- - -What the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md deleted file mode 100644 index 3d67f522c07..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/i-am-im.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543abeff5f028dba112f278 -title: "I am: I'm" -challengeType: 19 -dashedName: i-am-im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, the verb `to be` is used to talk about identities, characteristics, and more. The contraction `I'm` is a combination of `I` and `am`. Here, Tom uses it to introduce himself. - -# --question-- - -## --text-- - -Which operation correctly expands the contraction `I'm`? - -## --answers-- - -`I is` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I am` - -*** - -`I was` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -*** - -`I have` - -### --feedback-- - -Think about which verb form would correctly fit with `I` to talk about oneself in the present. - -## --video-solution-- - -2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md deleted file mode 100644 index a2aa6a8f717..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/im.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: 6543abf5f5f028dba112f279 -title: I'm -challengeType: 22 -dashedName: im -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -The word `I'm` is a contraction of `I am`. Contractions are a way to shorten common combinations of words, especially with verbs. - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, that's right! _ Tom McKenzie.` - -## --blanks-- - -`I'm` diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md deleted file mode 100644 index 3b8b7cff0bd..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/name-and-job-title.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -id: 6537e6ece93e5724eeb27c54 -title: Name and Job Title -challengeType: 19 -dashedName: name-and-job-title -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, we often mention our job or role in a company by saying, `I'm [Name], the [Job title].` This lets others know our position or role. - -# --question-- - -## --text-- - -What is Maria's job role at the company? - -## --answers-- - -`Graphic Designer` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Member` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`Team Lead` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -`CEO` - -### --feedback-- - -Focus on the term Maria used to describe herself. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md deleted file mode 100644 index 2a3c405b6ad..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/right.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 651dd5386ffb500e3f2ce47a -title: Right -challengeType: 22 -dashedName: right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, to check or confirm something people sometimes use tag questions. For example, `You are a programmer, right?` Here, `right?` is used as a tag to check or confirm the previous statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, _?` - -## --blanks-- - -`are` - -### --feedback-- - -Pay attention to the verb in the sentence. - -*** - -`right` - -### --feedback-- - -Pay attention to the verb in the sentence. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md deleted file mode 100644 index 2ae09721cbf..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/team-lead.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 6543aa3df5f028dba112f275 -title: Team Lead -challengeType: 22 -dashedName: team-lead -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -A `team lead` is a person who leads or manages a team. In the dialogue, Maria introduces herself as the team lead, meaning she has a leadership role. - -# --fillInTheBlank-- - -## --sentence-- - -`I'm Maria, the _ _.` - -## --blanks-- - -team - -### --feedback-- - -Focus on the term Maria used to describe herself. - -*** - -lead - -### --feedback-- - -Focus on the term Maria used to describe herself. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md deleted file mode 100644 index 3349bcfead9..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right-2.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: 6543aae6f5f028dba112f277 -title: "That's Right: 2" -challengeType: 22 -dashedName: thats-right-2 -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -Placeholder Description \_\_\_ \_\_ - -# --fillInTheBlank-- - -## --sentence-- - -`Hi, _ _! I'm Tom McKenzie. It's a pleasure to meet you.` - -## --blanks-- - -`that's` - -*** - -`right` diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md deleted file mode 100644 index e85982fd561..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/thats-right.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: 6543aaa9f5f028dba112f276 -title: That's Right -challengeType: 19 -dashedName: thats-right -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -When someone makes a correct assumption or guess about you, you can confirm it using phrases like `that's right`. It's a way of agreeing or saying yes to what is said. - -# --question-- - -## --text-- - -Which phrase does Tom use to confirm Maria's statement about him? - -## --answers-- - -`that's wrong` - -### --feedback-- - -`That's wrong` is used to disagree. - -*** - -`that's okay` - -### --feedback-- - -`that's okay` usually shows acceptance, not confirmation. - -*** - -`that's right` - -*** - -`that's left` - -### --feedback-- - -`that's left` refers to a direction, not confirmation. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md deleted file mode 100644 index dd254987129..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-greetings-in-your-first-day-at-the-office/you-are.md +++ /dev/null @@ -1,27 +0,0 @@ ---- -id: 651dd5296ffb500e3f2ce479 -title: You Are -challengeType: 22 -dashedName: you-are -audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 ---- - -# --description-- - -In English, when making introductions or identifying someone, you use the verb `to be`. In this case, `You are` is used to address the person Maria is talking to and affirmatively identify their occupation. - -Maria is introducing herself and confirming Tom's job role. `Are` is used in the present affirmative to make a statement. - -# --fillInTheBlank-- - -## --sentence-- - -`Hello, You _ the new graphic designer, right?` - -## --blanks-- - -are - -### --feedback-- - -The verb `to be` is an irregular verb. When conjugated with the pronoun `you`, `be` becomes `are`. For example: `You are an English learner.` diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md new file mode 100644 index 00000000000..a041fbddef7 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/655c0feadb1dd77f6cda623f.md @@ -0,0 +1,15 @@ +--- +id: 655c0feadb1dd77f6cda623f +title: "Dialogue 1: A Job Interview" +challengeType: 21 +videoId: nLDychdBwUg +dashedName: dialogue-1-a-job-interview +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md new file mode 100644 index 00000000000..97f3f3245d8 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b0f0be03b2137ed88b36c.md @@ -0,0 +1,54 @@ +--- +id: 657b0f0be03b2137ed88b36c +title: Task 1 +challengeType: 19 +dashedName: task-1 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `interview` is a formal meeting where someone asks questions to learn about another person's experience, skills, or opinions. In job interviews, like in the dialogue, the interviewer asks about the candidate's previous job experiences. + +# --question-- + +## --text-- + +What is the purpose of Anna's meeting with the candidate? + +## --answers-- + +To discuss a new project at Acme Tech + +### --feedback-- + +The dialogue is about an interview, not a project discussion. + +--- + +To give a presentation on web development + +### --feedback-- + +The dialogue focuses on an interview, not a presentation. + +--- + +To have a casual conversation about programming + +### --feedback-- + +This is a formal interview, not a casual conversation. + +--- + +To conduct an interview about the candidate's job experience + +## --video-solution-- + +4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md new file mode 100644 index 00000000000..301a777a900 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b106ced8c653be6b3218f.md @@ -0,0 +1,50 @@ +--- +id: 657b106ced8c653be6b3218f +title: Task 2 +challengeType: 22 +dashedName: task-2 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Thanks for coming in for this interview. _ you _ me about your _ job experiences?` + +## --blanks-- + +`Can` + +### --feedback-- + +This word is used to ask if someone is able to do something. + +--- + +`tell` + +### --feedback-- + +This word is used when asking someone to give information. + +--- + +`previous` + +### --feedback-- + +This word is used to describe something that happened before now. + + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md new file mode 100644 index 00000000000..ad5202d23d2 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b108cf870283d22b21e8e.md @@ -0,0 +1,58 @@ +--- +id: 657b108cf870283d22b21e8e +title: Task 3 +challengeType: 19 +dashedName: task-3 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the simple present tense is used to describe habitual or usual actions. However, when you are talking about past roles or experiences, like in an interview, you should use the simple past tense. + +The simple past tense often involves changing verbs. For example, `is` becomes `was` for singular subjects and `are` becomes `were` for plural subjects. + +For example, `I am a teacher` in the present becomes `I was a teacher` for past experiences. Similarly, `They are engineers` changes to `They were engineers` when speaking about the past. + +# --question-- + +## --text-- + +What was the candidate's position at Acme Tech? + +## --answers-- + +`A project manager` + +### --feedback-- + +The candidate stated they were a programmer, not a project manager. + +--- + +`A database analyst` + +### --feedback-- + +The candidate mentioned being a programmer, which is different from a database analyst. + +--- + +`A programmer` + +--- + +`A software tester` + +### --feedback-- + +The candidate specifically mentioned their role as a programmer, not a software tester. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md new file mode 100644 index 00000000000..f757d7077f1 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b110ad8afcc3f8e586362.md @@ -0,0 +1,38 @@ +--- +id: 657b110ad8afcc3f8e586362 +title: Task 4 +challengeType: 22 +dashedName: task-4 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that have been completed in the past. It involves changing verbs to show that the action happened before now. In this challenge, you'll practice using the simple past form of verb `to be`. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ there for three years. I _ responsible for developing web applications and maintaining the company's database.` + +## --blanks-- + +`was` + +### --feedback-- + +The first `was` indicates the completion of the time period the candidate spent at their previous job. + +--- + +`was` + +### --feedback-- + +The second `was` is used to describe past responsibility, indicating what the candidate used to do in their previous job. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md new file mode 100644 index 00000000000..a2258172744 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b115008a62d41c0d7482f.md @@ -0,0 +1,49 @@ +--- +id: 657b115008a62d41c0d7482f +title: Task 5 +challengeType: 19 +dashedName: task-5 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the context of programming and technology, the term `web applications` refers to software programs that run on a web server and are accessed through a web browser. They are an essential part of modern technology, allowing users to perform functions or access services over the internet. + +# --question-- + +## --text-- + +What does `web applications` refer to in the context of programming? + +## --answers-- + +Mobile apps that are downloaded from app stores + +### --feedback-- + +While mobile apps are a type of application, `web applications` specifically refer to those accessed through a web browser. + +--- + +Programs that run on a web server and are accessed via a web browser + +--- + +Physical hardware used in networking + +### --feedback-- + +Web applications are software, not physical hardware. + +--- + +Websites that only provide information without user interaction + +### --feedback-- + +Web applications are interactive and functional, not just informational. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md new file mode 100644 index 00000000000..6c2c5ba78bf --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b119f0ce64343420bb850.md @@ -0,0 +1,49 @@ +--- +id: 657b119f0ce64343420bb850 +title: Task 6 +challengeType: 19 +dashedName: task-6 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `database` is a structured collection of data, typically stored electronically in a computer system. It is used to organize, store, and retrieve large amounts of information efficiently. In programming, `database` is essential for managing data that applications need to function. + +# --question-- + +## --text-- + +What is a `database` in the context of programming? + +## --answers-- + +A structured collection of data stored electronically + +--- + +A tool for designing websites + +### --feedback-- + +While important in web development, a database is not a tool for designing websites, but for storing data. + +--- + +A programming language used to create applications + +### --feedback-- + +A database is not a programming language; it's a system for storing and managing data. + +--- + +A type of computer virus + +### --feedback-- + +A database is a safe and structured way to store data, not a computer virus. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md new file mode 100644 index 00000000000..03e329649a9 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11e082e48a44eb4bfc09.md @@ -0,0 +1,40 @@ +--- +id: 657b11e082e48a44eb4bfc09 +title: Task 7 +challengeType: 22 +dashedName: task-7 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's response and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ also part of the _ update team.` + +## --blanks-- + +`was` + +### --feedback-- + +This word is a past tense verb. You use it to talk about something that happened in the past. + +--- + +`software` + +### --feedback-- + +This word refers to computer programs. It's an important term in technology and programming. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md new file mode 100644 index 00000000000..67343b31705 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b11f87368cf463ea4fe46.md @@ -0,0 +1,57 @@ +--- +id: 657b11f87368cf463ea4fe46 +title: Task 8 +challengeType: 19 +dashedName: task-8 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Questions in the past tense with the verb `to be` are very similar to how you do it in the present tense. The only difference is that you need to remember to conjugate the verb to `were` or `was`, followed by the subject and then the main verb. For example: + + `Were you at the meeting yesterday?` Notice how `were` comes before `you` to for a question. + `What was my assignment?` For a specific question, notice how `was` comes after `what` and before `my`. + +# --question-- + +## --text-- + +How does Anna ask about specific projects in the past tense? + +## --answers-- + +`Where there any specific projects you'd like to mention?` + +### --feedback-- + +`Where` is used for locations. The correct form for asking about past events is `Were`. + +--- + +`Were there any specific projects you'd like to mention?` + +--- + +`Was there any specific projects you'd like to mention?` + +### --feedback-- + +`Was` is used with singular nouns. Since `projects` is plural, `Were` is the correct choice. + +--- + +`Are there any specific projects you'd like to mention?` + +### --feedback-- + +`Are` is present tense. The question is about past projects, so `Were` is needed. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md new file mode 100644 index 00000000000..e6bc643d065 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1240ef768447b80817ad.md @@ -0,0 +1,55 @@ +--- +id: 657b1240ef768447b80817ad +title: Task 9 +challengeType: 19 +dashedName: task-9 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense, as reviewed earlier, is used for actions completed in the past. In this context, `we were involved in` combines the simple past tense (`were`) with the expression `involved in`, which means being a part of something, especially in an active or important role. For example, `They were involved in organizing the event` means they played an important role in organizing it. + +# --question-- + +## --text-- + +How does the candidate describe their role in the project? + +## --answers-- + +`We had involvement in the development of the e-commerce platform.` + +### --feedback-- + +Although this phrase communicates involvement, the more common expression in English is `were involved in`. + +--- + +`We were engaged in the development of the e-commerce platform.` + +### --feedback-- + +`engaged in` is similar but not the exact phrase used by the candidate. `Involved in` specifically indicates an active participation. + +--- + +`We were involved in the development of the e-commerce platform.` + +--- + +`We participated in the development of the e-commerce platform.` + +### --feedback-- + +While `participated in` suggests involvement, the specific phrase used here is `involved in`. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md new file mode 100644 index 00000000000..f51e04c012a --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12ae08dd7049b300c901.md @@ -0,0 +1,49 @@ +--- +id: 657b12ae08dd7049b300c901 +title: Task 10 +challengeType: 19 +dashedName: task-10 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +An `e-commerce platform` refers to a software application that allows businesses to manage their online sales operations. It typically includes features for displaying products, processing orders, and handling customer transactions. This term is essential in the world of online business, as it enables companies to sell goods and services over the internet. + +# --question-- + +## --text-- + +What is an `e-commerce platform` in the context of online business? + +## --answers-- + +A platform for social media marketing + +### --feedback-- + +While e-commerce platforms may use social media for marketing, they are primarily used for online sales operations. + +--- + +A software application for managing online sales + +--- + +A tool for website design and development + +### --feedback-- + +An e-commerce platform is specifically for managing online sales, not just website design. + +--- + +A system for email communication with customers + +### --feedback-- + +Though communication might be a feature, an e-commerce platform's main function is to manage online sales. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md new file mode 100644 index 00000000000..092c2b7ff32 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b12e7c306334b7c320221.md @@ -0,0 +1,41 @@ +--- +id: 657b12e7c306334b7c320221 +title: Task 11 +challengeType: 22 +dashedName: task-11 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the candidate's statement and fill in the missing words. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for the checkout process, and it _ a successful implementation.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense of `are` used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense of `is` used for singular subjects or situations. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md new file mode 100644 index 00000000000..5a555480e1c --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b13088693ef4ce21ce0e4.md @@ -0,0 +1,49 @@ +--- +id: 657b13088693ef4ce21ce0e4 +title: Task 12 +challengeType: 19 +dashedName: task-12 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `checkout process` refers to the steps involved in completing a purchase, whether in a physical store or online. In a physical store, this usually involves taking items to a cashier, paying, and receiving a receipt. In online shopping, it includes adding items to a cart, entering shipping and payment details, and finalizing the order. + +# --question-- + +## --text-- + +What does the `checkout process` typically involve? + +## --answers-- + +Signing up for a store's loyalty program + +### --feedback-- + +While loyalty programs are part of customer engagement, the checkout process is specifically about completing a transaction. + +--- + +Arranging items on shelves in a store + +### --feedback-- + +Arranging items is a part of store management, not related to the checkout process of completing a purchase. + +--- + +Conducting market research + +### --feedback-- + +Market research is important for business strategy, but it's separate from the checkout process, which is directly involved in sales transactions. + +--- + +Completing a purchase through payment and receipt of goods + +## --video-solution-- + +4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md new file mode 100644 index 00000000000..db7a9bbed14 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b133afcef714e542b557a.md @@ -0,0 +1,49 @@ +--- +id: 657b133afcef714e542b557a +title: Task 13 +challengeType: 19 +dashedName: task-13 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Implementation` in a technical or business context refers to the process of putting a plan or design into effect. In software development, for instance, implementation involves the actual coding and setup of a software application based on designed specifications. It is a critical phase where ideas or plans are turned into a functioning reality. + +# --question-- + +## --text-- + +What does `implementation` mean in a project context? + +## --answers-- + +The planning stage of a project + +### --feedback-- + +Planning is the phase where strategies are formed, not the actual execution or implementation of those plans. + +--- + +The analysis of project results + +### --feedback-- + +Analysis is about evaluating outcomes, whereas implementation is about executing or carrying out the project plans. + +--- + +The process of team formation + +### --feedback-- + +Team formation is part of project setup, but implementation specifically refers to executing the planned tasks of the project. + +--- + +The execution of a plan or design + +## --video-solution-- + +4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md new file mode 100644 index 00000000000..1fa977ff3c0 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b135e9029fb4f8141e40c.md @@ -0,0 +1,49 @@ +--- +id: 657b135e9029fb4f8141e40c +title: Task 14 +challengeType: 22 +dashedName: task-14 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. This is a great way to practice and remember these words. + +# --fillInTheBlank-- + +## --sentence-- + +`Anna: That's excellent. _ there any specific projects you'd like to mention?` + +`Candidate: Yes, in one of my team's projects, we were _ in the development of an e-commerce platform. We were responsible for the _ process, and it was a successful implementation.` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past tense form of `are`. The first letter should be capitalized. + +--- + +`involved` + +### --feedback-- + +This word means participating actively in something. + +--- + +`checkout` + +### --feedback-- + +This term refers to the process of completing a purchase. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md new file mode 100644 index 00000000000..94904516eba --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b138d33db9e50f116b5f0.md @@ -0,0 +1,54 @@ +--- +id: 657b138d33db9e50f116b5f0 +title: Task 15 +challengeType: 19 +dashedName: task-15 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and answer the question. + +# --question-- + +## --text-- + +How does Anna ask about the candidate's educational background in computer science? + +## --answers-- + +`Are you educated in computer science?` + +### --feedback-- + +`Are you` is present tense, but Anna's question is about the candidate's past education. + +--- + +`Do you study computer science?` + +### --feedback-- + +`Do you study` is present tense. The question is about past education. + +--- + +`Were you educated in computer science?` + +--- + +`Have you studied computer science?` + +### --feedback-- + +`Have you studied` is a different form, asking if they have ever studied it at any time. `Were you educated` specifically asks about formal education in the past. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md new file mode 100644 index 00000000000..6044644f850 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1431076b365555784189.md @@ -0,0 +1,49 @@ +--- +id: 657b1431076b365555784189 +title: Task 16 +challengeType: 19 +dashedName: task-16 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +A `bachelor's degree` is an undergraduate academic degree awarded by colleges and universities upon completion of a course of study. In the term `bachelor's degree`, the use of the noun (`bachelor`) followed by the `'s` indicates possession or association. This form is commonly used to show that something belongs to or is related to the noun, as in `today's news` or `teacher's guide`. + +# --question-- + +## --text-- + +What does `bachelor's degree` refer to? + +## --answers-- + +An undergraduate academic degree + +--- + +A type of professional certification + +### --feedback-- + +A bachelor's degree is an academic qualification, not a professional certification. + +--- + +A high school diploma + +### --feedback-- + +A bachelor's degree is a higher education qualification, more advanced than a high school diploma. + +--- + +A master's program entry requirement + +### --feedback-- + +While a bachelor's degree may be required for a master's program, it itself refers to an undergraduate degree. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md new file mode 100644 index 00000000000..299109790e0 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b145976723b56a97b8dda.md @@ -0,0 +1,56 @@ +--- +id: 657b145976723b56a97b8dda +title: Task 17 +challengeType: 19 +dashedName: task-17 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `I was introduced to` uses the simple past tense form `was` of the verb `be`, combined with the past participle `introduced`. This structure, `be` followed by a verb suffixed with `-ed`, is often used to describe actions that happened to the subject in the past. For example: + +`At college, I was introduced to many programing languages` + +# --question-- + +## --text-- + +What does the candidate mean by saying `I was introduced to various programming languages and software development principles`? + +## --answers-- + +I taught myself various programming languages and principles + +### --feedback-- + +`I was introduced to` implies being formally taught or shown by someone else, not self-teaching. + +--- + +I learned about various programming languages and principles in my studies + +--- + +I have extensive experience with various programming languages and principles + +### --feedback-- + +The phrase indicates initial exposure to these topics, not necessarily extensive experience. + +--- + +I developed various programming languages and principles + +### --feedback-- + +Being introduced to something means learning about it for the first time, not creating or developing it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md new file mode 100644 index 00000000000..2e11e13fa69 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b149630b3ea5873269a38.md @@ -0,0 +1,49 @@ +--- +id: 657b149630b3ea5873269a38 +title: Task 18 +challengeType: 19 +dashedName: task-18 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `various` is an adjective used to describe a number of different types or kinds of something, emphasizing diversity or variety. It is often used to indicate that there are several distinct items or examples being referred to. For example, saying `various books` means books of different kinds or genres. + +# --question-- + +## --text-- + +What does `various` imply when talking about programming languages and software development principles? + +## --answers-- + +Different types or kinds + +--- + +A specific type or kind + +### --feedback-- + +The term `various` implies diversity, not specificity. + +--- + +Only one type + +### --feedback-- + +`Various` indicates a number of different types, not just one. + +--- + +Irrelevant or unrelated types + +### --feedback-- + +`Various` does mean different types, but these are usually relevant and related to the context. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md new file mode 100644 index 00000000000..b217384d87c --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b14d8353d665a187fe771.md @@ -0,0 +1,38 @@ +--- +id: 657b14d8353d665a187fe771 +title: Task 19 +challengeType: 22 +dashedName: task-19 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this challenge, you'll practice filling in key terms from the dialogue. These terms are commonly used in job interviews and are essential for understanding the context of the discussion. + +# --fillInTheBlank-- + +## --sentence-- + +`Good afternoon! Sure, I was a programmer at Acme Tech. I was there for three years. I was responsible for developing web _ and maintaining the company's _. I was also part of the software update team.` + +## --blanks-- + +`applications` + +### --feedback-- + +These are programs designed to perform specific tasks or functions. + +--- + +`database` + +### --feedback-- + +This is a collection of information organized for easy access, management, and updating. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md new file mode 100644 index 00000000000..5d81b22a9e7 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b153ac677705c7059530d.md @@ -0,0 +1,62 @@ +--- +id: 657b153ac677705c7059530d +title: Task 20 +challengeType: 19 +dashedName: task-20 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `could you tell me` is a polite way to ask someone for information. It's commonly used in formal or professional situations, like job interviews or meetings. +In English, some verbs have irregular past forms, meaning they do not follow the regular pattern of adding `-ed` to make the past tense. `Can` is one such verb, and its irregular simple past form is `could`. + +The existence of irregular forms, like `could`, often comes from the way language has evolved over time. These forms do not follow the regular patterns and need to be memorized. + +For example: + +- Present: `I can speak English.` +- Past: `I could speak English when I was six.` + +# --question-- + +## --text-- + +What does the phrase `could you tell me` in Anna's sentence express? + +## --answers-- + +A polite request for information + +--- + +A command to do something immediately + +### --feedback-- + +The phrase `could you tell me` is used for polite requests, not direct commands. + +--- + +A suggestion for future action + +### --feedback-- + +This phrase is asking for information now, not suggesting something for the future. + +--- + +An offer to help someone + +### --feedback-- + +This phrase is more about asking for information than offering help. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md new file mode 100644 index 00000000000..ecf0d666af0 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b15dbcafe4d5f39a5de82.md @@ -0,0 +1,54 @@ +--- +id: 657b15dbcafe4d5f39a5de82 +title: Task 21 +challengeType: 19 +dashedName: task-21 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `previous` is used to describe something that happened before the current time or situation. It's often used to refer to past experiences, jobs, or events. + +# --question-- + +## --text-- + +In the context of Anna's question, what does `previous` refer to? + +## --answers-- + +Past roles and responsibilities + +--- + +Future roles and responsibilities + +### --feedback-- + +`Previous` refers to something that has already happened, not something in the future. + +--- + +Current roles and responsibilities + +### --feedback-- + +`Previous` means something that happened before now, not what is happening currently. + +--- + +Unrelated roles and responsibilities + +### --feedback-- + +`Previous` specifically relates to roles and responsibilities that were held before, not those unrelated. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md new file mode 100644 index 00000000000..8497f67b9bb --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b160d6a8662610fe6a523.md @@ -0,0 +1,53 @@ +--- +id: 657b160d6a8662610fe6a523 +title: Task 22 +challengeType: 22 +dashedName: task-22 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The simple past tense in English is used for actions or situations that were completed in the past. Regular verbs in the past tense usually end with `-ed`, while irregular verbs have unique past forms. For example, as you learned in previous tasks, `was` and `were` are the past forms of `is` and `are`. + +Examples of simple past tense: + +- `I worked at a company.` (`work` becomes `worked`) +- `I was happy.` (`is` becomes `was`) +- `We were busy.` (`are` becomes `were`) + +# --fillInTheBlank-- + +## --sentence-- + +`Hello! Certainly. I _ at Mock Corporation for five years. I _ part of a team of software engineers, and we _ responsible for developing and maintaining various applications.` + +## --blanks-- + +`worked` + +### --feedback-- + +Think of the past tense of `work`, a regular verb that follows the usual `-ed` ending pattern. + +--- + +`was` + +### --feedback-- + +Recall the past tense form of `is`, which changes to a completely different word in its irregular past form. + +--- + +`were` + +### --feedback-- + +Consider the past tense of `are`, an irregular verb that also changes to a different word in the past. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md new file mode 100644 index 00000000000..8e1b26a3bce --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b163c9da40e62b904be1f.md @@ -0,0 +1,46 @@ +--- +id: 657b163c9da40e62b904be1f +title: Task 23 +challengeType: 22 +dashedName: task-23 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the past simple interrogative. In questions, the simple past tense often begins with a past tense verb, followed by the subject and the rest of the sentence. This structure is used to ask about past events or states. + +# --fillInTheBlank-- + +## --sentence-- + +`That's great to hear. _ the members of the team _ _ any specific achievements or projects?` + +## --blanks-- + +`Were` + +### --feedback-- + +This is the past form of `are` used to ask about a past state or condition. + +--- + +`involved` + +### --feedback-- + +Think of a word that means `participated in` or `engaged with`. + +--- + +`in` + +### --feedback-- + +A preposition that often follows `involved` to indicate participation or inclusion. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md new file mode 100644 index 00000000000..bc7924edcf6 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b18e71067d6680b9ac5d3.md @@ -0,0 +1,54 @@ +--- +id: 657b18e71067d6680b9ac5d3 +title: Task 24 +challengeType: 19 +dashedName: task-24 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `redesign` means to design something again or differently. It's often used in the context of improving or updating the design of an existing product, service, or structure. In software and web development, redesigning is a common practice to enhance functionality, user experience, or aesthetics. + +# --question-- + +## --text-- + +What does `redesign` imply in Candidate2's statement about the website project? + +## --answers-- + +To design for the first time + +### --feedback-- + +`Redesign` implies working on something that already exists, not creating it for the first time. + +--- + +To remove the design + +### --feedback-- + +`Redesign` means to change or improve the existing design, not to remove it. + +--- + +To change or improve an existing design + +--- + +To copy a design + +### --feedback-- + +`Redesign` involves making changes or improvements, not copying a design as it is. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md new file mode 100644 index 00000000000..ed588a90563 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1985ae17886b05b382b1.md @@ -0,0 +1,54 @@ +--- +id: 657b1985ae17886b05b382b1 +title: Task 25 +challengeType: 19 +dashedName: task-25 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `performance` in a technical context often refers to how well a system or component operates, especially in terms of speed, efficiency, and reliability. For websites and software, performance can relate to how quickly pages load, the responsiveness of the application, or the stability of the system under various conditions. + +# --question-- + +## --text-- + +What does `performance` refer to in Candidate2's statement about the website? + +## --answers-- + +A live presentation + +### --feedback-- + +While `performance` can mean a presentation, in this context, it relates to the functioning of the website. + +--- + +Artistic display + +### --feedback-- + +In a technical context, `performance` refers to operational effectiveness, not an artistic aspect. + +--- + +Financial success + +### --feedback-- + +`Performance` in this context is about the website's operational aspects, not its financial success. + +--- + +How well the website operates + +## --video-solution-- + +4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md new file mode 100644 index 00000000000..98e6bda774a --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b19bf7b32af6caf763ef7.md @@ -0,0 +1,54 @@ +--- +id: 657b19bf7b32af6caf763ef7 +title: Task 26 +challengeType: 19 +dashedName: task-26 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `collaborative effort` refers to a situation where people work together as a team to achieve a common goal. This kind of teamwork is essential in many work environments, especially on projects where different skills and perspectives are needed. + +# --question-- + +## --text-- + +What does `collaborative effort` imply in the context of Candidate2's statement? + +## --answers-- + +Working independently + +### --feedback-- + +`Collaborative effort` means working together as a team, not independently. + +--- + +Teamwork to achieve a goal + +--- + +Avoiding responsibility + +### --feedback-- + +`Collaborative effort` involves taking shared responsibility, not avoiding it. + +--- + +Focusing on individual skills + +### --feedback-- + +`Collaborative effort` emphasizes teamwork over individual skills. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md new file mode 100644 index 00000000000..56a621b07c6 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a03df3ec46eca276046.md @@ -0,0 +1,38 @@ +--- +id: 657b1a03df3ec46eca276046 +title: Task 27 +challengeType: 22 +dashedName: task-27 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words. + +# --fillInTheBlank-- + +## --sentence-- + +`Yes, our team _ involved in a project to _ the company's website.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`redesign` + +### --feedback-- + +This word means to design something again in a different way. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md new file mode 100644 index 00000000000..66d49e9e89f --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a27dc6daf6ffd52ff1f.md @@ -0,0 +1,55 @@ +--- +id: 657b1a27dc6daf6ffd52ff1f +title: Task 28 +challengeType: 19 +dashedName: task-28 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In English, the noun suffixed with `'s` followed by a second noun structure is used to show possession or belonging. If the first noun is singular, as in `Sarah's laptop`, it indicates that the laptop belongs to Sarah. However, if the first noun is plural, the structure changes to noun suffixed with `'`, as in `teachers' office`, indicating an office for teachers. + +# --question-- + +## --text-- + +What does `master's degree` in the context of the dialogue refer to? + +## --answers-- + +A degree for school teachers + +### --feedback-- + +`Master's degree` refers to an advanced academic degree, not specifically for teachers. + +--- + +A primary level educational degree + +### --feedback-- + +`Master's degree` is a higher education qualification, beyond the primary level. + +--- + +A degree in mastering skills + +### --feedback-- + +While it implies expertise, `master's degree` specifically refers to an academic qualification. + +--- + +An advanced academic degree + +## --video-solution-- + +4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md new file mode 100644 index 00000000000..bf63c3e8d24 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a637e4dc571f8f4d3d7.md @@ -0,0 +1,49 @@ +--- +id: 657b1a637e4dc571f8f4d3d7 +title: Task 29 +challengeType: 19 +dashedName: task-29 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `appreciate` is often used to express gratitude or to acknowledge the value or importance of something or someone's actions. It's a way of showing that you recognize and are thankful for someone's help, effort, or achievement. + +# --question-- + +## --text-- + +In a work meeting, your colleague says, `I really appreciate your help on this project.` What is your colleague expressing? + +## --answers-- + +Dissatisfaction with your work + +### --feedback-- + +`Appreciate` means to be grateful or thankful, not to show dissatisfaction. + +--- + +Indifference to your contribution + +### --feedback-- + +`Appreciate` is used to express positive recognition, not indifference. + +--- + +Gratitude for your contribution + +--- + +A need for more assistance + +### --feedback-- + +`Appreciate` here indicates satisfaction with the help received, not a request for more assistance. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md new file mode 100644 index 00000000000..4fa33c1c2d0 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1a9581015573806e1e20.md @@ -0,0 +1,47 @@ +--- +id: 657b1a9581015573806e1e20 +title: Task 30 +challengeType: 22 +dashedName: task-30 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blanks with the correct words you learned. + +# --fillInTheBlank-- + +## --sentence-- + +`We _ responsible for implementing new features and ensuring the website's performance. It _ a _ effort, and we were able to deliver the project on time.` + +## --blanks-- + +`were` + +### --feedback-- + +This is the past tense form of `are`, used for plural subjects. + +--- + +`was` + +### --feedback-- + +This is the past tense form of `is`, used for singular subjects. + +--- + +`collaborative` + +### --feedback-- + +This word means working together as a team. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md new file mode 100644 index 00000000000..6013cb50f86 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1cc072206e7ac3db88b8.md @@ -0,0 +1,39 @@ +--- +id: 657b1cc072206e7ac3db88b8 +title: Task 31 +challengeType: 22 +dashedName: task-31 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the missing words correctly. This is a great way to practice what you've learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I have a _ degree in computer science. My studies _ quite intensive, and I was introduced to many different methodologies.` + +## --blanks-- + +`master's` + +### --feedback-- + +This term, using the `noun's noun` structure, refers to an advanced academic degree. + +--- + +`were` + +### --feedback-- + +This is the past tense form of `are` used for plural subjects or things. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md new file mode 100644 index 00000000000..1c7c7b4603c --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d080265ba7c4f96bf79.md @@ -0,0 +1,30 @@ +--- +id: 657b1d080265ba7c4f96bf79 +title: Task 32 +challengeType: 22 +dashedName: task-32 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task helps you review the word you learned. Listen to the dialogue and complete the sentence correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`Impressive! We _ candidates with strong educational backgrounds and practical experience.` + +## --blanks-- + +`appreciate` + +### --feedback-- + +This word means to recognize the value or importance of something or someone's actions. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md new file mode 100644 index 00000000000..28e4211c290 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1d4ec0e2587e8bcc95f7.md @@ -0,0 +1,15 @@ +--- +id: 657b1d4ec0e2587e8bcc95f7 +title: "Dialogue 3: Two Workmates Talk About Their Backgrounds" +challengeType: 21 +dashedName: dialogue-3-two-workmates-talk-about-their-backgrounds +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md new file mode 100644 index 00000000000..df8ebc66d25 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1da0b27fef8117827ce5.md @@ -0,0 +1,54 @@ +--- +id: 657b1da0b27fef8117827ce5 +title: Task 33 +challengeType: 19 +dashedName: task-33 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned about the simple past tense. Now, you can explore it further. The simple past tense is often formed by adding `-ed` to a verb. But, when a verb ends with an `e`, you just add a `d`. For example, `notice` becomes `noticed`. + +# --question-- + +## --text-- + +What does `noticed` in Sarah's sentence indicate? + +## --answers-- + +Sarah observed something in the past + +--- + +Sarah is planning to observe something + +### --feedback-- + +The simple past tense `noticed` indicates a completed action in the past, not a future plan. + +--- + +Sarah continuously observes something + +### --feedback-- + +The simple past tense `noticed` is used for actions that were completed, not ongoing actions. + +--- + +Sarah never observes anything + +### --feedback-- + +`Noticed` implies that Sarah did observe something, not never observing. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md new file mode 100644 index 00000000000..5a1ba6afbfc --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1dfec76149836ea5c7d0.md @@ -0,0 +1,30 @@ +--- +id: 657b1dfec76149836ea5c7d0 +title: Task 34 +challengeType: 22 +dashedName: task-34 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you will focus on the past simple negative. It's created by adding `not` after the auxiliary verb `was` or `were`. For example, `was` becomes `wasn't` (`was not`) and `were` becomes `weren't` (`were not`). This form is used to describe something that did not happen in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`It _ exactly tech-related, but I learned a lot about problem-solving and critical thinking.` + +## --blanks-- + +`wasn't` + +### --feedback-- + +This word is used to make a negative statement in the past tense. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md new file mode 100644 index 00000000000..da30e71e20a --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e2fad2ffe84ab420a56.md @@ -0,0 +1,49 @@ +--- +id: 657b1e2fad2ffe84ab420a56 +title: Task 35 +challengeType: 19 +dashedName: task-35 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You're already familiar with `wasn't` and `weren't` for past simple negative. Now, let's explore `didn't`, a contraction of `did not`. It's used with the base form of verbs (the infinitive without `to`) to express that an action did not happen in the past. For example, `didn't go` means the action of going did not occur. + +# --question-- + +## --text-- + +Imagine you are reading a story about a character who planned to attend a concert but couldn't. How would you describe this situation? + +## --answers-- + +The character enjoyed the concert + +### --feedback-- + +Using `didn't` suggests the character did not go to the concert, contradicting the idea of enjoying it. + +--- + +The character didn't attend the concert + +--- + +The character always goes to concerts + +### --feedback-- + +This expression refers to a regular habit, not a specific event in the past. + +--- + +The character is looking forward to the next concert + +### --feedback-- + +This option is about future anticipation. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md new file mode 100644 index 00000000000..938a8118ce2 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e66159fec86336a737b.md @@ -0,0 +1,54 @@ +--- +id: 657b1e66159fec86336a737b +title: Task 36 +challengeType: 19 +dashedName: task-36 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You've already learned the basics of the simple past tense. Now you can dive deeper into it. Typically, the simple past tense is formed by adding `-ed` to regular verbs. For instance, the verb `play` becomes `played` in the simple past. This tense is used to describe actions that were completed at a specific time in the past. + +# --question-- + +## --text-- + +What does `I played` in Sophie's sentence suggest about her experience with coding? + +## --answers-- + +She casually experimented with coding in the past + +--- + +She is currently playing a coding game + +### --feedback-- + +`Played` is in the past tense, indicating a past action, not something happening currently. + +--- + +She plans to start coding soon + +### --feedback-- + +`Played` implies she already has some experience with coding, not that she is planning to start. + +--- + +She never tried coding + +### --feedback-- + +Using `played` confirms she did engage in coding, contradicting the idea of never trying it. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md new file mode 100644 index 00000000000..2bd70b3d732 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1e9a62603587747f7f45.md @@ -0,0 +1,49 @@ +--- +id: 657b1e9a62603587747f7f45 +title: Task 37 +challengeType: 19 +dashedName: task-37 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In English, when forming questions in the simple past tense, you often use `did`. This is followed by the subject and the base form of the verb (without `ed`). For example, `Did you enjoy` is a past simple interrogative phrase where `did` is the auxiliary verb, `you` is the subject, and `enjoy` is the base form of the verb. + +# --question-- + +## --text-- + +What does a question like `Did you enjoy the concert last night?` ask about? + +## --answers-- + +Are you going to enjoy the concert? + +### --feedback-- + +This implies a future event. The question with `did` is asking about a past experience. + +--- + +Do you enjoy concerts in general? + +### --feedback-- + +This is asking about general preferences, not a specific past event. + +--- + +Did you have a good experience at the concert last night? + +--- + +Will you enjoy future concerts? + +### --feedback-- + +The question is about a past event, not future experiences. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md new file mode 100644 index 00000000000..430fa995037 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1ee1de7216896b5b4361.md @@ -0,0 +1,42 @@ +--- +id: 657b1ee1de7216896b5b4361 +title: Task 38 +challengeType: 22 +dashedName: task-38 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the dialogue and fill in the blank correctly. This task is a review. Remember, the simple past tense is used to talk about actions or situations in the past, and the negative form is used to describe things that did not happen. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: That's interesting! So, you _ work on many programming projects during your studies?` + +`Sophie: No, not really. I _ around with coding, but most of my projects involved circuit designs and electrical systems. It was a bit different.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used here to talk about something that was not done in the past. + +--- + +`played` + +### --feedback-- + +This word suggests that Sophie casually engaged in coding for pleasure or interest. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md new file mode 100644 index 00000000000..dfcc68a881a --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f0585d48f8ac0b19654.md @@ -0,0 +1,40 @@ +--- +id: 657b1f0585d48f8ac0b19654 +title: Task 39 +challengeType: 22 +dashedName: task-39 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this task, you'll focus on answering questions in the simple past tense. When responding to a past simple interrogative (a question), you can answer affirmatively with `did` or negatively with `didn't`. For example, `Did you go to the party?` can be answered with `I did` (affirmative) or `I didn't` (negative). Listen to the dialogue and fill in the blanks correctly to practice this structure. + +# --fillInTheBlank-- + +## --sentence-- + +`Sarah: I see. _ you enjoy your time there, even if it wasn't entirely tech-focused? Sophie: I _.` + +## --blanks-- + +`Did` + +### --feedback-- + +This word is used to form a past simple interrogative question. The first letter should be capitalized. + +--- + +`did` + +### --feedback-- + +This response is an affirmative answer to the past simple interrogative question. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md new file mode 100644 index 00000000000..92e4b28c489 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f598f63008c8bdb20b8.md @@ -0,0 +1,49 @@ +--- +id: 657b1f598f63008c8bdb20b8 +title: Task 40 +challengeType: 19 +dashedName: task-40 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +In the simple past tense, some verbs are irregular and don't follow the regular `-ed` ending pattern. One example of this is the verb `meet`, which becomes `met` in the past tense. This is important to remember when talking about past events. + +# --question-- + +## --text-- + +During a class reunion, an old friend tells you, `We met for the first time in art class.` What is your friend referring to with `met`? + +## --answers-- + +We are meeting right now in art class + +### --feedback-- + +The use of `met` indicates a past event, not something happening currently. + +--- + +Our first encounter was in the past, specifically in art class + +--- + +We will meet for the first time soon + +### --feedback-- + +`Met` indicates a past action, not a future arrangement. + +--- + +We have never been in art class together + +### --feedback-- + +`Met` suggests a past meeting. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md new file mode 100644 index 00000000000..e3cdc339c1f --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1f981cd42e8dc3b282d9.md @@ -0,0 +1,49 @@ +--- +id: 657b1f981cd42e8dc3b282d9 +title: Task 41 +challengeType: 19 +dashedName: task-41 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn another special case in this task. It's the past tense form of `have`. Unlike regular verbs that add `-ed` for the past tense, `have` becomes `had`. This irregular form is used for both singular and plural subjects in the past tense, making it a unique and important verb to remember. + +# --question-- + +## --text-- + +What does `had` imply in a sentence like `They had a meeting yesterday?` + +## --answers-- + +They possessed or experienced something in the past + +--- + +They are having a meeting right now + +### --feedback-- + +`Had` is used for past actions, indicating the meeting occurred in the past, not at the present moment. + +--- + +They will have a meeting tomorrow + +### --feedback-- + +`Had` indicates a past action, not a future plan. + +--- + +They never have meetings + +### --feedback-- + +Using `had` confirms that the meeting took place in the past. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md new file mode 100644 index 00000000000..9f86ab82bcb --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b1fe950c0df90346e5d12.md @@ -0,0 +1,47 @@ +--- +id: 657b1fe950c0df90346e5d12 +title: Task 42 +challengeType: 22 +dashedName: task-42 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review of the words `met`, `had`, and `wasn't`. You have already learned these words. Listen to the dialogue and fill in the blanks with the correct words. This exercise is a good way to practice and reinforce your understanding of these words in context. + +# --fillInTheBlank-- + +## --sentence-- + +`I did. It was challenging, but I _ some fantastic people. We _ a bunch of fun coding marathons, although I _ always a very strong programmer.` + +## --blanks-- + +`met` + +### --feedback-- + +This word is used here to describe encountering people in the past. + +--- + +`had` + +### --feedback-- + +This word is used to express possession or experiences in the past. + +--- + +`wasn't` + +### --feedback-- + +This word is the negative form in the past tense, indicating something that was not the case. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md new file mode 100644 index 00000000000..2ee4e256d2a --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b201372864e91d4f5bb53.md @@ -0,0 +1,39 @@ +--- +id: 657b201372864e91d4f5bb53 +title: Task 43 +challengeType: 22 +dashedName: task-43 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +When a verb ends in a consonant followed by `y`, you should change the `y` to `i` and add `ed` for the past tense. For example, `carry` becomes `carried`. Note that this rule applies when the `y` follows a consonant, not a vowel, so the simple past form of `convey` is `conveyed`. For regular verbs, you simply add `ed` to form the past tense. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ at a small college as well and _ in information technology.` + +## --blanks-- + +`studied` + +### --feedback-- + +The past simple tense of `study` is formed by changing `y` to `i` and adding `ed`. + +--- + +`majored` + +### --feedback-- + +This word follows the regular past simple tense formation by just adding `ed`. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md new file mode 100644 index 00000000000..67255d1bac6 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20338e0802931673c1e1.md @@ -0,0 +1,26 @@ +--- +id: 657b20338e0802931673c1e1 +title: Task 44 +challengeType: 22 +dashedName: task-44 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + +# --description-- + +You've learned that for verbs ending in `e`, you simply add `d` to form the simple past tense. Choose the correct form of `love` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she really _ the beach vacation.` + +## --blanks-- + +`loved` + +### --feedback-- + +To form the simple past, add `d` to the base form of the verb, `love`. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md new file mode 100644 index 00000000000..4d89a2935c0 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b20985d315095e5c3851d.md @@ -0,0 +1,54 @@ +--- +id: 657b20985d315095e5c3851d +title: Task 45 +challengeType: 19 +dashedName: task-45 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this context, `got` is a special case in the simple past tense. It's the past tense of `get`. Unlike regular verbs that typically add `-ed` for the past tense, `get` changes to `got`. + +# --question-- + +## --text-- + +In the context of Sarah's statement, what does `got` imply about her experience? + +## --answers-- + +She is getting the opportunity now + +### --feedback-- + +`Got` indicates a past opportunity, not something happening currently. + +--- + +She had the opportunity in the past + +--- + +She will get the opportunity in the future + +### --feedback-- + +`Got` refers to a past experience, not a future possibility. + +--- + +She never gets such opportunities + +### --feedback-- + +`Got` in this context suggests she did have this opportunity. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md new file mode 100644 index 00000000000..ac32d364daa --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b21e28a01039cb27b4f13.md @@ -0,0 +1,50 @@ +--- +id: 657b21e28a01039cb27b4f13 +title: Task 46 +challengeType: 19 +dashedName: task-46 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `exactly` is used to emphasize the truth or accuracy of a statement or description. It can mean `precisely` or `just`. For example, if someone says, `It's exactly what I needed`, they mean that it is precisely or perfectly what was required. `Exactly` often highlights that something is correct in every detail. + +# --question-- + +## --text-- + +What does `exactly` imply in a sentence like `This is exactly the kind of work I enjoy`? + +## --answers-- + +This is somewhat similar to the work I enjoy + +### --feedback-- + +`Exactly` indicates a perfect match, not just a similarity. + +--- + +This is the opposite of the work I enjoy + +### --feedback-- + +`Exactly` implies a perfect match, not an opposite. + +--- + +I am not sure if this is the work I enjoy + +### --feedback-- + +Using `exactly` shows certainty, not uncertainty. + +--- + +This is precisely the type of work that I find enjoyable + +## --video-solution-- + +4 + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md new file mode 100644 index 00000000000..36c267c651b --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b221b2ab0ac9e18a173ef.md @@ -0,0 +1,35 @@ +--- +id: 657b221b2ab0ac9e18a173ef +title: Task 47 +challengeType: 22 +dashedName: task-47 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Let's look at `exactly` and `exact`. You use `exactly` to show something is just right or very true. It is an adverb. For example, `You did it exactly right!`. + +`Exact` is an adjective, and it describes something very correct or precise, like in `the exact time`. + +# --fillInTheBlank-- + +## --sentence-- + +`She knew the _ time of the meeting. She arrived _ at 3 pm.` + +## --blanks-- + +`exact` + +### --feedback-- + +This word is an adjective, describing the noun `time`. + +--- + +`exactly` + +### --feedback-- + +This word is an adverb, showing that her arrival time was very precise. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md new file mode 100644 index 00000000000..82dcdea8fbb --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b223e41ce6b9f9a01d214.md @@ -0,0 +1,39 @@ +--- +id: 657b223e41ce6b9f9a01d214 +title: Task 48 +challengeType: 22 +dashedName: task-48 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +You'll review the past simple negative in this task. It's formed using `was` or `were` with `not`, like `weren't` (`were not`) or `wasn't` (`was not`). It's used to talk about things that did not happen or were not true in the past. + +# --fillInTheBlank-- + +## --sentence-- + +`They _ _ big projects.` + +## --blanks-- + +`weren't` + +### --feedback-- + +It's the negative form of `were` in the past tense, used to say something was not true or did not happen. + +--- + +`exactly` + +### --feedback-- + +This word is used to emphasize the statement, suggesting the projects were not precisely big. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md new file mode 100644 index 00000000000..06ce8ba3d76 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b227f7ad32ea17e2cdf28.md @@ -0,0 +1,15 @@ +--- +id: 657b227f7ad32ea17e2cdf28 +title: "Dialogue 4: A Developer with a Different Background" +challengeType: 21 +dashedName: dialogue-4-a-developer-with-a-different-background +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md new file mode 100644 index 00000000000..abee49452c1 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2310b8cd52a4f15c1818.md @@ -0,0 +1,56 @@ +--- +id: 657b2310b8cd52a4f15c1818 +title: Task 49 +challengeType: 19 +dashedName: task-49 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `unconventional` is used to describe something that's not based on or conforming to what is generally done or believed. It often implies a method or approach that is different from the norm. + +# --question-- + +## --text-- + +What does `unconventional` imply about Alice's background in tech? + +## --answers-- + +Her background is different from the usual way people get into tech + +--- + +Her background is exactly the same as most people in tech + +### --feedback-- + +`Unconventional` means not following the usual conventions, which contradicts being the same as most people. + +--- + +She doesn't have any background in tech + +### --feedback-- + +`Unconventional` suggests a different approach, not the absence of a background. + +--- + +She followed a very traditional path into tech + +### --feedback-- + +`Unconventional` indicates a non-traditional path, not a very traditional one. + +## --video-solution-- + +1 + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md new file mode 100644 index 00000000000..47917952aff --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2340be1593a6517fe77b.md @@ -0,0 +1,39 @@ +--- +id: 657b2340be1593a6517fe77b +title: Task 50 +challengeType: 22 +dashedName: task-50 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple negative, `did not` (contracted to `didn't`) is followed by the base form of a verb. This structure is used to express that an action did not happen in the past. In this dialogue, Alice is describing her educational background related to technology. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ _ tech at a traditional university.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used in the past simple negative to indicate that an action was not done. + +--- + +`study` + +### --feedback-- + +The base form of the verb is used after the contraction in negative past simple sentences. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md new file mode 100644 index 00000000000..e19667245f9 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b236aa1eb9fa7b209aa03.md @@ -0,0 +1,54 @@ +--- +id: 657b236aa1eb9fa7b209aa03 +title: Task 51 +challengeType: 19 +dashedName: task-51 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `mostly` is used to indicate that something is true to a large extent but not completely. It suggests that while other factors or methods may be involved, the primary aspect is what is mentioned. + +# --question-- + +## --text-- + +In Alice's statement, what does `mostly` suggest about her way of learning? + +## --answers-- + +She only learned through formal education + +### --feedback-- + +`Mostly` implies a greater emphasis on self-teaching rather than exclusive formal education. + +--- + +She didn't learn anything on her own + +### --feedback-- + +The use of `mostly` indicates a significant amount of self-learning, not an absence of it. + +--- + +She learned equally through self-teaching and formal courses + +### --feedback-- + +`Mostly` suggests a greater emphasis on one method over an equal balance. + +--- + +Her learning was primarily through her own efforts, with some formal courses + +## --video-solution-- + +4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md new file mode 100644 index 00000000000..10f6121949b --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23a413d28da927e087ca.md @@ -0,0 +1,36 @@ +--- +id: 657b23a413d28da927e087ca +title: Task 52 +challengeType: 22 +dashedName: task-52 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +This task reviews how an adverb is often formed by adding `-ly` to an adjective. + + +# --fillInTheBlank-- + +## --sentence-- + +`She completed _ of her work before lunch. The office is _ quiet in the mornings.` + +## --blanks-- + +`most` + +### --feedback-- + +This word is used as an adjective to describe the quantity of work completed. + +--- + +`mostly` + +### --feedback-- + +This word is used as an adverb to describe the general state of the office. + + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md new file mode 100644 index 00000000000..8f0a554d33f --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23bc0e32f9aa9c62eb82.md @@ -0,0 +1,50 @@ +--- +id: 657b23bc0e32f9aa9c62eb82 +title: Task 53 +challengeType: 19 +dashedName: task-53 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The term `self-taught` refers to acquiring knowledge or skills without direct teaching from a traditional teacher or educational institution. It involves learning independently. The word `taught` is the past participle of `teach`. When someone is `self-taught`, it means they have taught themselves. + +# --question-- + +## --text-- + +What does `self-taught` imply when someone says, `I am self-taught in programming`? + +## --answers-- + +They were taught programming by a professional teacher + +### --feedback-- + +`Self-taught` indicates learning independently, not being taught by a professional teacher. + +--- + +They have no knowledge of programming + +### --feedback-- + +`Self-taught` means they have acquired knowledge or skills, not that they lack them. + +--- + +They learned programming on their own, without formal education + +--- + +They are planning to learn programming in the future + +### --feedback-- + +`Self-taught` refers to learning that has already taken place, not future plans. + +## --video-solution-- + +3 + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md new file mode 100644 index 00000000000..daa0ed7fa3b --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b23f03b449aac2c517089.md @@ -0,0 +1,27 @@ +--- +id: 657b23f03b449aac2c517089 +title: Task 54 +challengeType: 22 +dashedName: task-54 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `took` is a special case in the simple past tense. It's the past tense of `take`. Unlike regular verbs that follow the standard `-ed` ending for the past tense, `take` changes to `took`. This irregular form is important to know because it's commonly used to talk about actions that happened in the past. Choose the correct past tense form of `take` to complete the sentence: + +# --fillInTheBlank-- + +## --sentence-- + +`Last summer, she _ a photography class.` + +## --blanks-- + +`took` + +### --feedback-- + +This word is the past tense form of `take`. It's used to talk about actions that happened in the past. + + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md new file mode 100644 index 00000000000..aa093ae629c --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b242d06512dadaea55056.md @@ -0,0 +1,49 @@ +--- +id: 657b242d06512dadaea55056 +title: Task 55 +challengeType: 19 +dashedName: task-55 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The verb `attend` means to be present at an event or place. It's often used regarding schools, colleges, meetings, or events. It implies regular participation or presence at a specific place or event. + +# --question-- + +## --text-- + +If a friend tells you, `I'm going to attend the new art workshop downtown`, what are they planning to do? + +## --answers-- + +They are planning to teach at the art workshop + +### --feedback-- + +`Attend` suggests participating as a learner or member, not as a teacher. + +--- + +They might visit the workshop once + +### --feedback-- + +`Attend` implies regular or scheduled participation, not a one-time visit. + +--- + +They are not interested in art workshops + +### --feedback-- + +Saying they will `attend` indicates interest and intent to participate, not a lack of interest. + +--- + +They plan to regularly participate in the art workshop + +## --video-solution-- + +4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md new file mode 100644 index 00000000000..4dd651ea958 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24542024c8af092cd6c4.md @@ -0,0 +1,39 @@ +--- +id: 657b24542024c8af092cd6c4 +title: Task 56 +challengeType: 22 +dashedName: task-56 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task reviews the past simple negative form. In the past simple, negative sentences are formed using `did not`, contracted to `didn't`, followed by the base form of the main verb. Listen to the dialogue and fill in the blanks with these words. + +# --fillInTheBlank-- + +## --sentence-- + +`So, you _ _ a regular college or anything like that?` + +## --blanks-- + +`didn't` + +### --feedback-- + +This contraction is used to form a negative statement in the past tense. + +--- + +`attend` + +### --feedback-- + +The word means being present at an event or place. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md new file mode 100644 index 00000000000..15b9abab580 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24774d8cdab052ffe2a6.md @@ -0,0 +1,48 @@ +--- +id: 657b24774d8cdab052ffe2a6 +title: Task 57 +challengeType: 22 +dashedName: task-57 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and fill in the blanks correctly. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ study tech at a traditional university. I'm _, and I _ a lot of online courses.` + +## --blanks-- + +`didn't` + +### --feedback-- + +This word is used to form a negative statement in the past tense. + +--- + +`self-taught` + +### --feedback-- + +This word describes acquiring knowledge or skills independently. + +--- + +`took` + +### --feedback-- + +This word is the past tense form of a verb meaning to have completed an action. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md new file mode 100644 index 00000000000..b7c7a773588 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b24a500800cb1c6945da9.md @@ -0,0 +1,40 @@ +--- +id: 657b24a500800cb1c6945da9 +title: Task 58 +challengeType: 22 +dashedName: task-58 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`No, not at all. I _ at a different job, but I got really interested in programming and tech, so I _ learning in my free time.` + +## --blanks-- + +`was` + +### --feedback-- + +Use `to be` in the past tense. + +--- + +`started` + +### --feedback-- + +Use the verb `start`in the past tense. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md new file mode 100644 index 00000000000..14bccd55f81 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2be1b19500c63fc1a467.md @@ -0,0 +1,41 @@ +--- +id: 657b2be1b19500c63fc1a467 +title: Task 59 +challengeType: 22 +dashedName: task-59 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +Listen to the audio and complete the sentence. + +# --fillInTheBlank-- + +## --sentence-- + +`That's impressive! _ you _ learning on your own?` + +## --blanks-- + +`Did` + +### --feedback-- + +Auxiliary verb for questions. This word should be capitalized. + +--- + +`enjoy` + +### --feedback-- + +A verb used to describe you are having fun. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md new file mode 100644 index 00000000000..f55f7908a4f --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2c040bb5f6c77fa5df80.md @@ -0,0 +1,38 @@ +--- +id: 657b2c040bb5f6c77fa5df80 +title: Task 60 +challengeType: 22 +dashedName: task-60 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You'll be filling in blanks with words you're already familiar with. + +# --fillInTheBlank-- + +## --sentence-- + +`Absolutely. It _ challenging, but I _ it.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of the verb `to be`, used for singular subjects. + +--- + +`loved` + +### --feedback-- + +This is the past tense form of a verb expressing a strong liking or enjoyment. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md new file mode 100644 index 00000000000..dc14016d020 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d618b8851cc5baf9490.md @@ -0,0 +1,38 @@ +--- +id: 657b2d618b8851cc5baf9490 +title: Task 61 +challengeType: 22 +dashedName: task-61 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +Listen to the audio and complete the sentence. + + +# --fillInTheBlank-- + +Fill in the blank with correct words. + + +## --sentence-- + +`Yes, I did. I built a few small web applications, just to practice. It _ a great way to apply what I _.` + +## --blanks-- + +`was` + +### --feedback-- + +This is the past tense form of `to be`, used here for a singular subject. + +--- + +`learned` + +### --feedback-- + +This is the past tense form of `learn`, indicating the acquisition of knowledge or skills in the past. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md new file mode 100644 index 00000000000..b2433b84777 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2d9cb974dace59024964.md @@ -0,0 +1,54 @@ +--- +id: 657b2d9cb974dace59024964 +title: Task 62 +challengeType: 19 +dashedName: task-62 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The word `got` in this context is a versatile term and can have several meanings. In its simplest form, it's the past tense of `get`, which can mean to receive, arrive, become, or reach, depending on the context. In Tom's statement, `got` refers to the progress or level Alice reached through self-study. + +# --question-- + +## --text-- + +What does `got` imply in Tom's statement about Alice's progress? + +## --answers-- + +She received something while studying + +### --feedback-- + +While `got` can mean receiving, in this context it refers to the extent or level of progress. + +--- + +She achieved or reached a significant level in her studies + +--- + +She needs to get more resources for studying + +### --feedback-- + +`Got` here refers to past progress, not a current need for more resources. + +--- + +She didn't make any progress in her studies + +### --feedback-- + +`Got` in this sentence clearly indicates significant progress, not a lack of it. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md new file mode 100644 index 00000000000..3ea0498bbbe --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2dd7745fdcd03e5160f4.md @@ -0,0 +1,15 @@ +--- +id: 657b2dd7745fdcd03e5160f4 +title: "Dialogue 5: Anna Talks About her Experience" +challengeType: 21 +dashedName: dialogue-5-anna-talks-about-her-experience +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md new file mode 100644 index 00000000000..8a3ff270f80 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2e0666d4a9d1b851f90e.md @@ -0,0 +1,54 @@ +--- +id: 657b2e0666d4a9d1b851f90e +title: Task 63 +challengeType: 19 +dashedName: task-63 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The term `tech recruiter` refers to a professional role focused on recruiting candidates for technology-related positions. This role involves understanding the tech industry, identifying qualified candidates, and matching them with suitable tech job openings. + +# --question-- + +## --text-- + +What is Tom asking about when he mentions `Tech recruiter` in his question? + +## --answers-- + +The technical skills needed to be a recruiter + +### --feedback-- + +`Tech recruiter` here refers to the job role, not the specific skills required for the job. + +--- + +The technology used by recruiters + +### --feedback-- + +While technology is involved, `Tech recruiter` refers to the profession itself, not the tools used. + +--- + +The person's career path in becoming a technology recruitment specialist + +--- + +Recruiting people to learn technology + +### --feedback-- + +`Tech recruiter` is about hiring for tech roles, not recruiting people to learn technology. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md new file mode 100644 index 00000000000..340203d5990 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2ec6c054efd71e503a27.md @@ -0,0 +1,49 @@ +--- +id: 657b2ec6c054efd71e503a27 +title: Task 64 +challengeType: 19 +dashedName: task-64 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `actually` is often used to express a fact or reality, sometimes contrasting with what was thought, believed, or said before. It adds emphasis to a statement to clarify a truth or correct a previous assumption or statement. + +# --question-- + +## --text-- + +What does `actually` imply in a sentence like `I actually prefer working remotely`? + +## --answers-- + +The truth is contrary to what might have been assumed or stated before + +--- + +I never work remotely + +### --feedback-- + +`Actually` in this context is used to express a real preference. + +--- + +I always work in an office setting + +### --feedback-- + +Using `actually` here is meant to reveal a preference for remote work, not office work. + +--- + +I don't have any work preferences + +### --feedback-- + +`Actually` suggests a specific preference, contradicting the idea of having none. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md new file mode 100644 index 00000000000..51c4c579915 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2eeb31e435d89ecce6f3.md @@ -0,0 +1,33 @@ +--- +id: 657b2eeb31e435d89ecce6f3 +title: Task 65 +challengeType: 22 +dashedName: task-65 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +You'll learn about `actual` in this task. It's a describing word (adjective). It means what something is really like. For example, `the actual color` means the real color. You often add `-ly` to an adjective to form an adverb. This rule helps change many describing words into words that tell people how something is said or done. Here, you add `-ly` to `actual` and it's the adverb `actually`. + +# --fillInTheBlank-- + +## --sentence-- + +`The _ size of the room was quite small. She _ likes small cozy spaces.` + +## --blanks-- + +`actual` + +### --feedback-- + +This word describes the real size of the room. + +--- + +`actually` + +### --feedback-- + +This word is used to say she really likes small spaces. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md new file mode 100644 index 00000000000..101e280ee29 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f0b3bcfe7d9f4151854.md @@ -0,0 +1,54 @@ +--- +id: 657b2f0b3bcfe7d9f4151854 +title: Task 66 +challengeType: 19 +dashedName: task-66 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The terms `therapist` and `counselor` refer to professionals who provide guidance and support to people dealing with emotional, psychological, or mental health issues. Both play a vital role in helping individuals work through personal challenges. In Anna's statement, these terms describe the career paths she was considering. + +# --question-- + +## --text-- + +In Anna's statement, what does `therapist or counselor` refer to? + +## --answers-- + +Jobs in the technology industry + +### --feedback-- + +`Therapist or counselor` refers to mental health and emotional support roles, not technology-related jobs. + +--- + +Career paths in mental health and emotional support + +--- + +Educational courses she wanted to take + +### --feedback-- + +While these roles require education, the terms directly refer to the job roles, not the courses. + +--- + +Hobbies that she was interested in + +### --feedback-- + +`Therapist or counselor` are professional career paths, not hobbies. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md new file mode 100644 index 00000000000..40c9c66ce5e --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f3bf7a2cbdb58d959d5.md @@ -0,0 +1,49 @@ +--- +id: 657b2f3bf7a2cbdb58d959d5 +title: Task 67 +challengeType: 19 +dashedName: task-67 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +The word `last` is used to refer to the most recent past occurrence of a period or event. For example, `last year` means the year before this one, `last month` refers to the month before the current one, and `last week` points to the week before this week. Understanding time expressions like `last year`, `last month`, `last week`, or `last day` helps in talking about events that happened in the recent past. + +# --question-- + +## --text-- + +When someone mentions in a discussion about changes, `I switched careers last year.` What does `last year` indicate about the timing of their career change? + +## --answers-- + +They are planning to switch careers in the near future + +### --feedback-- + +This suggests a future action, but `last year` indicates the change already occurred in the past. + +--- + +They have been considering a career change for a long time + +### --feedback-- + +Though they might have considered it for a long time, `last year` specifically identifies when the change took place. + +--- + +The career change is happening currently + +### --feedback-- + +`Last year` refers to a completed action in the past, not something happening in the present. + +--- + +The career switch happened in the previous year + +## --video-solution-- + +4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md new file mode 100644 index 00000000000..796bb1e6c39 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2f6cb66826dcbac08094.md @@ -0,0 +1,49 @@ +--- +id: 657b2f6cb66826dcbac08094 +title: Task 68 +challengeType: 19 +dashedName: task-68 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Organizational psychology` is a field of psychology that studies how people interact within groups, particularly in workplace settings. It focuses on understanding workplace dynamics, employee behavior, and organizational structure to improve the work environment and increase productivity. + +# --question-- + +## --text-- + +What does `organizational psychology` typically involve? + +## --answers-- + +It deals with organizing office spaces + +### --feedback-- + +While organization is a part of the field, `organizational psychology` primarily focuses on people and behavior, not physical space. + +--- + +It's about the psychology of organizing events + +### --feedback-- + +`Organizational psychology` is not specifically about event planning but rather about behavior in workplace groups. + +--- + +It's the study of how people behave and interact in workplace groups + +--- + +It focuses on individual psychological treatment + +### --feedback-- + +`Organizational psychology` looks at group dynamics in workplaces, not individual therapy. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md new file mode 100644 index 00000000000..e185bc5a457 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fa89ddc20de629ca21f.md @@ -0,0 +1,38 @@ +--- +id: 657b2fa89ddc20de629ca21f +title: Task 69 +challengeType: 22 +dashedName: task-69 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will fill in the blanks with words you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ studied psychology in college. My plan was to become a _ or counselor.` + +## --blanks-- + +`actually` + +### --feedback-- + +This word is used to emphasize the accuracy or truth of a statement. + +--- + +`therapist` + +### --feedback-- + +This word refers to a professional role focused on mental health and emotional support. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md new file mode 100644 index 00000000000..ecc1ceb6792 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fc9c0f96bdfddfce4d9.md @@ -0,0 +1,46 @@ +--- +id: 657b2fc9c0f96bdfddfce4d9 +title: Task 70 +challengeType: 22 +dashedName: task-70 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +In this exercise, you will explore the phrase `pique one's interest`. This phrase means to stimulate or arouse someone's curiosity or interest in something. It's often used when something catches your attention and makes you want to learn more about it. Alongside this phrase, you will fill in the blanks with familiar words that you've already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`I _ a course in organizational _, and it _ my interest in the workplace and employee dynamics.` + +## --blanks-- + +`took` + +### --feedback-- + +This word refers to the action of participating in or completing a course. + +--- + +`psychology` + +### --feedback-- + +This word describes the study of the mind and behavior, particularly in a workplace setting in this context. + +--- + +`piqued` + +### --feedback-- + +This word means to arouse or stimulate interest or curiosity. You should correctly use its simple past tense. diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md new file mode 100644 index 00000000000..acc29551124 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b2fea728c2be14a8a98c4.md @@ -0,0 +1,49 @@ +--- +id: 657b2fea728c2be14a8a98c4 +title: Task 71 +challengeType: 19 +dashedName: task-71 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + +# --description-- + +`Employee dynamics` refers to the way employees interact and work together in a workplace. It's an example of using one noun (`employee`) to describe another noun (`dynamics`). This type of descriptive noun helps give more specific information about the subject. Other examples include `race car`, where `race` describes the type of car, and `garden hose`, where `garden` describes the type of hose. + +# --question-- + +## --text-- + +What does `employee dynamics` refer to in a workplace context? + +## --answers-- + +The dynamics of machines used by employees + +### --feedback-- + +`Employee dynamics` specifically refers to interactions and relationships among employees, not machinery. + +--- + +The interactions and relationships among employees + +--- + +The employment status of workers + +### --feedback-- + +`Employee dynamics` is about how employees work together, not their employment status. + +--- + +The dynamics of hiring new employees + +### --feedback-- + +`Employee dynamics` refers to existing employee interactions, not the hiring process. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md new file mode 100644 index 00000000000..bcbb031c907 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b3026ff79fbe2dda6cb39.md @@ -0,0 +1,54 @@ +--- +id: 657b3026ff79fbe2dda6cb39 +title: Task 72 +challengeType: 19 +dashedName: task-72 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `That's a cool twist` is often used to express that something is interestingly unexpected or surprisingly different. The word `twist` here refers to a change or development in a situation or story that is unusual or unexpected. `Cool` in this context means it's positively received. + +# --question-- + +## --text-- + +What is Tom expressing when he says `That's a cool twist`? + +## --answers-- + +He finds the unexpected change or development interesting + +--- + +He thinks the situation is confusing + +### --feedback-- + +While a `twist` can be surprising, Tom's use of `cool` suggests he finds it interesting rather than confusing. + +--- + +He is unhappy with the new development + +### --feedback-- + +`Cool twist` usually indicates a positive reaction, not dissatisfaction. + +--- + +He expected the development all along + +### --feedback-- + +The term `twist` implies that the development was unexpected. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md new file mode 100644 index 00000000000..6a30241c1a2 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b306fe94f29e4b4aa9105.md @@ -0,0 +1,55 @@ +--- +id: 657b306fe94f29e4b4aa9105 +title: Task 73 +challengeType: 19 +dashedName: task-73 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +The phrase `not right away` is used to indicate that something didn't happen immediately or at the earliest opportunity. It suggests that there was a delay or a period before the action or change took place. This phrase helps to set the timeline of events or actions. + +# --question-- + +## --text-- + +What does Anna mean when she says `not right away`? + +## --answers-- + +She immediately started working in HR at a tech company + +### --feedback-- + +`Not right away` indicates a delay or period before taking action, not immediate action. + +--- + +She started working in a different role before moving to HR at a tech company + +--- + +She has never worked in HR + +### --feedback-- + +The statement implies she did work in HR, just not immediately. + +--- + +She was always focused on training and development + +### --feedback-- + +`Not right away` suggests a progression or change over time, not a constant focus. + +## --video-solution-- + +2 + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md new file mode 100644 index 00000000000..b21bdf5b3e6 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30ac03b523e6640deaf1.md @@ -0,0 +1,49 @@ +--- +id: 657b30ac03b523e6640deaf1 +title: Task 74 +challengeType: 22 +dashedName: task-74 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +This task is a review exercise. You will practice filling in the blanks with words that you have already learned. + +# --fillInTheBlank-- + +## --sentence-- + +`Tom: That's a cool _. _ you immediately start working as a tech recruiter after college? Anna: Not right away. I _ in a general HR role at a non-tech company first, focusing on training and development.` + + +## --blanks-- + +`twist` + +### --feedback-- + +It refers to an interesting or unexpected change in a situation. + +--- + +`Did` + +### --feedback-- + +The auxiliary verb used to form a question in the past simple tense. The first letter should be capitalized. + +--- + +`worked` + +### --feedback-- + +Past tense form of `work`, indicating an action completed in the past. + diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md new file mode 100644 index 00000000000..f843ccf34aa --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b30e1b9f035e7e656fd01.md @@ -0,0 +1,54 @@ +--- +id: 657b30e1b9f035e7e656fd01 +title: Task 75 +challengeType: 19 +dashedName: task-75 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +An `employee` is someone who works for a company or a person. When you talk about `employees' well-being`, you are talking about the health and happiness of all the people who work there. The `'s` after `employees` means that the well-being belongs to the employees. It's like `the cat's toy` (one cat) and `the cats' toy` (more than one cat). + +# --question-- + +## --text-- + +What does Anna mean by saying `employees' well-being.` + +## --answers-- + +It's about the health of the company + +### --feedback-- + +`Employees'` means the people who work, not the company. + +--- + +One worker's health and happiness + +### --feedback-- + +`Employees'` with an `'s` shows it's about all workers, not just one. + +--- + +Where the employees work + +### --feedback-- + +`Well-being` is about health and happiness, not a place. + +--- + +The health and happiness of all the workers + +## --video-solution-- + +4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md new file mode 100644 index 00000000000..8e17e595d98 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b315533e4edeba65111b8.md @@ -0,0 +1,54 @@ +--- +id: 657b315533e4edeba65111b8 +title: Task 76 +challengeType: 19 +dashedName: task-76 +audioPath: curriculum/js-music-player/We-Are-Going-to-Make-it.mp3 +--- + + + +# --description-- + +A `psychologist` is a professional who studies the human mind and behavior. They often help people understand and manage their emotions, behaviors, and mental processes. In Anna's statement, she refers to becoming a psychologist, indicating her professional choice related to studying and working with psychology. + +# --question-- + +## --text-- + +What does `psychologist` mean in Anna's statement? + +## --answers-- + +It means someone who studies physics + +### --feedback-- + +`Psychologist` refers to a person who studies the mind and behavior, not physics. + +--- + +It's a type of medical doctor + +### --feedback-- + +While related to health, a psychologist is different from a medical doctor and focuses on mental processes. + +--- + +A professional who studies and works with the human mind and behavior + +--- + +A teacher at a school + +### --feedback-- + +A psychologist may teach, but their primary role is studying and working with the mind and behavior, not general teaching. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md new file mode 100644 index 00000000000..40eee7185d9 --- /dev/null +++ b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/657b46c9be150f577f5a1086.md @@ -0,0 +1,15 @@ +--- +id: 657b46c9be150f577f5a1086 +title: "Dialogue 2: Another Job Interview" +challengeType: 21 +dashedName: dialogue-2-another-job-interview +videoId: nLDychdBwUg +--- + +# --description-- + +Watch the video above to understand the context of the upcoming lessons. + +# --assignment-- + +Watch the video diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md deleted file mode 100644 index 0a0f3472141..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-ask-and-share-about-educational-and-professional-background/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0feadb1dd77f6cda623f -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md deleted file mode 100644 index e1563f9b06b..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-how-to-discuss-your-morning-or-evening-routine/dialogue-placeholder.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: 655c0f39ee87517d584d81f9 -title: "Dialogue: Placeholder" -challengeType: 21 -videoId: nLDychdBwUg -dashedName: dialogue-placeholder ---- - -# --description-- - -Watch the video above to understand the context of the upcoming lessons. - -# --assignment-- - -Watch the video diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md deleted file mode 100644 index 7aa1e30008d..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-1.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5a46ffb500e3f2ce47b -title: Challenge 1 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-1 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria doing when she says, `"You must be the new graphic designer"`? - -## --answers-- - -Asking about someone's job role. - -*** - -Giving a job description. - -*** - -Making a statement based on her assumption. - -*** - -Expressing a possibility. - -## --video-solution-- - -3 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md deleted file mode 100644 index 2ee50fe5647..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-2.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 651dd5e46ffb500e3f2ce47e -title: Challenge 2 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-2 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4 diff --git a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md b/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md deleted file mode 100644 index adc4b41f091..00000000000 --- a/curriculum/challenges/ukrainian/21-a2-english-for-developers/learn-introductions-in-an-online-team-meeting/challenge-3.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: 651dd6071d697d0aab7833b6 -title: Challenge 3 -challengeType: 11 -videoId: nLDychdBwUg -dashedName: challenge-3 ---- - -# --description-- - -Here's the description - -# --instructions-- - -Here's the instructions -Fill in the blank. - -Hello! You \_\_\_\_ \_\_ the new graphic designer. I'm Maria, the team lead. - -# --question-- - -## --text-- - -What is Maria assuming about Tom? - -## --answers-- - -Tom is the team lead. - -*** - -Maria is the new graphic designer. - -*** - -Tom is leaving the company. - -*** - -Tom is the new graphic designer. - -## --video-solution-- - -4